{% extends "base.html" %} {% load staticfiles %} {% load bootstrap3 %} {% block extrahead %} {{ block.super }} <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> <p> <br>By continuing, you agree to our <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> </p> {% 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 id='hide_if_noext'> <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> </div> <script type="text/javascript"> if( {{ booking.ext_count }} <= 0 ){ var hidediv = document.getElementById('hide_if_noext'); hidediv.style.display = 'none'; var par = document.createElement("div"); var text = document.createTextNode("No Extensions Remaining"); par.appendChild(text); par.style.fontWeight = 'bold'; par.style.paddingBottom = '15pt'; hidediv.parentNode.insertBefore(par,hidediv.nextSibling); } </script> {% bootstrap_field form.opsys %} {% 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> <script type="text/javascript"> //Check if current view is an edit or a standard booking view if(window.location.href.includes('edit')) { var element = document.getElementById("bookingform"); element.parentNode.removeChild(element); } else { var element = document.getElementById("bookingeditform"); element.parentNode.removeChild(element); } </script> {% 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 booking_delete_prefix = "{% url 'booking:delete_prefix' %}"; var user_timezone = "{{ request.user.userprofile.timezone }}" {% autoescape off %} var sup_installer_dict = {{ installer_filter }} var sup_scenario_dict = {{ scenario_filter }} {% endautoescape %} </script> <script type="text/javascript"> $(document).ready(function () { $("#id_installer").children().hide(); $("#id_scenario").children().hide(); }); function installerHider() { dropFilter("id_installer", sup_installer_dict, "id_opsys"); scenarioHider(); } document.getElementById('id_opsys').addEventListener('change', installerHider); function scenarioHider() { dropFilter("id_scenario", sup_scenario_dict, "id_installer"); } document.getElementById('id_installer').addEventListener('change', scenarioHider); function dropFilter(target, target_filter, master) { ob = document.getElementById(target); for(var i=0; i<ob.options.length; i++) { if ( ob.options[i].text == '---------' ) { ob.selectedIndex = i; } } targ_id = "#" + target; $(targ_id).children().hide(); var drop = document.getElementById(master); var opts = target_filter[drop.options[drop.selectedIndex].value]; if (!opts) { opts = {}; } var emptyMap = {} var map = Object.create(null); for (var i = 0; i < opts.length; i++) { var j = opts[i]; map[j] = true; } for (var i = 0; i < document.getElementById(target).childNodes.length; i++) { if (document.getElementById(target).childNodes[i].value in opts && !(document.getElementById(target).childNodes[i].value in emptyMap) ) { document.getElementById(target).childNodes[i].style.display = "inherit"; } } } </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 %}