src/templates/base/booking/quick_deploy.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3 {% load bootstrap4 %}
   4 {% block content %}
   5
   6 <style>
   7 /* hides images not in use. Not applied globally since doesn't make sense in all cases */
   8 select option:disabled {
   9     display:none;
  10 }
  11 </style>
  12
  13 {% bootstrap_form_errors form type='non_fields' %}
  14 <form id="quick_booking_form" action="/booking/quick/" method="POST" class="form  class="Anuket-Text"">
  15     {% csrf_token %}
  16         <div class="row mx-0 px-0">
  17             <div class="col-12 mx-0 px-0 mt-2">
  18                 {% block form-text %}
  19                 <p class="my-0">
  20                     Please select a host type you wish to book. Only available types are shown.
  21                     If something isn't working right, let us know <a href="mailto:{{contact_email}}"> here! </a>
  22                 </p>
  23                 {% endblock form-text %}
  24                 {% bootstrap_field form.filter_field show_label=False %}
  25             </div>
  26         </div>
  27         <div class="row justify-content-center">
  28             <div class="col-12 col-lg-6 my-2">
  29                 <div class="col border rounded py-2 h-100">
  30                     {% bootstrap_field form.purpose %}
  31                     {% bootstrap_field form.project %}
  32                     {% bootstrap_field form.length %}
  33                     <span>Days: </span><output id="daysout">0</output>
  34                     <script>
  35                         document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
  36                         document.getElementById("daysout").value = document.getElementById("id_length").value;
  37                     </script>
  38                 </div>
  39             </div>
  40             {% block collab %}
  41             <div class="col-12 col-lg-6 my-2">
  42                 <div class="col border rounded py-2 h-100">
  43                     <label>Collaborators</label>
  44                     {{ form.users }}
  45                 </div>
  46             </div>
  47             {% endblock collab %}
  48         </div>
  49         <div class="row justify-content-center">
  50             <div class="col-12 col-lg-6 my-2">
  51                 <div class="col border rounded py-2 h-100">
  52                     {% bootstrap_field form.hostname %}
  53                     {% bootstrap_field form.image %}
  54                 </div>
  55             </div>
  56             <div class="col-12 col-lg-6 my-2">
  57                 <div class="col border rounded py-2 h-100">
  58                     {% bootstrap_field form.global_cloud_config %}
  59                 </div>
  60             </div>
  61             <div class="col-12 d-flex mt-2 justify-content-end">
  62                 <button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
  63             </div>
  64         </div>
  65 </form>
  66 {% block image_script %}
  67 {% endblock image_script %}
  68
  69 <script type="text/javascript">
  70     function submit_form()
  71     {
  72         run_form_callbacks();
  73         document.getElementById("quick_booking_form").submit();
  74     }
  75
  76     function hide_dropdown(drop_id) {
  77         var drop = document.getElementById(drop_id);
  78         //select 'blank' option
  79         for( var i=0; i < drop.length; i++ )
  80         {
  81             if ( drop.options[i].text == '---------' )
  82                 drop.selectedIndex = i;
  83         }
  84     }
  85
  86     function get_selected_value(key){
  87         for( var attr in multi_filter_widget.result[key] ){
  88             if(!(attr in {}) )
  89                 return attr;
  90         }
  91     }
  92
  93     $(document).ready(function() {
  94         $('.has-popover').popover({'trigger':'hover'});
  95     });
  96
  97     var sup_image_dict = {{image_filter | safe}};
  98     var sup_installer_dict = {{installer_filter | safe}};
  99     var sup_scenario_dict = {{scenario_filter | safe}};
 100     var resource_profile_map = {{resource_profile_map | safe}};
 101
 102     function imageFilter() {
 103         var drop = document.getElementById("id_image");
 104         var lab_pk = get_selected_value("lab");
 105         var profile_pk = get_selected_value("resource");
 106
 107         for (const childNode of drop.childNodes) {
 108             var image_object = sup_image_dict[childNode.value];
 109             if (image_object) //weed out empty option
 110             {
 111                 console.log("image object:");
 112                 console.log(image_object);
 113                 const img_at_lab = image_object.lab == lab_pk;
 114                 const profiles = resource_profile_map[profile_pk];
 115                 console.log("profiles are:");
 116                 console.log(profiles);
 117                 console.log("profile map is:");
 118                 console.log(resource_profile_map);
 119                 console.log("host profile is" + image_object.architecture);
 120                 const img_in_template = profiles && profiles.indexOf(image_object.architecture) > -1
 121                 childNode.disabled = !img_at_lab || !img_in_template;
 122             }
 123         }
 124     }
 125
 126     imageFilter();
 127
 128     Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) {
 129         element.addEventListener('click', imageFilter);
 130     });
 131
 132     function dropFilter(target, target_filter, master) {
 133         var dropdown = document.getElementById(target);
 134
 135         hide_dropdown(target);
 136
 137         var drop = document.getElementById(master);
 138         var opts = target_filter[drop.options[drop.selectedIndex].value];
 139         if (!opts) {
 140             opts = {};
 141         }
 142
 143         var map = Object.create(null);
 144         for (var i = 0; i < opts.length; i++) {
 145             var j = opts[i];
 146             map[j] = true;
 147         }
 148
 149         for (var i = 0; i < dropdown.childNodes.length; i++) {
 150             if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {})) {
 151                 dropdown.childNodes[i].style.display = "inherit";
 152                 dropdown.childNodes[i].disabled = false;
 153             }
 154         }
 155     }
 156 </script>
 157 {% endblock %}