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 <style>
   9     .booking {
  10         border-style: none;
  11         border-color: black;
  12         border: 2px;
  13         border-radius: 5px;
  14         margin: 20px;
  15         padding-left: 25px;
  16         padding-right: 25px;
  17         padding-bottom: 25px;
  18         box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
  19         transition-property: box-shadow;
  20         transition-duration: 0.1s;
  21         float: left;
  22     }
  23     .booking:hover {
  24         box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  25         transition-property: box-shadow;
  26         transition-duration: 0.1s;
  27     }
  28     .host {
  29         cursor: pointer;
  30         border-style: solid;
  31         border-color: black;
  32         border-width: 1px;
  33         border-radius: 5px;
  34         margin: 5px;
  35         padding: 5px;
  36         text-align: center;
  37         box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
  38         transition-property: box-shadow;
  39         transition-duration: 0.1s;
  40     }
  41     .host:hover {
  42         box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
  43         transition-property: box-shadow;
  44         transition-duration: 0.1s;
  45         background-color: rgba(144,238,144,0.3);
  46     }
  47     .selected {
  48         background-color: lightgreen !important;
  49     }
  50     .booking_container {
  51         overflow: auto;
  52         padding: 30px;
  53     }
  54 </style>
  55 {% bootstrap_form_errors form type='non_fields' %}
  56 <form id="host_select_form" action="/wf/workflow/" method="POST" class="form">
  57 {% csrf_token %}
  58 <input type="hidden" id="hidden_json_input", name="host"/>
  59 </form>
  60 <div id="host_select_container" class="booking_container">
  61 </div>
  62 <script>
  63 var selected_host = null;
  64 var initial = {{chosen|safe|default:'null'}};
  65
  66 function select(booking_id, host_name){
  67     var input = document.getElementById("hidden_json_input");
  68     input.value = JSON.stringify({"booking": booking_id, "name": host_name});
  69     // clear out and highlist host
  70     if(selected_host){
  71         selected_host.classList.remove("selected");
  72     }
  73     selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
  74     selected_host.classList.add("selected");
  75 }
  76
  77 function draw_bookings(){
  78     var booking_hosts = {{booking_hosts|safe}};
  79     var bookings = [];
  80     var container = document.getElementById("host_select_container");
  81     for(var booking_id in booking_hosts){
  82         var booking = document.createElement("DIV");
  83         var heading = document.createElement("H3");
  84         heading.appendChild(document.createTextNode("Booking " + booking_id));
  85         booking.appendChild(heading);
  86         booking.appendChild(document.createTextNode("start: " + booking_hosts[booking_id].start));
  87         booking.appendChild(document.createElement("BR"));
  88         booking.appendChild(document.createTextNode("end: " + booking_hosts[booking_id].end));
  89         booking.appendChild(document.createElement("BR"));
  90         booking.appendChild(document.createTextNode("purpose: " + booking_hosts[booking_id].purpose));
  91         booking.appendChild(document.createElement("BR"));
  92         booking.appendChild(document.createTextNode("hosts:"));
  93         booking.id = "booking_" + booking_id;
  94         booking.className = "booking";
  95         var hosts = booking_hosts[booking_id].hosts;
  96         for(var i=0; i<hosts.length; i++){
  97             var host = document.createElement("DIV");
  98             host.id = "booking_" + booking_id + "_host_" + hosts[i].name;
  99             host.classList.add("host");
 100             host.appendChild(document.createTextNode(hosts[i].name));
 101             var hostname = hosts[i].name;
 102             host.booking = booking_id;
 103             host.hostname = hostname;
 104             host.onclick = function() {
 105                 select(this.booking, this.hostname);
 106             }
 107             booking.appendChild(host);
 108         }
 109         bookings.push(booking);
 110         container.appendChild(booking);
 111     }
 112 }
 113 draw_bookings();
 114 if(initial){
 115     select(initial.booking_id, initial.hostname);
 116 }
 117 </script>
 118 {% endblock content %}
 119
 120 {% block onleave %}
 121 var ajaxForm = $("#host_select_form");
 122 var formData = ajaxForm.serialize();
 123 req = new XMLHttpRequest();
 124 req.open("POST", "/wf/workflow/", false);
 125 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 126 req.onerror = function() { alert("problem submitting form"); }
 127 req.send(formData);
 128 {% endblock %}