Mercurial > code > home > repos > video
annotate src/ingest/IngestStatus.ts @ 21:111a41817968
shoelace progress bar (untested)
author | drewp@bigasterisk.com |
---|---|
date | Mon, 17 Apr 2023 00:43:37 -0700 |
parents | 071943adf000 |
children | ff73b95fc72f |
rev | line source |
---|---|
13 | 1 import { LitElement, html, css } from "lit"; |
2 import { customElement, property } from "lit/decorators.js"; | |
21 | 3 export {SlProgressBar} from "@shoelace-style/shoelace"; |
4 | |
13 | 5 |
17
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
6 interface Row { |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
7 url: string; |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
8 t: string; |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
9 progress: string; |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
10 } |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
11 |
13 | 12 @customElement("ingest-status") |
13 export class IngestStatus extends LitElement { | |
17
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
14 @property() queue: Row[] = []; |
13 | 15 static styles = [ |
16 css` | |
17
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
17 table { |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
18 background: #ccc; |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
19 } |
13 | 20 `, |
21 ]; | |
17
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
22 connectedCallback(): void { |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
23 super.connectedCallback(); |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
24 const es = new EventSource("../api/ingest/queue"); |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
25 es.onmessage = (ev) => { |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
26 this.queue = JSON.parse(ev.data); |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
27 }; |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
28 } |
13 | 29 render() { |
30 return html` | |
17
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
31 <table> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
32 <thead> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
33 <th>Queued at</th> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
34 <th>Progress</th> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
35 <th>Source</th> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
36 </thead> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
37 <tbody id="processing"> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
38 ${this.queue.map( |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
39 (row) => html` |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
40 <tr> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
41 <td>${row.t}</td> |
21 | 42 <td><sl-progress-bar value="${row.progress}" class="progress-bar-values">${row.progress}%</sl-progress-bar></td> |
17
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
43 <td>${row.url}</td> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
44 </tr> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
45 ` |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
46 )} |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
47 </tbody> |
071943adf000
dnd a file or a url which we'll queue and fetch
drewp@bigasterisk.com
parents:
13
diff
changeset
|
48 </table> |
13 | 49 `; |
50 } | |
51 } |