Mercurial > code > home > repos > light-bridge

annotate src/main.ts @ 25:cee43f550577

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add /lightNames
author drewp@bigasterisk.com
date Fri, 02 Feb 2024 20:52:09 -0800
parents 178e020289c1
children
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 }
18
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
48
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
49 @media (max-width: 1200px) {
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
50 .opt {
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
51 display: none;
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
52 }
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
53 }
0
drewp@bigasterisk.com
parents:
diff changeset
54 `,
drewp@bigasterisk.com
parents:
diff changeset
55 ];
3
c04563fc8616 quiet some ts warnings
drewp@bigasterisk.com
parents: 1
diff changeset
56
c04563fc8616 quiet some ts warnings
drewp@bigasterisk.com
parents: 1
diff changeset
57 // 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
58 @((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
59 @((state as any)()) lightByName: Map<string, Light> = new Map();
9
9f427d8073c3 redo data model; add ui colors
drewp@bigasterisk.com
parents: 3
diff changeset
60 @((state as any)()) reportTime: Date = new Date(0);
0
drewp@bigasterisk.com
parents:
diff changeset
61
drewp@bigasterisk.com
parents:
diff changeset
62 connectedCallback(): void {
drewp@bigasterisk.com
parents:
diff changeset
63 super.connectedCallback();
drewp@bigasterisk.com
parents:
diff changeset
64 const es = new EventSource("api/table");
drewp@bigasterisk.com
parents:
diff changeset
65 es.onmessage = (ev) => {
13
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
66 console.log("got table update");
1
42a494b8ee1a show report time
drewp@bigasterisk.com
parents: 0
diff changeset
67 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
68 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
69 this.rebuildLightByName();
1
42a494b8ee1a show report time
drewp@bigasterisk.com
parents: 0
diff changeset
70 this.reportTime = new Date(body.now * 1000);
0
drewp@bigasterisk.com
parents:
diff changeset
71 };
drewp@bigasterisk.com
parents:
diff changeset
72 }
11
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
73 private rebuildLightByName() {
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
74 this.lightByName = new Map();
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
75 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
76 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
77 });
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
78 }
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
79
0
drewp@bigasterisk.com
parents:
diff changeset
80 render() {
drewp@bigasterisk.com
parents:
diff changeset
81 return html`
drewp@bigasterisk.com
parents:
diff changeset
82 <h1>Light-bridge</h1>
drewp@bigasterisk.com
parents:
diff changeset
83
drewp@bigasterisk.com
parents:
diff changeset
84 <table>
12
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
85 ${this.renderLightHeaders()} ${this.lights.map(this.renderLightRow.bind(this))}
0
drewp@bigasterisk.com
parents:
diff changeset
86 </table>
1
42a494b8ee1a show report time
drewp@bigasterisk.com
parents: 0
diff changeset
87 <p>Updated ${this.reportTime.toLocaleString("sv")}</p>
0
drewp@bigasterisk.com
parents:
diff changeset
88 <p>
22
178e020289c1 'full' button; other clean up
drewp@bigasterisk.com
parents: 19
diff changeset
89 <a href="metrics">metrics</a> | <a href="https://bigasterisk.com/code/light-bridge/files/tip/">code</a> |
0
drewp@bigasterisk.com
parents:
diff changeset
90 <a href="api/graph">graph</a>
drewp@bigasterisk.com
parents:
diff changeset
91 </p>
drewp@bigasterisk.com
parents:
diff changeset
92 <bigast-loginbar></bigast-loginbar>
drewp@bigasterisk.com
parents:
diff changeset
93 `;
drewp@bigasterisk.com
parents:
diff changeset
94 }
12
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
95
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
96 renderLightHeaders() {
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
97 return html`<tr>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
98 <th class="col-group-1">light</th>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
99 <th class="col-group-1">address</th>
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
100 <th class="col-group-2">requested color</th>
18
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
101 <th class="col-group-2 opt">requested device color</th>
12
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
102 <th class="col-group-3">emitting color</th>
18
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
103 <th class="col-group-3 opt">online</th>
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
104 <th class="col-group-3 opt">latency</th>
12
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
105 </tr>`;
7cc004eafb82 refactor (approx)
drewp@bigasterisk.com
parents: 11
diff changeset
106 }
13
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
107
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
108 renderLightRow(d: Light) {
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
109 return html`
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
110 <tr>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
111 <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
112 <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
113 <td class="col-group-2">
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
114 <code>${d.requestingColor}</code>
22
178e020289c1 'full' button; other clean up
drewp@bigasterisk.com
parents: 19
diff changeset
115 <input type="color" @input=${this.onRequestingColor.bind(this, d.name, null)} .value="${d.requestingColor}" />
178e020289c1 'full' button; other clean up
drewp@bigasterisk.com
parents: 19
diff changeset
116 <button @click=${this.onRequestingColor.bind(this, d.name, "#000000")}>off</button>
178e020289c1 'full' button; other clean up
drewp@bigasterisk.com
parents: 19
diff changeset
117 <button @click=${this.onRequestingColor.bind(this, d.name, "#ffffff")}>full</button>
13
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
118 </td>
18
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
119 <td class="col-group-2 opt"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td>
13
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
120 <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td>
18
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
121 <td class="col-group-3 opt">${d.online ? "✔" : ""}</td>
412d37f707c9 phone mode
drewp@bigasterisk.com
parents: 13
diff changeset
122 <td class="col-group-3 opt">${d.latencyMs} ms</td>
13
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
123 </tr>
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
124 `;
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
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
127 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
128 var addr = html`${link.label}`;
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
129 if (link.url) {
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
130 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
131 }
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
132 return addr;
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
133 }
1c865af058e7 start make* funcs and add links to light addresses
drewp@bigasterisk.com
parents: 12
diff changeset
134
22
178e020289c1 'full' button; other clean up
drewp@bigasterisk.com
parents: 19
diff changeset
135 async onRequestingColor(lightName: string, preset: string | null, ev: InputEvent) {
11
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
136 const currentRequest = this.lightByName.get(lightName)!.requestingColor;
22
178e020289c1 'full' button; other clean up
drewp@bigasterisk.com
parents: 19
diff changeset
137 const value = preset || (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
138 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
139 if (value === currentRequest) {
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
140 return;
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
141 }
0
drewp@bigasterisk.com
parents:
diff changeset
142 const url = new URL("api/output", location as any);
drewp@bigasterisk.com
parents:
diff changeset
143 url.searchParams.append("light", lightName);
drewp@bigasterisk.com
parents:
diff changeset
144 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
145
028ed39aa78f more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents: 9
diff changeset
146 // sometime after this, the SSE table will send us back the change we made (probably)
0
drewp@bigasterisk.com
parents:
diff changeset
147 }
drewp@bigasterisk.com
parents:
diff changeset
148 }