dashboard/src/templates/booking/quick_deploy.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3 {% load bootstrap4 %}
   4 {% block content %}
   5 <style>
   6     .grid_container {
   7         display: grid;
   8         grid-template-columns: repeat(12, 1fr);
   9         padding: 30px;
  10     }
  11     .grid_element {
  12         border-radius: 5px;
  13         border: 1px solid #ccc;
  14         margin: 10px;
  15         padding: 7px;
  16     }
  17     .grid_element_wide {
  18         grid-column-start: span 12;
  19     }
  20     .grid_element_half {
  21         grid-column-start: span 6;
  22     }
  23     .grid_element_1third {
  24         grid-column-start: span 4;
  25     }
  26     .grid_element_2third {
  27         grid-column-start: span 8;
  28     }
  29     .collaborator_pane {
  30         display: flex;
  31         flex-direction: column;
  32     }
  33     #id_length {
  34         -moz-appearance: none;
  35         border: none;
  36         box-shadow: none;
  37     }
  38
  39     input[type=range]::-moz-range-track {
  40         background: #cccccc;
  41     }
  42
  43     .grid_element {
  44         overflow: hidden;
  45     }
  46 </style>
  47 {% bootstrap_form_errors form type='non_fields' %}
  48 <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
  49 {% csrf_token %}
  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 %}
  54 </div>
  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>
  60     <script>
  61         document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
  62         document.getElementById("daysout").value = document.getElementById("id_length").value;
  63     </script>
  64 </div>
  65 <div class="grid_element collaborator_pane grid_element_1third">
  66         <label>Collaborators</label>
  67         {{ form.users }}
  68 </div>
  69 <div class="grid_element_1third">
  70     <div class="configuration_pane grid_element">
  71         {% bootstrap_field form.hostname %}
  72         {% bootstrap_field form.image %}
  73     </div>
  74     <div class="configuration_pane grid_element">
  75         <strong>OPNFV: (Optional)</strong>
  76         {% bootstrap_field form.installer %}
  77         {% bootstrap_field form.scenario %}
  78     </div>
  79 </div>
  80 </div>
  81 <script type="text/javascript">
  82
  83     function submit_form()
  84     {
  85         //formats data for form submission
  86         multi_filter_widget.finish();
  87     }
  88
  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++ )
  93         {
  94             if ( drop.options[i].text == '---------' )
  95                 drop.selectedIndex = i;
  96         }
  97
  98         //cross browser hide children
  99         $('#id_image').children().hide();
 100         for( var i = 0; i < drop.childNodes.length; i++ )
 101         {
 102             drop.childNodes[i].disabled = true; // closest we can get on safari to hiding it outright
 103         }
 104     }
 105
 106     function get_selected_value(key){
 107         for( var attr in multi_filter_widget.result[key] ){
 108             if(!(attr in {}) )
 109                 return attr;
 110         }
 111         return null;
 112     }
 113
 114     var sup_image_dict = {{ image_filter|safe }};
 115     var sup_installer_dict = {{ installer_filter|safe }};
 116     var sup_scenario_dict = {{ scenario_filter|safe }};
 117
 118     function imageHider() {
 119         var drop = document.getElementById("id_image");
 120
 121         hide_dropdown("id_image");
 122
 123         var lab_pk = get_selected_value("lab");
 124         var host_pk = get_selected_value("host");
 125
 126         for ( var i=0; i < drop.childNodes.length; i++ )
 127         {
 128             var image_object = sup_image_dict[drop.childNodes[i].value];
 129             if( image_object ) //weed out empty option
 130             {
 131                 if( image_object.host_profile == host_pk && image_object.lab == lab_pk )
 132                 {
 133                     drop.childNodes[i].style.display = "inherit";
 134                     drop.childNodes[i].disabled = false;
 135                 }
 136             }
 137         }
 138     }
 139
 140     imageHider();
 141     $('#id_installer').children().hide();
 142     $('#id_scenario').children().hide();
 143
 144
 145     Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) {
 146         element.addEventListener('click', imageHider);
 147     });
 148
 149     function installerHider() {
 150         dropFilter("id_installer", sup_installer_dict, "id_image");
 151         scenarioHider();
 152     }
 153     document.getElementById('id_image').addEventListener('change', installerHider);
 154
 155     function scenarioHider() {
 156         dropFilter("id_scenario", sup_scenario_dict, "id_installer");
 157     }
 158     document.getElementById('id_installer').addEventListener('change', scenarioHider);
 159
 160     function dropFilter(target, target_filter, master) {
 161         var dropdown = document.getElementById(target);
 162
 163         hide_dropdown(target);
 164
 165         var drop = document.getElementById(master);
 166         var opts = target_filter[drop.options[drop.selectedIndex].value];
 167         if (!opts) {
 168             opts = {};
 169         }
 170
 171         var map = Object.create(null);
 172         for (var i = 0; i < opts.length; i++) {
 173             var j = opts[i];
 174             map[j] = true;
 175         }
 176
 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;
 181             }
 182         }
 183     }
 184 </script>
 185     <button id="quick_booking_confirm" onclick="submit_form();" class="btn btn-success">Confirm</button>
 186 </form>
 187 {% endblock %}