src/templates/snapshot_workflow/steps/select_host.html

   1 {% extends "workflow/viewport-element.html" %}
   2 {% load staticfiles %}
   3
   4 {% load bootstrap3 %}
   5
   6 {% block content %}
   7
   8
   9 <style>
  10     .booking {
  11         border-style: solid;
  12         border-color: black;
  13         border-width: 2px;
  14         display: inline-block;
  15         padding: 3px;
  16     }
  17     .host {
  18         border-style: solid;
  19         border-color: black;
  20         border-width: 1px;
  21         margin: 2px;
  22     }
  23 </style>
  24
  25 {% bootstrap_form_errors form type='non_fields' %}
  26 <form id="host_select_form" action="/wf/workflow/" method="POST" class="form">
  27 {% csrf_token %}
  28 <input type="hidden" id="hidden_json_input", name="host"/>
  29 </form>
  30 <div id="host_select_container">
  31 </div>
  32 <script>
  33 var selected_host = null;
  34 var initial = {{chosen|default:'null'}};
  35
  36 function select(booking_id, host_name){
  37     var input = document.getElementById("hidden_json_input");
  38     input.value = JSON.stringify({"booking": booking_id, "name": host_name});
  39     // clear out and highlist host
  40     if(selected_host){
  41         selected_host.style['background-color'] = "white";
  42     }
  43     selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
  44     selected_host.style['background-color'] = "lightgrey";
  45 }
  46
  47 function draw_bookings(){
  48     var booking_hosts = {{booking_hosts|safe}};
  49     var bookings = [];
  50     var container = document.getElementById("host_select_container");
  51     for(var booking_id in booking_hosts){
  52         var booking = document.createElement("DIV");
  53         var heading = document.createElement("H3");
  54         heading.appendChild(document.createTextNode("Booking " + booking_id));
  55         booking.appendChild(heading);
  56         var desc = "start: " + booking_hosts[booking_id].start +
  57         " end: " + booking_hosts[booking_id].end +
  58         " purpose: " + booking_hosts[booking_id].purpose;
  59         booking.appendChild(document.createTextNode(desc));
  60         booking.id = "booking_" + booking_id;
  61         booking.className = "booking";
  62         var hosts = booking_hosts[booking_id].hosts;
  63         for(var i=0; i<hosts.length; i++){
  64             var host = document.createElement("DIV");
  65             host.id = "booking_" + booking_id + "_host_" + hosts[i].name;
  66             host.className = "host";
  67             host.appendChild(document.createTextNode(hosts[i].name));
  68             var hostname = hosts[i].name;
  69             host.booking = booking_id;
  70             host.hostname = hostname;
  71             host.onclick = function() {
  72                 select(this.booking, this.hostname);
  73             }
  74             booking.appendChild(host);
  75         }
  76         bookings.push(booking);
  77         container.appendChild(booking);
  78     }
  79 }
  80 draw_bookings();
  81 if(initial){
  82     select(initial.booking_id, initial.hostname);
  83 }
  84 </script>
  85 {% endblock content %}
  86
  87 {% block onleave %}
  88 var ajaxForm = $("#host_select_form");
  89 var formData = ajaxForm.serialize();
  90 req = new XMLHttpRequest();
  91 req.open("POST", "/wf/workflow/", false);
  92 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  93 req.onerror = function() { alert("problem submitting form"); }
  94 req.send(formData);
  95 {% endblock %}