blob: f1ba491e8b998065f18eaf9a1dd921711631b5a2 (
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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
{% extends "base.html" %}
{% load staticfiles %}
{% load bootstrap4 %}
{% block content %}
{% bootstrap_form_errors form type='non_fields' %}
<form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
{% csrf_token %}
<div class="container-fluid">
<div class="row">
<div class="col-12 px-1 my-2">
<div class="col py-2 rounded border">
<p>Please select a host type you wish to book. Only available types are shown.</p>
{% bootstrap_field form.filter_field show_label=False %}
</div>
</div>
<div class="col-12 col-lg-3 px-1 my-2">
<div class="col border rounded py-2 h-100">
{% bootstrap_field form.purpose %}
{% bootstrap_field form.project %}
{% bootstrap_field form.length %}
<span>Days: </span><output id="daysout">0</output>
<script>
document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
document.getElementById("daysout").value = document.getElementById("id_length").value;
</script>
</div>
</div>
<div class="col-12 col-lg-3 px-1 my-2">
<div class="col border rounded py-2 h-100">
<label>Collaborators</label>
{{ form.users }}
</div>
</div>
<div class="col-12 col-lg-3 px-1 my-2">
<div class="col border rounded py-2 h-100">
{% bootstrap_field form.hostname %}
{% bootstrap_field form.image %}
</div>
</div>
<div class="col-12 col-lg-3 px-1 my-2">
<div class="col border rounded py-2 h-100">
<strong>OPNFV: (Optional)</strong>
{% bootstrap_field form.installer %}
{% bootstrap_field form.scenario %}
</div>
</div>
<div class="col-12 d-flex px-0 mt-2 justify-content-end">
<button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
</div>
</div>
</div>
</form>
<script type="text/javascript">
function submit_form()
{
//formats data for form submission
multi_filter_widget.finish();
// Submit the form manually since confirm button is type="button" now
// due to the form submitting before the data was even created by finish()
document.getElementById("quick_booking_form").submit();
}
function hide_dropdown(drop_id) {
var drop = document.getElementById(drop_id);
//select 'blank' option
for( var i=0; i < drop.length; i++ )
{
if ( drop.options[i].text == '---------' )
drop.selectedIndex = i;
}
}
function get_selected_value(key){
for( var attr in multi_filter_widget.result[key] ){
if(!(attr in {}) )
return attr;
}
}
var sup_image_dict = {{image_filter | safe}};
var sup_installer_dict = {{installer_filter | safe}};
var sup_scenario_dict = {{scenario_filter | safe}};
function imageHider() {
var drop = document.getElementById("id_image");
hide_dropdown("id_image");
var lab_pk = get_selected_value("lab");
var host_pk = get_selected_value("host");
for (const childNode of drop.childNodes) {
var image_object = sup_image_dict[childNode.value];
if (image_object) //weed out empty option
{
if (image_object.host_profile == host_pk && image_object.lab == lab_pk) {
childNode.style.display = "inherit";
childNode.disabled = false;
}
}
}
}
imageHider();
$('#id_installer').children().hide();
$('#id_scenario').children().hide();
Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) {
element.addEventListener('click', imageHider);
});
function installerHider() {
dropFilter("id_installer", sup_installer_dict, "id_image");
scenarioHider();
}
document.getElementById('id_image').addEventListener('change', installerHider);
function scenarioHider() {
dropFilter("id_scenario", sup_scenario_dict, "id_installer");
}
document.getElementById('id_installer').addEventListener('change', scenarioHider);
function dropFilter(target, target_filter, master) {
var dropdown = document.getElementById(target);
hide_dropdown(target);
var drop = document.getElementById(master);
var opts = target_filter[drop.options[drop.selectedIndex].value];
if (!opts) {
opts = {};
}
var map = Object.create(null);
for (var i = 0; i < opts.length; i++) {
var j = opts[i];
map[j] = true;
}
for (var i = 0; i < dropdown.childNodes.length; i++) {
if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {})) {
dropdown.childNodes[i].style.display = "inherit";
dropdown.childNodes[i].disabled = false;
}
}
}
</script>
{% endblock %}
|
