33 lines
1.4 KiB
JavaScript
33 lines
1.4 KiB
JavaScript
class LedCard extends HTMLElement {
|
|
connectedCallback() {
|
|
this.innerHTML = `
|
|
<style>
|
|
:host{display:block}section{height:100%;box-sizing:border-box}.rangeRow{display:flex;gap:12px;align-items:center}.rangeRow input{flex:1}.rangeRow output{min-width:3ch;text-align:right;font-weight:650}
|
|
</style>
|
|
<section>
|
|
<h3>LED</h3>
|
|
<label>Brightness</label>
|
|
<div class="rangeRow"><input id="brightness" type="range" min="0" max="100" value="0"><output id="value">0</output></div>
|
|
<button id="apply">Apply</button>
|
|
<pre id="out"></pre>
|
|
</section>`;
|
|
this.brightness = this.querySelector('#brightness');
|
|
this.value = this.querySelector('#value');
|
|
this.brightness.addEventListener('input', () => this.value.value = this.brightness.value);
|
|
this.querySelector('#apply').addEventListener('click', () => this.setLed());
|
|
window.addEventListener('app:settings-loaded', event => this.applySettings(event.detail.settings));
|
|
}
|
|
|
|
applySettings(settings) {
|
|
if (!settings || settings.ledBrightness === undefined) return;
|
|
this.brightness.value = settings.ledBrightness;
|
|
this.value.value = settings.ledBrightness;
|
|
}
|
|
|
|
async setLed() {
|
|
this.querySelector('#out').textContent = await window.App.req('POST', '/api/led', {brightness: +this.brightness.value});
|
|
}
|
|
}
|
|
|
|
customElements.define('led-card', LedCard);
|