web/mustard/js/notifs.js.php

@@ -19,13 +19,21 @@ function markread(notif) {
 	xhr.responseType='json';
 	xhr.send();
 	xhr.onload=function() {
-		notif.className='notifseen';
 		let jarr=xhr.response;
 		if (jarr['hmunseen']==0) {
 			notifimgon='imgs/bell_on.svg';
 			notifimgoff='imgs/bell_off.svg';
 			bell.src=notifimgon;
 		}
+
+		if (notif.classList.contains("notifunseen")){
+		    // Notifica nella navbar
+            notif.className='notifseen';
+		} else if (notif.classList.contains("unseen")) {
+		    // Notifica nella pagina di gestione notifiche
+            notif.classList.remove("unseen");
+            notif.classList.add("seen");
+        }
 	};
 	xhr.onerror=function() {
 		alert('La richiesta è fallita.');

web/mustard/notifs.php

@@ -304,6 +304,8 @@ if ($account['Level'] != 'guest') {
     </div>
 </nav>
 
+<?php echo($notifs['div']); ?>
+
 <div id="fullscreen">
     <div id="middlerow">
         <div id="notifs-list">
@@ -314,8 +316,16 @@ if ($account['Level'] != 'guest') {
                     2 => "sev-warning",
                     3 => "sev-error"
                 );
+                $seen_class = array(
+                    0 => "unseen",
+                    1 => "seen"
+                );
                 foreach ($notifs['notifs'] as $n) {
-                    echo("<div id=\"notif-" . $n["ID"] . "\" class=\"" . $sev_classes[$n["Severity"]] . "\">" . $n["Notification"] . "</div>\n");
+                    echo("<div id=\"notif-" . $n["ID"] .
+                        "\" class=\"" . $sev_classes[$n["Severity"]] . " " . $seen_class[$n["Seen"]] . "\">" .
+                        $n["Notification"] .
+                        "<button type='button' onclick='markread(this.parentElement)'>&#x2715</button>" .
+                        "</div>\n");
                 }
             } ?>
         </div>

web/mustard/theme.css

@@ -143,7 +143,7 @@ p {
 
 	word-break: break-word;
 
-	background-color: lightgrey;
+	background-color: #87DE87;
 	border-radius: 5px;
 }
 
@@ -155,6 +155,10 @@ p {
 	background-color: #DE8787;
 }
 
+#notifs-list div.seen {
+	background-color: lightgrey;
+}
+
 .ourfield {
 	background-color: #FFB380;
 }