comparison src/main.ts @ 22:178e020289c1

'full' button; other clean up
author drewp@bigasterisk.com
date Mon, 29 Jan 2024 13:01:23 -0800
parents 4e350dcdc4fe
children
comparison
equal deleted inserted replaced
21:b8201490c731 22:178e020289c1
84 <table> 84 <table>
85 ${this.renderLightHeaders()} ${this.lights.map(this.renderLightRow.bind(this))} 85 ${this.renderLightHeaders()} ${this.lights.map(this.renderLightRow.bind(this))}
86 </table> 86 </table>
87 <p>Updated ${this.reportTime.toLocaleString("sv")}</p> 87 <p>Updated ${this.reportTime.toLocaleString("sv")}</p>
88 <p> 88 <p>
89 <a href="metrics">metrics</a> | 89 <a href="metrics">metrics</a> | <a href="https://bigasterisk.com/code/light-bridge/files/tip/">code</a> |
90 <a href="api/graph">graph</a> 90 <a href="api/graph">graph</a>
91 </p> 91 </p>
92 <bigast-loginbar></bigast-loginbar> 92 <bigast-loginbar></bigast-loginbar>
93 `; 93 `;
94 } 94 }
110 <tr> 110 <tr>
111 <td class="col-group-1">${d.name}</td> 111 <td class="col-group-1">${d.name}</td>
112 <td class="col-group-1"><code>${this.renderLinked(d.address)}</code></td> 112 <td class="col-group-1"><code>${this.renderLinked(d.address)}</code></td>
113 <td class="col-group-2"> 113 <td class="col-group-2">
114 <code>${d.requestingColor}</code> 114 <code>${d.requestingColor}</code>
115 <input type="color" @input=${this.onRequestingColor.bind(this, d.name)} .value="${d.requestingColor}" /> 115 <input type="color" @input=${this.onRequestingColor.bind(this, d.name, null)} .value="${d.requestingColor}" />
116 <button @click=${this.onZero.bind(this, d.name)}>off</button> 116 <button @click=${this.onRequestingColor.bind(this, d.name, "#000000")}>off</button>
117 <button @click=${this.onRequestingColor.bind(this, d.name, "#ffffff")}>full</button>
117 </td> 118 </td>
118 <td class="col-group-2 opt"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td> 119 <td class="col-group-2 opt"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td>
119 <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td> 120 <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td>
120 <td class="col-group-3 opt">${d.online ? "✔" : ""}</td> 121 <td class="col-group-3 opt">${d.online ? "✔" : ""}</td>
121 <td class="col-group-3 opt">${d.latencyMs} ms</td> 122 <td class="col-group-3 opt">${d.latencyMs} ms</td>
129 addr = html`<a href="${link.url}">${addr}</a>`; 130 addr = html`<a href="${link.url}">${addr}</a>`;
130 } 131 }
131 return addr; 132 return addr;
132 } 133 }
133 134
134 async onRequestingColor(lightName: string, ev: InputEvent) { 135 async onRequestingColor(lightName: string, preset: string | null, ev: InputEvent) {
135 const currentRequest = this.lightByName.get(lightName)!.requestingColor; 136 const currentRequest = this.lightByName.get(lightName)!.requestingColor;
136 const value = (ev.target as HTMLInputElement).value; 137 const value = preset || (ev.target as HTMLInputElement).value;
137 this.onCol(value, currentRequest, lightName);
138 }
139
140 async onZero(lightName: string, ev: InputEvent) {
141 const currentRequest = this.lightByName.get(lightName)!.requestingColor;
142 const value = "#000000";
143 this.onCol(value, currentRequest, lightName);
144 }
145
146 private onCol(value: string, currentRequest: string, lightName: string) {
147 console.log("LbPage ~ onRequestingColor ~ value === currentRequest:", value, currentRequest); 138 console.log("LbPage ~ onRequestingColor ~ value === currentRequest:", value, currentRequest);
148 if (value === currentRequest) { 139 if (value === currentRequest) {
149 return; 140 return;
150 } 141 }
151 const url = new URL("api/output", location as any); 142 const url = new URL("api/output", location as any);