Mercurial > code > home > repos > light-bridge

comparison src/main.ts @ 18:412d37f707c9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
phone mode
author drewp@bigasterisk.com
date Mon, 29 Jan 2024 11:50:06 -0800
parents 1c865af058e7
children 4e350dcdc4fe
comparison
equal deleted inserted replaced
17:1d15dc4d673f 18:412d37f707c9
42 .col-group-2 { 42 .col-group-2 {
43 background: #e0f3db; 43 background: #e0f3db;
44 } 44 }
45 .col-group-3 { 45 .col-group-3 {
46 background: #fee8c8; 46 background: #fee8c8;
47 }
48
49 @media (max-width: 1200px) {
50 .opt {
51 display: none;
52 }
47 } 53 }
48 `, 54 `,
49 ]; 55 ];
50 56
51 // bug https://github.com/lit/lit/issues/4305 57 // bug https://github.com/lit/lit/issues/4305
90 renderLightHeaders() { 96 renderLightHeaders() {
91 return html`<tr> 97 return html`<tr>
92 <th class="col-group-1">light</th> 98 <th class="col-group-1">light</th>
93 <th class="col-group-1">address</th> 99 <th class="col-group-1">address</th>
94 <th class="col-group-2">requested color</th> 100 <th class="col-group-2">requested color</th>
95 <th class="col-group-2">requested device color</th> 101 <th class="col-group-2 opt">requested device color</th>
96 <th class="col-group-3">emitting color</th> 102 <th class="col-group-3">emitting color</th>
97 <th class="col-group-3">online</th> 103 <th class="col-group-3 opt">online</th>
98 <th class="col-group-3">latency</th> 104 <th class="col-group-3 opt">latency</th>
99 </tr>`; 105 </tr>`;
100 } 106 }
101 107
102 renderLightRow(d: Light) { 108 renderLightRow(d: Light) {
103 return html` 109 return html`
105 <td class="col-group-1">${d.name}</td> 111 <td class="col-group-1">${d.name}</td>
106 <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>
107 <td class="col-group-2"> 113 <td class="col-group-2">
108 <code>${d.requestingColor}</code> 114 <code>${d.requestingColor}</code>
109 <input type="color" @input=${this.onRequestingColor.bind(this, d.name)} .value="${d.requestingColor}" /> 115 <input type="color" @input=${this.onRequestingColor.bind(this, d.name)} .value="${d.requestingColor}" />
116 <button @click=${this.onZero.bind(this, d.name)}>off</button>
110 </td> 117 </td>
111 <td class="col-group-2"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td> 118 <td class="col-group-2 opt"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td>
112 <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td> 119 <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td>
113 <td class="col-group-3">${d.online ? "✔" : ""}</td> 120 <td class="col-group-3 opt">${d.online ? "✔" : ""}</td>
114 <td class="col-group-3">${d.latencyMs} ms</td> 121 <td class="col-group-3 opt">${d.latencyMs} ms</td>
115 </tr> 122 </tr>
116 `; 123 `;
117 } 124 }
118 125
119 private renderLinked(link: { url?: string; label: string }): TemplateResult { 126 private renderLinked(link: { url?: string; label: string }): TemplateResult {