1 {% extends "base.html" %}
8 grid-template-columns: repeat(12, 1fr);
13 box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
18 grid-column-start: span 12;
21 grid-column-start: span 6;
23 .grid_element_1third {
24 grid-column-start: span 4;
26 .grid_element_2third {
27 grid-column-start: span 8;
30 {% bootstrap_form_errors form type='non_fields' %}
31 <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
33 <div class="grid_container">
34 <div class="grid_element host_select_pane grid_element_wide">
35 <p>Please select a host type you wish to book. Only available types are shown.</p>
36 {% bootstrap_field form.filter_field %}
38 <div class="grid_element booking_info_pane grid_element_1third">
39 {% bootstrap_field form.purpose %}
40 {% bootstrap_field form.project %}
41 {% bootstrap_field form.length %}
42 <p style="display:inline;">Days: </p><output id="daysout" style="display:inline;">0</output>
44 document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
45 document.getElementById("daysout").value = document.getElementById("id_length").value;
48 <div class="grid_element collaborator_pane grid_element_1third">
49 <label>Collaborators</label>
52 <div class="grid_element configuration_pane grid_element_1third">
53 {% bootstrap_field form.hostname %}
54 {% bootstrap_field form.image %}
55 {% bootstrap_field form.installer %}
56 {% bootstrap_field form.scenario %}
59 <script type="text/javascript">
60 var normalize = function(data)
62 //converts the top level keys in data to map to lists
64 for( var key in data ){
66 for( var subkey in data[key] ){
67 normalized[key].push(data[key][subkey]);
72 var update_page_contents = function(response)
75 document.write(response);
80 submit_form = function()
82 //altered from initial prototype: form submits automatically,
83 //but needs formatting for multiple select field
84 var data = normalize(result);
85 data = JSON.stringify(data);
86 document.getElementById("filter_field").value = data;
89 var sup_image_dict = {{ image_filter|safe }};
90 var sup_installer_dict = {{ installer_filter|safe }};
91 var sup_scenario_dict = {{ scenario_filter|safe }};
93 function imageHider() {
94 var data = normalize(result);
95 var drop = document.getElementById("id_image");
96 for( var i=0; i < drop.length; i++ )
98 if ( drop.options[i].text == '---------' )
100 drop.selectedIndex = i;
104 $('#id_image').children().hide();
108 for ( var i=0; i < drop.childNodes.length; i++ )
110 var image_object = sup_image_dict[drop.childNodes[i].value];
111 if( image_object ) //weed out empty option
114 for( var j in data["labs"][0] )
116 if( j in {} ) { continue; }
117 else { lab_pk = j; break; }
120 for( var j in data["hosts"][0] )
122 if( j in {} ) { continue; }
123 else { host_pk = j; break; }
125 if( image_object.host_profile == host_pk && image_object.lab == lab_pk )
127 drop.childNodes[i].style.display = "inherit";
133 $('#id_image').children().hide();
134 $('#id_installer').children().hide();
135 $('#id_scenario').children().hide();
138 Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) {
139 element.addEventListener('click', imageHider);
142 function installerHider() {
143 dropFilter("id_installer", sup_installer_dict, "id_image");
146 document.getElementById('id_image').addEventListener('change', installerHider);
148 function scenarioHider() {
149 dropFilter("id_scenario", sup_scenario_dict, "id_installer");
151 document.getElementById('id_installer').addEventListener('change', scenarioHider);
153 function dropFilter(target, target_filter, master) {
154 ob = document.getElementById(target);
156 for(var i=0; i<ob.options.length; i++) {
157 if ( ob.options[i].text == '---------' ) {
158 ob.selectedIndex = i;
162 targ_id = "#" + target;
163 $(targ_id).children().hide();
164 var drop = document.getElementById(master);
165 var opts = target_filter[drop.options[drop.selectedIndex].value];
171 var map = Object.create(null);
172 for (var i = 0; i < opts.length; i++) {
177 for (var i = 0; i < document.getElementById(target).childNodes.length; i++) {
178 if (document.getElementById(target).childNodes[i].value in opts && !(document.getElementById(target).childNodes[i].value in emptyMap) ) {
179 document.getElementById(target).childNodes[i].style.display = "inherit";
184 <button onclick="submit_form();" class="btn btn-success">Confirm</button>
188 var prefill_host_selection = "{{host_select_field_prefill_data|default:""|safe}}";
189 var prefill_purpose = "{{prefill_purpose|default:""|safe}}";
190 var prefill_project = "{{prefill_project|default:""|safe}}";
191 var prefill_hostname = "{{prefill_hostname|default:""|safe}}";
194 function prefill_host_select_field(data)
199 make_selection(data);
203 //call init functions
204 prefill_host_select_field(prefill_host_selection);