--- /dev/null
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load bootstrap3 %}
+{% block content %}
+<style>
+ .grid_container {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ padding: 30px;
+ }
+ .grid_element {
+ border-radius: 3px;
+ box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
+ margin: 10px;
+ padding: 7px;
+ }
+ .grid_element_wide {
+ grid-column-start: span 12;
+ }
+ .grid_element_half {
+ grid-column-start: span 6;
+ }
+ .grid_element_1third {
+ grid-column-start: span 4;
+ }
+ .grid_element_2third {
+ grid-column-start: span 8;
+ }
+</style>
+{% bootstrap_form_errors form type='non_fields' %}
+<form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
+{% csrf_token %}
+<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 %}
+</div>
+<div class="grid_element booking_info_pane grid_element_1third">
+ {% bootstrap_field form.purpose %}
+ {% bootstrap_field form.project %}
+ {% bootstrap_field form.length %}
+ <p style="display:inline;">Days: </p><output id="daysout" style="display:inline;">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 class="grid_element collaborator_pane grid_element_1third">
+ <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>
+</div>
+<script type="text/javascript">
+ var normalize = function(data)
+ {
+ //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;
+ }
+ var update_page_contents = function(response)
+ {
+ document.open();
+ document.write(response);
+ document.close();
+ }
+
+ //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;
+ }
+
+ var sup_image_dict = {{ image_filter|safe }};
+ var sup_installer_dict = {{ installer_filter|safe }};
+ 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();
+
+ var empty_map = {}
+
+ 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";
+ }
+ }
+ }
+ }
+
+ $('#id_image').children().hide();
+ $('#id_installer').children().hide();
+ $('#id_scenario').children().hide();
+
+
+ Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) {
+ element.addEventListener('click', imageHider);
+ });
+
+ 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) {
+ ob = document.getElementById(target);
+
+ for(var i=0; i<ob.options.length; i++) {
+ if ( ob.options[i].text == '---------' ) {
+ ob.selectedIndex = i;
+ }
+ }
+
+ 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++) {
+ var j = opts[i];
+ 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";
+ }
+ }
+ }
+</script>
+ <button 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 %}
Code Review / pharos-tools.git / blobdiff