35 lines
1 KiB
Vue
35 lines
1 KiB
Vue
<template>
|
|
<section>
|
|
Notifications are: <b>{{ subscribed ? "Enabled" : "Disabled" }}</b>
|
|
<br />
|
|
<button
|
|
:disabled="!supported"
|
|
@click="onClick"
|
|
>
|
|
{{ supported === undefined ? "Checking for support" : null }}
|
|
{{ supported === false ? "Notifications are not supported :(." : null }}
|
|
{{ supported === true ? (subscribed ? "Disable notifications" : "Enable notifications") : null }}
|
|
</button>
|
|
<details>
|
|
<summary>Debug</summary>
|
|
<pre><code>{{ JSON.stringify(subscription?.toJSON(), undefined, 4) ?? "No subscription set" }}</code></pre>
|
|
</details>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: session, refresh: refreshSession } = await useAccountSession();
|
|
const { supported, subscription, getSubscription, subscribe, unsubscribe } = usePushNotification();
|
|
const subscribed = computed(() => Boolean(subscription.value && session.value?.push))
|
|
async function onClick() {
|
|
if (!subscribed.value)
|
|
await subscribe();
|
|
else
|
|
await unsubscribe();
|
|
await refreshSession();
|
|
}
|
|
|
|
onMounted(() => {
|
|
getSubscription();
|
|
})
|
|
</script>
|