Add frontend support for notifications
This commit is contained in:
Sami Abuzakuk
12
frontend/src/routes/notifications/+page.server.ts
Normal file
12
frontend/src/routes/notifications/+page.server.ts
Normal file
@@ -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: [] };
|
||||
}
|
||||
};
|
||||
77
frontend/src/routes/notifications/+page.svelte
Normal file
77
frontend/src/routes/notifications/+page.svelte
Normal file
@@ -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>
|
||||
@@ -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: [] };
|
||||
}
|
||||
};
|
||||
133
frontend/src/routes/notifications/[subscription_id]/+page.svelte
Normal file
133
frontend/src/routes/notifications/[subscription_id]/+page.svelte
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user