5 files changed, 771 insertions, 0 deletions
diff --git a/src/templates/workflow/confirm.html b/src/templates/workflow/confirm.html
new file mode 100644
index 0000000..c1f3440
--- /dev/null
+++ b/src/templates/workflow/confirm.html
@@ -0,0 +1,163 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap4 %}
+
+{% block content %}
+
+<style>
+    #form_div {
+        width: 100%;
+        padding: 5%;
+        text-align: center;
+    }
+    #text_display {
+        text-align: left;
+        display: inline-block;
+    }
+    #text_wrapper {
+        text-align: center; /*centers child div*/
+    }
+    p {
+        margin:0;
+        padding:0;
+    }
+</style>
+
+<div style="text-align:center;">
+    <h3>Confirm  Session</h3>
+</div>
+<div id="vlan_warning"></div>
+<form id="vlan_form" action="/wf/workflow/" method="post">
+    {% csrf_token %}
+    <input id="vlan_input" name="vlan_input" type="hidden"/>
+</form>
+<div id="text_wrapper">
+    <div id="text_display">
+        <pre>{{confirmation_info|escape}}</pre>
+    </div>
+</div>
+<div id="form_div">
+<form id="confirmation_form" action="/wf/workflow/" method="post">
+    {% csrf_token %}
+    <div style="display: none;">
+    {{form|default:"<p> No Form Loaded</p>"}}
+    </div>
+</form>
+<div class="cform_buttons">
+    <button id="confirm_button" class="btn btn-success" onclick="formconfirm()">Confirm</button>
+    <button id="cancel_button" class="btn btn-danger" onclick="formcancel()">Cancel</button>
+</div>
+
+<div style="display: none;">
+<form id="manager_delete_form" action="/wf/workflow/finish/" method="post">
+    {% csrf_token %}
+</form>
+</div>
+
+<script>
+    var select = document.getElementById("id_confirm");
+
+    function processResponseText(json)
+    {
+        var dict = JSON.parse(json);
+
+        if( !dict["redir_url"] ) {
+            window.top.refresh_iframe();
+        } else {
+            top.window.location.href = dict["redir_url"];
+        }
+    }
+
+    function delete_manager()
+    {
+        var form = $("#manager_delete_form");
+        var formData = form.serialize();
+        var req = new XMLHttpRequest();
+        req.open("POST", "/wf/workflow/finish/", false);
+        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+        req.onerror = function() { alert("problem with cleaning up session"); }
+        req.onreadystatechange = function() { if(req.readyState === 4 ) {
+                processResponseText(req.responseText);
+                }}
+        req.send(formData);
+    }
+
+    function submitForm()
+    {
+        var form = $("#confirmation_form");
+        var formData = form.serialize();
+        var req = new XMLHttpRequest();
+        req.open("POST", "/wf/workflow/", false);
+        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+        req.onerror = function() { alert("problem submitting confirmation"); }
+        req.onreadystatechange = function() { if(req.readyState === 4 ) { delete_manager(); } }
+        req.send(formData);
+    }
+
+
+    function formconfirm()
+    {
+        select.value = "True";
+        submitForm();
+    }
+    function formcancel()
+    {
+        select.value = "False";
+        submitForm();
+    }
+
+    var confirmed = {{bypassed|default:"false"}};
+    if( confirmed )
+    {
+        delete_manager();
+    }
+</script>
+<script>
+
+function fixVlans() {
+    document.getElementById("vlan_input").value = "True";
+    var form = $("#vlan_form");
+    var formData = form.serialize();
+    var req = new XMLHttpRequest();
+    req.open("POST", "/wf/workflow/", false);
+    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    req.onerror = function() { alert("problem submitting form"); }
+    req.onreadystatechange = function() { //replaces current page with response
+        if(req.readyState === 4 ) {
+            var d = document.getElementById("vlan_warning").innerHTML = "";
+            document.getElementById("confirm_button").disabled = false;
+            document.getElementById("cancel_button").disabled = false;
+        }
+    }
+    req.send(formData);
+}
+var problem = {{vlan_warning|default:'false'}};
+if(problem){
+    var d = document.getElementById("vlan_warning");
+    var h3 = document.createElement("h3");
+    h3.innerHTML = "WARNING: Vlans not available";
+    var h4 = document.createElement("h4");
+    h4.innerHTML = "The vlans you selected are not currently available. Would you like to automatically change them?";
+    var button1 = document.createElement("button");
+    button1.innerHTML = "Correct Vlans For Me";
+    button1.onclick = function() { fixVlans(); }
+
+    var button2 = document.createElement("button");
+    button2.innerHTML = "Cancel. I will change my vlans";
+    button2.onclick = function() { formcancel(); }
+    d.appendChild(h3);
+    d.appendChild(h4);
+    d.appendChild(button1);
+    d.appendChild(button2);
+    document.getElementById("confirm_button").disabled = true;
+    document.getElementById("cancel_button").disabled = true;
+}
+</script>
+</div>
+{% block element_messages %}
+
+{% endblock element_messages %}
+{% endblock content %}
+{% block onleave %}
+{% endblock %}
diff --git a/src/templates/workflow/no_workflow.html b/src/templates/workflow/no_workflow.html
new file mode 100644
index 0000000..0ac6549
--- /dev/null
+++ b/src/templates/workflow/no_workflow.html
@@ -0,0 +1,3 @@
+<script>
+    top.window.location.href='/';
+</script>
diff --git a/src/templates/workflow/resource_select.html b/src/templates/workflow/resource_select.html
new file mode 100644
index 0000000..cd04137
--- /dev/null
+++ b/src/templates/workflow/resource_select.html
@@ -0,0 +1,50 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap4 %}
+
+{% block content %}
+
+<p>resource selection template</p>
+
+<style>
+    .db_pane_wrapper{
+        display: grid;
+        grid-template-columns: 49% 2% 49%;
+    }
+    .divider{
+        border-style: solid;
+        height: 100vh;
+    }
+
+    .hidden_form{
+        display: none;
+    }
+</style>
+
+<div class="db_pane_wrapper">
+    <div class="pane_one">
+        <p>Select Resource</p>
+
+    </div>
+    <div class="divider">
+
+    </div>
+    <div class="pane_two">
+        <button>Create New Resource</button>
+    </div>
+</div>
+
+<div class="hidden_form" id="form_div">
+    <form method="post" action="" class="form" id="resource_selection_form">
+        {% csrf_token %}
+        {% bootstrap_field form.resourcebundle %}
+        {% buttons %}
+            <button type="submit" class="btn btn btn-success">
+                Confirm Edit
+            </button>
+        {% endbuttons %}
+    </form>
+</div>
+
+{% endblock content %}
+\ No newline at end of file
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html
new file mode 100644
index 0000000..aa01d7e
--- /dev/null
+++ b/src/templates/workflow/viewport-base.html
@@ -0,0 +1,486 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+
+{% load bootstrap4 %}
+
+{% block content %}
+
+<style>
+    .go_btn {
+
+        position: absolute;
+        width: 100px;
+        top: 170px;
+        height: calc(100% - 170px);
+
+    }
+
+    .go_btn_disabled {
+        background-color: #ffffff;
+    }
+
+    .go_forward {
+        right: 0px;
+        border-left: none;
+    }
+
+    .go_back {
+        left: 251px;
+        border-right: none;
+    }
+
+
+    .btn_wrapper {
+        text-align: center;
+        margin-bottom: 5px;
+
+    }
+
+    {% if DEBUG %}
+        .add_btn_wrapper {
+            right: 130px;
+            top: 10px;
+            position: absolute;
+        }
+    {% endif %}
+
+    #breadcrumbs {
+        margin-bottom: 0;
+    }
+
+    .btn_wrapper {
+        margin: 0;
+    }
+
+    .step {
+        display: inline;
+        padding: 7px;
+        margin: 1px;
+        font-size: 14pt;
+        cursor: default;
+    }
+
+    .step:active {
+        -webkit-box-shadow: inherit;
+        box-shadow: inherit;
+    }
+
+    .step_active:active {
+        -webkit-box-shadow: inherit;
+        box-shadow: inherit;
+    }
+
+    .step_active {
+        display: inline;
+        padding: 7px;
+        margin: 1px;
+        cursor: default;
+        font-size: 14pt;
+        padding-bottom: 4px !important;
+        border-bottom: 4px solid #41ba78 !important;
+    }
+
+    .step_hidden {
+        background: #EFEFEF;
+        color: #999999;
+    }
+
+    .step_invalid::after {
+        content: " \2612";
+        color: #CC3300;
+    }
+
+    .step_valid::after {
+        content: " \2611";
+        color: #41ba78;
+    }
+
+    .step_untouched::after {
+        content: " \2610";
+    }
+
+    .iframe_div {
+        width: calc(100% - 450px);
+        margin-left: 70px;
+        height: calc(100vh - 155px);
+        position: absolute;
+        border: none;
+    }
+
+    .iframe_elem {
+        width: 100%;
+        height: calc(100vh - 155px);
+        border: none;
+    }
+
+    #breadcrumbs {
+        background-color: inherit;
+    }
+
+    #breadcrumbs.breadcrumb>li {
+        border: 1px solid #cccccc;
+        border-left: none;
+    }
+
+    #breadcrumbs.breadcrumb>li:first-child {
+        border-left: 1px solid #cccccc;
+    }
+
+    #breadcrumbs.breadcrumb>li+li:before {
+        content: "";
+        width: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    #topPagination .topcrumb {
+        flex: 1 1 0;
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        border: 1px solid #dee2e6;
+        border-left: none;
+    }
+
+    .topcrumb > span {
+        color: #343a40;
+        cursor: default;
+    }
+
+    .topcrumb.active > span {
+        background: #007bff;
+        color: white;
+    }
+
+    .topcrumb.disabled > span {
+        color: #6c757d;
+        background: #f8f9fa;
+    }
+</style>
+<!-- Pagination -->
+<div class="row mt-3">
+    <div class="col">
+        <nav>
+            <ul class="pagination d-flex flex-row" id="topPagination">
+                <li class="page-item flex-shrink-1 page-control">
+                    <a class="page-link" href="#" id="gob" onclick="go('prev')">
+                        <i class="fas fa-backward"></i> Back
+                    </a>
+                </li>
+                <li class="page-item flex-grow-1 active">
+                    <a class="page-link disabled" href="#">
+                        Select <i class="far fa-check-square"></i>
+                    </a>
+                </li>
+                <li class="page-item flex-grow-1">
+                    <a class="page-link disabled" href="#">
+                        Configure <i class="far fa-square"></i>
+                    </a>
+                </li>
+                <li class="page-item flex-grow-1">
+                    <a class="page-link disabled" href="#">
+                        Information <i class="far fa-square"></i>
+                    </a>
+                </li>
+                <li class="page-item flex-grow-1">
+                    <a class="page-link disabled" href="#">
+                        OPNFV <i class="far fa-square"></i>
+                    </a>
+                </li>
+                <li class="page-item flex-grow-1">
+                    <a class="page-link disabled" href="#">
+                        Confirm <i class="far fa-square"></i>
+                    </a>
+                </li>
+                <li class="page-item flex-shrink-1 page-control">
+                    <a class="page-link text-right" href="#" id="gof" onclick="go('next')">
+                        Next <i class="fas fa-forward"></i>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>
+<!-- Top header -->
+<div class="row px-4">
+    <div class="col">
+        <div id="iframe_header" class="row view-header">
+            <div class="col-lg-12 step_header">
+                <h1 class="step_title d-inline-block" id="view_title"></h1>
+                <span class="description text-muted" id="view_desc"></span>
+                <p class="step_message" id="view_message"></p>
+            </div>
+            <script>
+                function update_description(title, desc) {
+                    document.getElementById("view_title").innerText = title;
+                    document.getElementById("view_desc").innerText = desc;
+                }
+
+                function update_message(message, stepstatus) {
+                    document.getElementById("view_message").innerText = message;
+                    document.getElementById("view_message").className = "step_message";
+                    document.getElementById("view_message").classList.add("message_" + stepstatus);
+                }
+            </script>
+            <!-- /.col-lg-12 -->
+        </div>
+    </div>
+    <div class="col-auto align-self-center d-flex">
+        <button id="cancel_btn" class="btn btn-danger ml-auto" onclick="cancel_wf()">Cancel</button>
+    </div>
+</div>
+<!-- Content here -->
+<div class="row d-flex flex-column flex-grow-1">
+    <div class="container-fluid d-flex flex-column h-100">
+        <div class="row d-flex flex-grow-1 p-4">
+            <!-- iframe workflow -->
+            <div class="col-12 d-flex border flex-grow-1">
+                <!-- This was where the iframe went -->
+                <iframe src="/wf/workflow" class="w-100 h-100" scrolling="yes" id="viewport-iframe"
+                    frameBorder="0"></iframe>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="btn_wrapper">
+</div>
+{% csrf_token %}
+
+<script type="text/javascript">
+    update_context();
+    var step = 0;
+    var page_count = 0;
+    var context_data = false;
+
+    function go(to) {
+        step_on_leave();
+        request_leave(to);
+    }
+
+    function request_leave(to) {
+        $.ajax({
+            type: "GET",
+            url: "/wf/manager/",
+            beforeSend: function (request) {
+                request.setRequestHeader("X-CSRFToken",
+                    $('input[name="csrfmiddlewaretoken"]').val());
+            },
+            success: function (data) {
+                confirm_permission(to, data);
+                update_page(data);
+            }
+        });
+    }
+
+    function confirm_permission(to, data) {
+        if (errors_exist(data)) {
+            if (to != "prev") {
+                return;
+            }
+        }
+
+        var problem = function () {
+            alert("There was a problem");
+        }
+        //makes an asynch request
+        req = new XMLHttpRequest();
+        url = "/wf/workflow/?step=" + to;
+        req.open("GET", url, true);
+        req.onload = function (e) {
+            if (req.readyState === 4) {
+                if (req.status < 300) {
+                    document.getElementById("viewport-iframe").srcdoc = this.responseText;
+                } else {
+                    problem();
+                }
+            } else {
+                problem();
+            }
+        }
+        req.onerror = problem;
+        req.send();
+    }
+
+    function step_on_leave() {
+        document.getElementById("viewport-iframe").contentWindow.step_on_leave();
+    }
+
+    function errors_exist(data) {
+        var stat = data['steps'][data['active']]['valid'];
+        if (stat >= 100 && stat < 200) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    function update_context() {
+        $.ajax({
+            type: "GET",
+            url: "/wf/manager/",
+            beforeSend: function (request) {
+                request.setRequestHeader("X-CSRFToken",
+                    $('input[name="csrfmiddlewaretoken"]').val());
+            },
+            success: function (data) {
+                update_page(data);
+            }
+        });
+    }
+
+    function update_page(data) {
+        context_data = data;
+        update_breadcrumbs(data);
+        if (data["workflow_count"] == 1) {
+            document.getElementById("cancel_btn").innerText = "Exit Workflow";
+        } else {
+            document.getElementById("cancel_btn").innerText = "Return to Parent";
+        }
+    }
+
+    function update_breadcrumbs(meta_json) {
+        step = meta_json['active'];
+        page_count = meta_json['steps'].length;
+        if (step == 0) {
+            var btn = document.getElementById("gob");
+            btn.classList.add("invisible");
+            btn.disabled = true;
+        } else {
+            var btn = document.getElementById("gob");
+            btn.classList.remove("invisible");
+            btn.disabled = false;
+        }
+        if (step == page_count - 1) {
+            var btn = document.getElementById("gof");
+            btn.classList.add("invisible");
+            btn.disabled = true;
+        } else {
+            var btn = document.getElementById("gof");
+            btn.classList.remove("invisible");
+            btn.disabled = false;
+        }
+        //remove all children of breadcrumbs so we can redraw
+        $("#topPagination").children().not(".page-control").remove();
+        draw_steps(meta_json);
+    }
+
+    function draw_steps(meta_json) {
+        for (var i = 0; i < meta_json["steps"].length; i++) {
+            meta_json["steps"][i]["index"] = i;
+            var step_btn = create_step(meta_json["steps"][i], i == meta_json["active"]);
+            $("#topPagination li:last-child").before(step_btn);
+        }
+    }
+
+    function create_step(step_json, active) {
+        var step_dom = document.createElement("li");
+        // First create the dom object depending on active or not
+        if (active) {
+            step_dom.className = "topcrumb active";
+        } else {
+            step_dom.className = "topcrumb";
+        }
+        $(step_dom).html(`<span class="d-flex align-items-center justify-content-center text-capitalize w-100">${step_json['title']}</span>`)
+        var code = step_json['valid'];
+        stat = "";
+        msg = "";
+        if (code < 100) {
+            $(step_dom).children().first().append("<i class='ml-2 far fa-square'></i>")
+            stat = "";
+            msg = "";
+        } else if (code < 200) {
+            $(step_dom).children().first().append("<i class='ml-2 fas fa-minus-square'></i>")
+            stat = "invalid";
+            msg = step_json['message'];
+        } else if (code < 300) {
+            $(step_dom).children().first().append("<i class='ml-2 far fa-check-square'></i>")
+            stat = "valid";
+            msg = step_json['message'];
+        }
+        if (step_json['enabled'] == false) {
+            step_dom.classList.add("disabled");
+        }
+        if (active) {
+            update_message(msg, stat);
+        }
+
+        var step_number = step_json['index'];
+        return step_dom;
+    }
+
+    function cancel_wf() {
+        var form = $("#workflow_pop_form");
+        var formData = form.serialize();
+        var req = new XMLHttpRequest();
+        req.open("POST", "/wf/workflow/finish/", false);
+        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+        req.onerror = function () {
+            alert("problem occurred while trying to cancel current workflow");
+        }
+        req.onreadystatechange = function () {
+            if (req.readyState === 4) {
+                refresh_iframe();
+            }
+        };
+        req.send(formData);
+    }
+
+    function refresh_iframe() {
+        req = new XMLHttpRequest();
+        url = "/wf/workflow/";
+        req.open("GET", url, true);
+        req.onload = function (e) {
+            var doc = document.getElementById("viewport-iframe").contentWindow.document;
+            doc.open();
+            doc.write(this.responseText);
+            doc.close();
+        }
+        req.send();
+    }
+
+    function write_iframe(contents) {
+        document.getElementById("viewport-iframe").contentWindow.document.innerHTML = contents;
+    }
+
+    function redirect_root() {
+        window.location.replace('/wf/');
+    }
+
+    function add_wf(type) {
+        add_wf_internal(type, false);
+    }
+
+    function add_edit_wf(type, target) {
+        add_wf_internal(type, target);
+    }
+
+    function add_wf_internal(type, itemid) {
+        data = {
+            "add": type
+        };
+        if (itemid) {
+            data['target'] = itemid;
+        }
+        $.ajax({
+            type: "POST",
+            url: "/wf/manager/",
+            data: data,
+            beforeSend: function (request) {
+                request.setRequestHeader("X-CSRFToken",
+                    $('input[name="csrfmiddlewaretoken"]').val()
+                );
+            },
+            success: refresh_wf_iframe()
+        });
+    }
+
+    function refresh_wf_iframe() {
+        window.location = window.location;
+    }
+</script>
+<div style="display: none;" id="workflow_pop_form_div">
+    <form id="workflow_pop_form" action="/wf/workflow/finish/" method="post">
+        {% csrf_token %}
+    </form>
+</div>
+{% endblock content %}
+\ No newline at end of file
diff --git a/src/templates/workflow/viewport-element.html b/src/templates/workflow/viewport-element.html
new file mode 100644
index 0000000..7a7165a
--- /dev/null
+++ b/src/templates/workflow/viewport-element.html
@@ -0,0 +1,69 @@
+{% extends "layout.html" %}
+{% load bootstrap4 %}
+{% load staticfiles %}
+
+{% block basecontent %}
+
+    <div id="wrapper">
+        <!-- Page Content -->
+        <div id="page-wrapper">
+
+            {% block content %}
+
+            {% endblock content %}
+        </div>
+        <!-- /#page-wrapper -->
+    </div>
+    {% block vport_comm %}
+             <script type="text/javascript">
+                var step_count = {{ step_number|default:0 }};
+                var active_step = {{ active_step|default:0 }};
+                var render_correct = {{ render_correct|default:"false" }};
+                var title = "{{ step_title|default:"Workflow Step" }}";
+                var description = "{{ description|default:"Contact the admins, because this field should have something else filled in here" }}";
+                if(render_correct){
+                    parent.update_context();
+                }
+                parent.update_description(title, description);
+            </script>
+
+    {% endblock vport_comm %}
+    {% block validate_step %}
+        <script>
+
+            function step_is_valid()
+            {
+                valid = confirm("Is this form valid?");
+                if( valid )
+                {
+                    return true;
+                }
+                else{
+                    return false;
+                }
+            }
+
+            function onError()
+            {
+                alert("Error: something!");
+            }
+        </script>
+
+    {% endblock validate_step %}
+
+    <script>
+    function step_on_leave() {
+    {% block onleave %}
+        alert("override onleave");
+    {% endblock %}
+    }
+    </script>
+
+    <div class="messages">
+        {% block element_messages %}
+        {% bootstrap_messages %}
+        {% endblock %}
+    </div>
+
+    <!-- /#wrapper -->
+{% endblock basecontent %}