Convert cover-row to TypeScript/LitElement (#1933)

* Convert cover-row to TypeScript/LitElement

* Extract `supports` methods from cover model

* Address review comments

* Revert line endings mixup

I suck at vs code apparently...

* Address review comments

* Address review comments: error-row not working

src/panels/lovelace/common/create-row-element.js

@@ -13,7 +13,6 @@ import "../entity-rows/hui-script-entity-row";
 import "../entity-rows/hui-text-entity-row";
 import "../entity-rows/hui-timer-entity-row";
 import "../entity-rows/hui-toggle-entity-row";
-
 import "../special-rows/hui-call-service-row";
 import "../special-rows/hui-divider-row";
 import "../special-rows/hui-section-row";

src/panels/lovelace/entity-rows/hui-cover-entity-row.js

@@ -1,74 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hui-generic-entity-row";
-import "../../../components/ha-cover-controls";
-import "../../../components/ha-cover-tilt-controls";
-import CoverEntity from "../../../util/cover-model";
-
-class HuiCoverEntityRow extends PolymerElement {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <hui-generic-entity-row
-        hass="[[hass]]"
-        config="[[_config]]"
-      >
-        ${this.coverControlTemplate}
-      </hui-generic-entity-row>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        ha-cover-controls,
-        ha-cover-tilt-controls {
-          margin-right: -.57em;
-        }
-      </style>
-    `;
-  }
-
-  static get coverControlTemplate() {
-    return html`
-      <template is="dom-if" if="[[!_entityObj.isTiltOnly]]">
-        <ha-cover-controls hass="[[hass]]" state-obj="[[_stateObj]]"></ha-cover-controls>
-      </template>
-      <template is="dom-if" if="[[_entityObj.isTiltOnly]]">
-        <ha-cover-tilt-controls hass="[[hass]]" state-obj="[[_stateObj]]"></ha-cover-tilt-controls>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _entityObj: {
-        type: Object,
-        computed: "_computeEntityObj(hass, _stateObj)",
-      },
-    };
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeEntityObj(hass, stateObj) {
-    return stateObj ? new CoverEntity(hass, stateObj) : null;
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-}
-customElements.define("hui-cover-entity-row", HuiCoverEntityRow);

src/panels/lovelace/entity-rows/hui-cover-entity-row.ts

@@ -0,0 +1,85 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../components/hui-generic-entity-row.js";
+import "../../../components/ha-cover-controls.js";
+import "../../../components/ha-cover-tilt-controls.js";
+
+import { isTiltOnly } from "../../../util/cover-model.js";
+import { HomeAssistant } from "../../../types.js";
+import { EntityRow, EntityConfig } from "./types.js";
+
+class HuiCoverEntityRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: EntityConfig;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public setConfig(config: EntityConfig): void {
+    if (!config) {
+      throw new Error("Configuration error");
+    }
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this.hass) {
+      return html``;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+
+    if (!stateObj) {
+      return html`
+        <hui-error-entity-row
+          .entity=${this._config.entity}
+        ></hui-error-entity-row>`;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <hui-generic-entity-row
+        .hass=${this.hass}
+        .config=${this._config}
+      >
+      ${
+        isTiltOnly(stateObj)
+          ? html`
+            <ha-cover-tilt-controls
+              .hass=${this.hass}
+              .stateObj=${stateObj}
+            ></ha-cover-tilt-controls>`
+          : html`
+            <ha-cover-controls
+              .hass=${this.hass}
+              .stateObj=${stateObj}
+            ></ha-cover-controls>`
+      }
+      </hui-generic-entity-row>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        ha-cover-controls,
+        ha-cover-tilt-controls {
+          margin-right: -.57em;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-cover-entity-row": HuiCoverEntityRow;
+  }
+}
+
+customElements.define("hui-cover-entity-row", HuiCoverEntityRow);

src/util/cover-model.js

@@ -72,9 +72,9 @@ export default class CoverEntity {
   }
 
   get isTiltOnly() {
-    var supportsCover =
+    const supportsCover =
       this.supportsOpen || this.supportsClose || this.supportsStop;
-    var supportsTilt =
+    const supportsTilt =
       this.supportsOpenTilt || this.supportsCloseTilt || this.supportsStopTilt;
     return supportsTilt && !supportsCover;
   }
@@ -120,3 +120,32 @@ export default class CoverEntity {
     this.hass.callService("cover", service, data);
   }
 }
+
+const support = (stateObj, feature) =>
+  (stateObj.attributes.supported_features & feature) !== 0;
+
+export const supportsOpen = (stateObj) => support(stateObj, 1);
+
+export const supportsClose = (stateObj) => support(stateObj, 2);
+
+export const supportsSetPosition = (stateObj) => support(stateObj, 4);
+
+export const supportsStop = (stateObj) => support(stateObj, 8);
+
+export const supportsOpenTilt = (stateObj) => support(stateObj, 16);
+
+export const supportsCloseTilt = (stateObj) => support(stateObj, 32);
+
+export const supportsStopTilt = (stateObj) => support(stateObj, 64);
+
+export const supportsSetTiltPosition = (stateObj) => support(stateObj, 128);
+
+export function isTiltOnly(stateObj) {
+  const supportsCover =
+    supportsOpen(stateObj) || supportsClose(stateObj) || supportsStop(stateObj);
+  const supportsTilt =
+    supportsOpenTilt(stateObj) ||
+    supportsCloseTilt(stateObj) ||
+    supportsStopTilt(stateObj);
+  return supportsTilt && !supportsCover;
+}