summaryrefslogtreecommitdiffstats
path: root/dashboard/src/templates/snapshot_workflow/steps/select_host.html
diff options
context:
space:
mode:
authorParker Berberian <pberberian@iol.unh.edu>2019-01-17 12:51:04 -0500
committerParker Berberian <pberberian@iol.unh.edu>2019-01-18 16:08:27 -0500
commit8483acb4c4e8c758855f2184483af834977b0c52 (patch)
tree403618bb77d4f19c2a7b908bb8a0872f144d530b /dashboard/src/templates/snapshot_workflow/steps/select_host.html
parentbe3825307c7a44f1491e85e33fd0a0ecf1e95a1d (diff)
OverHaul the Snapshot Workflow
Makes the Snapshot workflow much prettier and more functional. Change-Id: Icdd66f64e6d336ad49ed3cf638a301d0ca92fda9 Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>
Diffstat (limited to 'dashboard/src/templates/snapshot_workflow/steps/select_host.html')
-rw-r--r--dashboard/src/templates/snapshot_workflow/steps/select_host.html65
1 files changed, 49 insertions, 16 deletions
diff --git a/dashboard/src/templates/snapshot_workflow/steps/select_host.html b/dashboard/src/templates/snapshot_workflow/steps/select_host.html
index 16dd5d4..27a9238 100644
--- a/dashboard/src/templates/snapshot_workflow/steps/select_host.html
+++ b/dashboard/src/templates/snapshot_workflow/steps/select_host.html
@@ -5,43 +5,73 @@
{% block content %}
-
<style>
.booking {
- border-style: solid;
+ border-style: none;
border-color: black;
- border-width: 2px;
- display: inline-block;
- padding: 3px;
+ 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;
- margin: 2px;
+ 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">
+<div id="host_select_container" class="booking_container">
</div>
<script>
var selected_host = null;
-var initial = {{chosen|default:'null'}};
+var initial = {{chosen|safe|default:'null'}};
function select(booking_id, host_name){
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.style['background-color'] = "white";
+ selected_host.classList.remove("selected");
}
selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
- selected_host.style['background-color'] = "lightgrey";
+ selected_host.classList.add("selected");
}
function draw_bookings(){
@@ -53,17 +83,20 @@ function draw_bookings(){
var heading = document.createElement("H3");
heading.appendChild(document.createTextNode("Booking " + booking_id));
booking.appendChild(heading);
- var desc = "start: " + booking_hosts[booking_id].start +
- " end: " + booking_hosts[booking_id].end +
- " purpose: " + booking_hosts[booking_id].purpose;
- booking.appendChild(document.createTextNode(desc));
+ 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";
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.className = "host";
+ host.classList.add("host");
host.appendChild(document.createTextNode(hosts[i].name));
var hostname = hosts[i].name;
host.booking = booking_id;