dashboard/src/templates/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                 <!-- /.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-primary" 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 %}