job display
This commit is contained in:
parent
b52d664cd4
commit
1e14e5f2be
6 changed files with 88 additions and 10 deletions
|
@ -13,12 +13,6 @@ export interface ListingResult {
|
|||
|
||||
// export type OrderedListing = [Address, IEntry][];
|
||||
|
||||
export interface Job {
|
||||
title: string;
|
||||
progress: number;
|
||||
state: "InProgress" | "Done" | "Failed";
|
||||
}
|
||||
|
||||
export interface IFile {
|
||||
hash: string;
|
||||
path: string;
|
||||
|
@ -28,6 +22,13 @@ export interface IFile {
|
|||
mtime: string;
|
||||
}
|
||||
|
||||
export interface IJob {
|
||||
title: string;
|
||||
progress: number;
|
||||
state: "InProgress" | "Done" | "Failed";
|
||||
}
|
||||
|
||||
|
||||
export interface VaultInfo {
|
||||
name: string | null;
|
||||
location: string;
|
||||
|
|
|
@ -2,12 +2,14 @@
|
|||
import { Router, Route, createHistory } from "svelte-navigator";
|
||||
import createHashSource from "./util/history";
|
||||
import Header from "./layout/Header.svelte";
|
||||
import Home from "./views/Home.svelte";
|
||||
import Footer from "./components/Footer.svelte";
|
||||
import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js";
|
||||
import "@shoelace-style/shoelace/dist/components/input/input.js";
|
||||
import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
|
||||
import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
|
||||
import "@shoelace-style/shoelace/dist/components/card/card.js";
|
||||
import "@shoelace-style/shoelace/dist/components/progress-bar/progress-bar";
|
||||
import Home from "./views/Home.svelte";
|
||||
import Browse from "./views/Browse.svelte";
|
||||
import Search from "./views/Search.svelte";
|
||||
|
||||
|
@ -36,6 +38,8 @@
|
|||
<Route path="/search/:query" let:params>
|
||||
<Search query={params.query} />
|
||||
</Route>
|
||||
|
||||
<Footer />
|
||||
</Router>
|
||||
|
||||
<style global lang="scss">
|
||||
|
|
18
ui/src/components/Footer.svelte
Normal file
18
ui/src/components/Footer.svelte
Normal file
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import Jobs from "./Jobs.svelte";
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
<Jobs />
|
||||
</footer>
|
||||
|
||||
<style lang="scss">
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--background);
|
||||
}
|
||||
</style>
|
55
ui/src/components/Jobs.svelte
Normal file
55
ui/src/components/Jobs.svelte
Normal file
|
@ -0,0 +1,55 @@
|
|||
<script lang="ts">
|
||||
import type { IJob } from "upend/types";
|
||||
import { fade } from "svelte/transition";
|
||||
|
||||
interface JobWithId extends IJob {
|
||||
id: string;
|
||||
}
|
||||
|
||||
let jobs: JobWithId[] = [];
|
||||
let activeJobs: JobWithId[] = [];
|
||||
async function updateJobs() {
|
||||
let request = await fetch("/api/jobs");
|
||||
jobs = await request.json();
|
||||
|
||||
activeJobs = Object.entries(jobs)
|
||||
.filter(([_, job]) => job.state == "InProgress")
|
||||
.map(([id, job]) => {
|
||||
return { id, ...job };
|
||||
});
|
||||
|
||||
if (activeJobs.length) {
|
||||
setTimeout(updateJobs, 500);
|
||||
} else {
|
||||
setTimeout(updateJobs, 5000);
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.job {
|
||||
display: flex;
|
||||
margin: 1rem 0.5rem;
|
||||
|
||||
.job-label {
|
||||
white-space: nowrap;
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
sl-progress-bar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -18,4 +18,4 @@ export interface AttributeUpdate {
|
|||
export interface AttributeDelete {
|
||||
type: "delete";
|
||||
addr: string;
|
||||
}
|
||||
}
|
|
@ -3317,8 +3317,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=ee3691&locator=svelte-app%40workspace%3A."
|
||||
checksum: 142915df442562564c6985d03e6de29c97e16b74e2c4230bc934f3d6aa66eb2555ee318935006908d5ce2e680018d0ca3ce0a082c5fb5293b16b723a8b7c5015
|
||||
resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=b13bcd&locator=svelte-app%40workspace%3A."
|
||||
checksum: 274813a9d2563a6d8432199892f983933ed610c0c1dd6bfb3083a218591ecd2ea8eb143c4c2d83b0d1928a622fbaf4984b627edc3d9474c4f0ee66ce35fce9fb
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
|
Loading…
Reference in a new issue