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