|
0
|
1 import { LitElement, css, html } from "lit";
|
|
|
2 import { customElement, state } from "lit/decorators.js";
|
|
|
3
|
|
|
4 @customElement("lb-page")
|
|
|
5 export class LbPage extends LitElement {
|
|
|
6 static styles = [
|
|
|
7 css`
|
|
|
8 :host {
|
|
|
9 display: flex;
|
|
|
10 flex-direction: column;
|
|
|
11 height: 100vh;
|
|
|
12 }
|
|
|
13 table {
|
|
|
14 border-collapse: collapse;
|
|
|
15 }
|
|
|
16 td,
|
|
|
17 th {
|
|
|
18 border: 1px solid #aaa;
|
|
|
19 text-align: center;
|
|
|
20 }
|
|
|
21 .color {
|
|
|
22 display: inline-block;
|
|
|
23 width: 30px;
|
|
|
24 height: 30px;
|
|
|
25 border-radius: 50%;
|
|
|
26 margin: 3px;
|
|
|
27 vertical-align: middle;
|
|
|
28 }
|
|
|
29 `,
|
|
|
30 ];
|
|
3
|
31
|
|
|
32 // bug https://github.com/lit/lit/issues/4305
|
|
|
33 @(state as any)() lights: object[] = [];
|
|
|
34 @(state as any)() reportTime: Date = new Date(0);
|
|
0
|
35
|
|
|
36 connectedCallback(): void {
|
|
|
37 super.connectedCallback();
|
|
|
38 const es = new EventSource("api/table");
|
|
|
39 es.onmessage = (ev) => {
|
|
1
|
40 const body = JSON.parse(ev.data);
|
|
|
41 this.lights = body.lights;
|
|
|
42 this.reportTime = new Date(body.now * 1000);
|
|
0
|
43 };
|
|
|
44 }
|
|
|
45 render() {
|
|
|
46 return html`
|
|
|
47 <h1>Light-bridge</h1>
|
|
|
48
|
|
|
49 <table>
|
|
|
50 <tr>
|
|
|
51 <th>light</th>
|
|
|
52 <th>address</th>
|
|
|
53 <th>online</th>
|
|
|
54 <th>color request</th>
|
|
|
55 <th>color message</th>
|
|
|
56 <th>color current</th>
|
|
|
57 <th>latency</th>
|
|
|
58 </tr>
|
|
|
59 ${this.lights.map(
|
|
|
60 (d: any) => html`
|
|
|
61 <tr>
|
|
|
62 <td>${d.light.name}</td>
|
|
|
63 <td><code>${d.light.address}</code></td>
|
|
|
64 <td>${d.light.online ? "✔" : ""}</td>
|
|
|
65 <td>
|
|
|
66 <code>${d.light.colorRequest}</code>
|
|
|
67 <input type="color" @input=${this.onColorRequest.bind(this, d.light.name)} value="${d.light.colorRequest}" />
|
|
|
68 </td>
|
|
|
69 <td><code>${JSON.stringify(d.light.colorMessage)}</code></td>
|
|
|
70 <td>${d.light.colorCurrent} <span class="color" style="background: ${d.light.colorCurrent}"></span></td>
|
|
|
71 <td>${d.light.latencyMs} ms</td>
|
|
|
72 </tr>
|
|
|
73 `
|
|
|
74 )}
|
|
|
75 </table>
|
|
1
|
76 <p>Updated ${this.reportTime.toLocaleString("sv")}</p>
|
|
0
|
77 <p>
|
|
|
78 <a href="metrics">metrics</a> |
|
|
|
79 <a href="api/graph">graph</a>
|
|
|
80 </p>
|
|
|
81 <bigast-loginbar></bigast-loginbar>
|
|
|
82 `;
|
|
|
83 }
|
|
|
84 onColorRequest(lightName: string, ev: InputEvent) {
|
|
|
85 const value = (ev.target as HTMLInputElement).value;
|
|
|
86 const url = new URL("api/output", location as any);
|
|
|
87 url.searchParams.append("light", lightName);
|
|
|
88 fetch(url, { method: "PUT", body: value }); // todo: only run one fetch at a time, per light
|
|
|
89 }
|
|
|
90 }
|
