52 lines
2.0 KiB
JavaScript
52 lines
2.0 KiB
JavaScript
class PumpCard extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.enabled = false;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.innerHTML = `
|
|
<style>
|
|
:host{display:block}section{height:100%;box-sizing:border-box}.pumpState{font-size:32px;font-weight:700;line-height:1.15;margin:10px 0}.stateRow{display:flex;gap:8px;align-items:center}.dot{width:10px;height:10px;border-radius:50%;background:#607d8b}.dot.on{background:#188038}.actions{display:flex;gap:8px;flex-wrap:wrap}
|
|
</style>
|
|
<section>
|
|
<h3>Pump</h3>
|
|
<div class="muted">DC pump switch</div>
|
|
<div class="stateRow"><span id="dot" class="dot"></span><div id="state" class="pumpState">--</div></div>
|
|
<div class="actions"><button id="toggle">Toggle</button><button id="refresh" class="secondary">Refresh</button></div>
|
|
<pre id="out"></pre>
|
|
</section>`;
|
|
this.querySelector('#toggle').addEventListener('click', () => this.setPump(!this.enabled));
|
|
this.querySelector('#refresh').addEventListener('click', () => this.loadPump());
|
|
window.addEventListener('app:login', () => this.loadPump());
|
|
if (window.App && window.App.token()) this.loadPump();
|
|
}
|
|
|
|
render(json) {
|
|
this.enabled = !!json.enabled;
|
|
this.querySelector('#state').textContent = this.enabled ? 'On' : 'Off';
|
|
this.querySelector('#dot').classList.toggle('on', this.enabled);
|
|
this.querySelector('#toggle').textContent = this.enabled ? 'Turn off' : 'Turn on';
|
|
}
|
|
|
|
async loadPump() {
|
|
const text = await window.App.req('GET', '/api/pump');
|
|
this.querySelector('#out').textContent = text;
|
|
try {
|
|
const json = JSON.parse(text);
|
|
if (json.success) this.render(json);
|
|
} catch (error) {}
|
|
}
|
|
|
|
async setPump(enabled) {
|
|
const text = await window.App.req('POST', '/api/pump', {enabled});
|
|
this.querySelector('#out').textContent = text;
|
|
try {
|
|
const json = JSON.parse(text);
|
|
if (json.success) this.render(json);
|
|
} catch (error) {}
|
|
}
|
|
}
|
|
|
|
customElements.define('pump-card', PumpCard);
|