Make notifications update top panel

NHAS · Apr 27, 2024 · c7769ea · c7769ea
1 parent 05f2f1c
commit c7769ea
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/ui/src/js/notifications.js b/ui/src/js/notifications.js
@@ -6,6 +6,8 @@
 const httpsEnabled = window.location.protocol == "https:";
 const url = (httpsEnabled ? 'wss://' : 'ws://') + window.location.host + "/notifications";
 
+const template = document.querySelector("#notificationTemplate")
+
 let socket = new WebSocket(url)
 
 const alertBadge = document.getElementById("numNotifications");
@@ -35,6 +37,42 @@ socket.onmessage = function (e) {
             background: msg.Color,
         }
     }).showToast();
+
+    if (dropDownlist.querySelector("#" + msg.ID) != null) {
+        // The event already exists in the notification
+        return
+    }
+
+    /*
+    <template id="notificationTemplate">
+    <a class="notification dropdown-item d-flex align-items-center" id="external">
+        <div>
+            <div class="small text-gray-500" id="date"></div>
+            <span class="font-weight-bold" id="heading"></span>
+
+            <div id="message"></div>
+        </div>
+    </a>
+    </template>
+    */
+
+    const clone = template.content.cloneNode(true);
+    clone.querySelector("#date").textContent = msg.Time
+    clone.querySelector("#heading").textContent = msg.Heading
+
+    let messages = clone.querySelector("#message")
+
+    for (let i = 0; i < msg.Message.length; i++) {
+        let p = document.createElement("p")
+        p.textContent = msg.Message[i]
+
+        messages.appendChild(p)
+    }
+
+    dropDownlist.appendChild(clone);
+
+    alertBadge.textContent = dropDownlist.querySelectorAll(".notification").length
+    alertBadge.hidden = false
 }
 
 

diff --git a/ui/templates/menus.html b/ui/templates/menus.html
@@ -39,7 +39,7 @@
 </head>
 
 <template id="notificationTemplate">
-    <a class="dropdown-item d-flex align-items-center" id="external" target="_blank" rel="noopener noreferrer">
+    <a class="notification dropdown-item d-flex align-items-center" id="external">
         <div>
             <div class="small text-gray-500" id="date"></div>
             <span class="font-weight-bold" id="heading"></span>
@@ -49,6 +49,7 @@
     </a>
 </template>
 
+
 <body id="page-top">
     <!-- Main CSRF guard so that JS can read this value and use it -->
     {{ csrfToken }}
@@ -229,7 +230,7 @@ <h6 class="collapse-header">Tools:</h6>
                                 aria-labelledby="alertsDropdown" id="notificationsDropDown">
 
                                 {{range $val := notifications}}
-                                <a id={{$val.ID}} class="notification dropdown-item d-flex align-items-center"
+                                <a id="{{$val.ID}}" class="notification dropdown-item d-flex align-items-center"
                                     href="{{$val.Url}}" {{if $val.OpenNewTab}}target="_blank" rel="noopener noreferrer"
                                     {{end}}>
                                     <div>