aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/snapshot_workflow/steps
diff options
context:
space:
mode:
authorBrandon Lo <lobrandon1217@gmail.com>2019-06-27 15:43:55 -0400
committerBrandon Lo <lobrandon1217@gmail.com>2019-06-28 15:28:24 +0000
commit7fec796ae500313ddbbbedf32d4f7581985d41d4 (patch)
treec7c40f8bfc0d0ff682249187b4d68bfdfa8c6493 /src/templates/snapshot_workflow/steps
parente5e07b97e3d797a3a1f90fa33b7ccc41b6bacde3 (diff)
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>
Diffstat (limited to 'src/templates/snapshot_workflow/steps')
-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();