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

diff --git a/src/templates/base/notifier/inbox.html b/src/templates/base/notifier/inbox.html
new file mode 100644
index 0000000..26b6d32
--- /dev/null
+++ b/src/templates/base/notifier/inbox.html
@@ -0,0 +1,87 @@
+{% extends "base.html" %}
+
+
+{% load staticfiles %}
+
+{% block content %}
+
+<div class="container-fluid d-flex flex-grow-1 flex-column">
+    <div class="row mt-3 mb-2">
+        <div class="col-2 px-0">
+            <div class="btn-group w-100" id="filterGroup">
+                <button class="btn btn-secondary active" data-read="-1">All</button>
+                <button class="btn btn-secondary" data-read="0">Unread</button>
+                <button class="btn btn-secondary" data-read="1">Read</button>
+            </div>
+        </div>
+    </div>
+    <div class="row flex-grow-1" id="fixHeight">
+        <!-- Notification list && Controls -->
+        <div class="mb-2 mb-lg-0 col-lg-2 px-0 mh-100">
+            <span class="text-muted d-none" id="noMessages">No messages available</span>
+            <div class="list-group rounded-0 rounded-left overflow-auto mh-100 notifications" id="unreadNotifications" data-read="0">
+                {% for notification in unread_notifications %}
+                    <a
+                        href="#"
+                        onclick="showmessage({{notification.id}}); setactive(this);"
+                        class="list-group-item list-group-item-action notification">
+                        {{ notification }}
+                    </a>
+                {% endfor %}
+            </div>
+            <div class="list-group rounded-0 rounded-left overflow-auto mh-100 notifications" id="readNotifications" data-read="1">
+                {% for notification in read_notifications %}
+                    <a
+                        href="#"
+                        onclick="showmessage({{notification.id}}); setactive(this);"
+                        class="list-group-item list-group-item-action list-group-item-secondary notification">
+                        {{ notification }}
+                    </a>
+                {% endfor %}
+            </div>
+        </div>
+        <!-- Content -->
+        <div class="col ml-lg-2 border mh-100 p-4">
+            <iframe name="messageView" class="w-100 h-100" id="inbox-iframe" frameBorder="0" scrolling="yes">Please select a notification</iframe>
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+    function showmessage(msg_id) {
+        window.frames["messageView"].location = "notification/" + msg_id;
+    }
+
+    function setactive(obj) {
+        $(".notification").removeClass("active");
+        $(obj).addClass("active");
+    }
+
+    // Shows messages in the given notification list.
+    // Shows/hides the 'no messages' span after checking children amount
+    // given the .notification classed element
+    function showMessages(notificationList) {
+        $(".notifications").addClass("d-none");
+        if (notificationList.children().length < 1) {
+            $("#noMessages").removeClass("d-none");
+        } else {
+            $("#noMessages").addClass("d-none");
+            notificationList.removeClass("d-none");
+        }
+    }
+
+    $(document).ready(function(){
+        // For all / unread / read
+        $("#filterGroup button").click(function(){
+            let read = $(this).attr("data-read");
+            $(this).siblings().removeClass("active");
+            $(this).addClass("active");
+            if (read === "-1") {
+                return showMessages($(".notifications"));
+            }
+            return showMessages($(`.notifications[data-read="${read}"]`));
+        });
+        showMessages($(".notifications"));
+    });
+</script>
+{% endblock %}
\ No newline at end of file