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: #DDDDDD;
  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 id="cancel_btn" class="btn" onclick="cancel_wf()">Cancel</button>
 100 </div>
 101 <div class="btn_wrapper">
 102 <div id="breadcrumbs" class="btn-group">
 103     <div class="btn-group" id="breadcrumb-wrapper">
 104     </div>
 105 </div>
 106 </div>
 107 {% csrf_token %}
 108
 109 <script type="text/javascript">
 110
 111
 112     update_context();
 113     var step = 0;
 114     var page_count = 0;
 115     var context_data = false;
 116
 117     function go(to)
 118     {
 119         step_on_leave();
 120         request_leave(to);
 121     }
 122
 123     function request_leave(to)
 124     {
 125         $.ajax({
 126             type: "GET",
 127             url: "/wf/manager/",
 128             beforeSend: function(request) {
 129                 request.setRequestHeader("X-CSRFToken",
 130                 $('input[name="csrfmiddlewaretoken"]').val());
 131             },
 132             success: function (data) {
 133                 confirm_permission(to, data);
 134                 update_page(data);
 135             }
 136         });
 137     }
 138
 139     function confirm_permission(to, data)
 140     {
 141         if( errors_exist(data) )
 142         {
 143             var continueanyway = confirm("The current step has errors that will prevent it from saving. Continue anyway?");
 144             if( !continueanyway )
 145             {
 146                 return;
 147             }
 148         }
 149         if( to >= page_count )
 150         {
 151             to = page_count-1;
 152         }
 153         else if( to < 0 )
 154         {
 155             to = 0;
 156         }
 157         var problem = function() {
 158             alert("There was a problem");
 159         }
 160         //makes an asynch request
 161         req = new XMLHttpRequest();
 162         url = "/wf/workflow/?step=" + to;
 163         req.open("GET", url, true);
 164         req.onload = function(e) {
 165             if(req.readyState === 4){
 166                 if(req.status < 300){
 167                     document.getElementById("viewport-iframe").srcdoc = this.responseText;
 168                 } else { problem(); }
 169             } else { problem(); }
 170         }
 171         req.onerror = problem;
 172         req.send();
 173     }
 174
 175     function step_on_leave()
 176     {
 177         document.getElementById("viewport-iframe").contentWindow.step_on_leave();
 178     }
 179
 180     function errors_exist(data)
 181     {
 182         var stat = data['steps'][data['active']]['valid'];
 183         if( stat >= 100 && stat < 200 )
 184         {
 185             return true;
 186         }
 187         else
 188         {
 189             return false;
 190         }
 191     }
 192
 193     function update_context() {
 194         $.ajax({
 195             type: "GET",
 196             url: "/wf/manager/",
 197             beforeSend: function(request) {
 198                 request.setRequestHeader("X-CSRFToken",
 199                 $('input[name="csrfmiddlewaretoken"]').val());
 200             },
 201             success: function (data) {
 202                 update_page(data);
 203             }
 204         });
 205     }
 206
 207     function update_page(data)
 208     {
 209         context_data = data;
 210         update_breadcrumbs(data);
 211         if(data["workflow_count"] == 1)
 212         {
 213                 document.getElementById("cancel_btn").innerText = "Exit Workflow";
 214         }
 215         else
 216         {
 217                 document.getElementById("cancel_btn").innerText = "Return to Parent";
 218         }
 219     }
 220
 221     function update_breadcrumbs(meta_json) {
 222         step = meta_json['active'];
 223         page_count = meta_json['steps'].length;
 224         if( step == 0 )
 225         {
 226                 var btn = document.getElementById("gob");
 227                 btn.classList.add("go_btn_disabled");
 228                 btn.disabled = true;
 229         }
 230         else
 231         {
 232                 var btn = document.getElementById("gob");
 233                 btn.classList.remove("go_btn_disabled");
 234                 btn.disabled = false;
 235         }
 236         if( step == page_count - 1 )
 237         {
 238                 var btn = document.getElementById("gof");
 239                 btn.classList.add("go_btn_disabled");
 240                 btn.disabled = true;
 241         }
 242         else
 243         {
 244                 var btn = document.getElementById("gof");
 245                 btn.classList.remove("go_btn_disabled");
 246                 btn.disabled = false;
 247         }
 248         //remove all children of breadcrumbs so we can redraw
 249         var container = document.getElementById("breadcrumbs");
 250         while(container.firstChild){
 251             container.removeChild(container.firstChild);
 252         }
 253
 254         draw_steps(meta_json);
 255     }
 256
 257     function draw_steps(meta_json){
 258         for( var i = 0; i < meta_json["steps"].length; i++ )
 259         {
 260             meta_json["steps"][i]["index"] = i;
 261             var step_btn = create_step(meta_json["steps"][i], i == meta_json["active"]);
 262             document.getElementById("breadcrumbs").appendChild(step_btn);
 263         }
 264     }
 265
 266     function create_step(step_json, active){
 267         var step_dom = document.createElement("DIV");
 268         if(active){
 269             step_dom.className = "step_active";
 270
 271         } else{
 272             step_dom.className = "step";
 273         }
 274         step_dom.appendChild(document.createTextNode(step_json['title']));
 275         var code = step_json['valid'];
 276         stat = "";
 277         msg = "";
 278         if( code < 100 )
 279         {
 280             step_dom.classList.add("step_untouched");
 281
 282             stat = "";
 283             msg = "";
 284         }
 285         else if( code < 200 )
 286         {
 287             step_dom.classList.add("step_invalid");
 288             stat = "invalid";
 289             msg = step_json['message'];
 290         }
 291         else if( code < 300 )
 292         {
 293             step_dom.classList.add("step_valid");
 294             stat = "valid";
 295             msg = step_json['message'];
 296         }
 297         if(active)
 298         {
 299             update_message(msg, stat);
 300         }
 301         step_dom.classList.add("btn");
 302
 303         var step_number = step_json['index'];
 304         step_dom.onclick = function(){ go(step_number); }
 305         return step_dom;
 306     }
 307
 308     function cancel_wf(){
 309         var form = $("#workflow_pop_form");
 310         var formData = form.serialize();
 311         var req = new XMLHttpRequest();
 312         req.open("POST", "/wf/workflow/finish/", false);
 313         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 314         req.onerror = function() { alert("problem occurred while trying to cancel current workflow"); }
 315         req.onreadystatechange = function() { if(req.readyState === 4){
 316             refresh_iframe();
 317         }};
 318         req.send(formData);
 319     }
 320
 321     function refresh_iframe() {
 322         req = new XMLHttpRequest();
 323         url = "/wf/workflow/";
 324         req.open("GET", url, true);
 325         req.onload = function(e) {
 326             var doc = document.getElementById("viewport-iframe").contentWindow.document;
 327             doc.open(); doc.write(this.responseText); doc.close();
 328         }
 329         req.send();
 330     }
 331
 332     function write_iframe(contents)
 333     {
 334         document.getElementById("viewport-iframe").contentWindow.document.innerHTML= contents;
 335     }
 336
 337     function redirect_root()
 338     {
 339         window.location.replace('/wf/');
 340     }
 341
 342     function add_wf(type){
 343         add_wf_internal(type, false);
 344     }
 345
 346     function add_edit_wf(type, target){
 347         add_wf_internal(type, target);
 348     }
 349
 350     function add_wf_internal(type, itemid){
 351         data = {"add": type};
 352         if(itemid){
 353             data['target'] = itemid;
 354         }
 355         $.ajax({
 356             type: "POST",
 357             url: "/wf/manager/",
 358             data: data,
 359             beforeSend: function(request) {
 360                 request.setRequestHeader("X-CSRFToken",
 361                 $('input[name="csrfmiddlewaretoken"]').val()
 362                 );
 363             },
 364             success: refresh_wf_iframe()
 365         });
 366     }
 367
 368     function refresh_wf_iframe() {
 369         window.location=window.location;
 370     }
 371 </script>
 372 <div id="iframe_header" class="row view-header">
 373     <div class="col-lg-12 step_header">
 374         <h1 class="step_title" id="view_title"></h1>
 375         <p class="description" id="view_desc"></p>
 376         <p class="step_message" id="view_message"></p>
 377     </div>
 378     <style>
 379         #view_desc{
 380             margin-bottom: 15px;
 381             margin-top: 5px;
 382             margin-left: 30px;
 383             display: inline;
 384         }
 385         #view_title{
 386             margin-top: 5px;
 387             margin-bottom: 0px;
 388             display: inline;
 389         }
 390         #view_message{
 391             margin-top: 10px;
 392             margin-bottom: 5px;
 393             float: right;
 394         }
 395         .message_invalid{
 396             color: #ff4400;
 397         }
 398         .message_valid{
 399             color: #44cc00;
 400         }
 401         .step_header{
 402             border-bottom: 1px solid #eee;
 403             border-top: 1px solid #eee;
 404             left: 101px;
 405             width: calc(100% - 202px);
 406         }
 407     </style>
 408     <script>
 409         function update_description(title, desc){
 410             document.getElementById("view_title").innerText = title;
 411             document.getElementById("view_desc").innerText = desc;
 412         }
 413         function update_message(message, stepstatus){
 414             document.getElementById("view_message").innerText = message;
 415             document.getElementById("view_message").className = "step_message";
 416             document.getElementById("view_message").classList.add("message_" + stepstatus);
 417         }
 418         function resize_iframe(){
 419             var page_rect = document.getElementById("wrapper").getBoundingClientRect();
 420             var title_rect = document.getElementById("iframe_header").getBoundingClientRect();
 421             var iframe_height = page_rect.bottom - title_rect.bottom;
 422             console.log("setting height to " + iframe_height);
 423             document.getElementById("viewport-iframe").height = iframe_height;
 424
 425         }
 426      window.addEventListener('load', resize_iframe);
 427      window.addEventListener('resize', resize_iframe);
 428     </script>
 429     <!-- /.col-lg-12 -->
 430 </div>
 431 <div style="display: none;" id="workflow_pop_form_div">
 432 <form id="workflow_pop_form" action="/wf/workflow/finish/" method="post">
 433     {% csrf_token %}
 434 </form>
 435 </div>
 436
 437 <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>
 438 {% endblock content %}