Lab as a Service 2.0
[laas.git] / src / templates / booking / booking_calendar.html
1 {% extends "base.html" %}
2 {% load staticfiles %}
3
4 {% load bootstrap3 %}
5
6 {% block extrahead %}
7     {{ block.super }}
8
9     <link href="{% static "bower_components/fullcalendar/dist/fullcalendar.css" %}"
10           rel='stylesheet'/>
11     <link href="{% static "bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" %}"
12           rel='stylesheet'/>
13 {% endblock extrahead %}
14
15 {% block content %}
16     <div class="col-lg-8">
17         <div class="container-fluid">
18             <div class="panel panel-default">
19                 <div class="panel-heading">
20                     <i class="fa fa-calendar fa-fw"></i>Calendar
21                 </div>
22                 <div class="panel-body">
23                     <div id='calendar'>
24                     </div>
25                 </div>
26                 <!-- /.panel-body -->
27             </div>
28             <!-- /.panel -->
29         </div>
30     </div>
31
32     <div class="col-lg-4">
33         <div class="panel panel-default">
34             <div class="panel-heading">
35                 <i class="fa fa-edit fa-fw"></i>Booking
36             </div>
37             <div class="panel-body">
38                 {% if user.is_authenticated %}
39                     <div id="booking_form_div">
40                         {% bootstrap_form_errors form type='non_fields' %}
41                         <form method="post" action="" class="form" id="bookingform">
42                             {% csrf_token %}
43
44                             <div class='input-group' id='starttimepicker'>
45                                 {% bootstrap_field form.start addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
46                             </div>
47                             <div class='input-group' id='endtimepicker'>
48                                 {% bootstrap_field form.end addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
49                             </div>
50                             {% bootstrap_field form.opsys %}
51                             {% bootstrap_field form.purpose %}
52                             {% bootstrap_field form.installer %}
53                             {% bootstrap_field form.scenario %}
54                             {% buttons %}
55                                 <button type="submit" class="btn btn btn-success">
56                                     Book
57                                 </button>
58                                 <p>
59                                     <br>By continuing, you agree to our
60                                 <a href="https://wiki.opnfv.org/display/INF/Lab-as-a-Service+at+the+UNH-IOL#Lab-as-a-ServiceattheUNH-IOL-AcceptableUsagePolicy">Acceptable Usage Policy</a>
61                                 </p>
62                             {% endbuttons %}
63                         </form>
64                     </div>
65                     <div id="booking_edit_form_div">
66                         {% bootstrap_form_errors form type='non_fields' %}
67                         <form method="post" action="" class="form" id="bookingeditform">
68                             {% csrf_token %}
69                             <div id='hide_if_noext'>
70                             <div class='input-group' id='starttimeeditpicker'>
71                                 {% bootstrap_field form.start addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
72                             </div>
73                             <div class='input-group' id='endtimeeditpicker'>
74                                 {% bootstrap_field form.end addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
75                             </div>
76                             </div>
77                             <script type="text/javascript">
78                                 if( {{ booking.ext_count }} <= 0 ){
79                                     var hidediv = document.getElementById('hide_if_noext');
80                                     hidediv.style.display = 'none';
81                                     var par = document.createElement("div");
82                                     var text = document.createTextNode("No Extensions Remaining");
83                                     par.appendChild(text);
84                                     par.style.fontWeight = 'bold';
85                                     par.style.paddingBottom = '15pt';
86                                     hidediv.parentNode.insertBefore(par,hidediv.nextSibling);
87                                 }
88                             </script>
89                             {% bootstrap_field form.opsys %}
90                             {% bootstrap_field form.purpose %}
91                             {% bootstrap_field form.installer %}
92                             {% bootstrap_field form.scenario %}
93                             {% bootstrap_field form.reset %}
94                             {% buttons %}
95                                 <button type="submit" class="btn btn btn-success">
96                                     Confirm Edit
97                                 </button>
98                             {% endbuttons %}
99                         </form>
100                     </div>
101                    <script type="text/javascript">
102                     //Check if current view is an edit or a standard booking view
103                     if(window.location.href.includes('edit')) {
104                         var element = document.getElementById("bookingform");
105                         element.parentNode.removeChild(element); }
106                     else {
107                         var element = document.getElementById("bookingeditform");
108                         element.parentNode.removeChild(element); }
109                     </script>
110                 {% else %}
111                     <p>Please
112                         <a href="{% url 'account:login' %}">
113                             login with Jira</a>
114                         to book this Pod</p>
115                 {% endif %}
116             </div>
117         </div>
118     </div>
119
120     <div id="booking_detail_modal" class="modal fade" role="dialog">
121         <div class="modal-dialog">
122
123             <!-- Modal content-->
124             <div class="modal-content">
125                 <div class="modal-header">
126                     <button type="button" class="close" data-dismiss="modal">&times;</button>
127                     <h4 class="modal-title">Booking Detail</h4>
128                 </div>
129                 <div class="modal-body" id="booking_detail_content">
130                 </div>
131                 <div class="modal-footer">
132                     <button type="button" class="btn btn-default" data-dismiss="modal">Close
133                     </button>
134                 </div>
135             </div>
136
137         </div>
138     </div>
139 {% endblock content %}
140
141 {% block extrajs %}
142     <script type="text/javascript">
143         var bookings_url = "{% url 'booking:bookings_json' resource_id=resource.id %}";
144         var booking_detail_prefix = "{% url 'booking:detail_prefix' %}";
145         var booking_delete_prefix = "{% url 'booking:delete_prefix' %}";
146         var user_timezone = "{{ request.user.userprofile.timezone }}"
147         {% autoescape off %}
148         var sup_installer_dict = {{ installer_filter }}
149         var sup_scenario_dict = {{ scenario_filter }}
150         {% endautoescape %}
151
152     </script>
153     <script type="text/javascript">
154     $(document).ready(function () {
155         $("#id_installer").children().hide();
156         $("#id_scenario").children().hide();
157     });
158
159     function installerHider() {
160         dropFilter("id_installer", sup_installer_dict, "id_opsys");
161         scenarioHider();
162     }
163     document.getElementById('id_opsys').addEventListener('change', installerHider);
164
165     function scenarioHider() {
166         dropFilter("id_scenario", sup_scenario_dict, "id_installer");
167     }
168     document.getElementById('id_installer').addEventListener('change', scenarioHider);
169
170     function dropFilter(target, target_filter, master) {
171         ob = document.getElementById(target);
172
173         for(var i=0; i<ob.options.length; i++) {
174             if ( ob.options[i].text == '---------' ) {
175                 ob.selectedIndex = i;
176                 }
177         }
178
179         targ_id = "#" + target;
180         $(targ_id).children().hide();
181         var drop = document.getElementById(master);
182         var opts = target_filter[drop.options[drop.selectedIndex].value];
183         if (!opts) {
184             opts = {};
185         }
186         var emptyMap = {}
187
188         var map = Object.create(null);
189         for (var i = 0; i < opts.length; i++) {
190             var j = opts[i];
191             map[j] = true;
192         }
193
194         for (var i = 0; i < document.getElementById(target).childNodes.length; i++) {
195             if (document.getElementById(target).childNodes[i].value in opts && !(document.getElementById(target).childNodes[i].value in emptyMap) ) {
196                 document.getElementById(target).childNodes[i].style.display = "inherit";
197             }
198         }
199     }
200
201     </script>
202     <script src={% static "bower_components/moment/moment.js" %}></script>
203     <script src={% static "bower_components/fullcalendar/dist/fullcalendar.js" %}></script>
204     <script type="text/javascript"
205             src={% static "bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js" %}></script>
206     <script src={% static "js/fullcalendar-options.js" %}></script>
207     <script src={% static "js/datetimepicker-options.js" %}></script>
208     <script src={% static "js/booking-calendar.js" %}></script>
209 {% endblock extrajs %}