src/templates/base/snapshot_workflow/steps/select_host.html

   1 {% extends "workflow/viewport-element.html" %}
   2 {% load staticfiles %}
   3
   4 {% load bootstrap4 %}
   5
   6 {% block content %}
   7
   8 {% bootstrap_form_errors form type='non_fields' %}
   9 <form id="step_form" method="POST" class="form">
  10 {% csrf_token %}
  11 <input type="hidden" id="hidden_json_input", name="host"/>
  12 </form>
  13 <div class="container-fluid">
  14     <div class="row" id="host_select_container">
  15     </div>
  16 </div>
  17 <script>
  18 var selected_host = null;
  19 var initial = {{chosen|safe|default:'null'}};
  20
  21 function select(obj){
  22     var booking_id = $(obj).attr("booking");
  23     var host_name = $(obj).attr("hostname");
  24     var input = document.getElementById("hidden_json_input");
  25     input.value = JSON.stringify({"booking": booking_id, "name": host_name});
  26     // clear out and highlist host
  27     if(selected_host != null){
  28         selected_host.classList.remove("active");
  29     }
  30     selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
  31     selected_host.classList.add("active");
  32 }
  33
  34 function draw_bookings(){
  35     var booking_hosts = {{booking_hosts|safe}};
  36     var bookings = [];
  37     var container = document.getElementById("host_select_container");
  38     for(var booking_id in booking_hosts){
  39         // Create a column with a card
  40         var column = $("<div/>", {
  41             class: "col-12 col-md-6 col-lg-3 col-xl-2 my-2"
  42         }).appendTo(container);
  43         var booking = $("<div/>", {
  44             class: "card"
  45         }).appendTo(column);
  46         var heading = $("<div/>", {
  47             class: "card-header"
  48         }).text(`Booking ${booking_id}`).appendTo(booking);
  49         var body = $("<ul/>", {
  50             class: "list-group list-group-flush"
  51         }).appendTo(booking);
  52         var footer = $("<div/>", {
  53             text: "Hosts:",
  54             class: "card-footer d-flex flex-column"
  55         }).appendTo(booking);
  56
  57         // Append information to the card body
  58         $(`<li class="list-group-item">Start: ${booking_hosts[booking_id].start}</li>`).appendTo(body);
  59         $(`<li class="list-group-item">End: ${booking_hosts[booking_id].end}</li>`).appendTo(body);
  60         $(`<li class="list-group-item">Purpose: ${booking_hosts[booking_id].purpose}</li>`).appendTo(body);
  61
  62         // Append hosts to footer
  63         var hosts = booking_hosts[booking_id].hosts;
  64         for (const host of hosts) {
  65             $("<button/>", {
  66                 class: "btn btn-outline-primary w-100 mt-1 hostbtn",
  67                 id: `booking_${booking_id}_host_${host.name}`,
  68                 text: host.name,
  69                 booking: booking_id,
  70                 hostname: host.name,
  71                 click: function() {
  72                     select(this);
  73                 }
  74             }).appendTo(footer);
  75         }
  76     }
  77 }
  78 draw_bookings();
  79 if(initial){
  80     select(initial.booking_id, initial.hostname);
  81 }
  82 </script>
  83 {% endblock content %}