Merge pull request #89 from synyx/2-hide-filtered-alerts

Hide filtered alerts

pkg/web/static/css/main.css

@@ -321,3 +321,11 @@ nav#menu:target ul li a:hover {
         margin-top: 1vw;
     }
 }
+
+h3.filtered {
+    margin-top: 119px;
+}
+
+.hidden {
+    display: none;
+}

pkg/web/static/js/index.js

@@ -1,5 +1,8 @@
 import * as Turbo from '@hotwired/turbo';
 import ReconnectingWebSocket from 'reconnecting-websocket';
+import { toggleFilteredStatus } from "./toggle-filtered";
+
+toggleFilteredStatus();
 
 class SSEConn {
     constructor(socketUrl) {

pkg/web/static/js/toggle-filtered.js

@@ -0,0 +1,29 @@
+export function toggleFilteredStatus() {
+    const toggleButton = document.getElementById("toggle-filtered-alerts");
+    const filteredTable = document.getElementById("filtered-table");
+
+    toggleButton.addEventListener("click", () => {
+        filteredTable.classList.toggle("hidden");
+        const filteredAreShown = !filteredTable.classList.contains("hidden");
+        toggleButton.innerText = filteredAreShown ? "Hide" : "Show";
+        localStorage.setItem("filteredAreShown", filteredAreShown.toString());
+        if (filteredAreShown) {
+            filteredTable.scrollIntoView();
+        }
+    });
+
+    function reRegisterToggleFilteredStatus(event) {
+        const fallbackToDefaultActions = event.detail.render
+
+        event.detail.render = function (streamElement) {
+            fallbackToDefaultActions(streamElement)
+            toggleFilteredStatus();
+        }
+    }
+    document.addEventListener("turbo:before-stream-render", reRegisterToggleFilteredStatus);
+
+    if (localStorage.getItem("filteredAreShown") === "true") {
+        filteredTable.classList.remove("hidden");
+        toggleButton.innerText = "Show";
+    }
+}

pkg/web/templates/alerts.gohtml

@@ -39,9 +39,11 @@
     </tbody>
 </table>
 
-<br /><br /><br /><br /><br /><br /><br />
-<h3 class="filtered">Filtered Alerts</h3>
-<table class="widetable filtered">
+<h3 class="filtered">
+    Filtered Alerts ({{ len .Content.Blocked }})
+    <button id="toggle-filtered-alerts">Show</button>
+</h3>
+<table id="filtered-table" class="widetable filtered hidden">
     <thead>
     <tr>
         <th width="30%">Where</th>