1 {% extends "base.html" %}
6 {% bootstrap_form_errors form type='non_fields' %}
7 <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
9 <div class="container-fluid">
11 <div class="col-12 px-1 my-2">
12 <div class="col py-2 rounded border">
13 <p>Please select a host type you wish to book. Only available types are shown.</p>
14 {% bootstrap_field form.filter_field show_label=False %}
17 <div class="col-12 col-lg-3 px-1 my-2">
18 <div class="col border rounded py-2 h-100">
19 {% bootstrap_field form.purpose %}
20 {% bootstrap_field form.project %}
21 {% bootstrap_field form.length %}
22 <span>Days: </span><output id="daysout">0</output>
24 document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
25 document.getElementById("daysout").value = document.getElementById("id_length").value;
29 <div class="col-12 col-lg-3 px-1 my-2">
30 <div class="col border rounded py-2 h-100">
31 <label>Collaborators</label>
35 <div class="col-12 col-lg-3 px-1 my-2">
36 <div class="col border rounded py-2 h-100">
37 {% bootstrap_field form.hostname %}
38 {% bootstrap_field form.image %}
41 <div class="col-12 col-lg-3 px-1 my-2">
42 <div class="col border rounded py-2 h-100">
43 <strong>OPNFV: (Optional)</strong>
44 {% bootstrap_field form.installer %}
45 {% bootstrap_field form.scenario %}
48 <div class="col-12 d-flex px-0 mt-2 justify-content-end">
49 <button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
55 <script type="text/javascript">
56 function submit_form()
58 //formats data for form submission
59 multi_filter_widget.finish();
60 // Submit the form manually since confirm button is type="button" now
61 // due to the form submitting before the data was even created by finish()
62 document.getElementById("quick_booking_form").submit();
65 function hide_dropdown(drop_id) {
66 var drop = document.getElementById(drop_id);
67 //select 'blank' option
68 for( var i=0; i < drop.length; i++ )
70 if ( drop.options[i].text == '---------' )
71 drop.selectedIndex = i;
75 function get_selected_value(key){
76 for( var attr in multi_filter_widget.result[key] ){
82 var sup_image_dict = {{image_filter | safe}};
83 var sup_installer_dict = {{installer_filter | safe}};
84 var sup_scenario_dict = {{scenario_filter | safe}};
86 function imageHider() {
87 var drop = document.getElementById("id_image");
89 hide_dropdown("id_image");
91 var lab_pk = get_selected_value("lab");
92 var host_pk = get_selected_value("host");
94 for (const childNode of drop.childNodes) {
95 var image_object = sup_image_dict[childNode.value];
96 if (image_object) //weed out empty option
98 if (image_object.host_profile == host_pk && image_object.lab == lab_pk) {
99 childNode.style.display = "inherit";
100 childNode.disabled = false;
107 $('#id_installer').children().hide();
108 $('#id_scenario').children().hide();
111 Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) {
112 element.addEventListener('click', imageHider);
115 function installerHider() {
116 dropFilter("id_installer", sup_installer_dict, "id_image");
119 document.getElementById('id_image').addEventListener('change', installerHider);
121 function scenarioHider() {
122 dropFilter("id_scenario", sup_scenario_dict, "id_installer");
124 document.getElementById('id_installer').addEventListener('change', scenarioHider);
126 function dropFilter(target, target_filter, master) {
127 var dropdown = document.getElementById(target);
129 hide_dropdown(target);
131 var drop = document.getElementById(master);
132 var opts = target_filter[drop.options[drop.selectedIndex].value];
137 var map = Object.create(null);
138 for (var i = 0; i < opts.length; i++) {
143 for (var i = 0; i < dropdown.childNodes.length; i++) {
144 if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {})) {
145 dropdown.childNodes[i].style.display = "inherit";
146 dropdown.childNodes[i].disabled = false;