dashboard/src/templates/booking/quick_deploy.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3 {% load bootstrap3 %}
   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     var normalize = function(data)
  83     {
  84         //converts the top level keys in data to map to lists
  85         var normalized = {}
  86         for( var key in data ){
  87             normalized[key] = [];
  88             for( var subkey in data[key] ){
  89                 normalized[key].push(data[key][subkey]);
  90             }
  91         }
  92         return normalized;
  93     }
  94     var update_page_contents = function(response)
  95     {
  96         document.open();
  97         document.write(response);
  98         document.close();
  99     }
 100
 101     //form hamdler code
 102     submit_form = function()
 103     {
 104         //altered from initial prototype: form submits automatically,
 105         //but needs formatting for multiple select field
 106         var data = normalize(result);
 107         data = JSON.stringify(data);
 108         document.getElementById("filter_field").value = data;
 109     }
 110
 111     var sup_image_dict = {{ image_filter|safe }};
 112     var sup_installer_dict = {{ installer_filter|safe }};
 113     var sup_scenario_dict = {{ scenario_filter|safe }};
 114
 115     function imageHider() {
 116         var data = normalize(result);
 117         var drop = document.getElementById("id_image");
 118         for( var i=0; i < drop.length; i++ )
 119         {
 120             if ( drop.options[i].text == '---------' )
 121             {
 122                 drop.selectedIndex = i;
 123             }
 124         }
 125
 126         $('#id_image').children().hide();
 127
 128         for( var i = 0; i < drop.childNodes.length; i++ )
 129         {
 130             drop.childNodes[i].disabled = true; // closest we can get on safari to hiding it outright
 131         }
 132
 133
 134         var empty_map = {}
 135
 136         for ( var i=0; i < drop.childNodes.length; i++ )
 137         {
 138             var image_object = sup_image_dict[drop.childNodes[i].value];
 139             if( image_object ) //weed out empty option
 140             {
 141                 var lab_pk = ""
 142                 for( var j in data["labs"][0] )
 143                 {
 144                     if( j in {} ) { continue; }
 145                     else { lab_pk = j; break; }
 146                 }
 147                 var host_pk = "";
 148                 for( var j in data["hosts"][0] )
 149                 {
 150                     if( j in {} ) { continue; }
 151                     else { host_pk = j; break; }
 152                 }
 153                 if( image_object.host_profile == host_pk && image_object.lab == lab_pk )
 154                 {
 155                     drop.childNodes[i].style.display = "inherit";
 156                     drop.childNodes[i].disabled = false;
 157                 }
 158             }
 159         }
 160     }
 161
 162     imageHider();
 163     $('#id_installer').children().hide();
 164     $('#id_scenario').children().hide();
 165
 166
 167     Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) {
 168         element.addEventListener('click', imageHider);
 169     });
 170
 171     function installerHider() {
 172         dropFilter("id_installer", sup_installer_dict, "id_image");
 173         scenarioHider();
 174     }
 175     document.getElementById('id_image').addEventListener('change', installerHider);
 176
 177     function scenarioHider() {
 178         dropFilter("id_scenario", sup_scenario_dict, "id_installer");
 179     }
 180     document.getElementById('id_installer').addEventListener('change', scenarioHider);
 181
 182     function dropFilter(target, target_filter, master) {
 183         ob = document.getElementById(target);
 184
 185         for(var i=0; i<ob.options.length; i++) {
 186             if ( ob.options[i].text == '---------' ) {
 187                 ob.selectedIndex = i;
 188                 }
 189         }
 190
 191         targ_id = "#" + target;
 192
 193         $(targ_id).children().hide();
 194
 195         for (var i = 0; i < document.getElementById(target).childNodes.length; i++)
 196         {
 197             document.getElementById(target).childNodes[i].disabled = true;
 198         }
 199         var drop = document.getElementById(master);
 200         var opts = target_filter[drop.options[drop.selectedIndex].value];
 201         if (!opts) {
 202             opts = {};
 203         }
 204         var emptyMap = {}
 205
 206         var map = Object.create(null);
 207         for (var i = 0; i < opts.length; i++) {
 208             var j = opts[i];
 209             map[j] = true;
 210         }
 211
 212         for (var i = 0; i < document.getElementById(target).childNodes.length; i++) {
 213             if (document.getElementById(target).childNodes[i].value in opts && !(document.getElementById(target).childNodes[i].value in emptyMap) ) {
 214                 document.getElementById(target).childNodes[i].style.display = "inherit";
 215                 document.getElementById(target).childNodes[i].disabled = false;
 216             }
 217         }
 218     }
 219 </script>
 220     <button id="quick_booking_confirm" onclick="submit_form();" class="btn btn-success">Confirm</button>
 221 </form>
 222 <script>
 223     //context vars
 224     var prefill_host_selection = "{{host_select_field_prefill_data|default:""|safe}}";
 225     var prefill_purpose = "{{prefill_purpose|default:""|safe}}";
 226     var prefill_project = "{{prefill_project|default:""|safe}}";
 227     var prefill_hostname = "{{prefill_hostname|default:""|safe}}";
 228
 229     //to handle prefill
 230     function prefill_host_select_field(data)
 231     {
 232         //
 233         if(data)
 234         {
 235             make_selection(data);
 236         }
 237     }
 238
 239     //call init functions
 240     prefill_host_select_field(prefill_host_selection);
 241 </script>
 242 {% endblock %}