dashboard/src/templates/booking/booking_calendar.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3
   4 {% load bootstrap3 %}
   5
   6 {% block extrahead %}
   7     <link href="{% static "bower_components/fullcalendar/dist/fullcalendar.css" %}"
   8           rel='stylesheet'/>
   9     <link href="{% static "bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" %}"
  10           rel='stylesheet'/>
  11 {% endblock extrahead %}
  12
  13 {% block content %}
  14     <div class="col-lg-8">
  15         <div class="container-fluid">
  16             <div class="panel panel-default">
  17                 <div class="panel-heading">
  18                     <i class="fa fa-calendar fa-fw"></i>Calendar
  19                 </div>
  20                 <div class="panel-body">
  21                     <div id='calendar'>
  22                     </div>
  23                 </div>
  24                 <!-- /.panel-body -->
  25             </div>
  26             <!-- /.panel -->
  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
  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                             {% bootstrap_field form.purpose %}
  75                             {% bootstrap_field form.installer %}
  76                             {% bootstrap_field form.scenario %}
  77                             {% bootstrap_field form.reset %}
  78                             {% buttons %}
  79                                 <button type="submit" class="btn btn btn-success">
  80                                     Confirm Edit
  81                                 </button>
  82                             {% endbuttons %}
  83                         </form>
  84                     </div>
  85                 {% else %}
  86                     <p>Please
  87                         <a href="{% url 'account:login' %}">
  88                             login with Jira</a>
  89                         to book this Pod</p>
  90                 {% endif %}
  91             </div>
  92         </div>
  93     </div>
  94
  95     <div id="booking_detail_modal" class="modal fade" role="dialog">
  96         <div class="modal-dialog">
  97
  98             <!-- Modal content-->
  99             <div class="modal-content">
 100                 <div class="modal-header">
 101                     <button type="button" class="close" data-dismiss="modal">&times;</button>
 102                     <h4 class="modal-title">Booking Detail</h4>
 103                 </div>
 104                 <div class="modal-body" id="booking_detail_content">
 105                 </div>
 106                 <div class="modal-footer">
 107                     <button type="button" class="btn btn-default" data-dismiss="modal">Close
 108                     </button>
 109                 </div>
 110             </div>
 111
 112         </div>
 113     </div>
 114 {% endblock content %}
 115
 116 {% block extrajs %}
 117     <script type="text/javascript">
 118         var bookings_url = "{% url 'booking:bookings_json' resource_id=resource.id %}";
 119         var booking_detail_prefix = "{% url 'booking:detail_prefix' %}";
 120         var booking_delete_prefix = "{% url 'booking:delete_prefix' %}";
 121         var user_timezone = "{{ request.user.userprofile.timezone }}"
 122     </script>
 123
 124     <script src={% static "bower_components/moment/moment.js" %}></script>
 125     <script src={% static "bower_components/fullcalendar/dist/fullcalendar.js" %}></script>
 126     <script type="text/javascript"
 127             src={% static "bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js" %}></script>
 128     <script src={% static "js/fullcalendar-options.js" %}></script>
 129     <script src={% static "js/datetimepicker-options.js" %}></script>
 130     <script src={% static "js/booking-calendar.js" %}></script>
 131 {% endblock extrajs %}