aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/snapshot_workflow
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates/snapshot_workflow')
-rw-r--r--src/templates/snapshot_workflow/steps/meta.html7
-rw-r--r--src/templates/snapshot_workflow/steps/select_host.html123
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();