diff options
Diffstat (limited to 'src/templates/workflow/viewport-base.html')
| -rw-r--r-- | src/templates/workflow/viewport-base.html | 452 |
1 files changed, 22 insertions, 430 deletions
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html index aa01d7e..4ae2ff3 100644 --- a/src/templates/workflow/viewport-base.html +++ b/src/templates/workflow/viewport-base.html @@ -5,195 +5,23 @@ {% 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')"> + <a class="page-link" href="#" id="gob" onclick="submit_and_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> + <i class="far"></i> </a> </li> <li class="page-item flex-shrink-1 page-control"> - <a class="page-link text-right" href="#" id="gof" onclick="go('next')"> + <a class="page-link text-right" href="#" id="gof" onclick="submit_and_go('next')"> Next <i class="fas fa-forward"></i> </a> </li> @@ -205,282 +33,46 @@ <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> + <div class="col-lg-12"> + <h1 class="d-inline-block" id="view_title"></h1> <span class="description text-muted" id="view_desc"></span> - <p class="step_message" id="view_message"></p> + <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> - <!-- /.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> + <button id="cancel_btn" class="btn btn-danger ml-auto" onclick="pop_workflow()">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 class="col-12 d-flex flex-grow-1 px-0"> + <div id="formContainer" class="h-100 w-100"></div> </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 submit_and_go(to) { + submitStepForm(to); } - function update_context() { + $(document).ready(function(){ $.ajax({ - type: "GET", - url: "/wf/manager/", - beforeSend: function (request) { - request.setRequestHeader("X-CSRFToken", - $('input[name="csrfmiddlewaretoken"]').val()); - }, - success: function (data) { - update_page(data); - } + url: "/workflow/manager/", + dataType: "json", + success: update_page }); - } - - 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"> +<!-- 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="/workflow/finish/" method="post"> {% csrf_token %} </form> </div> -{% endblock content %}
\ No newline at end of file +{% endblock content %} |