Total overhaul!

2019-06-13 22:45:59 +02:00
parent 46be70ee49
commit 1d29e2365f
14 changed files with 611 additions and 436 deletions
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,119 @@
+import {LitElement, html, css} from "/card-tools/lit-element.js";
+
+import { Controller } from "./controller.js";
+import { LightController } from "./light-controller.js";
+import { MediaPlayerController } from "./media-player-controller.js";
+import { ClimateController } from "./climate-controller.js";
+import { CoverController } from "./cover-controller.js";
+import { FanController } from "./fan-controller.js";
+import { InputNumberController } from "./input-number-controller.js";
+import { InputSelectController } from "./input-select-controller.js";
+
+const controllers = {
+  light: LightController,
+  media_player: MediaPlayerController,
+  climate: ClimateController,
+  cover: CoverController,
+  fan: FanController,
+  input_number: InputNumberController,
+  input_select: InputSelectController,
+};
+
+class SliderEntityRow extends LitElement {
+  static get properties() {
+    return {
+      hass: {},
+    };
+  }
+
+  setConfig(config) {
+    this._config = config;
+    const domain = config.entity.split('.')[0];
+    const ctrlClass = controllers[domain];
+    if(!ctrlClass)
+      throw new Error(`Unsupported entity type: ${domain}`);
+    this.ctrl = new ctrlClass(config);
+  }
+
+  render() {
+    const c = this.ctrl;
+    c.hass = this.hass;
+    const slider = html`
+      <ha-slider
+        .min=${c.min}
+        .max=${c.max}
+        .step=${c.step}
+        .value=${c.value}
+        pin
+        @change=${(ev) => c.value = this.shadowRoot.querySelector("ha-slider").value}
+        class=${this._config.full_row ? "full" : ""}
+      ></ha-slider>
+    `;
+    const toggle = html`
+      <ha-entity-toggle
+        .stateObj=${this.hass.states[this._config.entity]}
+        .hass=${this.hass}
+      ></ha-entity-toggle>
+    `;
+
+    const content = html`
+    <div class="wrapper" @click=${(ev) => ev.stopPropagation()}>
+      ${(c.stateObj.state === "unavailable")
+        ? html`
+          <span class="state">
+          unavailable
+          </span>
+        `
+        : html`
+          ${((this._config.hide_when_off && c.isOff)
+            || !c.hasSlider)
+            ? ""
+            : slider }
+          ${(this._config.hide_state || this._config.toggle)
+            ? ""
+            : html`
+              <span class="state">
+                ${c.string}
+              </span>
+              `}
+          ${this._config.toggle
+            && c.hasToggle
+            ? toggle
+            : ""}
+        `}
+    </div>
+    `;
+
+    if (this._config.full_row)
+      return content;
+
+    return html`
+    <hui-generic-entity-row
+      .hass=${this.hass}
+      .config=${this._config}
+    > ${content} </hui-generic-entity-row>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      .wrapper {
+        display: flex;
+        align-items: center;
+        height: 40px;
+      }
+      .state {
+        min-width: 45px;
+        text-align: end;
+      }
+      ha-entity-toggle {
+        margin-left: 8px;
+      }
+      ha-slider.full {
+        width: 100%;
+      }
+    `;
+  }
+}
+
+customElements.define('slider-entity-row', SliderEntityRow);