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

Rework notification page

Browse Source
This commit is contained in:
Nicola Spadari
2025-02-09 12:43:57 +01:00
parent cd348f81a7
commit 8dcf25078b
1 changed files with 39 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
app/pages/notifications.vue
View File

@@ -3,34 +3,19 @@
title="Notifications"
description="Send native notifications to the client using the notification plugin."
>
<form @submit.prevent="createNotification()">
<div class="mx-auto max-w-xl" lg="mr-0 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 leading-6" focus="ring-2 ring-emerald-500 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 leading-6" focus="ring-2 ring-emerald-500 ring-inset">
</div>
</div>
<UForm :state="inputState" :schema="schema" class="flex flex-col gap-y-4 items-end" @submit="createNotification">
<UFormField label="Notification title" name="notificationTitle">
<UInput v-model="inputState.notificationTitle" variant="subtle" size="lg" />
</UFormField>
<div class="flex justify-end">
<Btn type="submit">
Send notification
</Btn>
</div>
<UFormField label="Notification body (optional)" name="notificationBody">
<UInput v-model="inputState.notificationBody" variant="subtle" size="lg" />
</UFormField>
<p v-if="permissionError" class="mt-3 text-right text-sm text-red-500 font-semibold leading-6">
Missing permissions
</p>
</div>
</div>
</form>
<UButton type="submit" size="lg">
Send notification
</UButton>
</UForm>
</LayoutTile>
</template>
@@ -40,32 +25,44 @@
icon: "lucide:message-square-more"
});
const notificationTitle = ref("");
const notificationBody = ref("");
const permissionError = ref(false);
const schema = z.object({
notificationTitle: z.string({
required_error: "Title is required"
}).nonempty(),
notificationBody: z.string().optional()
});
type Schema = zInfer<typeof schema>;
const inputState = ref<Partial<Schema>>({
notificationTitle: undefined,
notificationBody: undefined
});
const toast = useToast();
const permissionGranted = ref(false);
const createNotification = async () => {
let permissionGranted = await useTauriNotificationIsPermissionGranted();
permissionGranted.value = await useTauriNotificationIsPermissionGranted();
if (!permissionGranted) {
if (!permissionGranted.value) {
const permission = await useTauriNotificationRequestPermission();
permissionGranted = permission === "granted";
permissionGranted.value = permission === "granted";
}
if (permissionGranted) {
if (permissionGranted.value) {
useTauriNotificationSendNotification({
title: notificationTitle.value,
body: notificationBody.value
title: inputState.value.notificationTitle!,
body: inputState.value.notificationBody
});
notificationTitle.value = "";
notificationBody.value = "";
inputState.value.notificationTitle = inputState.value.notificationBody = undefined;
} else {
permissionError.value = true;
useTimeoutFn(() => {
permissionError.value = false;
}, 3000);
toast.add({
title: "Error",
description: "Missing notifications permission",
color: "error"
});
}
};
</script>