src/templates/base/notifier/inbox.html

   1 {% extends "base.html" %}
   2
   3
   4 {% load staticfiles %}
   5
   6 {% block content %}
   7
   8 <div class="container-fluid d-flex flex-grow-1 flex-column">
   9     <div class="row mt-3 mb-2">
  10         <div class="col-2 px-0">
  11             <div class="btn-group w-100" id="filterGroup">
  12                 <button class="btn btn-secondary active" data-read="-1">All</button>
  13                 <button class="btn btn-secondary" data-read="0">Unread</button>
  14                 <button class="btn btn-secondary" data-read="1">Read</button>
  15             </div>
  16         </div>
  17     </div>
  18     <div class="row flex-grow-1" id="fixHeight">
  19         <!-- Notification list && Controls -->
  20         <div class="mb-2 mb-lg-0 col-lg-2 px-0 mh-100">
  21             <span class="text-muted d-none" id="noMessages">No messages available</span>
  22             <div class="list-group rounded-0 rounded-left overflow-auto mh-100 notifications" id="unreadNotifications" data-read="0">
  23                 {% for notification in unread_notifications %}
  24                     <a
  25                         href="#"
  26                         onclick="showmessage({{notification.id}}); setactive(this);"
  27                         class="list-group-item list-group-item-action notification">
  28                         {{ notification }}
  29                     </a>
  30                 {% endfor %}
  31             </div>
  32             <div class="list-group rounded-0 rounded-left overflow-auto mh-100 notifications" id="readNotifications" data-read="1">
  33                 {% for notification in read_notifications %}
  34                     <a
  35                         href="#"
  36                         onclick="showmessage({{notification.id}}); setactive(this);"
  37                         class="list-group-item list-group-item-action list-group-item-secondary notification">
  38                         {{ notification }}
  39                     </a>
  40                 {% endfor %}
  41             </div>
  42         </div>
  43         <!-- Content -->
  44         <div class="col ml-lg-2 border mh-100 p-4">
  45             <iframe name="messageView" class="w-100 h-100" id="inbox-iframe" frameBorder="0" scrolling="yes">Please select a notification</iframe>
  46         </div>
  47     </div>
  48 </div>
  49
  50 <script type="text/javascript">
  51     function showmessage(msg_id) {
  52         window.frames["messageView"].location = "notification/" + msg_id;
  53     }
  54
  55     function setactive(obj) {
  56         $(".notification").removeClass("active");
  57         $(obj).addClass("active");
  58     }
  59
  60     // Shows messages in the given notification list.
  61     // Shows/hides the 'no messages' span after checking children amount
  62     // given the .notification classed element
  63     function showMessages(notificationList) {
  64         $(".notifications").addClass("d-none");
  65         if (notificationList.children().length < 1) {
  66             $("#noMessages").removeClass("d-none");
  67         } else {
  68             $("#noMessages").addClass("d-none");
  69             notificationList.removeClass("d-none");
  70         }
  71     }
  72
  73     $(document).ready(function(){
  74         // For all / unread / read
  75         $("#filterGroup button").click(function(){
  76             let read = $(this).attr("data-read");
  77             $(this).siblings().removeClass("active");
  78             $(this).addClass("active");
  79             if (read === "-1") {
  80                 return showMessages($(".notifications"));
  81             }
  82             return showMessages($(`.notifications[data-read="${read}"]`));
  83         });
  84         showMessages($(".notifications"));
  85     });
  86 </script>
  87 {% endblock %}