Mercurial > code > home > repos > light-bridge

annotate src/main.ts @ 13:1c865af058e7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start make* funcs and add links to light addresses
author drewp@bigasterisk.com
date Sun, 28 Jan 2024 20:03:20 -0800
parents 7cc004eafb82
children 412d37f707c9
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
13
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
1 import { LitElement, TemplateResult, css, html } from "lit";
0
drewp@bigasterisk.com
parents:
diff changeset
2 import { customElement, state } from "lit/decorators.js";
drewp@bigasterisk.com
parents:
diff changeset
3
11
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
4 interface Light {
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
5 name: string;
13
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
6 address: { url?: string; label: string };
11
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
7 requestingColor: string;
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
8 requestingDeviceColor: object;
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
9 emittingColor: string;
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
10 online: boolean;
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
11 latencyMs: number;
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
12 }
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
13
0
drewp@bigasterisk.com
parents:
diff changeset
14 @customElement("lb-page")
drewp@bigasterisk.com
parents:
diff changeset
15 export class LbPage extends LitElement {
drewp@bigasterisk.com
parents:
diff changeset
16 static styles = [
drewp@bigasterisk.com
parents:
diff changeset
17 css`
drewp@bigasterisk.com
parents:
diff changeset
18 :host {
drewp@bigasterisk.com
parents:
diff changeset
19 display: flex;
drewp@bigasterisk.com
parents:
diff changeset
20 flex-direction: column;
drewp@bigasterisk.com
parents:
diff changeset
21 height: 100vh;
drewp@bigasterisk.com
parents:
diff changeset
22 }
drewp@bigasterisk.com
parents:
diff changeset
23 table {
drewp@bigasterisk.com
parents:
diff changeset
24 border-collapse: collapse;
drewp@bigasterisk.com
parents:
diff changeset
25 }
drewp@bigasterisk.com
parents:
diff changeset
26 td,
drewp@bigasterisk.com
parents:
diff changeset
27 th {
drewp@bigasterisk.com
parents:
diff changeset
28 border: 1px solid #aaa;
drewp@bigasterisk.com
parents:
diff changeset
29 text-align: center;
drewp@bigasterisk.com
parents:
diff changeset
30 }
drewp@bigasterisk.com
parents:
diff changeset
31 .color {
drewp@bigasterisk.com
parents:
diff changeset
32 display: inline-block;
drewp@bigasterisk.com
parents:
diff changeset
33 width: 30px;
drewp@bigasterisk.com
parents:
diff changeset
34 height: 30px;
drewp@bigasterisk.com
parents:
diff changeset
35 border-radius: 50%;
drewp@bigasterisk.com
parents:
diff changeset
36 margin: 3px;
drewp@bigasterisk.com
parents:
diff changeset
37 vertical-align: middle;
drewp@bigasterisk.com
parents:
diff changeset
38 }
9
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
39 .col-group-1 {
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
40 background: #e0ecf4;
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
41 }
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
42 .col-group-2 {
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
43 background: #e0f3db;
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
44 }
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
45 .col-group-3 {
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
46 background: #fee8c8;
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
47 }
0
drewp@bigasterisk.com
parents:
diff changeset
48 `,
drewp@bigasterisk.com
parents:
diff changeset
49 ];
3
c04563fc8616 quiet some ts warnings
drewp@bigasterisk.com
parents: 1
diff changeset
50
c04563fc8616 quiet some ts warnings
drewp@bigasterisk.com
parents: 1
diff changeset
51 // bug https://github.com/lit/lit/issues/4305
11
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
52 @((state as any)()) lights: Light[] = [];
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
53 @((state as any)()) lightByName: Map<string, Light> = new Map();
9
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
54 @((state as any)()) reportTime: Date = new Date(0);
0
drewp@bigasterisk.com
parents:
diff changeset
55
drewp@bigasterisk.com
parents:
diff changeset
56 connectedCallback(): void {
drewp@bigasterisk.com
parents:
diff changeset
57 super.connectedCallback();
drewp@bigasterisk.com
parents:
diff changeset
58 const es = new EventSource("api/table");
drewp@bigasterisk.com
parents:
diff changeset
59 es.onmessage = (ev) => {
13
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
60 console.log("got table update");
1
42a494b8ee1a show report time
drewp@bigasterisk.com
parents: 0
diff changeset
61 const body = JSON.parse(ev.data);
11
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
62 this.lights = body.lights.map((wrappedLight: any) => wrappedLight.light as Light);
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
63 this.rebuildLightByName();
1
42a494b8ee1a show report time
drewp@bigasterisk.com
parents: 0
diff changeset
64 this.reportTime = new Date(body.now * 1000);
0
drewp@bigasterisk.com
parents:
diff changeset
65 };
drewp@bigasterisk.com
parents:
diff changeset
66 }
11
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
67 private rebuildLightByName() {
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
68 this.lightByName = new Map();
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
69 this.lights.forEach((light: any) => {
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
70 this.lightByName.set(light.name, light);
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
71 });
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
72 }
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
73
0
drewp@bigasterisk.com
parents:
diff changeset
74 render() {
drewp@bigasterisk.com
parents:
diff changeset
75 return html`
drewp@bigasterisk.com
parents:
diff changeset
76 <h1>Light-bridge</h1>
drewp@bigasterisk.com
parents:
diff changeset
77
drewp@bigasterisk.com
parents:
diff changeset
78 <table>
12
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
79 ${this.renderLightHeaders()} ${this.lights.map(this.renderLightRow.bind(this))}
0
drewp@bigasterisk.com
parents:
diff changeset
80 </table>
1
42a494b8ee1a show report time
drewp@bigasterisk.com
parents: 0
diff changeset
81 <p>Updated ${this.reportTime.toLocaleString("sv")}</p>
0
drewp@bigasterisk.com
parents:
diff changeset
82 <p>
drewp@bigasterisk.com
parents:
diff changeset
83 <a href="metrics">metrics</a> |
drewp@bigasterisk.com
parents:
diff changeset
84 <a href="api/graph">graph</a>
drewp@bigasterisk.com
parents:
diff changeset
85 </p>
drewp@bigasterisk.com
parents:
diff changeset
86 <bigast-loginbar></bigast-loginbar>
drewp@bigasterisk.com
parents:
diff changeset
87 `;
drewp@bigasterisk.com
parents:
diff changeset
88 }
12
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
89
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
90 renderLightHeaders() {
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
91 return html`<tr>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
92 <th class="col-group-1">light</th>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
93 <th class="col-group-1">address</th>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
94 <th class="col-group-2">requested color</th>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
95 <th class="col-group-2">requested device color</th>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
96 <th class="col-group-3">emitting color</th>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
97 <th class="col-group-3">online</th>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
98 <th class="col-group-3">latency</th>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
99 </tr>`;
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
100 }
13
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
101
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
102 renderLightRow(d: Light) {
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
103 return html`
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
104 <tr>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
105 <td class="col-group-1">${d.name}</td>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
106 <td class="col-group-1"><code>${this.renderLinked(d.address)}</code></td>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
107 <td class="col-group-2">
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
108 <code>${d.requestingColor}</code>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
109 <input type="color" @input=${this.onRequestingColor.bind(this, d.name)} .value="${d.requestingColor}" />
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
110 </td>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
111 <td class="col-group-2"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
112 <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
113 <td class="col-group-3">${d.online ? "✔" : ""}</td>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
114 <td class="col-group-3">${d.latencyMs} ms</td>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
115 </tr>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
116 `;
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
117 }
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
118
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
119 private renderLinked(link: { url?: string; label: string }): TemplateResult {
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
120 var addr = html`${link.label}`;
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
121 if (link.url) {
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
122 addr = html`<a href="${link.url}">${addr}</a>`;
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
123 }
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
124 return addr;
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
125 }
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
126
11
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
127 async onRequestingColor(lightName: string, ev: InputEvent) {
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
128 const currentRequest = this.lightByName.get(lightName)!.requestingColor;
0
drewp@bigasterisk.com
parents:
diff changeset
129 const value = (ev.target as HTMLInputElement).value;
11
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
130 console.log("LbPage ~ onRequestingColor ~ value === currentRequest:", value, currentRequest);
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
131 if (value === currentRequest) {
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
132 return;
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
133 }
0
drewp@bigasterisk.com
parents:
diff changeset
134 const url = new URL("api/output", location as any);
drewp@bigasterisk.com
parents:
diff changeset
135 url.searchParams.append("light", lightName);
drewp@bigasterisk.com
parents:
diff changeset
136 fetch(url, { method: "PUT", body: value }); // todo: only run one fetch at a time, per light
11
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
137
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
138 // sometime after this, the SSE table will send us back the change we made (probably)
0
drewp@bigasterisk.com
parents:
diff changeset
139 }
drewp@bigasterisk.com
parents:
diff changeset
140 }