diff options
Diffstat (limited to 'dashboard/src/templates/workflow/viewport-base.html')
| -rw-r--r-- | dashboard/src/templates/workflow/viewport-base.html | 486 |
1 files changed, 486 insertions, 0 deletions
diff --git a/dashboard/src/templates/workflow/viewport-base.html b/dashboard/src/templates/workflow/viewport-base.html new file mode 100644 index 0000000..aa01d7e --- /dev/null +++ b/dashboard/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 |