youwen5/jankboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: re-add missing error method in notifications

Browse source 
We need git which-idiot for this
This commit is contained in:
Youwen Wu 2024-02-26 23:38:26 -08:00
parent 3bde63db02
commit 8c0adca9b0
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
1 changed files with 82 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

130
client/src/lib/Notifications/notifications.ts
View file

@ -1,113 +1,147 @@
import { toast } from 'svelte-french-toast' import { toast } from "svelte-french-toast";
import type { ToastOptions } from 'svelte-french-toast' import type { ToastOptions } from "svelte-french-toast";
import InfoIcon from './InfoIcon.svelte' import InfoIcon from "./InfoIcon.svelte";
import { Howl } from 'howler' import { Howl } from "howler";
import WarnIcon from './WarnIcon.svelte' import WarnIcon from "./WarnIcon.svelte";
interface NotificationOptions extends ToastOptions { interface NotificationOptions extends ToastOptions {
withAudio?: boolean withAudio?: boolean;
src?: string src?: string;
onComplete?: () => void onComplete?: () => void;
} }
// get colors from https://tailwindcss.com/docs/customizing-colors // get colors from https://tailwindcss.com/docs/customizing-colors
export class Notifications { export class Notifications {
private static readonly defaultDuration = 3000 private static readonly defaultDuration = 3000;
public static success(message: string, options?: NotificationOptions) { public static success(message: string, options?: NotificationOptions) {
if (options?.withAudio && !options.src) if (options?.withAudio && !options.src)
throw new Error('No audio source provided') throw new Error("No audio source provided");
const onComplete = () => { const onComplete = () => {
if (options?.onComplete) options.onComplete() if (options?.onComplete) options.onComplete();
} };
const sendToast = (duration: number) => { const sendToast = (duration: number) => {
toast.success(message, { toast.success(message, {
style: style:
'padding: 25px; font-size: 1.5rem; background-color: #15803d; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw;', "padding: 25px; font-size: 1.5rem; background-color: #15803d; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw;",
duration, duration,
...options, ...options,
}) });
} };
if (options?.withAudio && options?.src) { if (options?.withAudio && options?.src) {
let sound: Howl let sound: Howl;
sound = new Howl({ sound = new Howl({
src: [options.src], src: [options.src],
preload: true, preload: true,
autoplay: true, autoplay: true,
onload: () => { onload: () => {
let duration = sound.duration() * 1000 let duration = sound.duration() * 1000;
sendToast(duration) sendToast(duration);
setTimeout(onComplete, duration) setTimeout(onComplete, duration);
}, },
}) });
} else { } else {
sendToast(this.defaultDuration) sendToast(this.defaultDuration);
setTimeout(onComplete, this.defaultDuration) setTimeout(onComplete, this.defaultDuration);
}
}
public static error(message: string, options?: NotificationOptions) {
if (options?.withAudio && !options.src)
throw new Error("No audio source provided");
const onComplete = () => {
if (options?.onComplete) options.onComplete();
};
const sendToast = (duration: number) => {
toast.error(message, {
style:
"padding: 25px; font-size: 1.5rem; background-color: #dc2626; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw;",
duration,
...options,
});
};
if (options?.withAudio && options?.src) {
let sound: Howl;
sound = new Howl({
src: [options.src],
preload: true,
autoplay: true,
onload: () => {
let duration = sound.duration() * 1000;
sendToast(duration);
setTimeout(onComplete, duration);
},
});
} else {
sendToast(this.defaultDuration);
setTimeout(onComplete, this.defaultDuration);
} }
} }
public static info(message: string, options?: NotificationOptions) { public static info(message: string, options?: NotificationOptions) {
const onComplete = () => { const onComplete = () => {
if (options?.onComplete) options.onComplete() if (options?.onComplete) options.onComplete();
} };
const sendToast = (duration: number) => { const sendToast = (duration: number) => {
toast(message, { toast(message, {
style: style:
'padding: 25px; font-size: 1.5rem; gap: 0.5rem; user-select: none; max-width-600px; max-width: 70vw;', "padding: 25px; font-size: 1.5rem; gap: 0.5rem; user-select: none; max-width-600px; max-width: 70vw;",
icon: InfoIcon, icon: InfoIcon,
duration, duration,
...options, ...options,
}) });
} };
if (options?.withAudio && options?.src) { if (options?.withAudio && options?.src) {
let sound: Howl let sound: Howl;
sound = new Howl({ sound = new Howl({
src: [options.src], src: [options.src],
preload: true, preload: true,
autoplay: true, autoplay: true,
onload: () => { onload: () => {
let duration = sound.duration() * 1000 let duration = sound.duration() * 1000;
sendToast(duration) sendToast(duration);
setTimeout(onComplete, duration) setTimeout(onComplete, duration);
}, },
}) });
} else { } else {
sendToast(this.defaultDuration) sendToast(this.defaultDuration);
setTimeout(onComplete, this.defaultDuration) setTimeout(onComplete, this.defaultDuration);
} }
} }
public static warn(message: string, options?: NotificationOptions) { public static warn(message: string, options?: NotificationOptions) {
const onComplete = () => { const onComplete = () => {
if (options?.onComplete) options.onComplete() if (options?.onComplete) options.onComplete();
} };
const sendToast = (duration: number) => { const sendToast = (duration: number) => {
toast(message, { toast(message, {
style: style:
'padding: 25px; font-size: 1.5rem; background-color: #f59e0b; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw;', "padding: 25px; font-size: 1.5rem; background-color: #f59e0b; color: #fafafa; gap: 0.5rem; user-select: none; max-width: 70vw;",
icon: WarnIcon, icon: WarnIcon,
duration, duration,
...options, ...options,
}) });
} };
if (options?.withAudio && options?.src) { if (options?.withAudio && options?.src) {
let sound: Howl let sound: Howl;
sound = new Howl({ sound = new Howl({
src: [options.src], src: [options.src],
preload: true, preload: true,
autoplay: true, autoplay: true,
onload: () => { onload: () => {
let duration = sound.duration() * 1000 let duration = sound.duration() * 1000;
sendToast(duration) sendToast(duration);
setTimeout(onComplete, duration) setTimeout(onComplete, duration);
}, },
}) });
} else { } else {
sendToast(this.defaultDuration) sendToast(this.defaultDuration);
setTimeout(onComplete, this.defaultDuration) setTimeout(onComplete, this.defaultDuration);
} }
} }
public static playAudio(src: string, onComplete: () => void = () => {}) { public static playAudio(src: string, onComplete: () => void = () => {}) {
@ -116,8 +150,8 @@ export class Notifications {
preload: true, preload: true,
autoplay: true, autoplay: true,
onload: () => { onload: () => {
setTimeout(onComplete, 1000 * sound.duration()) setTimeout(onComplete, 1000 * sound.duration());
}, },
}) });
} }
} }