🔔 User Notifications v0.6

front/css/app.css

@@ -144,6 +144,16 @@
 {
     background-color: rgba(0, 0, 0, 0);
 }
+
+.unread-notifications-bell
+{
+    opacity: 70%;
+    color: red;
+    position: absolute;
+    top: 3px;
+    /* display: none; */
+}
+
 .header-status-locked-db
 {
     width: 25px;

front/js/modal.js

@@ -261,6 +261,7 @@ function checkNotification() {
 
                 // Find the oldest unread notification with level "interrupt"
                 const oldestInterruptNotification = response.find(notification => notification.read === 0 && notification.level === "interrupt");
+                const allUnreadNotification = response.filter(notification => notification.read === 0);
 
                 if (oldestInterruptNotification) {
                     // Show modal dialog with the oldest unread notification
@@ -290,6 +291,9 @@ function checkNotification() {
                         });
                     });
                 }
+
+                $('#unread-notifications-bell-count').html(allUnreadNotification.length);   
+             
             }
         },
         error: function() {

front/php/server/utilNotification.php

@@ -31,6 +31,10 @@ if (isset($_GET['action'])) {
             // Call the notifications_clear function
             notifications_clear();
             break;
+        case 'notifications_mark_all_read':
+            // Call the notifications_mark_all_read function
+            notifications_mark_all_read();
+            break;
         case 'get_unread_notifications':
             // Call the get_unread_notifications function
             get_unread_notifications();
@@ -120,6 +124,9 @@ function mark_notification_as_read($guid) {
                         // Mark the notification as read
                         $notification['read'] = 1;
                         break;
+                    } elseif ($guid == null) // no guid given, mark all read
+                    {
+                        $notification['read'] = 1;
                     }
                 }
 
@@ -141,6 +148,10 @@ function mark_notification_as_read($guid) {
     echo "Failed to read notification file after $max_attempts attempts.";
 }
 
+function notifications_mark_all_read() {
+    mark_notification_as_read(null);
+}
+
 function get_unread_notifications() {
     $NOTIFICATION_API_FILE = '/app/front/api/user_notifications.json';
 

front/php/templates/header.php

@@ -148,19 +148,24 @@ if ($ENABLED_DARKMODE === True) {
         <ul class="nav navbar-nav">    
           <!-- Back Button -->		 
           <li>
-            <a id="back-button" href="javascript:history.go(-1);" role="button" span class='of-bt-icon'><i class='fa fa-arrow-left'></i></a>
+            <a id="back-button" href="javascript:history.go(-1);" role="button" span class='fa fa-arrow-left'></a>
           </li>
           <!-- Next Button -->		 
           <li>
-            <a id="next-button" href="javascript:history.go(1);" role="button" span class='of-bt-icon'><i class='fa fa-arrow-right'></i></a>
+            <a id="next-button" href="javascript:history.go(1);" role="button" span class='fa fa-arrow-right'></a>
           </li>			
           <!-- Clear cache & Reload -->		 
           <li>
-            <a id="reload-button" href='#' role="button" span class='of-bt-icon' onclick='clearCache()'><i class='fa fa-repeat'></i></a>
+            <a id="reload-button" href='#' role="button" span class='fa fa-repeat' onclick='clearCache()'></a>
           </li>	
           <!-- Full Screen -->		 
           <li>
-            <a id="fullscreen-button" href='#' role="button" span class='of-bt-icon' onclick='toggleFullscreen()'><i class='fa fa-arrows-alt'></i></a>
+            <a id="fullscreen-button" href='#' role="button" span class='fa fa-arrows-alt' onclick='toggleFullscreen()'></a>
+          </li>	                
+          <!-- Full Screen -->		 
+          <li>
+            <a id="notifications-button" href='userNotifications.php' role="button" span class='fa-solid fa-bell'></a>
+            <span  id="unread-notifications-bell-count" title="" class="badge bg-red unread-notifications-bell" >0</span>
           </li>	                
           <!-- Server Status -->
           <li>
@@ -183,11 +188,11 @@ if ($ENABLED_DARKMODE === True) {
           <!-- Header right info -->
           <li class="dropdown user user-menu">
             <!-- Menu Toggle Button -->
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <a href="#" class="dropdown-toggle" style=" height: 50px;" data-toggle="dropdown">
-              <!-- The user image in the navbar-->
+              
+              <span class="hidden-xs" ><!-- The user image in the navbar-->
               <img src="img/NetAlertX_logo.png" class="user-image" style="border-radius: initial" alt="NetAlertX Logo">
-              <!-- hidden-xs hides the username on small devices so only the image appears. -->
+              <!-- hidden-xs hides the username on small devices so only the image appears. --></span>
-              <span class="hidden-xs">Net <b>Alert</b><sup>x</sup></span>
             </a>
             <ul class="dropdown-menu">
               <!-- The user image in the menu -->

front/report.php

@@ -92,7 +92,7 @@
     // Function to update the displayed data and timestamp based on the selected format and index
     function updateData(format, index) {
         // Fetch data from the API endpoint
-        fetch('/api/table_notifications.json')
+        fetch('/api/table_notifications.json?nocache=' + Date.now())
             .then(response => response.json())
             .then(data => {
                 if (index < 0) {

front/userNotifications.php

@@ -25,8 +25,12 @@ require 'php/templates/header.php';
             <!-- Data will be inserted here by DataTables -->
         </tbody>
     </table>
+
+    <button id="clearNotificationsBtn" class="btn btn-danger">Clear All Notifications</button>
+    <button id="notificationsMarkAllRead" class="btn btn-default">Mark All Read</button>
+
 </div>
-<button id="clearNotificationsBtn" class="btn btn-danger">Clear All Notifications</button>
+
 </div>
 <script>
     function fetchData(callback) {
@@ -75,10 +79,10 @@ require 'php/templates/header.php';
                 }
             ],
             "columnDefs": [
-                { "width": "10%", "targets": [0] }, // Set width of the first four columns to 10%
+                { "width": "15%", "targets": [0] }, // Set width of the first four columns to 10%
                 { "width": "20%", "targets": [1] }, // Set width of the first four columns to 10%
                 { "width": "5%", "targets": [2, 3] }, // Set width of the first four columns to 10%
-                { "width": "60%", "targets": 4 } // Set width of the "Content" column to 60%
+                { "width": "50%", "targets": 4 } // Set width of the "Content" column to 60%
             ]
         });
 
@@ -107,6 +111,25 @@ require 'php/templates/header.php';
                 }
             });
         });
+
+        // Function to clear all notifications
+        $('#notificationsMarkAllRead').click(function() {
+            $.ajax({
+                url: phpEndpoint,
+                type: 'GET',
+                data: {
+                    action: 'notifications_mark_all_read'
+                },
+                success: function(response) {
+                    // Clear the table and reload data
+                    table.clear().draw();
+                },
+                error: function(xhr, status, error) {
+                    console.log("An error occurred while clearing notifications: " + error);
+                    // You can display an error message here if needed
+                }
+            });
+        });
     });
 </script>