1 {% extends "base.html" %}
14 height: calc(100% - 170px);
86 height: calc(100vh - 450);
92 <button id="gof" onclick="go(step+1)" class="btn go_btn go_forward">Go Forward</button>
93 <button id="gob" onclick="go(step-1)" class="btn btn go_btn go_back">Go Back</button>
96 <button class="btn" onclick="cancel_wf()">Cancel</button>
98 <div class="btn_wrapper">
99 <div id="breadcrumbs">
104 <script type="text/javascript">
110 var context_data = false;
118 function request_leave(to)
123 beforeSend: function(request) {
124 request.setRequestHeader("X-CSRFToken",
125 $('input[name="csrfmiddlewaretoken"]').val());
127 success: function (data) {
128 confirm_permission(to, data);
134 function confirm_permission(to, data)
136 if( errors_exist(data) )
138 var continueanyway = confirm("The current step has errors that will prevent it from saving. Continue anyway?");
139 if( !continueanyway )
144 if( to >= page_count )
152 var problem = function() {
153 alert("There was a problem");
155 //makes an asynch request
156 req = new XMLHttpRequest();
157 url = "/wf/workflow/?step=" + to;
158 req.open("GET", url, true);
159 req.onload = function(e) {
160 if(req.readyState === 4){
161 if(req.status < 300){
162 document.getElementById("viewport-iframe").srcdoc = this.responseText;
163 } else { problem(); }
164 } else { problem(); }
166 req.onerror = problem;
170 function step_on_leave()
172 document.getElementById("viewport-iframe").contentWindow.step_on_leave();
175 function errors_exist(data)
177 var stat = data['steps'][data['active']]['valid'];
178 if( stat >= 100 && stat < 200 )
188 function update_context() {
192 beforeSend: function(request) {
193 request.setRequestHeader("X-CSRFToken",
194 $('input[name="csrfmiddlewaretoken"]').val());
196 success: function (data) {
202 function update_page(data)
205 update_breadcrumbs(data);
208 function update_breadcrumbs(meta_json) {
209 step = meta_json['active'];
210 page_count = meta_json['steps'].length;
211 //remove all children of breadcrumbs so we can redraw
212 var container = document.getElementById("breadcrumbs");
213 while(container.firstChild){
214 container.removeChild(container.firstChild);
216 //draw enough rows for all steps
217 var depth = meta_json['max_depth'];
218 for(var i=0; i<=depth; i++){
219 var div = document.createElement("DIV");
222 div.style['margin-bottom'] = "7px";
225 div.style['margin-top'] = "7px";
227 container.appendChild(div);
229 draw_steps(meta_json);
232 function draw_steps(meta_json){
233 var all_relations = meta_json['relations'];
235 var active_steps = [];
236 var active_step = step;
237 while(active_step < meta_json['steps'].length){
238 active_steps.push(active_step);
239 var index = meta_json['parents'][active_step];
240 var relation = all_relations[index];
241 relations.push(relation);
242 active_step = relation['parent'];
244 var child_index = meta_json['children'][step];
245 var my_children = all_relations[child_index];
247 relations.push(my_children);
249 draw_relations(relations, meta_json, active_steps);
252 function draw_relations(relations, meta_json, active_steps){
253 for(var i=0; i<relations.length; i++){
254 var relation = relations[i];
255 var children_container = document.createElement("DIV");
256 children_container.style['display'] = "inline";
257 children_container.style['margin'] = "3px";
258 children_container.style['padding'] = "3px";
259 console.log("meta_json: ");
260 console.log(meta_json);
261 for(var j=0; j<relation['children'].length; j++){
262 var step_json = meta_json['steps'][relation['children'][j]];
263 step_json['index'] = relation['children'][j];
264 var active = active_steps.indexOf(step_json['index']) > -1;
265 var step_button = create_step(meta_json['steps'][relation['children'][j]], active);
266 children_container.appendChild(step_button);
268 var parent_div = document.getElementById("row" + relation['depth']);
269 parent_div.appendChild(children_container);
273 function create_step(step_json, active){
274 var step_dom = document.createElement("DIV");
276 step_dom.className = "step_active";
277 console.log(step_json['message']);
280 step_dom.className = "step";
282 step_dom.appendChild(document.createTextNode(step_json['title']));
283 var code = step_json['valid'];
288 step_dom.classList.add("step_untouched");
293 else if( code < 200 )
295 step_dom.classList.add("step_invalid");
297 msg = step_json['message'];
299 else if( code < 300 )
301 step_dom.classList.add("step_valid");
303 msg = step_json['message'];
307 update_message(msg, stat);
310 var step_number = step_json['index'];
311 step_dom.onclick = function(){ go(step_number); }
312 //TODO: background color and other style
316 function cancel_wf(){
320 data: {"cancel":"",},
321 beforeSend: function(request) {
322 request.setRequestHeader("X-CSRFToken",
323 $('input[name="csrfmiddlewaretoken"]').val()
326 success: redirect_root()
330 function redirect_root()
332 window.location.replace('/');
335 function add_wf(type){
336 add_wf_internal(type, false);
339 function add_edit_wf(type, target){
340 add_wf_internal(type, target);
343 function add_wf_internal(type, itemid){
344 data = {"add": type};
346 data['target'] = itemid;
352 beforeSend: function(request) {
353 request.setRequestHeader("X-CSRFToken",
354 $('input[name="csrfmiddlewaretoken"]').val()
357 success: refresh_wf_iframe()
361 function refresh_wf_iframe() {
362 window.location=window.location;
365 <div id="iframe_header" class="row view-header">
366 <div class="col-lg-12 step_header">
367 <h1 class="step_title" id="view_title"></h1>
368 <p class="description" id="view_desc"></p>
369 <p class="step_message" id="view_message"></p>
395 border-bottom: 1px solid #eee;
396 border-top: 1px solid #eee;
398 width: calc(100% - 202px);
402 function update_description(title, desc){
403 document.getElementById("view_title").innerText = title;
404 document.getElementById("view_desc").innerText = desc;
406 function update_message(message, stepstatus){
407 document.getElementById("view_message").innerText = message;
408 document.getElementById("view_message").className = "step_message";
409 document.getElementById("view_message").classList.add("message_" + stepstatus);
411 function resize_iframe(){
412 var page_rect = document.getElementById("wrapper").getBoundingClientRect();
413 var title_rect = document.getElementById("iframe_header").getBoundingClientRect();
414 var iframe_height = page_rect.bottom - title_rect.bottom;
415 console.log("setting height to " + iframe_height);
416 document.getElementById("viewport-iframe").height = iframe_height;
419 window.addEventListener('load', resize_iframe);
420 window.addEventListener('resize', resize_iframe);
425 <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>
426 {% endblock content %}