From 3bdfcd1dc954a54a508e22a0e1500f8c171818b7 Mon Sep 17 00:00:00 2001
From: FMaz <fmaz008@gmail.com>
Date: Sat, 5 Oct 2024 09:54:18 -0300
Subject: [PATCH] Added new features to the Notification Monitor: Pin and Hide.

---
 page/notifications.html        |  5 ++--
 page/notifications.js          | 51 +++++++++++++++++++++++++++++++---
 view/notification_monitor.html | 35 +++++++++++++++++++----
 3 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/page/notifications.html b/page/notifications.html
index 589ffdb..f422bb2 100644
--- a/page/notifications.html
+++ b/page/notifications.html
@@ -3,6 +3,7 @@
 		<title>Vine Helper - Notifications Monitor</title>
 		<script src="../node_modules/jquery/dist/jquery.min.js"></script>
 		<script src="../scripts/SettingsMgr.js"></script>
+		<script src="../scripts/PinnedListMgr.js"></script>
 		<script src="../scripts/Template.js"></script>
 		<script src="../scripts/ScreenNotifier.js"></script>
 		<script src="../scripts/BrendaAnnounce.js"></script>
@@ -38,11 +39,9 @@ <h1>Notifications monitoring:</h1>
 			</i>
 		</div>
 		<div class="monitor-toolbar">
-			<!--
-			<label for="fetch-last-100">
+			<label for="fetch-last-100" style="display: none">
 				<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>
