fix notification weirdness, tidy up api
This commit is contained in:
parent
83a3afcdcd
commit
165d5c0e7f
3 changed files with 51 additions and 23 deletions
|
@ -7,7 +7,7 @@
|
|||
import { useEntity } from "../lib/entity";
|
||||
import type { UpObject } from "upend";
|
||||
import { readable } from "svelte/store";
|
||||
import { notify } from "../notifications";
|
||||
import { notify, UpNotification } from "../notifications";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let address: string;
|
||||
|
@ -36,11 +36,14 @@
|
|||
|
||||
// Native open
|
||||
function nativeOpen() {
|
||||
notify.emit("notification", {
|
||||
content: `Opening ${
|
||||
notify.emit(
|
||||
"notification",
|
||||
new UpNotification(
|
||||
`Opening ${
|
||||
inferredIds[0] || address
|
||||
} in a default native application...`,
|
||||
});
|
||||
} in a default native application...`
|
||||
)
|
||||
);
|
||||
fetch(`/api/raw/${address}?native=1`)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
|
@ -48,10 +51,13 @@
|
|||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
notify.emit("notification", {
|
||||
content: `Failed to open in native application! (${err})`,
|
||||
level: "error",
|
||||
});
|
||||
notify.emit(
|
||||
"notification",
|
||||
new UpNotification(
|
||||
`Failed to open in native application! (${err})`,
|
||||
"error"
|
||||
)
|
||||
);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -1,26 +1,33 @@
|
|||
<script lang="ts">
|
||||
import { notify } from "../notifications";
|
||||
import { fade } from "svelte/transition";
|
||||
import type { Notification } from "../notifications";
|
||||
import type { UpNotification } from "../notifications";
|
||||
|
||||
let notifications: { [key: string]: Notification } = {};
|
||||
let notifications: UpNotification[] = [];
|
||||
|
||||
notify.on("notification", (notification) => {
|
||||
notifications.push(notification);
|
||||
notifications = notifications;
|
||||
|
||||
notify.on("notification", (notif) => {
|
||||
let id = Math.random();
|
||||
notifications[id] = notif;
|
||||
setTimeout(() => {
|
||||
delete notifications[id];
|
||||
notifications.splice(
|
||||
notifications.findIndex((n) => (n.id = notification.id)),
|
||||
1
|
||||
);
|
||||
notifications = notifications;
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
const icons = {
|
||||
"error": "exclamation-triangle"
|
||||
}
|
||||
error: "exclamation-triangle",
|
||||
};
|
||||
</script>
|
||||
|
||||
{#each Object.values(notifications) as notification}
|
||||
<div class="notification notification-{notification.level || "info"}" transition:fade>
|
||||
{#each notifications as notification (notification.id)}
|
||||
<div
|
||||
class="notification notification-{notification.level || 'info'}"
|
||||
transition:fade
|
||||
>
|
||||
<sl-icon name={icons[notification.level] || "bell"} />
|
||||
{notification.content}
|
||||
</div>
|
||||
|
|
|
@ -1,12 +1,27 @@
|
|||
import mitt from "mitt";
|
||||
|
||||
type NotifyEvents = {
|
||||
notification: Notification;
|
||||
notification: UpNotification;
|
||||
};
|
||||
|
||||
export interface Notification {
|
||||
export type NotificationLevel = "info" | "error";
|
||||
|
||||
export interface INotification {
|
||||
id: string;
|
||||
content: string;
|
||||
level?: "info" | "error";
|
||||
level: NotificationLevel;
|
||||
}
|
||||
|
||||
export class UpNotification implements INotification {
|
||||
id: string;
|
||||
content: string;
|
||||
level: NotificationLevel;
|
||||
|
||||
constructor(content: string, level?: NotificationLevel) {
|
||||
this.id = String(Math.random());
|
||||
this.content = content;
|
||||
this.level = level || "info";
|
||||
}
|
||||
}
|
||||
|
||||
export const notify = mitt<NotifyEvents>();
|
||||
|
|
Loading…
Reference in a new issue