Implement bed cooler...

data/www/components/pump-card.js

@@ -0,0 +1,51 @@
+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);