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
|
{% extends "workflow/viewport-element.html" %}
{% load staticfiles %}
{% load bootstrap4 %}
{% block content %}
{% bootstrap_form_errors form type='non_fields' %}
<form id="step_form" method="POST" class="form">
{% csrf_token %}
<input type="hidden" id="hidden_json_input", name="host"/>
</form>
<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(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 != null){
selected_host.classList.remove("active");
}
selected_host = document.getElementById("booking_" + booking_id + "_host_" + host_name);
selected_host.classList.add("active");
}
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){
// 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 (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);
}
}
}
draw_bookings();
if(initial){
select(initial.booking_id, initial.hostname);
}
</script>
{% endblock content %}
|
