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
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";
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
11 @customElement("ingest-status")
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
14 static styles = [
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
19 `,
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
28 render() {
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
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
111a41817968 shoelace progress bar (untested)
drewp@bigasterisk.com
parents: 17
diff changeset
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
b73941c4dc0a more wip on ingest page; shared styles
drewp@bigasterisk.com
parents:
diff changeset
48 `;
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 }