diff --git a/page/notifications.js b/page/notifications.js
index eac11c8..b6688cb 100644
--- a/page/notifications.js
+++ b/page/notifications.js
@@ -39,6 +39,7 @@ function showDebug() {
 var Settings = new SettingsMgr();
 var Tpl = new Template();
 var TplMgr = new TemplateMgr();
+var PinnedList = new PinnedListMgr();
 var loadedTpl = null;
 
 const vineLocales = {
@@ -74,6 +75,7 @@ const handleReportClick = (e) => {
 };
 
 const handleBrendaClick = (e) => {
+	console.log("Branda");
 	e.preventDefault();
 
 	const asin = e.target.dataset.asin;
@@ -83,6 +85,36 @@ const handleBrendaClick = (e) => {
 	window.BrendaAnnounceQueue.announce(asin, etv, queue);
 };
 
+const handlePinClick = (e) => {
+	e.preventDefault();
+
+	const asin = e.target.dataset.asin;
+	const isParentAsin = e.target.dataset.isParentAsin;
+	const enrollmentGUID = e.target.dataset.enrollmentGuid;
+	const queue = e.target.dataset.queue;
+	const title = e.target.dataset.title;
+	const thumbnail = e.target.dataset.thumbnail;
+
+	PinnedList.addItem(asin, queue, title, thumbnail, isParentAsin, enrollmentGUID);
+
+	//Display notification
+	Notifications.pushNotification(
+		new ScreenNotification({
+			title: `Item ${asin} pinned.`,
+			lifespan: 3,
+			content: title,
+		})
+	);
+};
+
+const handleHideClick = (e) => {
+	e.preventDefault();
+
+	const asin = e.target.dataset.asin;
+	items.delete(asin);
+	elementByAsin(asin).remove();
+};
+
 window.onload = function () {
 	broadcastChannel.onmessage = async function (event) {
 		let data = event.data;
@@ -122,10 +154,12 @@ 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]").display = "block";
 		}
 		if (data.type == "wsClosed") {
 			document.getElementById("statusWS").innerHTML =
 				"<strong>Server status: </strong><div class='vh-switch-32 vh-icon-switch-off'></div> Not connected. Retrying in 30 sec.";
+			document.querySelector("label[for=fetch-last-100]").display = "none";
 		}
 	};
 
@@ -180,7 +214,6 @@ async function init() {
 	});
 
 	//Bind fetch-last-100 button
-	/*
 	const btnLast100 = document.querySelector("button[name='fetch-last-100']");
 	btnLast100.addEventListener("click", function () {
 		browser.runtime.sendMessage(
@@ -194,7 +227,6 @@ async function init() {
 			}
 		);
 	});
-	*/
 
 	//Obtain the status of the WebSocket connection.
 	browser.runtime.sendMessage({
@@ -292,6 +324,7 @@ function addItem(data) {
 	Tpl.setVar("type", type);
 	Tpl.setVar("etv", ""); //We will let SetETV() handle it.
 	Tpl.setIf("announce", Settings.get("discord.active") && Settings.get("discord.guid", false) != null);
+	Tpl.setIf("pinned", Settings.get("pinnedTab.active"));
 	let content = Tpl.render(loadedTpl, true); //true to return a DOM object instead of an HTML string
 
 	const newBody = document.getElementById("vh-items-container");
@@ -323,11 +356,21 @@ function addItem(data) {
 	document.querySelector("#vh-notification-" + asin + " .report-link").addEventListener("click", handleReportClick);
 
 	//Add new click listener for Brenda announce:
-	const announce = document.querySelector("#vh-notification-" + asin + " .vh-announce-link");
-	if (announce) {
+	if (Settings.get("discord.active") && Settings.get("discord.guid", false) != null) {
+		const announce = document.querySelector("#vh-announce-link-" + asin);
 		announce.addEventListener("click", handleBrendaClick);
 	}
 
+	//Add new click listener for the pinned button
+	if (Settings.get("pinnedTab.active")) {
+		const pinIcon = document.querySelector("#vh-pin-link-" + asin);
+		pinIcon.addEventListener("click", handlePinClick);
+	}
+
+	//Add new click listener for the hide button
+	const hideIcon = document.querySelector("#vh-hide-link-" + asin);
+	hideIcon.addEventListener("click", handleHideClick);
+
 	//Update the most recent date
 	document.getElementById("date_most_recent_item").innerText = formatDate(date);
 
diff --git a/view/notification_monitor.html b/view/notification_monitor.html
index 2e28970..b79379e 100644
--- a/view/notification_monitor.html
+++ b/view/notification_monitor.html
@@ -15,8 +15,21 @@
 				style="float: right"
 			></div>
 		</a>
-		{{if announce}}
-		<div style="clear: right"></div>
+		{{if pinned}}
+		<a href="#{{$asin}}" id="vh-pin-link-{{$asin}}" class="vh-floating-icon" title="Pin item">
+			<div
+				class="vh-toolbar-large-icon vh-icon-pin"
+				data-asin="{{$asin}}"
+				data-queue="{{$queue}}"
+				data-is-parent-asin="{{$is_parent_asin}}"
+				data-enrollment-guid="{{$enrollment_guid}}"
+				data-title="{{$description}}"
+				data-thumbnail="{{$img_url}}"
+				style="float: right; margin-right: 20px"
+			></div>
+		</a>
+		{{endif}} {{if announce}}
+
 		<a
 			href="#"
 			id="vh-announce-link-{{$asin}}"
@@ -27,10 +40,18 @@
 				class="vh-toolbar-large-icon vh-icon-announcement"
 				data-asin="{{$asin}}"
 				data-queue="{{$queue}}"
-				style="float: right; margin-top: 10px"
+				style="float: right; margin-right: 20px"
 			></div>
 		</a>
 		{{endif}}
+		<a href="#" id="vh-hide-link-{{$asin}}" class="vh-floating-icon" title="Hide item">
+			<div
+				class="vh-toolbar-large-icon vh-icon-hide"
+				data-asin="{{$asin}}"
+				style="float: right; margin-right: 20px"
+			></div>
+		</a>
+
 		<div style="clear: right"></div>
 		<a href="#" class="report-link">
 			<div
@@ -40,9 +61,11 @@
 			></div>
 		</a>
 	</div>
-	<div class="vh-notification-content">
-		<img src="{{$img_url}}" />
-		<a href="https://www.amazon.{{$domain}}/dp/{{$asin}}" target="_blank">{{$description}}</a>
+	<div class="vh-notification-content" style="margin-top: 20px">
+		<img src="{{$img_url}}" style="margin-top: -20px" />
+		<div>
+			<a href="https://www.amazon.{{$domain}}/dp/{{$asin}}" target="_blank">{{$description}}</a>
+		</div>
 	</div>
 	<div class="vh-notification-footer">
 		<span class="etv_value">{{$etv}}</span><span class="date_shown">{{$date}}</span>