1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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 %}
|
