2 files changed, 100 insertions, 0 deletions
diff --git a/src/templates/base/snapshot_workflow/steps/meta.html b/src/templates/base/snapshot_workflow/steps/meta.html
new file mode 100644
index 0000000..88136d2
--- /dev/null
+++ b/src/templates/base/snapshot_workflow/steps/meta.html
@@ -0,0 +1,17 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap4 %}
+
+{% block content %}
+{% bootstrap_form_errors form type='non_fields' %}
+<div class="p-4">
+    <form id="step_form" method="POST" class="form">
+    {% csrf_token %}
+    <div class="form-group">
+    {% bootstrap_field form.name %}
+    {% bootstrap_field form.description %}
+    </div>
+    </form>
+</div>
+{% endblock content %}
diff --git a/src/templates/base/snapshot_workflow/steps/select_host.html b/src/templates/base/snapshot_workflow/steps/select_host.html
new file mode 100644
index 0000000..4243145
--- /dev/null
+++ b/src/templates/base/snapshot_workflow/steps/select_host.html
@@ -0,0 +1,83 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap4 %}
+
+{% block content %}
+
+{% bootstrap_form_errors form type='non_fields' %}
+<form id="step_form" method="POST" class="form">
+{% csrf_token %}
+<input type="hidden" id="hidden_json_input", name="host"/>
+</form>
+<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(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 != null){
+        selected_host.classList.remove("active");
+    }
+    selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
+    selected_host.classList.add("active");
+}
+
+function draw_bookings(){
+    var booking_hosts = {{booking_hosts|safe}};
+    var bookings = [];
+    var container = document.getElementById("host_select_container");
+    for(var booking_id in booking_hosts){
+        // 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 (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);
+        }
+    }
+}
+draw_bookings();
+if(initial){
+    select(initial.booking_id, initial.hostname);
+}
+</script>
+{% endblock content %}