tools/pharos-dashboard/templates/dashboard/booking_calendar.html

   1 {% extends "dashboard/base.html" %}
   2 {% load staticfiles %}
   3 {% load bootstrap3 %}
   4
   5 {% block extrahead %}
   6     <link href="{% static "bower_components/fullcalendar/dist/fullcalendar.css" %}"
   7           rel='stylesheet'/>
   8     <link href="{% static "bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" %}"
   9           rel='stylesheet'/>
  10 {% endblock extrahead %}
  11
  12 {% block content %}
  13     <div class="row">
  14         <div class="col-lg-8">
  15             <div class="container-fluid">
  16                 <div class="panel panel-default">
  17                     <div class="panel-heading">
  18                         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                     Booking
  34                 </div>
  35                 <div class="panel-body">
  36                     {% bootstrap_form_errors form type='non_fields' %}
  37
  38                     <form method="post" class="form" id="bookingform">
  39                         {% csrf_token %}
  40                         <div class='input-group' id='starttimepicker'>
  41                             {% bootstrap_field form.start_date_time addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
  42                         </div>
  43                         <div class='input-group' id='endtimepicker'>
  44                             {% bootstrap_field form.end_date_time addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
  45                         </div>
  46                         {% bootstrap_field form.purpose %}
  47                         {{ form.booking_id }}
  48                         {% buttons %}
  49                             <button type="submit" class="btn btn btn-success"
  50                                     id="submitform">
  51                                 Book Pod
  52                             </button>
  53                             <button type="button" class="btn btn btn-danger hidden"
  54                                     id="deletebutton">
  55                                 Delete Booking
  56                             </button>
  57                         {% endbuttons %}
  58                     </form>
  59
  60                 </div>
  61             </div>
  62         </div>
  63     </div>
  64 {% endblock content %}
  65
  66 {% block extrajs %}
  67     <script type="text/javascript">
  68         var bookings_url = '/resource/' + {{ resource.resource_id }} +'/bookings/';
  69     </script>
  70
  71     <script src={% static "bower_components/moment/moment.js" %}></script>
  72     <script src={% static "bower_components/fullcalendar/dist/fullcalendar.js" %}></script>
  73     <script type="text/javascript"
  74             src={% static "bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js" %}></script>
  75     <script src={% static "js/fullcalendar-options.js" %}></script>
  76     <script src={% static "js/datetimepicker-options.js" %}></script>
  77     <script src={% static "js/csrf.js" %}></script>
  78     <script src={% static "js/booking-calendar.js" %}></script>
  79 {% endblock extrajs %}