Notifications monitor top bar with pause & buffer feed feature.

FMaz008 · Oct 21, 2024 · a4477b5 · a4477b5
1 parent d3a0b71
commit a4477b5
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 17 deletions.
diff --git a/page/notifications.css b/page/notifications.css
@@ -9,6 +9,24 @@
 	--border-free: #ffd700;
 }
 
+#topbar {
+	position: fixed;
+	z-index: 1;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	box-sizing: border-box;
+	height: 30px;
+	padding: 5px;
+	background-color: black;
+	text-align: center;
+	color: white;
+}
+
+body {
+	margin-top: 35px;
+}
+
 #vh-items-container {
 	display: flex;
 	width: 100%;

diff --git a/page/notifications.html b/page/notifications.html
@@ -15,6 +15,24 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	</head>
 	<body class="theme-default">
+		<div id="topbar">
+			<label for="fetch-last-100">
+				<button name="fetch-last-100">Fetch last 100</button>
+			</label>
+			<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">
+				Filter by:
+				<select name="filter-type">
+					<option value="-1">Show all notifications</option>
+					<option value="0">Regular only</option>
+					<option value="1">Zero ETV only</option>
+					<option value="2">KW match only</option>
+					<option value="9">Zero ETV or KW match only</option>
+				</select>
+			</label>
+		</div>
 		<h1>Notifications monitoring:</h1>
 
 		<div class="vh-container">
@@ -33,27 +51,15 @@ <h1>Notifications monitoring:</h1>
 			<br />
 			<i>
 				New notifications will automatically pop up here. No need to refresh the page unless you want to clear
-				the list, or experiencing resources usage issues. Do not rely on notification as your sole source of
-				checking for new items; You will miss items switching from RFY to AI, re-drops, etc.
+				the list, or experiencing resources usage issues.<br />
+				Do not rely on notification as your sole source of checking for new items; You will miss items switching
+				from RFY to AI, re-drops, etc.
 			</i>
 		</div>
 		<div class="monitor-toolbar">
-			<label for="fetch-last-100">
-				<button name="fetch-last-100">Fetch last 100</button>
-			</label>
 			<label for="auto-truncate">
 				<input type="checkbox" name="auto-truncate" id="auto-truncate" /> Auto truncate after 2000 items.
 			</label>
-			<label for="filter-type">
-				Filter by:
-				<select name="filter-type">
-					<option value="-1">Show all notifications</option>
-					<option value="0">Regular only</option>
-					<option value="1">Zero ETV only</option>
-					<option value="2">KW match only</option>
-					<option value="9">Zero ETV or KW match only</option>
-				</select>
-			</label>
 		</div>
 		<div id="vh-items-container"></div>
 	</body>

diff --git a/page/notifications.js b/page/notifications.js
@@ -59,6 +59,7 @@ const vineDomains = {
 var vineLocale = null;
 var vineCurrency = null;
 var vineDomain = null;
+var feedPaused = false;
 
 const broadcastChannel = new BroadcastChannel("VineHelperChannel");
 
@@ -110,6 +111,20 @@ const handleHideClick = (e) => {
 	elementByAsin(asin).remove();
 };
 
+const handlePauseFeedClick = (e) => {
+	feedPaused = !feedPaused;
+	if (feedPaused) {
+		document.getElementById("pauseFeed").value = "Resume Feed";
+	} else {
+		document.getElementById("pauseFeed").value = "Pause & Buffer Feed";
+		document.querySelectorAll(".vh-notification-box").forEach(function (node, key, parent) {
+			if (node.dataset.feedPaused == "true") {
+				node.style.display = "grid";
+				node.dataset.feedPaused = "false";
+			}
+		});
+	}
+};
 window.onload = function () {
 	broadcastChannel.onmessage = async function (event) {
 		let data = event.data;
@@ -138,7 +153,7 @@ window.onload = function () {
 		if (data.type == "wsOpen") {
 			document.getElementById("statusWS").innerHTML =
 				"<strong>Server status: </strong><div class='vh-switch-32 vh-icon-switch-on'></div> Listening for notifications...";
-			document.querySelector("label[for='fetch-last-100']").style.display = "block";
+			document.querySelector("label[for='fetch-last-100']").style.display = "inline-block";
 			document.getElementById("statusWS").style.display = "block";
 		}
 		if (data.type == "wsClosed") {
@@ -199,6 +214,10 @@ async function init() {
 		}
 	});
 
+	//Bind Pause Feed button
+	const btnPauseFeed = document.getElementById("pauseFeed");
+	btnPauseFeed.addEventListener("click", handlePauseFeedClick);
+
 	//Bind fetch-last-100 button
 	const btnLast100 = document.querySelector("button[name='fetch-last-100']");
 	btnLast100.addEventListener("click", function () {
@@ -232,6 +251,12 @@ function processNotificationFiltering(node) {
 	const filter = document.querySelector("select[name='filter-type']");
 	const notificationType = parseInt(node.getAttribute("data-notification-type"));
 
+	//Feed Paused
+	if (node.dataset.feedPaused == "true") {
+		node.style.display = "none";
+		return false;
+	}
+
 	if (filter.value == -1) {
 		node.style.display = "grid";
 		return true;
@@ -336,12 +361,12 @@ function addItem(data) {
 	Tpl.setVar("img_url", img_url);
 	Tpl.setVar("queue", queue);
 	Tpl.setVar("type", type);
+	Tpl.setVar("feedPaused", feedPaused);
 	Tpl.setIf("announce", Settings.get("discord.active") && Settings.get("discord.guid", false) != null);
 	Tpl.setIf("pinned", Settings.get("pinnedTab.active"));
 	Tpl.setIf("variant", Settings.get("general.displayVariantIcon") && is_parent_asin);
 
 	let content = Tpl.render(loadedTpl, true); //true to return a DOM object instead of an HTML string
-
 	const newBody = document.getElementById("vh-items-container");
 	newBody.prepend(content);
 

diff --git a/view/notification_monitor.html b/view/notification_monitor.html
@@ -5,6 +5,7 @@
 	data-etv-max=""
 	class="vh-notification-box"
 	data-notification-type="{{$type}}"
+	data-feed-paused="{{$feedPaused}}"
 >
 	<div class="vh-notification-toolbar">
 		<a href="{{$url}}" target="_blank">