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 type OrderedListing = [Address, IEntry][];
|
||||||
|
|
||||||
export interface Job {
|
|
||||||
title: string;
|
|
||||||
progress: number;
|
|
||||||
state: "InProgress" | "Done" | "Failed";
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IFile {
|
export interface IFile {
|
||||||
hash: string;
|
hash: string;
|
||||||
path: string;
|
path: string;
|
||||||
|
@ -28,6 +22,13 @@ export interface IFile {
|
||||||
mtime: string;
|
mtime: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface IJob {
|
||||||
|
title: string;
|
||||||
|
progress: number;
|
||||||
|
state: "InProgress" | "Done" | "Failed";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export interface VaultInfo {
|
export interface VaultInfo {
|
||||||
name: string | null;
|
name: string | null;
|
||||||
location: string;
|
location: string;
|
||||||
|
|
|
@ -2,12 +2,14 @@
|
||||||
import { Router, Route, createHistory } from "svelte-navigator";
|
import { Router, Route, createHistory } from "svelte-navigator";
|
||||||
import createHashSource from "./util/history";
|
import createHashSource from "./util/history";
|
||||||
import Header from "./layout/Header.svelte";
|
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 { 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/input/input.js";
|
||||||
import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.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/spinner/spinner.js";
|
||||||
import "@shoelace-style/shoelace/dist/components/card/card.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 Browse from "./views/Browse.svelte";
|
||||||
import Search from "./views/Search.svelte";
|
import Search from "./views/Search.svelte";
|
||||||
|
|
||||||
|
@ -36,6 +38,8 @@
|
||||||
<Route path="/search/:query" let:params>
|
<Route path="/search/:query" let:params>
|
||||||
<Search query={params.query} />
|
<Search query={params.query} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
</Router>
|
</Router>
|
||||||
|
|
||||||
<style global lang="scss">
|
<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 {
|
export interface AttributeDelete {
|
||||||
type: "delete";
|
type: "delete";
|
||||||
addr: string;
|
addr: string;
|
||||||
}
|
}
|
|
@ -3317,8 +3317,8 @@ __metadata:
|
||||||
|
|
||||||
"upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
|
"upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
|
||||||
version: 0.0.1
|
version: 0.0.1
|
||||||
resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=ee3691&locator=svelte-app%40workspace%3A."
|
resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=b13bcd&locator=svelte-app%40workspace%3A."
|
||||||
checksum: 142915df442562564c6985d03e6de29c97e16b74e2c4230bc934f3d6aa66eb2555ee318935006908d5ce2e680018d0ca3ce0a082c5fb5293b16b723a8b7c5015
|
checksum: 274813a9d2563a6d8432199892f983933ed610c0c1dd6bfb3083a218591ecd2ea8eb143c4c2d83b0d1928a622fbaf4984b627edc3d9474c4f0ee66ce35fce9fb
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue