diff options
Diffstat (limited to 'src/templates/base/notifier/inbox.html')
| -rw-r--r-- | src/templates/base/notifier/inbox.html | 87 |
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 |