dashboard/src/templates/booking/steps/booking_meta.html

   1 {% extends "workflow/viewport-element.html" %}
   2 {% load staticfiles %}
   3
   4 {% load bootstrap3 %}
   5
   6 {% block content %}
   7
   8 <style>
   9     .bkmeta_panel {
  10         padding: 5%;
  11     }
  12
  13     .bkcontrib_panel {
  14         display: flex;
  15         flex-direction: column;
  16     }
  17
  18     .bkcontrib_panel > .form-group {
  19         flex: 1;
  20         display: flex;
  21         flex-direction: column;
  22     }
  23
  24     .panel{
  25         padding: 5%;
  26         /*border: solid 1px black;*/
  27     }
  28
  29     .panel_wrap {
  30         width: 100%;
  31         display: grid;
  32         grid-template-columns: 45% 10% 45%;
  33         border: none;
  34     }
  35
  36     #id_length {
  37         -moz-appearance: none;
  38         border: none;
  39         box-shadow: none;
  40     }
  41     input[type=range]::-moz-range-track {
  42         background: #cccccc;
  43     }
  44 </style>
  45
  46 {% bootstrap_form_errors form type='non_fields' %}
  47 <form id="booking_meta_form" action="/wf/workflow/" method="POST" class="form">
  48 {% csrf_token %}
  49 <div id="form_div">
  50     <div class="panel_wrap">
  51     <div class="panel bkmeta_panel">
  52         {% bootstrap_field form.purpose %}
  53         {% bootstrap_field form.project %}
  54         {% bootstrap_field form.length %}
  55         <p style="display:inline;">Days: </p><output id="daysout" style="display:inline;">0</output>
  56         <script>
  57             document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
  58             document.getElementById("daysout").value = document.getElementById("id_length").value;
  59         </script>
  60         {% bootstrap_field form.info_file %}
  61         <p>You must provide a url to your project's INFO.yaml file if you are a PTL and you are trying to book a POD with multiple servers in it.</p>
  62         {% bootstrap_field form.deploy_opnfv %}
  63     </div>
  64     <div class="panel panel_center">
  65     </div>
  66     <div class="panel bkcontrib_panel">
  67         <p>You may add collaborators on your booking to share resources with coworkers.</p>
  68         {% bootstrap_field form.users label="Collaborators" %}
  69     </div>
  70
  71     {% buttons %}
  72     <button type="submit" style="display: none;" class="btn btn-success">Confirm</button>
  73     {% endbuttons %}
  74     </div>
  75 </div>
  76 </form>
  77 {% endblock content %}
  78
  79 {% block onleave %}
  80 var ajaxForm = $("#booking_meta_form");
  81 var formData = ajaxForm.serialize();
  82 req = new XMLHttpRequest();
  83 req.open("POST", "/wf/workflow/", false);
  84 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  85 req.onerror = function() { alert("problem submitting form"); }
  86 req.send(formData);
  87 {% endblock %}