blob: 8570f25ad332505c3eb7e39c3544ab4ee43da3b8 (
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
|
{% 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="row mx-0 px-0">
<div class="col-12 mx-0 px-0 mt-2">
<p class="my-0">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="row">
<div class="col-12 col-lg-3 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 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 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 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 mt-2 justify-content-end">
<button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
</div>
</div>
</form>
<script type="text/javascript">
function submit_form()
{
run_form_callbacks();
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 imageFilter() {
var drop = document.getElementById("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
{
childNode.disabled = !(image_object.host_profile == host_pk && image_object.lab == lab_pk);
}
}
}
imageFilter();
$('#id_installer').children().hide();
$('#id_scenario').children().hide();
Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) {
element.addEventListener('click', imageFilter);
});
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 %}
|
