Add frontend support for notifications

frontend/src/lib/api.ts

@@ -1,5 +1,24 @@
 export const API_URL = 'http://127.0.0.1:8000';
 
+/**
+ * Type definitions for Subscriptions and Notifications
+ */
+export interface Subscription {
+	id: number;
+	topic: string;
+	created_at: string;
+}
+
+export interface Notification {
+	id: number;
+	subscription_id: number;
+	title: string;
+	message: string;
+	priority: number;
+	created_at: string;
+	viewed: boolean;
+}
+
 /**
  * Type definitions for Settings
  */
@@ -8,6 +27,7 @@ export interface Settings {
 	requirements: string;
 	environment: string;
 	user: string;
+	ntfy_url?: string;
 }
 
 export async function checkHealth(): Promise<'healthy' | 'unhealthy'> {
@@ -96,7 +116,7 @@ export async function updateSetting(
 		headers: {
 			'Content-Type': 'application/json'
 		},
-		body: JSON.stringify(updatedSetting)
+		body: JSON.stringify({ ...updatedSetting, ntfy_url: updatedSetting.ntfy_url })
 	});
 	if (!response.ok) {
 		throw new Error('Failed to update setting');
@@ -104,6 +124,115 @@ export async function updateSetting(
 	return response.json();
 }
 
+// Fetch all subscriptions
+export async function fetchSubscriptions(): Promise<Subscription[]> {
+	const response = await fetch(`${API_URL}/subscriptions`);
+	if (!response.ok) {
+		throw new Error('Failed to fetch subscriptions');
+	}
+	return response.json();
+}
+
+// Fetch subscriptions by topic
+export async function getSubscription(topic_id: string): Promise<Subscription> {
+	const response = await fetch(`${API_URL}/subscriptions/${topic_id}`);
+	if (!response.ok) {
+		throw new Error('Failed to fetch subscriptions');
+	}
+	return response.json();
+}
+
+// Add a new notification to a subscription
+export async function addNotification(
+	subscriptionId: number,
+	title: string,
+	message: string,
+	priority: number
+): Promise<Notification> {
+	const response = await fetch(`${API_URL}/notifications`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify({ subscription_id: subscriptionId, title, message, priority })
+	});
+	if (!response.ok) {
+		throw new Error('Failed to add notification');
+	}
+	return response.json();
+}
+
+// Mark a notification as viewed
+export async function setViewed(notificationId: number): Promise<Notification> {
+	const response = await fetch(`${API_URL}/notifications/${notificationId}`, {
+		method: 'PUT',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify({ viewed: true })
+	});
+	if (!response.ok) {
+		throw new Error('Failed to set notification as viewed');
+	}
+	return response.json();
+}
+
+// Add a new subscription
+export async function addSubscription(topic: string): Promise<Subscription> {
+	const response = await fetch(`${API_URL}/subscriptions`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify({ topic })
+	});
+	if (!response.ok) {
+		throw new Error('Failed to add subscription');
+	}
+	return response.json();
+}
+
+// Delete a subscription
+export async function deleteSubscription(subscriptionId: number): Promise<void> {
+	const response = await fetch(`${API_URL}/subscriptions/${subscriptionId}`, {
+		method: 'DELETE'
+	});
+	if (!response.ok) {
+		throw new Error('Failed to delete subscription');
+	}
+}
+
+// Get all subscription notifications
+export async function fetchSubscriptionNotifications(
+	subscriptionId: string
+): Promise<Notification[]> {
+	const response = await fetch(`${API_URL}/subscriptions/${subscriptionId}/notifications`);
+	if (!response.ok) {
+		throw new Error('Failed to fetch subscription notifications');
+	}
+	return response.json();
+}
+
+// Fetch all notifications or filter by topic
+export async function fetchAllNotifications(): Promise<Notification[]> {
+	const url = `${API_URL}/notifications`;
+	const response = await fetch(url);
+	if (!response.ok) {
+		throw new Error('Failed to fetch notifications');
+	}
+	return response.json();
+}
+
+// Delete a notification
+export async function deleteNotification(notificationId: number): Promise<void> {
+	const response = await fetch(`${API_URL}/notifications/${notificationId}`, {
+		method: 'DELETE'
+	});
+	if (!response.ok) {
+		throw new Error('Failed to delete notification');
+	}
+}
+
 // Fetch a single script by ID
 export async function fetchScriptById(id: number): Promise<Script> {
 	const response = await fetch(`${API_URL}/script/${id}`);

frontend/src/routes/+layout.svelte

@@ -43,6 +43,7 @@
 		<div class="flex space-x-6">
 			<a href="/" class="text-lg hover:text-gray-400">Home</a>
 			<a href="/scripts" class="text-lg hover:text-gray-400">Scripts</a>
+			<a href="/notifications" class="text-lg hover:text-gray-400">Notifications</a>
 			<a href="/settings" class="text-lg hover:text-gray-400">
 				<Icon icon="material-symbols:settings" width="24" height="24" />
 			</a>

frontend/src/routes/+page.svelte

@@ -10,3 +10,11 @@
 		Go to Scripts
 	</a>
 </div>
+<div class="flex justify-center mt-4">
+	<a
+		href="/notifications"
+		class="px-6 py-3 bg-green-500 text-white rounded-lg shadow-md hover:bg-green-600"
+	>
+		View Notifications
+	</a>
+</div>

frontend/src/routes/notifications/+page.server.ts

@@ -0,0 +1,12 @@
+import { fetchSubscriptions } from '$lib/api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	try {
+		const subscriptions = await fetchSubscriptions();
+		return { subscriptions };
+	} catch (error) {
+		console.error('Failed to load subscriptions:', error);
+		return { subscriptions: [] };
+	}
+};

