diff options
Diffstat (limited to 'dashboard/src/templates/booking/quick_deploy.html')
-rw-r--r-- | dashboard/src/templates/booking/quick_deploy.html | 157 |
1 files changed, 69 insertions, 88 deletions
diff --git a/dashboard/src/templates/booking/quick_deploy.html b/dashboard/src/templates/booking/quick_deploy.html index 3837315..07f3d89 100644 --- a/dashboard/src/templates/booking/quick_deploy.html +++ b/dashboard/src/templates/booking/quick_deploy.html @@ -1,6 +1,6 @@ {% extends "base.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %} <style> .grid_container { @@ -9,8 +9,8 @@ padding: 30px; } .grid_element { - border-radius: 3px; - box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75); + border-radius: 5px; + border: 1px solid #ccc; margin: 10px; padding: 7px; } @@ -26,6 +26,23 @@ .grid_element_2third { grid-column-start: span 8; } + .collaborator_pane { + display: flex; + flex-direction: column; + } + #id_length { + -moz-appearance: none; + border: none; + box-shadow: none; + } + + input[type=range]::-moz-range-track { + background: #cccccc; + } + + .grid_element { + overflow: hidden; + } </style> {% bootstrap_form_errors form type='non_fields' %} <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form"> @@ -33,7 +50,7 @@ <div class="grid_container"> <div class="grid_element host_select_pane grid_element_wide"> <p>Please select a host type you wish to book. Only available types are shown.</p> -{% bootstrap_field form.filter_field %} +{% bootstrap_field form.filter_field show_label=False %} </div> <div class="grid_element booking_info_pane grid_element_1third"> {% bootstrap_field form.purpose %} @@ -49,41 +66,49 @@ <label>Collaborators</label> {{ form.users }} </div> -<div class="grid_element configuration_pane grid_element_1third"> - {% bootstrap_field form.hostname %} - {% bootstrap_field form.image %} - {% bootstrap_field form.installer %} - {% bootstrap_field form.scenario %} +<div class="grid_element_1third"> + <div class="configuration_pane grid_element"> + {% bootstrap_field form.hostname %} + {% bootstrap_field form.image %} + </div> + <div class="configuration_pane grid_element"> + <strong>OPNFV: (Optional)</strong> + {% bootstrap_field form.installer %} + {% bootstrap_field form.scenario %} + </div> </div> </div> <script type="text/javascript"> - var normalize = function(data) + + function submit_form() { - //converts the top level keys in data to map to lists - var normalized = {} - for( var key in data ){ - normalized[key] = []; - for( var subkey in data[key] ){ - normalized[key].push(data[key][subkey]); - } - } - return normalized; + //formats data for form submission + multi_filter_widget.finish(); } - var update_page_contents = function(response) - { - document.open(); - document.write(response); - document.close(); + + 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; + } + + //cross browser hide children + $('#id_image').children().hide(); + for( var i = 0; i < drop.childNodes.length; i++ ) + { + drop.childNodes[i].disabled = true; // closest we can get on safari to hiding it outright + } } - //form hamdler code - submit_form = function() - { - //altered from initial prototype: form submits automatically, - //but needs formatting for multiple select field - var data = normalize(result); - data = JSON.stringify(data); - document.getElementById("filter_field").value = data; + function get_selected_value(key){ + for( var attr in multi_filter_widget.result[key] ){ + if(!(attr in {}) ) + return attr; + } + return null; } var sup_image_dict = {{ image_filter|safe }}; @@ -91,46 +116,28 @@ var sup_scenario_dict = {{ scenario_filter|safe }}; function imageHider() { - var data = normalize(result); var drop = document.getElementById("id_image"); - for( var i=0; i < drop.length; i++ ) - { - if ( drop.options[i].text == '---------' ) - { - drop.selectedIndex = i; - } - } - $('#id_image').children().hide(); + hide_dropdown("id_image"); - var empty_map = {} + var lab_pk = get_selected_value("lab"); + var host_pk = get_selected_value("host"); for ( var i=0; i < drop.childNodes.length; i++ ) { var image_object = sup_image_dict[drop.childNodes[i].value]; if( image_object ) //weed out empty option { - var lab_pk = "" - for( var j in data["labs"][0] ) - { - if( j in {} ) { continue; } - else { lab_pk = j; break; } - } - var host_pk = ""; - for( var j in data["hosts"][0] ) - { - if( j in {} ) { continue; } - else { host_pk = j; break; } - } if( image_object.host_profile == host_pk && image_object.lab == lab_pk ) { drop.childNodes[i].style.display = "inherit"; + drop.childNodes[i].disabled = false; } } } } - $('#id_image').children().hide(); + imageHider(); $('#id_installer').children().hide(); $('#id_scenario').children().hide(); @@ -151,22 +158,15 @@ document.getElementById('id_installer').addEventListener('change', scenarioHider); function dropFilter(target, target_filter, master) { - ob = document.getElementById(target); + var dropdown = document.getElementById(target); - for(var i=0; i<ob.options.length; i++) { - if ( ob.options[i].text == '---------' ) { - ob.selectedIndex = i; - } - } + hide_dropdown(target); - targ_id = "#" + target; - $(targ_id).children().hide(); var drop = document.getElementById(master); var opts = target_filter[drop.options[drop.selectedIndex].value]; if (!opts) { opts = {}; } - var emptyMap = {} var map = Object.create(null); for (var i = 0; i < opts.length; i++) { @@ -174,33 +174,14 @@ map[j] = true; } - for (var i = 0; i < document.getElementById(target).childNodes.length; i++) { - if (document.getElementById(target).childNodes[i].value in opts && !(document.getElementById(target).childNodes[i].value in emptyMap) ) { - document.getElementById(target).childNodes[i].style.display = "inherit"; + 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> - <button onclick="submit_form();" class="btn btn-success">Confirm</button> + <button id="quick_booking_confirm" onclick="submit_form();" class="btn btn-success">Confirm</button> </form> -<script> - //context vars - var prefill_host_selection = "{{host_select_field_prefill_data|default:""|safe}}"; - var prefill_purpose = "{{prefill_purpose|default:""|safe}}"; - var prefill_project = "{{prefill_project|default:""|safe}}"; - var prefill_hostname = "{{prefill_hostname|default:""|safe}}"; - - //to handle prefill - function prefill_host_select_field(data) - { - // - if(data) - { - make_selection(data); - } - } - - //call init functions - prefill_host_select_field(prefill_host_selection); -</script> {% endblock %} |