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