frontend/src/routes/notifications/+page.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { addSubscription, deleteSubscription, fetchSubscriptions } from '$lib/api';
+	import type { Subscription } from '$lib/api';
+	export let data: { subscriptions: Subscription[] };
+
+	let subscriptions: Subscription[] = data.subscriptions;
+	let newTopic = '';
+
+	async function handleAddSubscription() {
+		if (!newTopic.trim()) {
+			window.showNotification('error', 'Topic name cannot be empty.');
+			return;
+		}
+
+		try {
+			await addSubscription(newTopic.trim());
+			newTopic = '';
+			window.showNotification('success', 'Subscription added successfully.');
+			subscriptions = await fetchSubscriptions();
+		} catch (error) {
+			window.showNotification('error', 'Failed to add subscription - ' + error);
+		}
+	}
+
+	async function handleDeleteSubscription(id: number) {
+		try {
+			await deleteSubscription(id);
+			subscriptions = await fetchSubscriptions();
+		} catch (error) {
+			window.showNotification('error', 'Failed to delete subscription - ' + error);
+		}
+	}
+</script>
+
+<main class="p-4">
+	<h1 class="text-2xl font-bold mb-4">Subscriptions</h1>
+
+	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+		{#each subscriptions as subscription (subscription.id)}
+			<a
+				href={`/notifications/${subscription.id}`}
+				class="block p-4 border rounded bg-white hover:bg-gray-100 shadow-lg shadow-blue-500/50"
+			>
+				<h2 class="text-lg font-semibold text-gray-800">{subscription.topic}</h2>
+			</a>
+		{/each}
+	</div>
+
+	<div class="mt-8">
+		<h2 class="text-xl font-semibold mb-2">Add New Subscription</h2>
+		<form
+			on:submit|preventDefault={handleAddSubscription}
+			class="space-y-4 p-4 border rounded shadow"
+		>
+			<div>
+				<label for="newTopic" class="block text-sm font-medium">Topic</label>
+				<input
+					id="newTopic"
+					type="text"
+					bind:value={newTopic}
+					required
+					class="mt-1 block w-full p-2 border rounded"
+				/>
+			</div>
+			<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">
+				Add Subscription
+			</button>
+		</form>
+	</div>
+</main>
+
+<style>
+	main {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+</style>

frontend/src/routes/notifications/[subscription_id]/+page.server.ts

@@ -0,0 +1,18 @@
+import { fetchSubscriptionNotifications, getSubscription } from '$lib/api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+	try {
+		const subscription_id: string = params.subscription_id;
+
+		const subscription = await getSubscription(subscription_id);
+		const notifications = (await fetchSubscriptionNotifications(subscription_id)).sort(
+			(a, b) => new Date(b.created_at!).getTime() - new Date(a.created_at!).getTime()
+		);
+
+		return { subscription, notifications };
+	} catch (error) {
+		console.error('Failed to load:', error);
+		return { subscription: {}, notifications: [] };
+	}
+};

