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