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: 3px;
  13         box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
  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     #id_length {
  30         -moz-appearance: none;
  31         border: none;
  32         box-shadow: none;
  33     }
  34     input[type=range]::-moz-range-track {
  35         background: #cccccc;
  36     }
  37 </style>
  38 {% bootstrap_form_errors form type='non_fields' %}
  39 <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
  40 {% csrf_token %}
  41 <div class="grid_container">
  42 <div class="grid_element host_select_pane grid_element_wide">
  43 <p>Please select a host type you wish to book. Only available types are shown.</p>
  44 {% bootstrap_field form.filter_field show_label=False %}
  45 </div>
  46 <div class="grid_element booking_info_pane grid_element_1third">
  47     {% bootstrap_field form.purpose %}
  48     {% bootstrap_field form.project %}
  49     {% bootstrap_field form.length %}
  50     <p style="display:inline;">Days: </p><output id="daysout" style="display:inline;">0</output>
  51     <script>
  52         document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
  53         document.getElementById("daysout").value = document.getElementById("id_length").value;
  54     </script>
  55 </div>
  56 <div class="grid_element collaborator_pane grid_element_1third">
  57         <label>Collaborators</label>
  58         {{ form.users }}
  59 </div>
  60 <div class="grid_element_1third">
  61     <div class="configuration_pane grid_element">
  62         {% bootstrap_field form.hostname %}
  63         {% bootstrap_field form.image %}
  64     </div>
  65     <div class="configuration_pane grid_element">
  66         <strong>OPNFV: (Optional)</strong>
  67         {% bootstrap_field form.installer %}
  68         {% bootstrap_field form.scenario %}
  69     </div>
  70 </div>
  71 </div>
  72 <script type="text/javascript">
  73     var normalize = function(data)
  74     {
  75         //converts the top level keys in data to map to lists
  76         var normalized = {}
  77         for( var key in data ){
  78             normalized[key] = [];
  79             for( var subkey in data[key] ){
  80                 normalized[key].push(data[key][subkey]);
  81             }
  82         }
  83         return normalized;
  84     }
  85     var update_page_contents = function(response)
  86     {
  87         document.open();
  88         document.write(response);
  89         document.close();
  90     }
  91
  92     //form hamdler code
  93     submit_form = function()
  94     {
  95         //altered from initial prototype: form submits automatically,
  96         //but needs formatting for multiple select field
  97         var data = normalize(result);
  98         data = JSON.stringify(data);
  99         document.getElementById("filter_field").value = data;
 100     }
 101
 102     var sup_image_dict = {{ image_filter|safe }};
 103     var sup_installer_dict = {{ installer_filter|safe }};
 104     var sup_scenario_dict = {{ scenario_filter|safe }};
 105
 106     function imageHider() {
 107         var data = normalize(result);
 108         var drop = document.getElementById("id_image");
 109         for( var i=0; i < drop.length; i++ )
 110         {
 111             if ( drop.options[i].text == '---------' )
 112             {
 113                 drop.selectedIndex = i;
 114             }
 115         }
 116
 117         $('#id_image').children().hide();
 118
 119         for( var i = 0; i < drop.childNodes.length; i++ )
 120         {
 121             drop.childNodes[i].disabled = true; // closest we can get on safari to hiding it outright
 122         }
 123
 124
 125         var empty_map = {}
 126
 127         for ( var i=0; i < drop.childNodes.length; i++ )
 128         {
 129             var image_object = sup_image_dict[drop.childNodes[i].value];
 130             if( image_object ) //weed out empty option
 131             {
 132                 var lab_pk = ""
 133                 for( var j in data["labs"][0] )
 134                 {
 135                     if( j in {} ) { continue; }
 136                     else { lab_pk = j; break; }
 137                 }
 138                 var host_pk = "";
 139                 for( var j in data["hosts"][0] )
 140                 {
 141                     if( j in {} ) { continue; }
 142                     else { host_pk = j; break; }
 143                 }
 144                 if( image_object.host_profile == host_pk && image_object.lab == lab_pk )
 145                 {
 146                     drop.childNodes[i].style.display = "inherit";
 147                     drop.childNodes[i].disabled = false;
 148                 }
 149             }
 150         }
 151     }
 152
 153     imageHider();
 154     $('#id_installer').children().hide();
 155     $('#id_scenario').children().hide();
 156
 157
 158     Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function(element) {
 159         element.addEventListener('click', imageHider);
 160     });
 161
 162     function installerHider() {
 163         dropFilter("id_installer", sup_installer_dict, "id_image");
 164         scenarioHider();
 165     }
 166     document.getElementById('id_image').addEventListener('change', installerHider);
 167
 168     function scenarioHider() {
 169         dropFilter("id_scenario", sup_scenario_dict, "id_installer");
 170     }
 171     document.getElementById('id_installer').addEventListener('change', scenarioHider);
 172
 173     function dropFilter(target, target_filter, master) {
 174         ob = document.getElementById(target);
 175
 176         for(var i=0; i<ob.options.length; i++) {
 177             if ( ob.options[i].text == '---------' ) {
 178                 ob.selectedIndex = i;
 179                 }
 180         }
 181
 182         targ_id = "#" + target;
 183
 184         $(targ_id).children().hide();
 185
 186         for (var i = 0; i < document.getElementById(target).childNodes.length; i++)
 187         {
 188             document.getElementById(target).childNodes[i].disabled = true;
 189         }
 190         var drop = document.getElementById(master);
 191         var opts = target_filter[drop.options[drop.selectedIndex].value];
 192         if (!opts) {
 193             opts = {};
 194         }
 195         var emptyMap = {}
 196
 197         var map = Object.create(null);
 198         for (var i = 0; i < opts.length; i++) {
 199             var j = opts[i];
 200             map[j] = true;
 201         }
 202
 203         for (var i = 0; i < document.getElementById(target).childNodes.length; i++) {
 204             if (document.getElementById(target).childNodes[i].value in opts && !(document.getElementById(target).childNodes[i].value in emptyMap) ) {
 205                 document.getElementById(target).childNodes[i].style.display = "inherit";
 206                 document.getElementById(target).childNodes[i].disabled = false;
 207             }
 208         }
 209     }
 210 </script>
 211     <button onclick="submit_form();" class="btn btn-success">Confirm</button>
 212 </form>
 213 <script>
 214     //context vars
 215     var prefill_host_selection = "{{host_select_field_prefill_data|default:""|safe}}";
 216     var prefill_purpose = "{{prefill_purpose|default:""|safe}}";
 217     var prefill_project = "{{prefill_project|default:""|safe}}";
 218     var prefill_hostname = "{{prefill_hostname|default:""|safe}}";
 219
 220     //to handle prefill
 221     function prefill_host_select_field(data)
 222     {
 223         //
 224         if(data)
 225         {
 226             make_selection(data);
 227         }
 228     }
 229
 230     //call init functions
 231     prefill_host_select_field(prefill_host_selection);
 232 </script>
 233 {% endblock %}