Mercurial > code > home > repos > light-bridge
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); |