src/templates/booking/quick_deploy.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3 {% load bootstrap4 %}
   4 {% block content %}
   5
   6 {% bootstrap_form_errors form type='non_fields' %}
   7 <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
   8     {% csrf_token %}
   9     <div class="container-fluid">
  10         <div class="row">
  11             <div class="col-12 px-1 my-2">
  12                 <div class="col py-2 rounded border">
  13                     <p>Please select a host type you wish to book. Only available types are shown.</p>
  14                     {% bootstrap_field form.filter_field show_label=False %}
  15                 </div>
  16             </div>
  17             <div class="col-12 col-lg-3 px-1 my-2">
  18                 <div class="col border rounded py-2 h-100">
  19                     {% bootstrap_field form.purpose %}
  20                     {% bootstrap_field form.project %}
  21                     {% bootstrap_field form.length %}
  22                     <span>Days: </span><output id="daysout">0</output>
  23                     <script>
  24                         document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
  25                         document.getElementById("daysout").value = document.getElementById("id_length").value;
  26                     </script>
  27                 </div>
  28             </div>
  29             <div class="col-12 col-lg-3 px-1 my-2">
  30                 <div class="col border rounded py-2 h-100">
  31                     <label>Collaborators</label>
  32                     {{ form.users }}
  33                 </div>
  34             </div>
  35             <div class="col-12 col-lg-3 px-1 my-2">
  36                 <div class="col border rounded py-2 h-100">
  37                     {% bootstrap_field form.hostname %}
  38                     {% bootstrap_field form.image %}
  39                 </div>
  40             </div>
  41             <div class="col-12 col-lg-3 px-1 my-2">
  42                 <div class="col border rounded py-2 h-100">
  43                     <strong>OPNFV: (Optional)</strong>
  44                     {% bootstrap_field form.installer %}
  45                     {% bootstrap_field form.scenario %}
  46                 </div>
  47             </div>
  48             <div class="col-12 d-flex px-0 mt-2 justify-content-end">
  49                 <button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
  50             </div>
  51         </div>
  52     </div>
  53 </form>
  54
  55 <script type="text/javascript">
  56     function submit_form()
  57     {
  58         //formats data for form submission
  59         multi_filter_widget.finish();
  60         // Submit the form manually since confirm button is type="button" now
  61         // due to the form submitting before the data was even created by finish()
  62         document.getElementById("quick_booking_form").submit();
  63     }
  64
  65     function hide_dropdown(drop_id) {
  66         var drop = document.getElementById(drop_id);
  67         //select 'blank' option
  68         for( var i=0; i < drop.length; i++ )
  69         {
  70             if ( drop.options[i].text == '---------' )
  71                 drop.selectedIndex = i;
  72         }
  73     }
  74
  75     function get_selected_value(key){
  76         for( var attr in multi_filter_widget.result[key] ){
  77             if(!(attr in {}) )
  78                 return attr;
  79         }
  80     }
  81
  82     var sup_image_dict = {{image_filter | safe}};
  83     var sup_installer_dict = {{installer_filter | safe}};
  84     var sup_scenario_dict = {{scenario_filter | safe}};
  85
  86     function imageHider() {
  87         var drop = document.getElementById("id_image");
  88
  89         hide_dropdown("id_image");
  90
  91         var lab_pk = get_selected_value("lab");
  92         var host_pk = get_selected_value("host");
  93
  94         for (const childNode of drop.childNodes) {
  95             var image_object = sup_image_dict[childNode.value];
  96             if (image_object) //weed out empty option
  97             {
  98                 if (image_object.host_profile == host_pk && image_object.lab == lab_pk) {
  99                     childNode.style.display = "inherit";
 100                     childNode.disabled = false;
 101                 }
 102             }
 103         }
 104     }
 105
 106     imageHider();
 107     $('#id_installer').children().hide();
 108     $('#id_scenario').children().hide();
 109
 110
 111     Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) {
 112         element.addEventListener('click', imageHider);
 113     });
 114
 115     function installerHider() {
 116         dropFilter("id_installer", sup_installer_dict, "id_image");
 117         scenarioHider();
 118     }
 119     document.getElementById('id_image').addEventListener('change', installerHider);
 120
 121     function scenarioHider() {
 122         dropFilter("id_scenario", sup_scenario_dict, "id_installer");
 123     }
 124     document.getElementById('id_installer').addEventListener('change', scenarioHider);
 125
 126     function dropFilter(target, target_filter, master) {
 127         var dropdown = document.getElementById(target);
 128
 129         hide_dropdown(target);
 130
 131         var drop = document.getElementById(master);
 132         var opts = target_filter[drop.options[drop.selectedIndex].value];
 133         if (!opts) {
 134             opts = {};
 135         }
 136
 137         var map = Object.create(null);
 138         for (var i = 0; i < opts.length; i++) {
 139             var j = opts[i];
 140             map[j] = true;
 141         }
 142
 143         for (var i = 0; i < dropdown.childNodes.length; i++) {
 144             if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {})) {
 145                 dropdown.childNodes[i].style.display = "inherit";
 146                 dropdown.childNodes[i].disabled = false;
 147             }
 148         }
 149     }
 150 </script>
 151 {% endblock %}