From f3320ddb95fb2417428c3b33176013b10c05bdc3 Mon Sep 17 00:00:00 2001
From: FMaz <fmaz008@gmail.com>
Date: Tue, 22 Oct 2024 08:40:58 -0300
Subject: [PATCH] Notification Monitor, filter by queue type

---
 page/notifications.html        |  7 ++++-
 page/notifications.js          | 52 +++++++++++++++++++++-------------
 view/notification_monitor.html |  1 +
 3 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/page/notifications.html b/page/notifications.html
index ee31efd..ca87c67 100644
--- a/page/notifications.html
+++ b/page/notifications.html
@@ -22,8 +22,13 @@
 			<label for="pauseFeed">
 				<input type="button" name="pauseFeed" id="pauseFeed" value="Pause & Buffer Feed" />
 			</label>
-			<label for="filter-type" style="float: right; margin-right: 20px">
+			<label for="filter-queue" style="float: right; margin-right: 20px">
 				Filter by:
+				<select name="filter-queue">
+					<option value="-1">Show all queues</option>
+					<option value="last_chance">AFA</option>
+					<option value="encore">AI</option>
+				</select>
 				<select name="filter-type">
 					<option value="-1">Show all notifications</option>
 					<option value="0">Regular only</option>
diff --git a/page/notifications.js b/page/notifications.js
index aeb289a..62f1a0e 100644
--- a/page/notifications.js
+++ b/page/notifications.js
@@ -193,19 +193,19 @@ async function init() {
 	);
 
 	//Bind the event when changing the filter
-	const filter = document.querySelector("select[name='filter-type']");
-	filter.addEventListener("change", function () {
-		if (filter.value == "-1") {
-			//Display all notifications
-			document.querySelectorAll(".vh-notification-box").forEach(function (node, key, parent) {
-				node.style.display = "grid";
-			});
-		} else {
-			//Display a specific type of notifications only
-			document.querySelectorAll(".vh-notification-box").forEach(function (node, key, parent) {
-				processNotificationFiltering(node);
-			});
-		}
+	const filterType = document.querySelector("select[name='filter-type']");
+	filterType.addEventListener("change", function () {
+		//Display a specific type of notifications only
+		document.querySelectorAll(".vh-notification-box").forEach(function (node, key, parent) {
+			processNotificationFiltering(node);
+		});
+	});
+	const filterQueue = document.querySelector("select[name='filter-queue']");
+	filterQueue.addEventListener("change", function () {
+		//Display a specific type of notifications only
+		document.querySelectorAll(".vh-notification-box").forEach(function (node, key, parent) {
+			processNotificationFiltering(node);
+		});
 	});
 
 	//Bind Pause Feed button
@@ -238,8 +238,10 @@ function processNotificationFiltering(node) {
 	if (!node) {
 		return false;
 	}
-	const filter = document.querySelector("select[name='filter-type']");
+	const filterType = document.querySelector("select[name='filter-type']");
 	const notificationType = parseInt(node.getAttribute("data-notification-type"));
+	const filterQueue = document.querySelector("select[name='filter-queue']");
+	const queueType = node.getAttribute("data-queue");
 
 	//Feed Paused
 	if (node.dataset.feedPaused == "true") {
@@ -247,16 +249,26 @@ function processNotificationFiltering(node) {
 		return false;
 	}
 
-	if (filter.value == -1) {
+	if (filterType.value == -1) {
 		node.style.display = "grid";
-		return true;
-	} else if (filter.value == TYPE_HIGHLIGHT_OR_ZEROETV) {
+	} else if (filterType.value == TYPE_HIGHLIGHT_OR_ZEROETV) {
 		const typesToShow = [TYPE_HIGHLIGHT, TYPE_ZEROETV];
 		node.style.display = typesToShow.includes(notificationType) ? "grid" : "none";
-		return typesToShow.includes(notificationType);
+		typesToShow.includes(notificationType);
 	} else {
-		node.style.display = notificationType == filter.value ? "grid" : "none";
-		return notificationType == filter.value;
+		node.style.display = notificationType == filterType.value ? "grid" : "none";
+		notificationType == filterType.value;
+	}
+
+	if (node.style.display == "grid") {
+		if (filterQueue.value == "-1") {
+			return true;
+		} else {
+			node.style.display = queueType == filterQueue.value ? "grid" : "none";
+			return queueType == filterQueue.value;
+		}
+	} else {
+		return false;
 	}
 }
 
diff --git a/view/notification_monitor.html b/view/notification_monitor.html
index cd040e3..70d0f3c 100644
--- a/view/notification_monitor.html
+++ b/view/notification_monitor.html
@@ -6,6 +6,7 @@
 	class="vh-notification-box"
 	data-notification-type="{{$type}}"
 	data-feed-paused="{{$feedPaused}}"
+	data-queue="{{$queue}}"
 >
 	<div class="vh-notification-toolbar">
 		<a href="{{$url}}" target="_blank">