diff options
| -rw-r--r-- | ui/lib/apiServer.js | 16 | ||||
| -rw-r--r-- | ui/lib/components/NotificationSettings.svelte | 35 |
2 files changed, 35 insertions, 16 deletions
diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js index ac707a5..63fd8f9 100644 --- a/ui/lib/apiServer.js +++ b/ui/lib/apiServer.js @@ -55,6 +55,22 @@ export async function acceptInvite(inviteId, name, password) { .catch(responseError); } +export async function createPushSubscription(data) { + return await apiServer + .post("/push", { data }) + .catch(responseError); +} + +export async function deletePushSubscription(data) { + return await apiServer + .delete("/push", { data }) + .catch(responseError); +} + +export async function notifyMe() { + return await apiServer.post('/notifyMe').catch(responseError); +} + export function subscribeToEvents(resumePoint) { const eventsUrl = apiServer.getUri({ url: '/events', diff --git a/ui/lib/components/NotificationSettings.svelte b/ui/lib/components/NotificationSettings.svelte index 81c3708..8bc9d8b 100644 --- a/ui/lib/components/NotificationSettings.svelte +++ b/ui/lib/components/NotificationSettings.svelte @@ -1,5 +1,6 @@ <script> import { onMount } from "svelte"; + import * as api from '$lib/apiServer.js'; import Toggle from '$lib/components/Toggle.svelte'; let subscriptionJson = $state(null); @@ -22,11 +23,7 @@ p256dh: subJson.keys.p256dh, auth: subJson.keys.auth, }; - return fetch("/api/push", { - method: "post", - headers: { "Content-type": "application/json" }, - body: JSON.stringify(subscriptionJson), - }); + apiServer.createPushSubscription(subscriptionJson); }); } @@ -38,11 +35,7 @@ const { endpoint } = subscription.toJSON(); return subscription.unsubscribe() .then(() => { - fetch("/api/push", { - method: "delete", - headers: { "Content-type": "application/json" }, - body: JSON.stringify({ endpoint }), - }); + apiServer.deletePushSubscription({ endpoint }); subscriptionJson = null; }); }); @@ -56,6 +49,10 @@ } } + function testNotifications() { + api.notifyMe(); + } + onMount(() => { navigator.serviceWorker.ready.then((registration) => { return registration.pushManager.getSubscription(); @@ -67,25 +64,31 @@ }); </script> -<h2>Enable notifications</h2> +<h2>Notify me here</h2> <p> {#if subscriptionJson === null} - Notifications are currently disabled. + We won't notify you here. {:else} - Notifications are currently enabled. + We will notify you here. {/if} </p> -<button class="btn" onclick="{toggleSub}"> +<button class="btn" onclick={toggleSub}> {#if subscriptionJson === null} - Enable notifications + Notify me! {:else} - Disable notifications + Stop notifying me! {/if} </button> +<button class="btn" onclick={testNotifications}> + Test notifications +</button> + <h2>Notify me when:</h2> +<p>These are currently unimplemented.</p> + <Toggle name="channel_created" text="A new channel is created" |