Lab as a Service 2.0
[laas.git] / 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     .panel{
14         padding: 5%;
15         /*border: solid 1px black;*/
16     }
17
18     .panel_wrap {
19         width: 100%;
20         display: grid;
21         grid-template-columns: 45% 10% 45%;
22         border: none;
23     }
24 </style>
25
26 {% bootstrap_form_errors form type='non_fields' %}
27 <form id="booking_meta_form" action="/wf/workflow/" method="POST" class="form">
28 {% csrf_token %}
29 <div id="form_div">
30     <div class="panel_wrap">
31     <div class="panel bkmeta_panel">
32         {% bootstrap_field form.purpose %}
33         {% bootstrap_field form.project %}
34         {% bootstrap_field form.length %}
35         <p style="display:inline;">Days: </p><output id="daysout" style="display:inline;">0</output>
36         <script>
37             document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
38             document.getElementById("daysout").value = document.getElementById("id_length").value;
39         </script>
40         {% bootstrap_field form.info_file %}
41         <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>
42     </div>
43     <div class="panel panel_center">
44     </div>
45     <div class="panel">
46         {% bootstrap_field form.users %}
47     </div>
48
49     {% buttons %}
50     <button type="submit" style="display: none;" class="btn btn-success">Confirm</button>
51     {% endbuttons %}
52     </div>
53 </div>
54 </form>
55 {% endblock content %}
56
57 {% block onleave %}
58 var ajaxForm = $("#booking_meta_form");
59 var formData = ajaxForm.serialize();
60 console.log(formData);
61 req = new XMLHttpRequest();
62 req.open("POST", "/wf/workflow/", false);
63 req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
64 req.onerror = function() { alert("problem submitting form"); }
65 req.send(formData);
66 {% endblock %}