{% extends "base.html" %} {% load staticfiles %} {% load bootstrap3 %} {% block extrahead %} <link href="{% static "bower_components/fullcalendar/dist/fullcalendar.css" %}" rel='stylesheet'/> <link href="{% static "bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" %}" rel='stylesheet'/> {% endblock extrahead %} {% block content %} <div class="col-lg-8"> <div class="container-fluid"> <div class="panel panel-default"> <div class="panel-heading"> <i class="fa fa-calendar fa-fw"></i>Calendar </div> <div class="panel-body"> <div id='calendar'> </div> </div> <!-- /.panel-body --> </div> <!-- /.panel --> </div> </div> <div class="col-lg-4"> <div class="panel panel-default"> <div class="panel-heading"> <i class="fa fa-edit fa-fw"></i>Booking </div> <div class="panel-body"> {% if user.is_authenticated %} <div id="booking_form_div"> {% bootstrap_form_errors form type='non_fields' %} <form method="post" action="" class="form" id="bookingform"> {% csrf_token %} <div class='input-group' id='starttimepicker'> {% bootstrap_field form.start addon_after='<span class="glyphicon glyphicon-calendar"></span>' %} </div> <div class='input-group' id='endtimepicker'> {% bootstrap_field form.end addon_after='<span class="glyphicon glyphicon-calendar"></span>' %} </div> {% bootstrap_field form.opsys %} {% bootstrap_field form.purpose %} {% bootstrap_field form.installer %} {% bootstrap_field form.scenario %} {% buttons %} <button type="submit" class="btn btn btn-success"> Book </button> {% endbuttons %} </form> </div> <div id="booking_edit_form_div"> {% bootstrap_form_errors form type='non_fields' %} <form method="post" action="" class="form" id="bookingeditform"> {% csrf_token %} <div class='input-group' id='starttimeeditpicker'> {% bootstrap_field form.start addon_after='<span class="glyphicon glyphicon-calendar"></span>' %} </div> <div class='input-group' id='endtimeeditpicker'> {% bootstrap_field form.end addon_after='<span class="glyphicon glyphicon-calendar"></span>' %} </div> {% bootstrap_field form.purpose %} {% bootstrap_field form.installer %} {% bootstrap_field form.scenario %} {% bootstrap_field form.reset %} {% buttons %} <button type="submit" class="btn btn btn-success"> Confirm Edit </button> {% endbuttons %} </form> </div> {% else %} <p>Please <a href="{% url 'account:login' %}"> login with Jira</a> to book this Pod</p> {% endif %} </div> </div> </div> <div id="booking_detail_modal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Booking Detail</h4> </div> <div class="modal-body" id="booking_detail_content"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close </button> </div> </div> </div> </div> {% endblock content %} {% block extrajs %} <script type="text/javascript"> var bookings_url = "{% url 'booking:bookings_json' resource_id=resource.id %}"; var booking_detail_prefix = "{% url 'booking:detail_prefix' %}"; var user_timezone = "{{ request.user.userprofile.timezone }}" </script> <script src={% static "bower_components/moment/moment.js" %}></script> <script src={% static "bower_components/fullcalendar/dist/fullcalendar.js" %}></script> <script type="text/javascript" src={% static "bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js" %}></script> <script src={% static "js/fullcalendar-options.js" %}></script> <script src={% static "js/datetimepicker-options.js" %}></script> <script src={% static "js/booking-calendar.js" %}></script> {% endblock extrajs %}