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