Adds Template Overrides

Changes the structure of the template directories to allow
a new project to define their own set of override templates
that inherit from a common base.

I have slightly modified landing.html here as an example.
In comming changes we will try to move all the "laas" specific
content into the laas directory

Change-Id: I46151be182de901f870debb247b305ea34ae77ba
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>

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">&times;</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 %}