dashboard/src/templates/notifier/inbox.html

   1 {% extends "base.html" %}
   2
   3
   4 {% load staticfiles %}
   5
   6 {% block content %}
   7
   8 <style media="screen">
   9     .inbox-panel {
  10         display: grid;
  11         grid-template-columns: 30% 5% 65%;
  12     }
  13
  14     .section-panel {
  15         padding: 10px;
  16     }
  17
  18     .iframe-panel {
  19         padding: 0px;
  20         margin-top: 0px;
  21     }
  22
  23     .card-container {
  24         border: 1px solid #cccccc;
  25         border-bottom: 0px;
  26     }
  27
  28     .card {
  29         height: 50px;
  30         position: relative;
  31         border-bottom: 1px solid #cccccc;
  32         padding: 10px;
  33         width: 100%;
  34         background-color: #ffffff;
  35         z-index: 5;
  36     }
  37
  38     .selected-card {
  39         background-color: #f3f3f3;
  40     }
  41
  42     .card:hover {
  43         box-shadow: 0px 0 5px 2px #cccccc;
  44         z-index: 6;
  45     }
  46
  47     .half_width {
  48         width: 50%;
  49     }
  50
  51     #page-wrapper {
  52         padding: 0px;
  53     }
  54
  55     .read_notification {
  56         background-color: #efefef;
  57     }
  58
  59     .scrollable {
  60         overflow-y: auto;
  61     }
  62 </style>
  63 <div class="container-fluid d-flex flex-grow-1 flex-column">
  64     <div class="row mt-3 mb-2">
  65         <div class="col-2 px-0">
  66             <div class="btn-group w-100" id="filterGroup">
  67                 <button class="btn btn-secondary active" data-read="-1">All</button>
  68                 <button class="btn btn-secondary" data-read="0">Unread</button>
  69                 <button class="btn btn-secondary" data-read="1">Read</button>
  70             </div>
  71         </div>
  72     </div>
  73     <div class="row flex-grow-1" id="fixHeight">
  74         <!-- Notification list && Controls -->
  75         <div class="mb-2 mb-lg-0 col-lg-2 px-0 mh-100">
  76             <div class="list-group rounded-0 rounded-left scrollable mh-100 notifications" id="unreadNotifications" data-read="0">
  77                 {% for notification in unread_notifications %}
  78                     <a
  79                         href="#"
  80                         onclick="showmessage({{notification.id}}); setactive(this);"
  81                         class="list-group-item list-group-item-action notification">
  82                         {{ notification }}
  83                     </a>
  84                 {% endfor %}
  85             </div>
  86             <div class="list-group rounded-0 rounded-left scrollable mh-100 notifications" id="readNotifications" data-read="1">
  87                 {% for notification in read_notifications %}
  88                     <a
  89                         href="#"
  90                         onclick="showmessage({{notification.id}}); setactive(this);"
  91                         class="list-group-item list-group-item-action list-group-item-secondary notification">
  92                         {{ notification }}
  93                     </a>
  94                 {% endfor %}
  95             </div>
  96         </div>
  97         <!-- Content -->
  98         <div class="col ml-lg-2 border mh-100 p-4">
  99             <iframe class="w-100 h-100" id="inbox-iframe" frameBorder="0" scrolling="yes">Please select a notification</iframe>
 100         </div>
 101     </div>
 102 </div>
 103
 104 <script type="text/javascript">
 105     function showmessage(msg_id) {
 106         iframe = document.getElementById("inbox-iframe");
 107         iframe.src = "notification/" + msg_id;
 108     }
 109
 110     function setactive(obj) {
 111         $(".notification").removeClass("active");
 112         $(obj).addClass("active");
 113     }
 114
 115     $(document).ready(function(){
 116         // For all / unread / read
 117         $("#filterGroup button").click(function(){
 118             let read = $(this).attr("data-read");
 119             $(this).siblings().removeClass("active");
 120             $(".notifications").addClass("d-none");
 121             $(this).addClass("active");
 122             if (read === "-1") {
 123                 return $(".notifications").removeClass("d-none");
 124             }
 125             $(`.notifications[data-read="${read}"]`).removeClass("d-none");
 126         });
 127     });
 128 </script>
 129 {% endblock %}