Browse Source

mustard: notifs: Aggiunto filtro per la lista delle notifiche.

* web/mustard/notifs.php: Aggiunta la plancia e il popup da
  instances.php e funzioni JS per manipolare e filtrare la
  lista delle notifiche.
paul 4 years ago
parent
commit
6fafcf508c
1 changed files with 148 additions and 8 deletions
  1. 148 8
      web/mustard/notifs.php

+ 148 - 8
web/mustard/notifs.php

@@ -86,7 +86,6 @@ if ($filtordon) {
     $filtordimgon = 'imgs/cerca_on.svg';
 }
 ?>
-
 <!DOCTYPE HTML>
 <html lang="en">
 <head>
@@ -125,10 +124,8 @@ if ($filtordon) {
 
         function setBtnsVisibility(state) {
             let controls = document.querySelector("#notifs-list-controls");
-            let btns = Array(controls.querySelector("#read-btn"), controls.querySelector("#delete-btn"));
-            btns.forEach(function (btn) {
-                btn.style.visibility = state;
-            });
+            controls.querySelector("#read-btn").style.visibility = state;
+            controls.querySelector("#delete-btn").style.visibility = state;
         }
 
         function toggleState(check) {
@@ -152,6 +149,126 @@ if ($filtordon) {
             }
         }
 
+        function showFilterPanel() {
+            let plancia = document.querySelector("#plancia");
+            if (plancia.style.display !== "block") {
+                if (plancia.childElementCount <= 3) {
+                    addAfter(plancia.firstElementChild);
+                }
+                plancia.style.display = "block";
+            }
+        }
+
+        function getFilters() {
+            return Array.from(document.querySelectorAll("#plancia .notifs-criterion"));
+        }
+
+        function newFilter() {
+            return "<div class='notifs-criterion'>" +
+                "  <label for='start-date'>Da</label>" +
+                "  <input id='start-date' name='start-date' type='date'>" +
+                "  <label for='stop-date'>A</label>" +
+                "  <input id='stop-date' name='stop-date' type='date'>" +
+                "  <select id='severity'>" +
+                "    <option value='-1'>Indifferente</option>" +
+                "    <option value='1'>Normal</option>" +
+                "    <option value='2'>Warning</option>" +
+                "    <option value='3'>Error</option>" +
+                "  </select>" +
+                "  <select id='operation'>" +
+                "    <option value='0'>E</option>" +
+                "    <option value='1'>O</option>" +
+                "  </select>" +
+                "  <img class='plus' src='imgs/plus.svg' title='Aggiungi un criterio sotto questo'" +
+                "   onclick='addAfter(this.parentElement)'>" +
+                "  <img class='minus' src='imgs/minus.svg' title='Rimuovi questo criterio'" +
+                "   onclick='removeFilter(this.parentElement)'>" +
+                "</div>";
+        }
+
+        function addAfter(elem) {
+            let filters = getFilters();
+            if (filters.length < 7) {
+                elem.insertAdjacentHTML('afterend', newFilter());
+                filters = getFilters();
+                if (filters.length > 1) {
+                    let select = elem.querySelector("#operation");
+                    if (select.disabled) {
+                        select.disabled = false;
+                    }
+                }
+                filters[filters.length - 1].querySelector("#operation").disabled = true;
+            }
+        }
+
+        function removeFilter(elem) {
+            let filters = getFilters();
+            if (filters.length > 1) {
+                elem.remove();
+                filters = getFilters();
+                filters[filters.length - 1].querySelector("#operation").disabled = true;
+            }
+        }
+
+        function clearFilters() {
+            let filtered = document.querySelectorAll(".filtered");
+            filtered.forEach(f => f.classList.remove("filtered"))
+            getFilters().forEach(f => f.remove());
+            document.querySelector("#plancia").style.display = "none";
+        }
+
+        function makeDateFilter(criterion) {
+            let start = criterion.querySelector("#start-date").value;
+            let stop = criterion.querySelector("#stop-date").value;
+            start = (start === '') ? new Date(0) : new Date(start);
+            stop = (stop === '') ? new Date() : new Date(stop);
+            return date => (date <= stop) && (date >= start);
+        }
+
+        function makeSeverityFilter(criterion) {
+            let select = criterion.querySelector("#severity");
+            let severity = select.options[select.selectedIndex].value;
+            if (severity === "-1") {
+                return x => true;
+            }
+            return x => x === severity;
+        }
+
+        function makeFilterFunction(criterion) {
+            let dateFilter = makeDateFilter(criterion);
+            let severityFilter = makeSeverityFilter(criterion);
+            return notif => {
+                let microtime = new Date(parseFloat(notif.dataset.microtime) * 1000);
+                let severity = notif.dataset.severity;
+                return dateFilter(microtime) && severityFilter(severity);
+            }
+        }
+
+        function applyFilters() {
+            let filters = getFilters();
+            let notifs = getAliveNotifs();
+            let filterFunctions = filters.map(makeFilterFunction);
+            let fun = x => filterFunctions[0](x);
+
+            for (let i = 0; i < filters.length - 1; i++) {
+                // Questo hack serve per evitare che la chiamata
+                // al filtro sia interpretata come ricorsione.
+                let filter = fun;
+                if (filters[i].querySelector("#operation").value === "0") {
+                    fun = x => (filter(x) && filterFunctions[i + 1](x));
+                } else {
+                    fun = x => (filter(x) || filterFunctions[i + 1](x));
+                }
+            }
+
+            notifs.forEach(notif => {
+                if (!fun(notif)) {
+                    notif.classList.add("filtered");
+                }
+            });
+            document.querySelector("#plancia").style.display = "none";
+        }
+
         // -->
     </script>
 
@@ -167,6 +284,8 @@ if ($filtordon) {
         </ul>
         <div class="mtit">Notifiche</div>
         <div id="rightdiv">
+            <img src="<?php echo($filtordimgoff); ?>" id="lente" class="rlinks" title="Mostra il pannello di filtraggio"
+                 onclick="showFilterPanel();">
             <?php if ($account['Level'] != 'guest') echo('<img src="' . $notifs['imgoff'] . '" id="bell" class="rlinks" title="Show notifications" onclick="shidenotifs();">' . N); ?>
             <img src="imgs/esci.svg" class="rlinks" title="Logout" onclick="document.location.href='logout.php';">
         </div>
@@ -193,7 +312,9 @@ if ($filtordon) {
                 1 => "deleted"
             );
             foreach ($notifs['notifs'] as $n) {
-                echo("<div id=\"notif-" . $n["ID"] . "\" class=\"" . "notif " . $deleted[$n["Deleted"]] . " " . $sev_classes[$n["Severity"]] . " " . $seen_class[$n["Seen"]] . "\">" .
+                echo("<div id=\"notif-" . $n["ID"] . "\" class=\"" . "notif " . $deleted[$n["Deleted"]] . " " . $sev_classes[$n["Severity"]] . " " . $seen_class[$n["Seen"]] .
+                    "\" data-microtime='" . $n['Microtime'] . "' " .
+                    "data-severity='" . $n['Severity'] . "'>" .
                     "<input type=\"checkbox\" class=\"seen-checkbox\" onclick='notifSelect(this)'>" .
                     "<button type='button' onclick='markread(this.parentElement)'><i class=\"fa fa-envelope-open-o\" aria-hidden=\"true\"></i></button>" .
                     "<button type='button' onclick='markdeleted(this.parentElement)'><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i></button>" .
@@ -203,6 +324,14 @@ if ($filtordon) {
         } ?>
     </div>
 
+    <div id="popup">
+        <div id="inpopup">
+            <div id="popupcont">
+                ...
+            </div>
+        </div>
+    </div>
+
     <div id="footer">
         <div id="notifs-list-controls">
             <input id="global-selector" type="checkbox" onclick="toggleState(this)">
@@ -218,11 +347,22 @@ if ($filtordon) {
         </div>
     </div>
 </div>
+
+<div id="plancia">
+    <button id='clear-filters-btn' type='button'
+            onclick="confirma('Confermi di voler rimuovere tutti i criteri di filtraggio?','clearFilters()')">
+        Rimuovi tutti i criteri di filtraggio
+    </button>
+    <div id="criterion-list"></div>
+    <button id='apply-filters-btn' type='button' onclick="applyFilters()">
+        Applica
+    </button>
+</div>
+
 </body>
 </html>
 
 <?php
-
 mysqli_close($link);
-
+exit(0);
 ?>