job display

tools/upend_js/types.ts

@@ -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;

ui/src/App.svelte

@@ -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">

ui/src/components/Footer.svelte

@@ -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>

ui/src/components/Jobs.svelte

@@ -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>

ui/src/types/base.ts

@@ -18,4 +18,4 @@ export interface AttributeUpdate {
 export interface AttributeDelete {
   type: "delete";
   addr: string;
-}
+}

ui/yarn.lock

@@ -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