add notifications, report back result of operations
This commit is contained in:
parent
f3f5d58ebb
commit
83a3afcdcd
8 changed files with 92 additions and 16 deletions
|
@ -40,6 +40,7 @@
|
|||
"history": "^5.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lru-cache": "^6.0.0",
|
||||
"mitt": "^3.0.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"sass": "^1.43.4",
|
||||
"sirv-cli": "^1.0.0",
|
||||
|
|
|
@ -61,6 +61,7 @@
|
|||
--foreground-lighter: #{$primary-lighter};
|
||||
--background: #{$background};
|
||||
--background-emph: #{color.scale($background, $lightness: -3%)};
|
||||
--error: darkred;
|
||||
font-size: 15px;
|
||||
|
||||
b {
|
||||
|
@ -81,6 +82,7 @@
|
|||
--foreground-lighter: #{color.scale($background, $lightness: -50%)};
|
||||
--background: #{$primary};
|
||||
--background-emph: #{$primary-lighter};
|
||||
--error: red;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
import { useEntity } from "../lib/entity";
|
||||
import type { UpObject } from "upend";
|
||||
import { readable } from "svelte/store";
|
||||
import { notify } from "../notifications";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let address: string;
|
||||
|
@ -35,7 +36,23 @@
|
|||
|
||||
// Native open
|
||||
function nativeOpen() {
|
||||
fetch(`/api/raw/${address}?native=1`);
|
||||
notify.emit("notification", {
|
||||
content: `Opening ${
|
||||
inferredIds[0] || address
|
||||
} in a default native application...`,
|
||||
});
|
||||
fetch(`/api/raw/${address}?native=1`)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(response.statusText);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
notify.emit("notification", {
|
||||
content: `Failed to open in native application! (${err})`,
|
||||
level: "error",
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
<script lang="ts">
|
||||
import Jobs from "./Jobs.svelte";
|
||||
import Jobs from "./Jobs.svelte";
|
||||
import Notifications from "./Notifications.svelte";
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
<footer id="footer">
|
||||
<Notifications />
|
||||
<Jobs />
|
||||
</footer>
|
||||
|
||||
|
@ -15,4 +17,8 @@
|
|||
flex-direction: column;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
:global(#footer > *) {
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -27,21 +27,18 @@
|
|||
updateJobs();
|
||||
</script>
|
||||
|
||||
<div class="jobs">
|
||||
{#each activeJobs as job (job.id)}
|
||||
<div class="job" transition:fade>
|
||||
<div class="job-label">{job.title}</div>
|
||||
<sl-progress-bar value={job.progress}>
|
||||
{Math.round(job.progress)}%
|
||||
</sl-progress-bar>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{#each activeJobs as job (job.id)}
|
||||
<div class="job" transition:fade>
|
||||
<div class="job-label">{job.title}</div>
|
||||
<sl-progress-bar value={job.progress}>
|
||||
{Math.round(job.progress)}%
|
||||
</sl-progress-bar>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style scoped lang="scss">
|
||||
.job {
|
||||
display: flex;
|
||||
margin: 1rem 0.5rem;
|
||||
|
||||
.job-label {
|
||||
white-space: nowrap;
|
||||
|
|
33
ui/src/components/Notifications.svelte
Normal file
33
ui/src/components/Notifications.svelte
Normal file
|
@ -0,0 +1,33 @@
|
|||
<script lang="ts">
|
||||
import { notify } from "../notifications";
|
||||
import { fade } from "svelte/transition";
|
||||
import type { Notification } from "../notifications";
|
||||
|
||||
let notifications: { [key: string]: Notification } = {};
|
||||
|
||||
notify.on("notification", (notif) => {
|
||||
let id = Math.random();
|
||||
notifications[id] = notif;
|
||||
setTimeout(() => {
|
||||
delete notifications[id];
|
||||
notifications = notifications;
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
const icons = {
|
||||
"error": "exclamation-triangle"
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each Object.values(notifications) as notification}
|
||||
<div class="notification notification-{notification.level || "info"}" transition:fade>
|
||||
<sl-icon name={icons[notification.level] || "bell"} />
|
||||
{notification.content}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style scoped lang="scss">
|
||||
.notification-error {
|
||||
color: var(--error);
|
||||
}
|
||||
</style>
|
12
ui/src/notifications.ts
Normal file
12
ui/src/notifications.ts
Normal file
|
@ -0,0 +1,12 @@
|
|||
import mitt from "mitt";
|
||||
|
||||
type NotifyEvents = {
|
||||
notification: Notification;
|
||||
};
|
||||
|
||||
export interface Notification {
|
||||
content: string;
|
||||
level?: "info" | "error";
|
||||
}
|
||||
|
||||
export const notify = mitt<NotifyEvents>();
|
12
ui/yarn.lock
12
ui/yarn.lock
|
@ -1998,6 +1998,13 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"mitt@npm:^3.0.0":
|
||||
version: 3.0.0
|
||||
resolution: "mitt@npm:3.0.0"
|
||||
checksum: f7be5049d27d18b1dbe9408452d66376fa60ae4a79fe9319869d1b90ae8cbaedadc7e9dab30b32d781411256d468be5538996bb7368941c09009ef6bbfa6bfc7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"mkdirp@npm:^0.5.1":
|
||||
version: 0.5.5
|
||||
resolution: "mkdirp@npm:0.5.5"
|
||||
|
@ -3046,6 +3053,7 @@ __metadata:
|
|||
history: ^5.1.0
|
||||
lodash: ^4.17.21
|
||||
lru-cache: ^6.0.0
|
||||
mitt: ^3.0.0
|
||||
normalize.css: ^8.0.1
|
||||
postcss: ^8.3.11
|
||||
rollup: ^2.59.0
|
||||
|
@ -3317,8 +3325,8 @@ __metadata:
|
|||
|
||||
"upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
|
||||
version: 0.0.1
|
||||
resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=b13bcd&locator=svelte-app%40workspace%3A."
|
||||
checksum: 274813a9d2563a6d8432199892f983933ed610c0c1dd6bfb3083a218591ecd2ea8eb143c4c2d83b0d1928a622fbaf4984b627edc3d9474c4f0ee66ce35fce9fb
|
||||
resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=498415&locator=svelte-app%40workspace%3A."
|
||||
checksum: a6887e9c3db8a4a44c075f8a36ccbbaae3e847f41798c059b4c623731adeefd03089c69c31056a8d3a184aefcb38dc022c832cdb16b922f19b33d6d0ac92ed96
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
|
Loading…
Reference in a new issue