diff options
Diffstat (limited to 'src/templates/base/booking/booking_calendar.html')
-rw-r--r-- | src/templates/base/booking/booking_calendar.html | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/src/templates/base/booking/booking_calendar.html b/src/templates/base/booking/booking_calendar.html new file mode 100644 index 0000000..450c97f --- /dev/null +++ b/src/templates/base/booking/booking_calendar.html @@ -0,0 +1,207 @@ +{% extends "base.html" %} +{% load staticfiles %} + +{% load bootstrap4 %} + +{% 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> + </div> + </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-primary" 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 %} |