dashboard/src/templates/workflow/viewport-base.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3
   4 {% load bootstrap3 %}
   5
   6 {% block content %}
   7
   8 <style>
   9     .go_btn{
  10
  11         position: absolute;
  12         width: 100px;
  13         top: 170px;
  14         height: calc(100% - 170px);
  15
  16     }
  17     .go_btn_disabled{
  18             background-color: #ffffff;
  19     }
  20     .go_forward{
  21         right: 0px;
  22         border-left: none;
  23     }
  24
  25     .go_back{
  26         left: 251px;
  27         border-right: none;
  28     }
  29
  30
  31     .btn_wrapper{
  32         text-align: center;
  33         margin-bottom: 5px;
  34
  35     }
  36
  37     {% if DEBUG %}
  38
  39     .add_btn_wrapper{
  40         right: 130px;
  41         top: 10px;
  42         position: absolute;
  43     }
  44     {% endif %}
  45
  46
  47
  48     .options{
  49         position: absolute;
  50         top: 60px;
  51         right: 20px;
  52     }
  53
  54     #breadcrumbs {
  55         padding: 4px;
  56     }
  57     .step{
  58         background: #DEEED3;
  59         display: inline;
  60         padding: 5px;
  61         margin: 1px;
  62     }
  63
  64     .step_active{
  65         background: #5EC392;
  66         display: inline;
  67         padding: 5px;
  68         margin: 1px;
  69         font-weight: bold;
  70     }
  71
  72     .step_untouched
  73     {
  74         background: #98B0AF;
  75     }
  76
  77     .step_invalid
  78     {
  79         background: #CC3300;
  80     }
  81
  82     .step_valid
  83     {
  84         background: #0FD57D;
  85     }
  86
  87  #viewport-iframe
  88  {
  89      height: calc(100vh - 450);
  90  }
  91
  92
  93 </style>
  94
  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>
  97
  98 <div class="options">
  99     <button class="btn" onclick="cancel_wf()">Cancel</button>
 100 </div>
 101 <div class="btn_wrapper">
 102 <div id="breadcrumbs">
 103 </div>
 104 </div>
 105 {% csrf_token %}
 106
 107 <script type="text/javascript">
 108
 109
 110     update_context();
 111     var step = 0;
 112     var page_count = 0;
 113     var context_data = false;
 114
 115     function go(to)
 116     {
 117         step_on_leave();
 118         request_leave(to);
 119     }
 120
 121     function request_leave(to)
 122     {
 123         $.ajax({
 124             type: "GET",
 125             url: "/wf/manager/",
 126             beforeSend: function(request) {
 127                 request.setRequestHeader("X-CSRFToken",
 128                 $('input[name="csrfmiddlewaretoken"]').val());
 129             },
 130             success: function (data) {
 131                 confirm_permission(to, data);
 132                 update_page(data);
 133             }
 134         });
 135     }
 136
 137     function confirm_permission(to, data)
 138     {
 139         if( errors_exist(data) )
 140         {
 141             var continueanyway = confirm("The current step has errors that will prevent it from saving. Continue anyway?");
 142             if( !continueanyway )
 143             {
 144                 return;
 145             }
 146         }
 147         if( to >= page_count )
 148         {
 149             to = page_count-1;
 150         }
 151         else if( to < 0 )
 152         {
 153             to = 0;
 154         }
 155         var problem = function() {
 156             alert("There was a problem");
 157         }
 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(); }
 168         }
 169         req.onerror = problem;
 170         req.send();
 171     }
 172
 173     function step_on_leave()
 174     {
 175         document.getElementById("viewport-iframe").contentWindow.step_on_leave();
 176     }
 177
 178     function errors_exist(data)
 179     {
 180         var stat = data['steps'][data['active']]['valid'];
 181         if( stat >= 100 && stat < 200 )
 182         {
 183             return true;
 184         }
 185         else
 186         {
 187             return false;
 188         }
 189     }
 190
 191     function update_context() {
 192         $.ajax({
 193             type: "GET",
 194             url: "/wf/manager/",
 195             beforeSend: function(request) {
 196                 request.setRequestHeader("X-CSRFToken",
 197                 $('input[name="csrfmiddlewaretoken"]').val());
 198             },
 199             success: function (data) {
 200                 update_page(data);
 201             }
 202         });
 203     }
 204
 205     function update_page(data)
 206     {
 207         context_data = data;
 208         update_breadcrumbs(data);
 209     }
 210
 211     function update_breadcrumbs(meta_json) {
 212         step = meta_json['active'];
 213         page_count = meta_json['steps'].length;
 214         if( step == 0 )
 215         {
 216                 var btn = document.getElementById("gob");
 217                 btn.classList.add("go_btn_disabled");
 218                 btn.disabled = true;
 219         }
 220         else
 221         {
 222                 var btn = document.getElementById("gob");
 223                 btn.classList.remove("go_btn_disabled");
 224                 btn.disabled = false;
 225         }
 226         if( step == page_count - 1 )
 227         {
 228                 var btn = document.getElementById("gof");
 229                 btn.classList.add("go_btn_disabled");
 230                 btn.disabled = true;
 231         }
 232         else
 233         {
 234                 var btn = document.getElementById("gof");
 235                 btn.classList.remove("go_btn_disabled");
 236                 btn.disabled = false;
 237         }
 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);
 242         }
 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");
 247             div.id = "row"+i;
 248             if(i<depth){
 249                 div.style['margin-bottom'] = "7px";
 250             }
 251             if(i>0){
 252                 div.style['margin-top'] = "7px";
 253             }
 254             container.appendChild(div);
 255         }
 256         draw_steps(meta_json);
 257     }
 258
 259     function draw_steps(meta_json){
 260         var all_relations = meta_json['relations'];
 261         var 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'];
 270         }
 271         var child_index = meta_json['children'][step];
 272         var my_children = all_relations[child_index];
 273         if(my_children){
 274             relations.push(my_children);
 275         }
 276         draw_relations(relations, meta_json, active_steps);
 277     }
 278
 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);
 294             }
 295             var parent_div = document.getElementById("row" + relation['depth']);
 296             parent_div.appendChild(children_container);
 297         }
 298     }
 299
 300     function create_step(step_json, active){
 301         var step_dom = document.createElement("DIV");
 302         if(active){
 303             step_dom.className = "step_active";
 304             console.log(step_json['message']);
 305
 306         } else{
 307             step_dom.className = "step";
 308         }
 309         step_dom.appendChild(document.createTextNode(step_json['title']));
 310         var code = step_json['valid'];
 311         stat = "";
 312         msg = "";
 313         if( code < 100 )
 314         {
 315             step_dom.classList.add("step_untouched");
 316
 317             stat = "";
 318             msg = "";
 319         }
 320         else if( code < 200 )
 321         {
 322             step_dom.classList.add("step_invalid");
 323             stat = "invalid";
 324             msg = step_json['message'];
 325         }
 326         else if( code < 300 )
 327         {
 328             step_dom.classList.add("step_valid");
 329             stat = "valid";
 330             msg = step_json['message'];
 331         }
 332         if(active)
 333         {
 334             update_message(msg, stat);
 335         }
 336
 337         var step_number = step_json['index'];
 338         step_dom.onclick = function(){ go(step_number); }
 339         //TODO: background color and other style
 340         return step_dom;
 341     }
 342
 343     function cancel_wf(){
 344         $.ajax({
 345             type: "POST",
 346             url: "/wf/manager/",
 347             data: {"cancel":"",},
 348             beforeSend: function(request) {
 349                 request.setRequestHeader("X-CSRFToken",
 350                 $('input[name="csrfmiddlewaretoken"]').val()
 351                 );
 352             },
 353             success: redirect_root()
 354         });
 355     }
 356
 357     function redirect_root()
 358     {
 359         window.location.replace('/');
 360     }
 361
 362     function add_wf(type){
 363         add_wf_internal(type, false);
 364     }
 365
 366     function add_edit_wf(type, target){
 367         add_wf_internal(type, target);
 368     }
 369
 370     function add_wf_internal(type, itemid){
 371         data = {"add": type};
 372         if(itemid){
 373             data['target'] = itemid;
 374         }
 375         $.ajax({
 376             type: "POST",
 377             url: "/wf/manager/",
 378             data: data,
 379             beforeSend: function(request) {
 380                 request.setRequestHeader("X-CSRFToken",
 381                 $('input[name="csrfmiddlewaretoken"]').val()
 382                 );
 383             },
 384             success: refresh_wf_iframe()
 385         });
 386     }
 387
 388     function refresh_wf_iframe() {
 389         window.location=window.location;
 390     }
 391 </script>
 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>
 397     </div>
 398     <style>
 399         #view_desc{
 400             margin-bottom: 15px;
 401             margin-top: 5px;
 402             margin-left: 30px;
 403             display: inline;
 404         }
 405         #view_title{
 406             margin-top: 5px;
 407             margin-bottom: 0px;
 408             display: inline;
 409         }
 410         #view_message{
 411             margin-top: 10px;
 412             margin-bottom: 5px;
 413             float: right;
 414         }
 415         .message_invalid{
 416             color: #ff4400;
 417         }
 418         .message_valid{
 419             color: #44cc00;
 420         }
 421         .step_header{
 422             border-bottom: 1px solid #eee;
 423             border-top: 1px solid #eee;
 424             left: 101px;
 425             width: calc(100% - 202px);
 426         }
 427     </style>
 428     <script>
 429         function update_description(title, desc){
 430             document.getElementById("view_title").innerText = title;
 431             document.getElementById("view_desc").innerText = desc;
 432         }
 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);
 437         }
 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;
 444
 445         }
 446      window.addEventListener('load', resize_iframe);
 447      window.addEventListener('resize', resize_iframe);
 448     </script>
 449     <!-- /.col-lg-12 -->
 450 </div>
 451
 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 %}