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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
1 import { LitElement, html, css } from "lit";
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
2 import { customElement, property } from "lit/decorators.js";
21
111a41817968 shoelace progress bar (untested)
drewp@bigasterisk.com
parents: 17
diff changeset
3 export {SlProgressBar} from "@shoelace-style/shoelace";
111a41817968 shoelace progress bar (untested)
drewp@bigasterisk.com
parents: 17
diff changeset
4
13
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
12 @customElement("ingest-status")
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
15 static styles = [
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
20 `,
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
29 render() {
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
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
111a41817968 shoelace progress bar (untested)
drewp@bigasterisk.com
parents: 17
diff changeset
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
49 `;
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
50 }
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
51 }