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.html32
-rw-r--r--src/templates/snapshot_workflow/steps/select_host.html128
2 files changed, 160 insertions, 0 deletions
diff --git a/src/templates/snapshot_workflow/steps/meta.html b/src/templates/snapshot_workflow/steps/meta.html
new file mode 100644
index 0000000..bea475d
--- /dev/null
+++ b/src/templates/snapshot_workflow/steps/meta.html
@@ -0,0 +1,32 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap4 %}
+
+{% block content %}
+<style>
+.meta_container {
+ padding: 50px;
+}
+</style>
+{% bootstrap_form_errors form type='non_fields' %}
+<div class="meta_container">
+ <form id="meta_form" action="/wf/workflow/" method="POST" class="form">
+ {% csrf_token %}
+ <div class="form-group">
+ {% bootstrap_field form.name %}
+ {% bootstrap_field form.description %}
+ </div>
+ </form>
+</div>
+{% endblock content %}
+
+{% block onleave %}
+var ajaxForm = $("#meta_form");
+var formData = ajaxForm.serialize();
+req = new XMLHttpRequest();
+req.open("POST", "/wf/workflow/", false);
+req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+req.onerror = function() { alert("problem submitting form"); }
+req.send(formData);
+{% endblock %}
diff --git a/src/templates/snapshot_workflow/steps/select_host.html b/src/templates/snapshot_workflow/steps/select_host.html
new file mode 100644
index 0000000..f438bac
--- /dev/null
+++ b/src/templates/snapshot_workflow/steps/select_host.html
@@ -0,0 +1,128 @@
+{% extends "workflow/viewport-element.html" %}
+{% load staticfiles %}
+
+{% load bootstrap4 %}
+
+{% 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>
+<script>
+var selected_host = 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.classList.remove("selected");
+ }
+ selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
+ selected_host.classList.add("selected");
+}
+
+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){
+ 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";
+ 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);
+ }
+ bookings.push(booking);
+ container.appendChild(booking);
+ }
+}
+draw_bookings();
+if(initial){
+ select(initial.booking_id, initial.hostname);
+}
+</script>
+{% endblock content %}
+
+{% block onleave %}
+var ajaxForm = $("#host_select_form");
+var formData = ajaxForm.serialize();
+req = new XMLHttpRequest();
+req.open("POST", "/wf/workflow/", false);
+req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+req.onerror = function() { alert("problem submitting form"); }
+req.send(formData);
+{% endblock %}