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

   1 {% extends "dashboard/table.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                 <div id="booking_form_div">
  37                     {% bootstrap_form_errors form type='non_fields' %}
  38                     <form method="post" action="" class="form" id="bookingform">
  39                         {% csrf_token %}
  40
  41                         <div class='input-group' id='starttimepicker'>
  42                             {% bootstrap_field form.start addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
  43                         </div>
  44                         <div class='input-group' id='endtimepicker'>
  45                             {% bootstrap_field form.end addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
  46                         </div>
  47                         {% bootstrap_field form.purpose %}
  48
  49                         {% buttons %}
  50                             <button type="submit" class="btn btn btn-success">
  51                                 Book
  52                             </button>
  53                         {% endbuttons %}
  54                     </form>
  55                 </div>
  56             </div>
  57         </div>
  58     </div>
  59
  60     <div id="booking_detail_modal" class="modal fade" role="dialog">
  61         <div class="modal-dialog">
  62
  63             <!-- Modal content-->
  64             <div class="modal-content">
  65                 <div class="modal-header">
  66                     <button type="button" class="close" data-dismiss="modal">&times;</button>
  67                     <h4 class="modal-title">Booking Detail</h4>
  68                 </div>
  69                 <div class="modal-body" id="booking_detail_content">
  70                 </div>
  71                 <div class="modal-footer">
  72                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  73                 </div>
  74             </div>
  75
  76         </div>
  77     </div>
  78 {% endblock content %}
  79
  80 {% block extrajs %}
  81     <script type="text/javascript">
  82         var bookings_url = "{% url 'booking:bookings_json' resource_id=resource.id %}";
  83         var booking_detail_prefix = "{% url 'booking:detail_prefix' %}";
  84         var user_timezone = "{{ request.user.userprofile.timezone }}"
  85     </script>
  86
  87     <script src={% static "bower_components/moment/moment.js" %}></script>
  88     <script src={% static "bower_components/fullcalendar/dist/fullcalendar.js" %}></script>
  89     <script type="text/javascript"
  90             src={% static "bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js" %}></script>
  91     <script src={% static "js/fullcalendar-options.js" %}></script>
  92     <script src={% static "js/datetimepicker-options.js" %}></script>
  93     <script src={% static "js/booking-calendar.js" %}></script>
  94 {% endblock extrajs %}