1 {% extends "base.html" %}
14 height: calc(100% - 170px);
18 background-color: #ffffff;
89 height: calc(100vh - 450);
95 <button id="gof" onclick="go(step+1)" class="btn go_btn go_forward">Go Forward</button>
96 <button id="gob" onclick="go(step-1)" class="btn btn go_btn go_back">Go Back</button>
99 <button class="btn" onclick="cancel_wf()">Cancel</button>
101 <div class="btn_wrapper">
102 <div id="breadcrumbs">
107 <script type="text/javascript">
113 var context_data = false;
121 function request_leave(to)
126 beforeSend: function(request) {
127 request.setRequestHeader("X-CSRFToken",
128 $('input[name="csrfmiddlewaretoken"]').val());
130 success: function (data) {
131 confirm_permission(to, data);
137 function confirm_permission(to, data)
139 if( errors_exist(data) )
141 var continueanyway = confirm("The current step has errors that will prevent it from saving. Continue anyway?");
142 if( !continueanyway )
147 if( to >= page_count )
155 var problem = function() {
156 alert("There was a problem");
158 //makes an asynch request
159 req = new XMLHttpRequest();
160 url = "/wf/workflow/?step=" + to;
161 req.open("GET", url, true);
162 req.onload = function(e) {
163 if(req.readyState === 4){
164 if(req.status < 300){
165 document.getElementById("viewport-iframe").srcdoc = this.responseText;
166 } else { problem(); }
167 } else { problem(); }
169 req.onerror = problem;
173 function step_on_leave()
175 document.getElementById("viewport-iframe").contentWindow.step_on_leave();
178 function errors_exist(data)
180 var stat = data['steps'][data['active']]['valid'];
181 if( stat >= 100 && stat < 200 )
191 function update_context() {
195 beforeSend: function(request) {
196 request.setRequestHeader("X-CSRFToken",
197 $('input[name="csrfmiddlewaretoken"]').val());
199 success: function (data) {
205 function update_page(data)
208 update_breadcrumbs(data);
211 function update_breadcrumbs(meta_json) {
212 step = meta_json['active'];
213 page_count = meta_json['steps'].length;
216 var btn = document.getElementById("gob");
217 btn.classList.add("go_btn_disabled");
222 var btn = document.getElementById("gob");
223 btn.classList.remove("go_btn_disabled");
224 btn.disabled = false;
226 if( step == page_count - 1 )
228 var btn = document.getElementById("gof");
229 btn.classList.add("go_btn_disabled");
234 var btn = document.getElementById("gof");
235 btn.classList.remove("go_btn_disabled");
236 btn.disabled = false;
238 //remove all children of breadcrumbs so we can redraw
239 var container = document.getElementById("breadcrumbs");
240 while(container.firstChild){
241 container.removeChild(container.firstChild);
243 //draw enough rows for all steps
244 var depth = meta_json['max_depth'];
245 for(var i=0; i<=depth; i++){
246 var div = document.createElement("DIV");
249 div.style['margin-bottom'] = "7px";
252 div.style['margin-top'] = "7px";
254 container.appendChild(div);
256 draw_steps(meta_json);
259 function draw_steps(meta_json){
260 var all_relations = meta_json['relations'];
262 var active_steps = [];
263 var active_step = step;
264 while(active_step < meta_json['steps'].length){
265 active_steps.push(active_step);
266 var index = meta_json['parents'][active_step];
267 var relation = all_relations[index];
268 relations.push(relation);
269 active_step = relation['parent'];
271 var child_index = meta_json['children'][step];
272 var my_children = all_relations[child_index];
274 relations.push(my_children);
276 draw_relations(relations, meta_json, active_steps);
279 function draw_relations(relations, meta_json, active_steps){
280 for(var i=0; i<relations.length; i++){
281 var relation = relations[i];
282 var children_container = document.createElement("DIV");
283 children_container.style['display'] = "inline";
284 children_container.style['margin'] = "3px";
285 children_container.style['padding'] = "3px";
286 console.log("meta_json: ");
287 console.log(meta_json);
288 for(var j=0; j<relation['children'].length; j++){
289 var step_json = meta_json['steps'][relation['children'][j]];
290 step_json['index'] = relation['children'][j];
291 var active = active_steps.indexOf(step_json['index']) > -1;
292 var step_button = create_step(meta_json['steps'][relation['children'][j]], active);
293 children_container.appendChild(step_button);
295 var parent_div = document.getElementById("row" + relation['depth']);
296 parent_div.appendChild(children_container);
300 function create_step(step_json, active){
301 var step_dom = document.createElement("DIV");
303 step_dom.className = "step_active";
304 console.log(step_json['message']);
307 step_dom.className = "step";
309 step_dom.appendChild(document.createTextNode(step_json['title']));
310 var code = step_json['valid'];
315 step_dom.classList.add("step_untouched");
320 else if( code < 200 )
322 step_dom.classList.add("step_invalid");
324 msg = step_json['message'];
326 else if( code < 300 )
328 step_dom.classList.add("step_valid");
330 msg = step_json['message'];
334 update_message(msg, stat);
337 var step_number = step_json['index'];
338 step_dom.onclick = function(){ go(step_number); }
339 //TODO: background color and other style
343 function cancel_wf(){
347 data: {"cancel":"",},
348 beforeSend: function(request) {
349 request.setRequestHeader("X-CSRFToken",
350 $('input[name="csrfmiddlewaretoken"]').val()
353 success: redirect_root()
357 function redirect_root()
359 window.location.replace('/');
362 function add_wf(type){
363 add_wf_internal(type, false);
366 function add_edit_wf(type, target){
367 add_wf_internal(type, target);
370 function add_wf_internal(type, itemid){
371 data = {"add": type};
373 data['target'] = itemid;
379 beforeSend: function(request) {
380 request.setRequestHeader("X-CSRFToken",
381 $('input[name="csrfmiddlewaretoken"]').val()
384 success: refresh_wf_iframe()
388 function refresh_wf_iframe() {
389 window.location=window.location;
392 <div id="iframe_header" class="row view-header">
393 <div class="col-lg-12 step_header">
394 <h1 class="step_title" id="view_title"></h1>
395 <p class="description" id="view_desc"></p>
396 <p class="step_message" id="view_message"></p>
422 border-bottom: 1px solid #eee;
423 border-top: 1px solid #eee;
425 width: calc(100% - 202px);
429 function update_description(title, desc){
430 document.getElementById("view_title").innerText = title;
431 document.getElementById("view_desc").innerText = desc;
433 function update_message(message, stepstatus){
434 document.getElementById("view_message").innerText = message;
435 document.getElementById("view_message").className = "step_message";
436 document.getElementById("view_message").classList.add("message_" + stepstatus);
438 function resize_iframe(){
439 var page_rect = document.getElementById("wrapper").getBoundingClientRect();
440 var title_rect = document.getElementById("iframe_header").getBoundingClientRect();
441 var iframe_height = page_rect.bottom - title_rect.bottom;
442 console.log("setting height to " + iframe_height);
443 document.getElementById("viewport-iframe").height = iframe_height;
446 window.addEventListener('load', resize_iframe);
447 window.addEventListener('resize', resize_iframe);
452 <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>
453 {% endblock content %}