Replace and change CSS

Fix animation bugs
Fix layout issues
Replace custom CSS to bootstrap classes
Remove unused files
Change code to use es6 syntax
Add dropdown styles

Change-Id: Ie2ed31fa2e6763cf30d3b19e4bf9379019cbb0f5
Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>

2 files changed, 45 insertions, 85 deletions

diff --git a/src/templates/snapshot_workflow/steps/meta.html b/src/templates/snapshot_workflow/steps/meta.html
index bea475d..7c3e98b 100644
--- a/src/templates/snapshot_workflow/steps/meta.html
+++ b/src/templates/snapshot_workflow/steps/meta.html
@@ -4,13 +4,8 @@
 {% load bootstrap4 %}
 
 {% block content %}
-<style>
-.meta_container {
-    padding: 50px;
-}
-</style>
 {% bootstrap_form_errors form type='non_fields' %}
-<div class="meta_container">
+<div class="p-4">
     <form id="meta_form" action="/wf/workflow/" method="POST" class="form">
     {% csrf_token %}
     <div class="form-group">
diff --git a/src/templates/snapshot_workflow/steps/select_host.html b/src/templates/snapshot_workflow/steps/select_host.html
index f438bac..a0af67b 100644
--- a/src/templates/snapshot_workflow/steps/select_host.html
+++ b/src/templates/snapshot_workflow/steps/select_host.html
@@ -5,73 +5,30 @@
 
 {% block content %}
 
-<style>
-    .booking {
-        border-style: none;
-        border-color: black;
-        border: 2px;
-        border-radius: 5px;
-        margin: 20px;
-        padding-left: 25px;
-        padding-right: 25px;
-        padding-bottom: 25px;
-        box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
-        transition-property: box-shadow;
-        transition-duration: 0.1s;
-        float: left;
-    }
-    .booking:hover {
-        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-        transition-property: box-shadow;
-        transition-duration: 0.1s;
-    }
-    .host {
-        cursor: pointer;
-        border-style: solid;
-        border-color: black;
-        border-width: 1px;
-        border-radius: 5px;
-        margin: 5px;
-        padding: 5px;
-        text-align: center;
-        box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
-        transition-property: box-shadow;
-        transition-duration: 0.1s;
-    }
-    .host:hover {
-        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
-        transition-property: box-shadow;
-        transition-duration: 0.1s;
-        background-color: rgba(144,238,144,0.3);
-    }
-    .selected {
-        background-color: lightgreen !important;
-    }
-    .booking_container {
-        overflow: auto;
-        padding: 30px;
-    }
-</style>
 {% bootstrap_form_errors form type='non_fields' %}
 <form id="host_select_form" action="/wf/workflow/" method="POST" class="form">
 {% csrf_token %}
 <input type="hidden" id="hidden_json_input", name="host"/>
 </form>
-<div id="host_select_container" class="booking_container">
+<div class="container-fluid">
+    <div class="row" id="host_select_container">
+    </div>
 </div>
 <script>
 var selected_host = null;
 var initial = {{chosen|safe|default:'null'}};
 
-function select(booking_id, host_name){
+function select(obj){
+    var booking_id = $(obj).attr("booking");
+    var host_name = $(obj).attr("hostname");
     var input = document.getElementById("hidden_json_input");
     input.value = JSON.stringify({"booking": booking_id, "name": host_name});
     // clear out and highlist host
-    if(selected_host){
-        selected_host.classList.remove("selected");
+    if(selected_host != null){
+        selected_host.classList.remove("active");
     }
     selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
-    selected_host.classList.add("selected");
+    selected_host.classList.add("active");
 }
 
 function draw_bookings(){
@@ -79,35 +36,43 @@ function draw_bookings(){
     var bookings = [];
     var container = document.getElementById("host_select_container");
     for(var booking_id in booking_hosts){
-        var booking = document.createElement("DIV");
-        var heading = document.createElement("H3");
-        heading.appendChild(document.createTextNode("Booking " + booking_id));
-        booking.appendChild(heading);
-        booking.appendChild(document.createTextNode("start: " + booking_hosts[booking_id].start));
-        booking.appendChild(document.createElement("BR"));
-        booking.appendChild(document.createTextNode("end: " + booking_hosts[booking_id].end));
-        booking.appendChild(document.createElement("BR"));
-        booking.appendChild(document.createTextNode("purpose: " + booking_hosts[booking_id].purpose));
-        booking.appendChild(document.createElement("BR"));
-        booking.appendChild(document.createTextNode("hosts:"));
-        booking.id = "booking_" + booking_id;
-        booking.className = "booking";
+        // Create a column with a card
+        var column = $("<div/>", {
+            class: "col-12 col-md-6 col-lg-3 col-xl-2 my-2"
+        }).appendTo(container);
+        var booking = $("<div/>", {
+            class: "card"
+        }).appendTo(column);
+        var heading = $("<div/>", {
+            class: "card-header"
+        }).text(`Booking ${booking_id}`).appendTo(booking);
+        var body = $("<ul/>", {
+            class: "list-group list-group-flush"
+        }).appendTo(booking);
+        var footer = $("<div/>", {
+            text: "Hosts:",
+            class: "card-footer d-flex flex-column"
+        }).appendTo(booking);
+
+        // Append information to the card body
+        $(`<li class="list-group-item">Start: ${booking_hosts[booking_id].start}</li>`).appendTo(body);
+        $(`<li class="list-group-item">End: ${booking_hosts[booking_id].end}</li>`).appendTo(body);
+        $(`<li class="list-group-item">Purpose: ${booking_hosts[booking_id].purpose}</li>`).appendTo(body);
+
+        // Append hosts to footer
         var hosts = booking_hosts[booking_id].hosts;
-        for(var i=0; i<hosts.length; i++){
-            var host = document.createElement("DIV");
-            host.id = "booking_" + booking_id + "_host_" + hosts[i].name;
-            host.classList.add("host");
-            host.appendChild(document.createTextNode(hosts[i].name));
-            var hostname = hosts[i].name;
-            host.booking = booking_id;
-            host.hostname = hostname;
-            host.onclick = function() {
-                select(this.booking, this.hostname);
-            }
-            booking.appendChild(host);
+        for (const host of hosts) {
+            $("<button/>", {
+                class: "btn btn-outline-primary w-100 mt-1 hostbtn",
+                id: `booking_${booking_id}_host_${host.name}`,
+                text: host.name,
+                booking: booking_id,
+                hostname: host.name,
+                click: function() {
+                    select(this);
+                }
+            }).appendTo(footer);
         }
-        bookings.push(booking);
-        container.appendChild(booking);
     }
 }
 draw_bookings();