estel/playtool-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add notification page

Browse Source
This commit is contained in:
Nicola Spadari
2024-06-16 18:46:36 +02:00
parent 0b7c558688
commit ce7a2904f2
1 changed files with 71 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/pages/notification.vue
View File

@@ -1,5 +1,75 @@
<template> <template>
<div> <div>
<p>WIP: notification</p> <div class="grid grid-cols-1 lg:grid-cols-2">
<div class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16">
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
<h2 class="text-3xl text-white font-bold tracking-tight">
Notification
</h2>
<p class="mt-6 text-lg text-gray-300 leading-8">
Send native notifications to the client using the notification plugin.
</p>
</div>
</div>
<form class="px-6 pb-10 pt-12 lg:px-8 lg:py-24 sm:pt-16" @submit.prevent="createNotification()">
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
<div>
<label for="notification-title" class="block text-sm text-white font-semibold leading-6">Notification title</label>
<div class="mt-2.5">
<input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
</div>
</div>
<div>
<label for="notification-body" class="block text-sm text-white font-semibold leading-6">Notification body</label>
<div class="mt-2.5">
<input id="notification-body" v-model="notificationBody" type="text" name="notification-body" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset sm:text-sm sm:leading-6 focus:ring-2 focus:ring-emerald-500 focus:ring-inset">
</div>
</div>
<div class="flex justify-end">
<Btn type="submit">
Send notification
</Btn>
</div>
<p v-if="permissionError" class="mt-3 text-right text-sm text-red-500 font-semibold leading-6">
Missing permissions
</p>
</div>
</div>
</form>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup>
const notificationTitle = ref("");
const notificationBody = ref("");
const permissionError = ref(false);
const createNotification = async () => {
let permissionGranted = await isPermissionGranted();
if (!permissionGranted) {
const permission = await requestPermission();
permissionGranted = permission === "granted";
}
if (permissionGranted) {
sendNotification({
title: notificationTitle.value,
body: notificationBody.value
});
notificationTitle.value = "";
notificationBody.value = "";
} else {
permissionError.value = true;
useTimeoutFn(() => {
permissionError.value = false;
}, 3000);
}
};
</script>