{% extends "base.html" %} {% load staticfiles %} {% load bootstrap3 %} {% 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 %} .options{ position: absolute; top: 60px; right: 20px; } #breadcrumbs { padding: 4px; } .step{ background: #DEEED3; display: inline; padding: 5px; margin: 1px; } .step_active{ background: #5EC392; display: inline; padding: 5px; margin: 1px; font-weight: bold; } .step_untouched { background: #DDDDDD; } .step_invalid { background: #CC3300; } .step_valid { background: #0FD57D; } #viewport-iframe { height: calc(100vh - 450); } </style> <button id="gof" onclick="go(step+1)" class="btn go_btn go_forward">Go Forward</button> <button id="gob" onclick="go(step-1)" class="btn go_btn go_back">Go Back</button> <div class="options"> <button id="cancel_btn" class="btn btn-primary" onclick="cancel_wf()">Cancel</button> </div> <div class="btn_wrapper"> <div id="breadcrumbs" class="btn-group"> <div class="btn-group" id="breadcrumb-wrapper"> </div> </div> </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) ) { var continueanyway = confirm("The current step has errors that will prevent it from saving. Continue anyway?"); if( !continueanyway ) { return; } } if( to >= page_count ) { to = page_count-1; } else if( to < 0 ) { to = 0; } 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("go_btn_disabled"); btn.disabled = true; } else { var btn = document.getElementById("gob"); btn.classList.remove("go_btn_disabled"); 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; } //remove all children of breadcrumbs so we can redraw var container = document.getElementById("breadcrumbs"); while(container.firstChild){ container.removeChild(container.firstChild); } 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"]); document.getElementById("breadcrumbs").appendChild(step_btn); } } function create_step(step_json, active){ var step_dom = document.createElement("DIV"); if(active){ step_dom.className = "step_active"; } else{ step_dom.className = "step"; } step_dom.appendChild(document.createTextNode(step_json['title'])); var code = step_json['valid']; stat = ""; msg = ""; if( code < 100 ) { step_dom.classList.add("step_untouched"); stat = ""; msg = ""; } else if( code < 200 ) { step_dom.classList.add("step_invalid"); stat = "invalid"; msg = step_json['message']; } else if( code < 300 ) { step_dom.classList.add("step_valid"); stat = "valid"; msg = step_json['message']; } if(active) { update_message(msg, stat); } step_dom.classList.add("btn"); var step_number = step_json['index']; step_dom.onclick = function(){ go(step_number); } 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 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); } function resize_iframe(){ var page_rect = document.getElementById("wrapper").getBoundingClientRect(); var title_rect = document.getElementById("iframe_header").getBoundingClientRect(); var iframe_height = page_rect.bottom - title_rect.bottom; document.getElementById("viewport-iframe").height = iframe_height; } window.addEventListener('load', resize_iframe); window.addEventListener('resize', resize_iframe); </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> <iframe src="/wf/workflow" style="position: absolute; left: 351px; right: 105px; width: calc(100% - 450px); border-style: none; border-width: 1px; border-color: #888888;" scrolling="yes" id="viewport-iframe" onload="resize_iframe();"></iframe> {% endblock content %}