diff options
Diffstat (limited to 'src/templates/workflow/viewport-base.html')
| -rw-r--r-- | src/templates/workflow/viewport-base.html | 444 |
1 files changed, 228 insertions, 216 deletions
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html index beea7d2..aa01d7e 100644 --- a/src/templates/workflow/viewport-base.html +++ b/src/templates/workflow/viewport-base.html @@ -1,12 +1,12 @@ {% extends "base.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %} <style> - .go_btn{ + .go_btn { position: absolute; width: 100px; @@ -14,43 +14,36 @@ height: calc(100% - 170px); } - .go_btn_disabled{ - background-color: #ffffff; + + .go_btn_disabled { + background-color: #ffffff; } - .go_forward{ + + .go_forward { right: 0px; border-left: none; } - .go_back{ + .go_back { left: 251px; border-right: none; } - .btn_wrapper{ + .btn_wrapper { text-align: center; margin-bottom: 5px; } {% if DEBUG %} - - .add_btn_wrapper{ - right: 130px; - top: 10px; - position: absolute; - } + .add_btn_wrapper { + right: 130px; + top: 10px; + position: absolute; + } {% endif %} - - - .options{ - position: absolute; - top: 60px; - right: 20px; - } - #breadcrumbs { margin-bottom: 0; } @@ -59,23 +52,25 @@ margin: 0; } - .step{ + .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{ + .step_active { display: inline; padding: 7px; margin: 1px; @@ -85,26 +80,22 @@ border-bottom: 4px solid #41ba78 !important; } - .step_hidden - { + .step_hidden { background: #EFEFEF; color: #999999; } - .step_invalid::after - { + .step_invalid::after { content: " \2612"; color: #CC3300; } - .step_valid::after - { + .step_valid::after { content: " \2611"; color: #41ba78; } - .step_untouched::after - { + .step_untouched::after { content: " \2610"; } @@ -126,55 +117,153 @@ background-color: inherit; } - #breadcrumbs.breadcrumb > li { + #breadcrumbs.breadcrumb>li { border: 1px solid #cccccc; border-left: none; } - #breadcrumbs.breadcrumb > li:first-child { + + #breadcrumbs.breadcrumb>li:first-child { border-left: 1px solid #cccccc; } - #breadcrumbs.breadcrumb > li + li:before { + + #breadcrumbs.breadcrumb>li+li:before { content: ""; width: 0; margin: 0; padding: 0; } -</style> -<button id="gof" onclick="go('next')" class="btn go_btn go_forward">Go Forward</button> -<button id="gob" onclick="go('prev')" class="btn go_btn go_back">Go Back</button> + #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; + } -<div class="options"> - <button id="cancel_btn" class="btn btn-primary" onclick="cancel_wf()">Cancel</button> + .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"> -<ol id="breadcrumbs" class="btn-group breadcrumb"> -</ol> </div> {% csrf_token %} <script type="text/javascript"> - - update_context(); var step = 0; var page_count = 0; var context_data = false; - function go(to) - { + function go(to) { step_on_leave(); request_leave(to); } - function request_leave(to) - { + function request_leave(to) { $.ajax({ type: "GET", url: "/wf/manager/", - beforeSend: function(request) { + beforeSend: function (request) { request.setRequestHeader("X-CSRFToken", - $('input[name="csrfmiddlewaretoken"]').val()); + $('input[name="csrfmiddlewaretoken"]').val()); }, success: function (data) { confirm_permission(to, data); @@ -183,49 +272,44 @@ }); } - function confirm_permission(to, data) - { - if( errors_exist(data) ) - { - var continueanyway = confirm("The current step has errors that will prevent it from saving. Continue anyway?"); - if( !continueanyway ) - { + function confirm_permission(to, data) { + if (errors_exist(data)) { + if (to != "prev") { return; } } - var problem = function() { + 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){ + req.onload = function (e) { + if (req.readyState === 4) { + if (req.status < 300) { document.getElementById("viewport-iframe").srcdoc = this.responseText; - } else { problem(); } - } else { problem(); } + } else { + problem(); + } + } else { + problem(); + } } req.onerror = problem; req.send(); } - function step_on_leave() - { + function step_on_leave() { document.getElementById("viewport-iframe").contentWindow.step_on_leave(); } - function errors_exist(data) - { + function errors_exist(data) { var stat = data['steps'][data['active']]['valid']; - if( stat >= 100 && stat < 200 ) - { + if (stat >= 100 && stat < 200) { return true; - } - else - { + } else { return false; } } @@ -234,9 +318,9 @@ $.ajax({ type: "GET", url: "/wf/manager/", - beforeSend: function(request) { + beforeSend: function (request) { request.setRequestHeader("X-CSRFToken", - $('input[name="csrfmiddlewaretoken"]').val()); + $('input[name="csrfmiddlewaretoken"]').val()); }, success: function (data) { update_page(data); @@ -244,120 +328,100 @@ }); } - function 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"; + 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("go_btn_disabled"); - btn.disabled = true; - } - else - { - var btn = document.getElementById("gob"); - btn.classList.remove("go_btn_disabled"); - btn.disabled = false; + 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("go_btn_disabled"); - btn.disabled = true; - } - else - { - var btn = document.getElementById("gof"); - btn.classList.remove("go_btn_disabled"); - 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 - var container = document.getElementById("breadcrumbs"); - while(container.firstChild){ - container.removeChild(container.firstChild); - } - + $("#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++ ) - { + 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"]); - document.getElementById("breadcrumbs").appendChild(step_btn); + $("#topPagination li:last-child").before(step_btn); } } - function create_step(step_json, active){ + function create_step(step_json, active) { var step_dom = document.createElement("li"); - if(active){ - step_dom.className = "step_active"; - - } else{ - step_dom.className = "step"; + // First create the dom object depending on active or not + if (active) { + step_dom.className = "topcrumb active"; + } else { + step_dom.className = "topcrumb"; } - step_dom.appendChild(document.createTextNode(step_json['title'])); + $(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.classList.add("step_untouched"); - + if (code < 100) { + $(step_dom).children().first().append("<i class='ml-2 far fa-square'></i>") stat = ""; msg = ""; - } - else if( code < 200 ) - { - step_dom.classList.add("step_invalid"); + } 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.classList.add("step_valid"); + } 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("step_hidden"); + if (step_json['enabled'] == false) { + step_dom.classList.add("disabled"); } - if(active) - { + if (active) { update_message(msg, stat); } - step_dom.classList.add("btn"); var step_number = step_json['index']; return step_dom; } - function cancel_wf(){ + 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.onerror = function () { + alert("problem occurred while trying to cancel current workflow"); + } + req.onreadystatechange = function () { + if (req.readyState === 4) { + refresh_iframe(); + } + }; req.send(formData); } @@ -365,43 +429,45 @@ req = new XMLHttpRequest(); url = "/wf/workflow/"; req.open("GET", url, true); - req.onload = function(e) { + req.onload = function (e) { var doc = document.getElementById("viewport-iframe").contentWindow.document; - doc.open(); doc.write(this.responseText); doc.close(); + doc.open(); + doc.write(this.responseText); + doc.close(); } req.send(); } - function write_iframe(contents) - { - document.getElementById("viewport-iframe").contentWindow.document.innerHTML= contents; + function write_iframe(contents) { + document.getElementById("viewport-iframe").contentWindow.document.innerHTML = contents; } - function redirect_root() - { + function redirect_root() { window.location.replace('/wf/'); } - function add_wf(type){ + function add_wf(type) { add_wf_internal(type, false); } - function add_edit_wf(type, target){ + function add_edit_wf(type, target) { add_wf_internal(type, target); } - function add_wf_internal(type, itemid){ - data = {"add": type}; - if(itemid){ + 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) { + beforeSend: function (request) { request.setRequestHeader("X-CSRFToken", - $('input[name="csrfmiddlewaretoken"]').val() + $('input[name="csrfmiddlewaretoken"]').val() ); }, success: refresh_wf_iframe() @@ -409,66 +475,12 @@ } function refresh_wf_iframe() { - window.location=window.location; + window.location = window.location; } </script> -<div id="iframe_header" class="row view-header"> - <div class="col-lg-12 step_header"> - <h1 class="step_title" id="view_title"></h1> - <p class="description" id="view_desc"></p> - <p class="step_message" id="view_message"></p> - </div> - <style> - #view_desc{ - margin-bottom: 15px; - margin-top: 5px; - margin-left: 30px; - display: inline; - } - #view_title{ - margin-top: 5px; - margin-bottom: 0px; - display: inline; - } - #view_message{ - margin-top: 10px; - margin-bottom: 5px; - float: right; - } - .message_invalid{ - color: #ff4400; - } - .message_valid{ - color: #44cc00; - } - .step_header{ - border-bottom: 1px solid #eee; - border-top: 1px solid #eee; - left: 101px; - width: calc(100% - 202px); - } - </style> - <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 style="display: none;" id="workflow_pop_form_div"> -<form id="workflow_pop_form" action="/wf/workflow/finish/" method="post"> - {% csrf_token %} -</form> -</div> - -<div class="iframe_div"> - <iframe src="/wf/workflow" class="iframe_elem" scrolling="yes" id="viewport-iframe"></iframe> + <form id="workflow_pop_form" action="/wf/workflow/finish/" method="post"> + {% csrf_token %} + </form> </div> -{% endblock content %} +{% endblock content %}
\ No newline at end of file |