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 { useEntity } from "../lib/entity";
|
||||||
import type { UpObject } from "upend";
|
import type { UpObject } from "upend";
|
||||||
import { readable } from "svelte/store";
|
import { readable } from "svelte/store";
|
||||||
import { notify } from "../notifications";
|
import { notify, UpNotification } from "../notifications";
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
|
@ -36,11 +36,14 @@
|
||||||
|
|
||||||
// Native open
|
// Native open
|
||||||
function nativeOpen() {
|
function nativeOpen() {
|
||||||
notify.emit("notification", {
|
notify.emit(
|
||||||
content: `Opening ${
|
"notification",
|
||||||
inferredIds[0] || address
|
new UpNotification(
|
||||||
} in a default native application...`,
|
`Opening ${
|
||||||
});
|
inferredIds[0] || address
|
||||||
|
} in a default native application...`
|
||||||
|
)
|
||||||
|
);
|
||||||
fetch(`/api/raw/${address}?native=1`)
|
fetch(`/api/raw/${address}?native=1`)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
|
@ -48,10 +51,13 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
notify.emit("notification", {
|
notify.emit(
|
||||||
content: `Failed to open in native application! (${err})`,
|
"notification",
|
||||||
level: "error",
|
new UpNotification(
|
||||||
});
|
`Failed to open in native application! (${err})`,
|
||||||
|
"error"
|
||||||
|
)
|
||||||
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,26 +1,33 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { notify } from "../notifications";
|
import { notify } from "../notifications";
|
||||||
import { fade } from "svelte/transition";
|
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(() => {
|
setTimeout(() => {
|
||||||
delete notifications[id];
|
notifications.splice(
|
||||||
|
notifications.findIndex((n) => (n.id = notification.id)),
|
||||||
|
1
|
||||||
|
);
|
||||||
notifications = notifications;
|
notifications = notifications;
|
||||||
}, 5000);
|
}, 5000);
|
||||||
});
|
});
|
||||||
|
|
||||||
const icons = {
|
const icons = {
|
||||||
"error": "exclamation-triangle"
|
error: "exclamation-triangle",
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#each Object.values(notifications) as notification}
|
{#each notifications as notification (notification.id)}
|
||||||
<div class="notification notification-{notification.level || "info"}" transition:fade>
|
<div
|
||||||
|
class="notification notification-{notification.level || 'info'}"
|
||||||
|
transition:fade
|
||||||
|
>
|
||||||
<sl-icon name={icons[notification.level] || "bell"} />
|
<sl-icon name={icons[notification.level] || "bell"} />
|
||||||
{notification.content}
|
{notification.content}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,12 +1,27 @@
|
||||||
import mitt from "mitt";
|
import mitt from "mitt";
|
||||||
|
|
||||||
type NotifyEvents = {
|
type NotifyEvents = {
|
||||||
notification: Notification;
|
notification: UpNotification;
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface Notification {
|
export type NotificationLevel = "info" | "error";
|
||||||
|
|
||||||
|
export interface INotification {
|
||||||
|
id: string;
|
||||||
content: 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>();
|
export const notify = mitt<NotifyEvents>();
|
||||||
|
|
Loading…
Reference in a new issue