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