aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/snapshot_workflow/steps/select_host.html
blob: a0af67b958570b152258a3b289d6ca4d042c689a (plain)
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
{% extends "workflow/viewport-element.html" %}
{% load staticfiles %}

{% load bootstrap4 %}

{% block content %}

{% 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 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 %}

{% 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 %}