src/templates/base/booking/quick_deploy.html

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