frontend/src/routes/notifications/[subscription_id]/+page.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { deleteNotification, addNotification, setViewed } from '$lib/api';
+	import type { Notification, Subscription } from '$lib/api';
+
+	export let data: { notifications: Notification[]; subscription: Subscription };
+
+	let notifications: Notification[] = data.notifications;
+	let newNotificationTitle = '';
+	let newNotificationMessage = '';
+	let newNotificationPriority = 3;
+	let selectedNotification: Notification | null = null;
+
+	async function openNotificationPopup(notification: Notification) {
+		if (!notification.viewed) {
+			await setViewed(notification.id);
+			notifications = notifications.map((n) =>
+				n.id === notification.id ? { ...n, viewed: true } : n
+			);
+			notification.viewed = true;
+		}
+
+		selectedNotification = notification;
+	}
+
+	function closeNotificationPopup() {
+		selectedNotification = null;
+	}
+
+	async function handleDeleteNotification(id: number) {
+		try {
+			await deleteNotification(id);
+			notifications = notifications.filter((notification) => notification.id !== id);
+			window.showNotification('success', 'Notification deleted successfully.');
+		} catch (error) {
+			window.showNotification('error', 'Failed to delete notification - ' + error);
+		}
+	}
+	async function markAllViewed() {
+		try {
+			await Promise.all(
+				notifications
+					.filter((notification) => !notification.viewed)
+					.map((notification) => setViewed(notification.id))
+			);
+			notifications = notifications.map((notification) =>
+				notification.viewed ? notification : { ...notification, viewed: true }
+			);
+			window.showNotification('success', 'All notifications marked as viewed.');
+		} catch (error) {
+			window.showNotification('error', 'Failed to mark all notifications as viewed.');
+		}
+	}
+</script>
+
+<main class="p-4">
+	<h1 class="text-2xl font-bold mb-4">Notifications for {data.subscription.topic}:</h1>
+
+	<div class="flex justify-between items-center mb-4">
+		<a href="/notifications" class="text-blue-500 hover:underline">← Return to Subscriptions</a>
+		<button class="bg-blue-500 text-white px-4 py-2 rounded" on:click={markAllViewed}>
+			Mark All Viewed
+		</button>
+	</div>
+
+	{#if notifications.length === 0}
+		<p>No notifications found for this topic.</p>
+	{:else}
+		<ul class="space-y-4">
+			{#each notifications as notification (notification.id)}
+				<li
+					class="p-2 rounded flex justify-between items-center border-s-slate-400 border-1"
+					class:bg-green-200={notification.viewed}
+				>
+					<button class="p-2 w-full text-left" on:click={() => openNotificationPopup(notification)}>
+						<div>
+							<p class="font-semibold">{notification.title}</p>
+							<p class="text-sm text-gray-500">
+								{new Date(notification.created_at).toLocaleString()}
+							</p>
+						</div>
+					</button>
+					<button
+						class="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600 block"
+						on:click|stopPropagation={() => handleDeleteNotification(notification.id)}
+					>
+						Delete
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+	{#if selectedNotification}
+		<div class="fixed inset-0 bg-opacity-30 backdrop-blur-sm flex items-center justify-center z-50">
+			<div class="bg-white p-6 rounded shadow-lg w-3/4 max-w-2xl max-h-[80vh] overflow-y-auto">
+				<h3 class="text-lg font-bold mb-4">Notification Details</h3>
+				<div class="mb-4">
+					<p class="font-semibold">Title:</p>
+					<pre
+						class="whitespace-pre-wrap bg-gray-100 p-2 rounded border">{selectedNotification.title}</pre>
+				</div>
+				<div class="mb-4">
+					<p class="font-semibold">Message:</p>
+					<pre
+						class="whitespace-pre-wrap bg-gray-100 p-2 rounded border">{selectedNotification.message}</pre>
+				</div>
+				<div class="mb-4">
+					<p class="font-semibold">Priority:</p>
+					<pre
+						class="whitespace-pre-wrap bg-gray-100 p-2 rounded border">{selectedNotification.priority}</pre>
+				</div>
+				<div class="mb-4">
+					<p class="font-semibold">Created At:</p>
+					<pre class="whitespace-pre-wrap bg-gray-100 p-2 rounded border">{new Date(
+							selectedNotification.created_at
+						).toLocaleString()}</pre>
+				</div>
+				<button
+					class="mt-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+					on:click={closeNotificationPopup}
+				>
+					Close
+				</button>
+			</div>
+		</div>
+	{/if}
+</main>
+
+<style>
+	main {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+</style>

frontend/src/routes/settings/+page.svelte

@@ -51,18 +51,28 @@
 		<div class="space-y-4">
 			{#each $settings as setting (setting.id)}
 				<div class="p-4 border rounded shadow">
-					<label class="block mb-2 font-bold">Requirements</label>
-					<div class="w-full border rounded">
-						<CodeMirror bind:value={setting.requirements} />
-					</div>
+					<label class="block mb-2 font-bold">
+						Requirements
+						<div class="w-full border rounded">
+							<CodeMirror bind:value={setting.requirements} />
+						</div>
+					</label>
 
-					<label class="block mt-4 mb-2 font-bold">Environment</label>
-					<div class="w-full border rounded">
-						<CodeMirror bind:value={setting.environment} />
-					</div>
+					<label class="block mt-4 mb-2 font-bold">
+						Environment
+						<div class="w-full border rounded">
+							<CodeMirror bind:value={setting.environment} />
+						</div>
+					</label>
 
-					<label class="block mt-4 mb-2 font-bold">User</label>
-					<input type="text" class="w-full p-2 border rounded" bind:value={setting.user} readonly />
+					<label class="block mt-4 mb-2 font-bold">
+						Ntfy URL
+						<input
+							type="text"
+							class="w-full p-2 border rounde font-normal"
+							bind:value={setting.ntfy_url}
+						/>
+					</label>
 
 					<button
 						class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"