1 {% extends "base.html" %}
8 grid-template-columns: repeat(12, 1fr);
13 border: 1px solid #ccc;
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;
31 flex-direction: column;
34 -moz-appearance: none;
39 input[type=range]::-moz-range-track {
47 {% bootstrap_form_errors form type='non_fields' %}
48 <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
50 <div class="grid_container">
51 <div class="grid_element host_select_pane grid_element_wide">
52 <p>Please select a host type you wish to book. Only available types are shown.</p>
53 {% bootstrap_field form.filter_field show_label=False %}
55 <div class="grid_element booking_info_pane grid_element_1third">
56 {% bootstrap_field form.purpose %}
57 {% bootstrap_field form.project %}
58 {% bootstrap_field form.length %}
59 <p style="display:inline;">Days: </p><output id="daysout" style="display:inline;">0</output>
61 document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
62 document.getElementById("daysout").value = document.getElementById("id_length").value;
65 <div class="grid_element collaborator_pane grid_element_1third">
66 <label>Collaborators</label>
69 <div class="grid_element_1third">
70 <div class="configuration_pane grid_element">
71 {% bootstrap_field form.hostname %}
72 {% bootstrap_field form.image %}
74 <div class="configuration_pane grid_element">
75 <strong>OPNFV: (Optional)</strong>
76 {% bootstrap_field form.installer %}
77 {% bootstrap_field form.scenario %}
81 <script type="text/javascript">
83 function submit_form()
85 //formats data for form submission
86 multi_filter_widget.finish();
89 function hide_dropdown(drop_id) {
90 var drop = document.getElementById(drop_id);
91 //select 'blank' option
92 for( var i=0; i < drop.length; i++ )
94 if ( drop.options[i].text == '---------' )
95 drop.selectedIndex = i;
98 //cross browser hide children
99 $('#id_image').children().hide();
100 for( var i = 0; i < drop.childNodes.length; i++ )
102 drop.childNodes[i].disabled = true; // closest we can get on safari to hiding it outright
106 function get_selected_value(key){
107 for( var attr in multi_filter_widget.result[key] ){
114 var sup_image_dict = {{ image_filter|safe }};
115 var sup_installer_dict = {{ installer_filter|safe }};
116 var sup_scenario_dict = {{ scenario_filter|safe }};
118 function imageHider() {
119 var drop = document.getElementById("id_image");
121 hide_dropdown("id_image");
123 var lab_pk = get_selected_value("lab");
124 var host_pk = get_selected_value("host");
126 for ( var i=0; i < drop.childNodes.length; i++ )
128 var image_object = sup_image_dict[drop.childNodes[i].value];
129 if( image_object ) //weed out empty option
131 if( image_object.host_profile == host_pk && image_object.lab == lab_pk )
133 drop.childNodes[i].style.display = "inherit";
134 drop.childNodes[i].disabled = false;
141 $('#id_installer').children().hide();
142 $('#id_scenario').children().hide();
145 Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) {
146 element.addEventListener('click', imageHider);
149 function installerHider() {
150 dropFilter("id_installer", sup_installer_dict, "id_image");
153 document.getElementById('id_image').addEventListener('change', installerHider);
155 function scenarioHider() {
156 dropFilter("id_scenario", sup_scenario_dict, "id_installer");
158 document.getElementById('id_installer').addEventListener('change', scenarioHider);
160 function dropFilter(target, target_filter, master) {
161 var dropdown = document.getElementById(target);
163 hide_dropdown(target);
165 var drop = document.getElementById(master);
166 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 < dropdown.childNodes.length; i++) {
178 if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {}) ) {
179 dropdown.childNodes[i].style.display = "inherit";
180 dropdown.childNodes[i].disabled = false;
185 <button id="quick_booking_confirm" onclick="submit_form();" class="btn btn-success">Confirm</button>