src/templates/base/booking/booking_calendar.html

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