{% extends "base.html" %} {% load staticfiles %} {% load bootstrap4 %} {% block content %} <style> /* hides images not in use. Not applied globally since doesn't make sense in all cases */ select option:disabled { display:none; } </style> {% bootstrap_form_errors form type='non_fields' %} <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form class="Anuket-Text""> {% csrf_token %} <div class="row mx-0 px-0"> <div class="col-12 mx-0 px-0 mt-2"> {% block form-text %} <p class="my-0"> Please select a host type you wish to book. Only available types are shown. If something isn't working right, let us know <a href="mailto:{{contact_email}}"> here! </a> </p> {% endblock form-text %} {% bootstrap_field form.filter_field show_label=False %} </div> </div> <div class="row justify-content-center"> <div class="col-12 col-lg-6 my-2"> <div class="col border rounded py-2 h-100"> {% bootstrap_field form.purpose %} {% bootstrap_field form.project %} {% bootstrap_field form.length %} <span>Days: </span><output id="daysout">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> {% block collab %} <div class="col-12 col-lg-6 my-2"> <div class="col border rounded py-2 h-100"> <label>Collaborators</label> {{ form.users }} </div> </div> {% endblock collab %} </div> <div class="row justify-content-center"> <div class="col-12 col-lg-6 my-2"> <div class="col border rounded py-2 h-100"> {% bootstrap_field form.hostname %} {% bootstrap_field form.image %} </div> </div> <div class="col-12 col-lg-6 my-2"> <div class="col border rounded py-2 h-100"> {% bootstrap_field form.global_cloud_config %} </div> </div> <div class="col-12 d-flex mt-2 justify-content-end"> <button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button> </div> </div> </form> {% block image_script %} {% endblock image_script %} <script type="text/javascript"> function submit_form() { run_form_callbacks(); document.getElementById("quick_booking_form").submit(); } 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; } } function get_selected_value(key){ for( var attr in multi_filter_widget.result[key] ){ if(!(attr in {}) ) return attr; } } $(document).ready(function() { $('.has-popover').popover({'trigger':'hover'}); }); var sup_image_dict = {{image_filter | safe}}; var sup_installer_dict = {{installer_filter | safe}}; var sup_scenario_dict = {{scenario_filter | safe}}; var resource_profile_map = {{resource_profile_map | safe}}; function imageFilter() { var drop = document.getElementById("id_image"); var lab_pk = get_selected_value("lab"); var profile_pk = get_selected_value("resource"); for (const childNode of drop.childNodes) { var image_object = sup_image_dict[childNode.value]; if (image_object) //weed out empty option { console.log("image object:"); console.log(image_object); const img_at_lab = image_object.lab == lab_pk; const profiles = resource_profile_map[profile_pk]; console.log("profiles are:"); console.log(profiles); console.log("profile map is:"); console.log(resource_profile_map); console.log("host profile is" + image_object.architecture); const img_in_template = profiles && profiles.indexOf(image_object.architecture) > -1 childNode.disabled = !img_at_lab || !img_in_template; } } } imageFilter(); Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) { element.addEventListener('click', imageFilter); }); function dropFilter(target, target_filter, master) { var dropdown = document.getElementById(target); hide_dropdown(target); var drop = document.getElementById(master); var opts = target_filter[drop.options[drop.selectedIndex].value]; if (!opts) { opts = {}; } 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 < 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> {% endblock %}