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, 140 insertions, 0 deletions

diff --git a/src/templates/base/booking/quick_deploy.html b/src/templates/base/booking/quick_deploy.html
new file mode 100644
index 0000000..8570f25
--- /dev/null
+++ b/src/templates/base/booking/quick_deploy.html
@@ -0,0 +1,140 @@
+{% extends "base.html" %}
+{% load staticfiles %}
+{% load bootstrap4 %}
+{% block content %}
+
+{% bootstrap_form_errors form type='non_fields' %}
+<form id="quick_booking_form" action="/booking/quick/" method="POST" class="form">
+    {% csrf_token %}
+        <div class="row mx-0 px-0">
+            <div class="col-12 mx-0 px-0 mt-2">
+                <p class="my-0">Please select a host type you wish to book. Only available types are shown.</p>
+                {% bootstrap_field form.filter_field show_label=False %}
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12 col-lg-3 my-2">
+                <div class="col border rounded py-2 h-100">
+                    {% bootstrap_field form.purpose %}
+                    {% bootstrap_field form.project %}
+                    {% bootstrap_field form.length %}
+                    <span>Days: </span><output id="daysout">0</output>
+                    <script>
+                        document.getElementById("id_length").setAttribute("oninput", "daysout.value=this.value");
+                        document.getElementById("daysout").value = document.getElementById("id_length").value;
+                    </script>
+                </div>
+            </div>
+            <div class="col-12 col-lg-3 my-2">
+                <div class="col border rounded py-2 h-100">
+                    <label>Collaborators</label>
+                    {{ form.users }}
+                </div>
+            </div>
+            <div class="col-12 col-lg-3 my-2">
+                <div class="col border rounded py-2 h-100">
+                    {% bootstrap_field form.hostname %}
+                    {% bootstrap_field form.image %}
+                </div>
+            </div>
+            <div class="col-12 col-lg-3 my-2">
+                <div class="col border rounded py-2 h-100">
+                    <strong>OPNFV: (Optional)</strong>
+                    {% bootstrap_field form.installer %}
+                    {% bootstrap_field form.scenario %}
+                </div>
+            </div>
+            <div class="col-12 d-flex mt-2 justify-content-end">
+                <button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
+            </div>
+        </div>
+</form>
+
+<script type="text/javascript">
+    function submit_form()
+    {
+        run_form_callbacks();
+        document.getElementById("quick_booking_form").submit();
+    }
+
+    function hide_dropdown(drop_id) {
+        var drop = document.getElementById(drop_id);
+        //select 'blank' option
+        for( var i=0; i < drop.length; i++ )
+        {
+            if ( drop.options[i].text == '---------' )
+                drop.selectedIndex = i;
+        }
+    }
+
+    function get_selected_value(key){
+        for( var attr in multi_filter_widget.result[key] ){
+            if(!(attr in {}) )
+                return attr;
+        }
+    }
+
+    var sup_image_dict = {{image_filter | safe}};
+    var sup_installer_dict = {{installer_filter | safe}};
+    var sup_scenario_dict = {{scenario_filter | safe}};
+
+    function imageFilter() {
+        var drop = document.getElementById("id_image");
+        var lab_pk = get_selected_value("lab");
+        var host_pk = get_selected_value("host");
+
+        for (const childNode of drop.childNodes) {
+            var image_object = sup_image_dict[childNode.value];
+            if (image_object) //weed out empty option
+            {
+                childNode.disabled = !(image_object.host_profile == host_pk && image_object.lab == lab_pk);
+            }
+        }
+    }
+
+    imageFilter();
+    $('#id_installer').children().hide();
+    $('#id_scenario').children().hide();
+
+
+    Array.from(document.getElementsByClassName("grid-item-select-btn")).forEach(function (element) {
+        element.addEventListener('click', imageFilter);
+    });
+
+    function installerHider() {
+        dropFilter("id_installer", sup_installer_dict, "id_image");
+        scenarioHider();
+    }
+    document.getElementById('id_image').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) {
+        var dropdown = document.getElementById(target);
+
+        hide_dropdown(target);
+
+        var drop = document.getElementById(master);
+        var opts = target_filter[drop.options[drop.selectedIndex].value];
+        if (!opts) {
+            opts = {};
+        }
+
+        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 < dropdown.childNodes.length; i++) {
+            if (dropdown.childNodes[i].value in opts && !(dropdown.childNodes[i].value in {})) {
+                dropdown.childNodes[i].style.display = "inherit";
+                dropdown.childNodes[i].disabled = false;
+            }
+        }
+    }
+</script>
+{% endblock %}