You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
257 lines
9.7 KiB
257 lines
9.7 KiB
<template>
|
|
<router-view />
|
|
|
|
<!-- https://github.com/emmanuelsw/notiwind -->
|
|
<NotificationGroup group="alert">
|
|
<div
|
|
class="fixed top-4 right-4 w-full max-w-sm flex flex-col items-start justify-end"
|
|
>
|
|
<Notification
|
|
v-slot="{ notifications, close }"
|
|
enter="transform ease-out duration-300 transition"
|
|
enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4"
|
|
enter-to="translate-y-0 opacity-100 sm:translate-x-0"
|
|
leave="transition ease-in duration-500"
|
|
leave-from="opacity-100"
|
|
leave-to="opacity-0"
|
|
move="transition duration-500"
|
|
move-delay="delay-300"
|
|
>
|
|
<div
|
|
v-for="notification in notifications"
|
|
:key="notification.id"
|
|
class="w-full"
|
|
role="alert"
|
|
>
|
|
<div
|
|
v-if="notification.type === 'toast'"
|
|
class="w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-900/90 text-white rounded-lg shadow-md"
|
|
>
|
|
<div class="w-full px-4 py-3">
|
|
<span class="font-semibold">{{ notification.title }}</span>
|
|
<p class="text-sm">{{ notification.text }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="notification.type === 'info'"
|
|
class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-100 rounded-lg shadow-md"
|
|
>
|
|
<div
|
|
class="flex items-center justify-center w-12 bg-slate-600 text-slate-100"
|
|
>
|
|
<fa icon="circle-info" class="fa-fw fa-xl"></fa>
|
|
</div>
|
|
|
|
<div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
|
|
<span class="font-semibold">{{ notification.title }}</span>
|
|
<p class="text-sm">{{ notification.text }}</p>
|
|
|
|
<button
|
|
@click="close(notification.id)"
|
|
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
|
|
>
|
|
<fa icon="xmark" class="fa-fw"></fa>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="notification.type === 'success'"
|
|
class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-emerald-100 rounded-lg shadow-md"
|
|
>
|
|
<div
|
|
class="flex items-center justify-center w-12 bg-emerald-600 text-emerald-100"
|
|
>
|
|
<fa icon="circle-info" class="fa-fw fa-xl"></fa>
|
|
</div>
|
|
|
|
<div class="relative w-full pl-4 pr-8 py-2 text-emerald-900">
|
|
<span class="font-semibold">{{ notification.title }}</span>
|
|
<p class="text-sm">{{ notification.text }}</p>
|
|
|
|
<button
|
|
@click="close(notification.id)"
|
|
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600"
|
|
>
|
|
<fa icon="xmark" class="fa-fw"></fa>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="notification.type === 'warning'"
|
|
class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-amber-100 rounded-lg shadow-md"
|
|
>
|
|
<div
|
|
class="flex items-center justify-center w-12 bg-amber-600 text-amber-100"
|
|
>
|
|
<fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa>
|
|
</div>
|
|
|
|
<div class="relative w-full pl-4 pr-8 py-2 text-amber-900">
|
|
<span class="font-semibold">{{ notification.title }}</span>
|
|
<p class="text-sm">{{ notification.text }}</p>
|
|
|
|
<button
|
|
@click="close(notification.id)"
|
|
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600"
|
|
>
|
|
<fa icon="xmark" class="fa-fw"></fa>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="notification.type === 'danger'"
|
|
class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-rose-100 rounded-lg shadow-md"
|
|
>
|
|
<div
|
|
class="flex items-center justify-center w-12 bg-rose-600 text-rose-100"
|
|
>
|
|
<fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa>
|
|
</div>
|
|
|
|
<div class="relative w-full pl-4 pr-8 py-2 text-rose-900">
|
|
<span class="font-semibold">{{ notification.title }}</span>
|
|
<p class="text-sm">{{ notification.text }}</p>
|
|
|
|
<button
|
|
@click="close(notification.id)"
|
|
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600"
|
|
>
|
|
<fa icon="xmark" class="fa-fw"></fa>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Notification>
|
|
</div>
|
|
</NotificationGroup>
|
|
|
|
<NotificationGroup group="modal">
|
|
<div class="fixed z-[100] top-0 inset-x-0 w-full">
|
|
<Notification
|
|
v-slot="{ notifications, close }"
|
|
enter="transform ease-out duration-300 transition"
|
|
enter-from="translate-y-2 opacity-0 sm:translate-y-4"
|
|
enter-to="translate-y-0 opacity-100 sm:translate-y-0"
|
|
leave="transition ease-in duration-500"
|
|
leave-from="opacity-100"
|
|
leave-to="opacity-0"
|
|
move="transition duration-500"
|
|
move-delay="delay-300"
|
|
>
|
|
<div
|
|
v-for="notification in notifications"
|
|
:key="notification.id"
|
|
class="w-full"
|
|
role="alert"
|
|
>
|
|
<div
|
|
v-if="notification.type === 'notification-permission'"
|
|
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
|
|
>
|
|
<div
|
|
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
|
|
>
|
|
<div class="w-full px-6 py-6 text-slate-900 text-center">
|
|
<p class="text-lg mb-4">
|
|
Would you like to <b>turn on</b> notifications for this app?
|
|
</p>
|
|
|
|
<button
|
|
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
|
|
>
|
|
Turn on Notifications
|
|
</button>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<button
|
|
@click="close(notification.id)"
|
|
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
|
|
>
|
|
Maybe Later
|
|
</button>
|
|
<button
|
|
class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md"
|
|
>
|
|
Never
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="notification.type === 'notification-mute'"
|
|
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
|
|
>
|
|
<div
|
|
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
|
|
>
|
|
<div class="w-full px-6 py-6 text-slate-900 text-center">
|
|
<p class="text-lg mb-4">Mute app notifications:</p>
|
|
|
|
<button
|
|
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
|
|
>
|
|
For 1 Hour
|
|
</button>
|
|
<button
|
|
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
|
|
>
|
|
For 8 Hours
|
|
</button>
|
|
<button
|
|
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
|
|
>
|
|
For 24 Hours
|
|
</button>
|
|
<button
|
|
class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
|
|
>
|
|
Until I turn it back on
|
|
</button>
|
|
<button
|
|
@click="close(notification.id)"
|
|
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="notification.type === 'notification-off'"
|
|
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
|
|
>
|
|
<div
|
|
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
|
|
>
|
|
<div class="w-full px-6 py-6 text-slate-900 text-center">
|
|
<p class="text-lg mb-4">
|
|
Would you like to <b>turn off</b> notifications for this app?
|
|
</p>
|
|
|
|
<button
|
|
class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
|
|
>
|
|
Turn Off Notifications
|
|
</button>
|
|
<button
|
|
@click="close(notification.id)"
|
|
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
|
|
>
|
|
Leave it On
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Notification>
|
|
</div>
|
|
</NotificationGroup>
|
|
</template>
|
|
|
|
<style></style>
|
|
|
|
<script lang="ts"></script>
|
|
|