Mercurial > code > home > repos > video

comparison src/ingest/IngestStatus.ts @ 17:071943adf000

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
dnd a file or a url which we'll queue and fetch
author drewp@bigasterisk.com
date Sun, 16 Apr 2023 03:19:33 -0700
parents b73941c4dc0a
children 111a41817968
comparison
equal deleted inserted replaced
16:838eb0223bdb 17:071943adf000
1 import { LitElement, html, css } from "lit"; 1 import { LitElement, html, css } from "lit";
2 import { customElement, property } from "lit/decorators.js"; 2 import { customElement, property } from "lit/decorators.js";
3 3
4 interface Row {
5 url: string;
6 t: string;
7 progress: string;
8 }
9
4 @customElement("ingest-status") 10 @customElement("ingest-status")
5 export class IngestStatus extends LitElement { 11 export class IngestStatus extends LitElement {
6 12 @property() queue: Row[] = [];
7 static styles = [ 13 static styles = [
8 css` 14 css`
15 table {
16 background: #ccc;
17 }
9 `, 18 `,
10 ]; 19 ];
20 connectedCallback(): void {
21 super.connectedCallback();
22 const es = new EventSource("../api/ingest/queue");
23 es.onmessage = (ev) => {
24 this.queue = JSON.parse(ev.data);
25 };
26 }
11 render() { 27 render() {
12 return html` 28 return html`
13 29 <table>
14 <table> 30 <thead>
15 <thead><th>Source</th><th>Status</th></thead> 31 <th>Queued at</th>
16 <tbody id="processing"> 32 <th>Progress</th>
17 </tbody> 33 <th>Source</th>
18 </table> 34 </thead>
35 <tbody id="processing">
36 ${this.queue.map(
37 (row) => html`
38 <tr>
39 <td>${row.t}</td>
40 <td>${row.progress}</td>
41 <td>${row.url}</td>
42 </tr>
43 `
44 )}
45 </tbody>
46 </table>
19 `; 47 `;
20 } 48 }
21 } 49 }