diff options
Diffstat (limited to 'src/templates')
| -rw-r--r-- | src/templates/base.html | 35 | ||||
| -rw-r--r-- | src/templates/dashboard/genericselect.html | 21 | ||||
| -rw-r--r-- | src/templates/dashboard/landing.html | 46 | ||||
| -rw-r--r-- | src/templates/dashboard/multiple_select_filter_widget.html | 3 | ||||
| -rw-r--r-- | src/templates/dashboard/searchable_select_multiple.html | 2 | ||||
| -rw-r--r-- | src/templates/resource/steps/pod_definition.html | 3 | ||||
| -rw-r--r-- | src/templates/workflow/confirm.html | 97 | ||||
| -rw-r--r-- | src/templates/workflow/viewport-base.html | 268 | ||||
| -rw-r--r-- | src/templates/workflow/viewport-element.html | 36 |
9 files changed, 31 insertions, 480 deletions
diff --git a/src/templates/base.html b/src/templates/base.html index 891e0fc..f59740d 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -6,30 +6,7 @@ <!-- Custom CSS --> <link href="{% static "css/base.css" %}" rel="stylesheet"> -<script type="text/javascript"> - function cwf(type) { - $.ajax({ - type: "POST", - url: "/", - data: { - "create": type - }, - beforeSend: function (request) { - request.setRequestHeader("X-CSRFToken", - $('input[name="csrfmiddlewaretoken"]').val() - ); - } - }).done(function (data) { - window.location.replace("/wf/"); - }).fail(function (jqxHR, textstatus) { - alert("Something went wrong..."); - }); - } - - function continue_wf() { - window.location.replace("/wf/"); - } -</script> +<script src="/static/js/dashboard.js"></script> {% endblock %} {% block basecontent %} @@ -107,19 +84,19 @@ <a href="/booking/quick/" class="list-group-item list-group-item-action list-group-item-secondary"> Express Booking </a> - <a href="#" onclick="cwf(0)" class="list-group-item list-group-item-action list-group-item-secondary"> + <a href="#" onclick="create_workflow(0)" class="list-group-item list-group-item-action list-group-item-secondary"> Book a Pod </a> - <a href="#" onclick="cwf(1)" class="list-group-item list-group-item-action list-group-item-secondary"> + <a href="#" onclick="create_workflow(1)" class="list-group-item list-group-item-action list-group-item-secondary"> Design a Pod </a> - <a href="#" onclick="cwf(2)" class="list-group-item list-group-item-action list-group-item-secondary"> + <a href="#" onclick="create_workflow(2)" class="list-group-item list-group-item-action list-group-item-secondary"> Configure a Pod </a> - <a href="#" onclick="cwf(3)" class="list-group-item list-group-item-action list-group-item-secondary"> + <a href="#" onclick="create_workflow(3)" class="list-group-item list-group-item-action list-group-item-secondary"> Create a Snapshot </a> - <a href="#" onclick="cwf(4)" class="list-group-item list-group-item-action list-group-item-secondary"> + <a href="#" onclick="create_workflow(4)" class="list-group-item list-group-item-action list-group-item-secondary"> Configure OPNFV </a> </div> diff --git a/src/templates/dashboard/genericselect.html b/src/templates/dashboard/genericselect.html index f54cd90..863d33f 100644 --- a/src/templates/dashboard/genericselect.html +++ b/src/templates/dashboard/genericselect.html @@ -1,27 +1,22 @@ {% extends "workflow/viewport-element.html" %} -{% load staticfiles %} {% load bootstrap4 %} {% block content %} -<div id="{{select_type}}_form_div" class="h-100 border d-flex flex-column p-4"> +<div id="select_form_div" class="h-100 border d-flex flex-column p-4"> <h3 id="create_section">Create a Resource <button class="btn btn-primary {% if disabled %} disabled {% endif %}" - {% if not disabled %}onclick="parent.add_wf({{addable_type_num}})" + {% if not disabled %}onclick="add_workflow({{addable_type_num}})" {% endif %}>Here </button> </h3> <div class="border-top"></div> <h3 id="select_header_section">Or select from the list below:</h3> <div id="select_section" class="d-flex flex-column"> - <form id="{{select_type}}_select_form" method="post" action="" - class="form d-flex flex-column" id="{{select_type}}selectorform"> + <form id="step_form" method="post" action="" class="form d-flex flex-column"> {% csrf_token %} {{ form|default:"<p>no form loaded</p>" }} - {% buttons %} - - {% endbuttons %} </form> </div> </div> @@ -33,13 +28,3 @@ </script> {% endblock content %} -{% block onleave %} -var form = $("#{{select_type}}_select_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 with form submission"); } -req.send(formData); -{% endblock %} - diff --git a/src/templates/dashboard/landing.html b/src/templates/dashboard/landing.html index d4776cc..72f9e6e 100644 --- a/src/templates/dashboard/landing.html +++ b/src/templates/dashboard/landing.html @@ -47,13 +47,13 @@ </p> <div class="row"> <div class="col-12 col-xl-4"> - <button class="btn btn-primary w-100" onclick="cwf(0)">Book a Pod</button> + <button class="btn btn-primary w-100" onclick="create_workflow(0)">Book a Pod</button> </div> <div class="col-12 col-xl-4"> - <button class="btn btn-primary w-100" onclick="cwf(1)">Design a Pod</button> + <button class="btn btn-primary w-100" onclick="create_workflow(1)">Design a Pod</button> </div> <div class="col-12 col-xl-4"> - <button class="btn btn-primary w-100" onclick="cwf(2)">Configure a Pod</button> + <button class="btn btn-primary w-100" onclick="create_workflow(2)">Configure a Pod</button> </div> </div> {% endif %} @@ -65,7 +65,7 @@ <p>If you're a returning user, some of the following options may be of interest:</p> <div class="row"> <div class="col-12 col-xl-4"> - <button class="btn btn-primary w-100" onclick="cwf(3)">Snapshot a Host</button> + <button class="btn btn-primary w-100" onclick="create_workflow(3)">Snapshot a Host</button> </div> <div class="col-12 col-xl-4"> <a class="btn btn-primary w-100" href="{% url 'account:my-bookings' %}"> @@ -74,7 +74,7 @@ </div> {% if manager == True %} <div class="col-12 col-xl-4"> - <button class="btn btn-primary w-100" onclick="continue_wf()"> + <button class="btn btn-primary w-100" onclick="continue_workflow()"> Resume Workflow </button> </div> @@ -85,44 +85,10 @@ </div> </div> -<script type="text/javascript"> - function cwf(type) { - $.ajax({ - type: "POST", - url: "/", - data: { - "create": type - }, - beforeSend: function (request) { - request.setRequestHeader("X-CSRFToken", - $('input[name="csrfmiddlewaretoken"]').val() - ); - } - - }).done(function (data) { - window.location.replace("/wf/"); - }).fail(function (jqxHR, textstatus) { - alert("Something went wrong..."); - }); - } - - function continue_wf() { - window.location.replace("/wf/"); - } -</script> - <div class="hidden_form d-none" id="form_div"> <form method="post" action="" class="form" id="wf_selection_form"> {% csrf_token %} - - <input type="hidden" id="landing_action"> - - <button type="submit" class="btn btn btn-success"> - Confirm Edit - </button> </form> </div> -{% block vport_comm %} -{% endblock %} -{% endblock content %}
\ No newline at end of file +{% endblock content %} diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html index 4a65bd9..e97a41b 100644 --- a/src/templates/dashboard/multiple_select_filter_widget.html +++ b/src/templates/dashboard/multiple_select_filter_widget.html @@ -1,6 +1,3 @@ -<script src="/static/js/dashboard.js"> -</script> - <input name="filter_field" id="filter_field" type="hidden"/> <div id="grid_wrapper" class="container-fluid p-4"> <div class="row"> diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html index 8299a55..44689da 100644 --- a/src/templates/dashboard/searchable_select_multiple.html +++ b/src/templates/dashboard/searchable_select_multiple.html @@ -1,5 +1,3 @@ -<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> -<script src="/static/js/dashboard.js"></script> <div id="search_select_outer" class="d-flex flex-column"> {% if incompatible == "true" %} <div class="alert alert-danger" role="alert"> diff --git a/src/templates/resource/steps/pod_definition.html b/src/templates/resource/steps/pod_definition.html index 4392dbd..d0a28ed 100644 --- a/src/templates/resource/steps/pod_definition.html +++ b/src/templates/resource/steps/pod_definition.html @@ -7,8 +7,6 @@ <script> var mxLoadStylesheets = false; </script> -<script type="text/javascript" src="/static/js/mxClient.min.js" ></script> -<script type="text/javascript" src="/static/js/dashboard.js" ></script> {% endblock extrahead %} <!-- Calls the main function after the page has loaded. Container is dynamically created. --> @@ -41,7 +39,6 @@ {% csrf_token %} <input type="hidden" id="hidden_xml_input" name="xml" /> </form> - <script type="text/javascript" src="/static/js/mxClient.min.js" ></script> <script> //gather context data let debug = false; diff --git a/src/templates/workflow/confirm.html b/src/templates/workflow/confirm.html index b7e6c46..2f99a41 100644 --- a/src/templates/workflow/confirm.html +++ b/src/templates/workflow/confirm.html @@ -8,11 +8,6 @@ <div class="text-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 class="container"> <div class="row justify-content-center"> <div class="col-auto"> @@ -22,7 +17,7 @@ <div class="row"> <div class="col"> <div id="form_div" class="text-center p-4"> - <form id="confirmation_form" action="/wf/workflow/" method="post"> + <form id="step_form" action="/workflow/manager/" method="post"> {% csrf_token %} <div class="d-none"> {{form|default:"<p> No Form Loaded</p>"}} @@ -33,7 +28,7 @@ <button id="cancel_button" class="btn btn-danger" onclick="formcancel()">Cancel</button> </div> <div class="d-none"> - <form id="manager_delete_form" action="/wf/workflow/finish/" method="post"> + <form id="manager_delete_form" action="/workflow/finish/" method="post"> {% csrf_token %} </form> </div> @@ -44,104 +39,24 @@ <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(); + submitStepForm(); } function formcancel() { select.value = "False"; - submitForm(); + submitStepForm(); } - var confirmed = {{bypassed|default:"false"}}; + var confirmed = {{confirm_succeeded|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; + pop_workflow(); } </script> {% block element_messages %} {% endblock element_messages %} {% endblock content %} -{% block onleave %} -{% endblock %} diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html index 103a095..02c5597 100644 --- a/src/templates/workflow/viewport-base.html +++ b/src/templates/workflow/viewport-base.html @@ -15,29 +15,9 @@ <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> + <i class="far"></i> </a> </li> <li class="page-item flex-shrink-1 page-control"> @@ -58,22 +38,10 @@ <span class="description text-muted" id="view_desc"></span> <p 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> </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> + <button id="cancel_btn" class="btn btn-danger ml-auto" onclick="pop_workflow()">Cancel</button> </div> </div> <div class="row d-flex flex-column flex-grow-1"> @@ -86,240 +54,24 @@ </div> </div> {% csrf_token %} -<script src="{% static "js/dashboard.js" %}"></script> <script type="text/javascript"> - update_context(); - var step = 0; - var page_count = 0; - function submit_and_go(to) { submitStepForm(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) { - write_iframe(this.responseText); - } else { - problem(); - } - } else { - problem(); - } - } - req.onerror = problem; - req.send(); - } - - 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 updateBreadcrumbs(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) { - write_iframe(this.responseText); - } - req.send(); - } - - function write_iframe(contents) { - $("#formContainer").html(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; - } - - // Load the actual first page $(document).ready(function(){ - $.ajax("/wf/workflow", { - success: function(data) { - write_iframe(data); - } + $.ajax({ + url: "/workflow/manager/", + dataType: "json", + success: update_page }); }); </script> +<!-- lazy load scripts --> +<script type="text/javascript" src="/static/js/mxClient.min.js" ></script> +<!-- end lazy load scripts --> <div class="d-none" id="workflow_pop_form_div"> - <form id="workflow_pop_form" action="/wf/workflow/finish/" method="post"> + <form id="workflow_pop_form" action="/workflow/finish/" method="post"> {% csrf_token %} </form> </div> diff --git a/src/templates/workflow/viewport-element.html b/src/templates/workflow/viewport-element.html index bf13304..d16c924 100644 --- a/src/templates/workflow/viewport-element.html +++ b/src/templates/workflow/viewport-element.html @@ -5,42 +5,6 @@ {% block content %} {% endblock content %} - {% 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 %} <div class="messages"> {% block element_messages %} |