Convert hui-plant-status-card to TypeScript/LitElement (#2891)

* Convert plant-status card to TS/Lit

* Cleanup

src/panels/lovelace/cards/hui-plant-status-card.js

@@ -1,26 +0,0 @@
-import "../../../cards/ha-plant-card";
-
-import LegacyWrapperCard from "./hui-legacy-wrapper-card";
-
-// should be interface when converted to TS
-export const Config = {
-  name: "",
-  entity: "",
-};
-
-class HuiPlantStatusCard extends LegacyWrapperCard {
-  static async getConfigElement() {
-    await import(/* webpackChunkName: "hui-plant-status-card-editor" */ "../editor/config-elements/hui-plant-status-card-editor");
-    return document.createElement("hui-plant-status-card-editor");
-  }
-
-  static getStubConfig() {
-    return {};
-  }
-
-  constructor() {
-    super("ha-plant-card", "plant");
-  }
-}
-
-customElements.define("hui-plant-status-card", HuiPlantStatusCard);

src/panels/lovelace/cards/hui-plant-status-card.ts

@@ -0,0 +1,237 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  css,
+  CSSResult,
+  property,
+  customElement,
+} from "lit-element";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+
+import { HassEntity } from "home-assistant-js-websocket";
+import computeStateName from "../../../common/entity/compute_state_name";
+
+import { LovelaceCardEditor, LovelaceCard } from "../types";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCardConfig } from "../../../data/lovelace";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+const SENSORS = {
+  moisture: "hass:water",
+  temperature: "hass:thermometer",
+  brightness: "hass:white-balance-sunny",
+  conductivity: "hass:emoticon-poop",
+  battery: "hass:battery",
+};
+
+export interface PlantAttributeTarget extends EventTarget {
+  value?: string;
+}
+
+export interface PlantStatusConfig extends LovelaceCardConfig {
+  name?: string;
+  entity: string;
+}
+
+@customElement("hui-plant-status-card")
+class HuiPlantStatusCard extends LitElement implements LovelaceCard {
+  public static async getConfigElement(): Promise<LovelaceCardEditor> {
+    await import(/* webpackChunkName: "hui-plant-status-card-editor" */ "../editor/config-elements/hui-plant-status-card-editor");
+    return document.createElement("hui-plant-status-card-editor");
+  }
+
+  public static getStubConfig(): object {
+    return {};
+  }
+
+  @property() public hass?: HomeAssistant;
+
+  @property() private _config?: PlantStatusConfig;
+
+  public getCardSize(): number {
+    return 3;
+  }
+
+  public setConfig(config: PlantStatusConfig): void {
+    if (!config.entity || config.entity.split(".")[0] !== "plant") {
+      throw new Error("Specify an entity from within the plant domain.");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    const stateObj = this.hass.states[this._config!.entity];
+
+    if (!stateObj) {
+      return html`
+        <hui-warning
+          >${this.hass.localize(
+            "ui.panel.lovelace.warning.entity_not_found",
+            "entity",
+            this._config.entity
+          )}</hui-warning
+        >
+      `;
+    }
+
+    return html`
+      <ha-card
+        class="${stateObj.attributes.entity_picture ? "has-plant-image" : ""}"
+      >
+        <div
+          class="banner"
+          style="background-image:url(${stateObj.attributes.entity_picture})"
+        >
+          <div class="header">
+            ${this._config.title || computeStateName(stateObj)}
+          </div>
+        </div>
+        <div class="content">
+          ${this.computeAttributes(stateObj).map(
+            (item) => html`
+              <div
+                class="attributes"
+                @click="${this._handleMoreInfo}"
+                .value="${item}"
+              >
+                <div>
+                  <ha-icon
+                    icon="${this.computeIcon(
+                      item,
+                      stateObj.attributes.battery
+                    )}"
+                  ></ha-icon>
+                </div>
+                <div
+                  class="${stateObj.attributes.problem.indexOf(item) === -1
+                    ? ""
+                    : "problem"}"
+                >
+                  ${stateObj.attributes[item]}
+                </div>
+                <div class="uom">
+                  ${stateObj.attributes.unit_of_measurement_dict[item] || ""}
+                </div>
+              </div>
+            `
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .banner {
+        display: flex;
+        align-items: flex-end;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+        padding-top: 12px;
+      }
+
+      .has-plant-image .banner {
+        padding-top: 30%;
+      }
+
+      .header {
+        /* start paper-font-headline style */
+        font-family: "Roboto", "Noto", sans-serif;
+        -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
+        text-rendering: optimizeLegibility;
+        font-size: 24px;
+        font-weight: 400;
+        letter-spacing: -0.012em;
+        /* end paper-font-headline style */
+
+        line-height: 40px;
+        padding: 8px 16px;
+      }
+
+      .has-plant-image .header {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 16px;
+        padding: 16px;
+        color: white;
+        width: 100%;
+        background: rgba(0, 0, 0, var(--dark-secondary-opacity));
+      }
+
+      .content {
+        display: flex;
+        justify-content: space-between;
+        padding: 16px 32px 24px 32px;
+      }
+
+      .has-plant-image .content {
+        padding-bottom: 16px;
+      }
+
+      ha-icon {
+        color: var(--paper-item-icon-color);
+        margin-bottom: 8px;
+      }
+
+      .attributes {
+        cursor: pointer;
+      }
+
+      .attributes div {
+        text-align: center;
+      }
+
+      .problem {
+        color: var(--google-red-500);
+        font-weight: bold;
+      }
+
+      .uom {
+        color: var(--secondary-text-color);
+      }
+    `;
+  }
+
+  private computeAttributes(stateObj: HassEntity): string[] {
+    return Object.keys(SENSORS).filter((key) => key in stateObj.attributes);
+  }
+
+  private computeIcon(attr: string, batLvl: number): string {
+    const icon = SENSORS[attr];
+    if (attr === "battery") {
+      if (batLvl <= 5) {
+        return `${icon}-alert`;
+      }
+      if (batLvl < 95) {
+        return `${icon}-${Math.round(batLvl / 10 - 0.01) * 10}`;
+      }
+    }
+    return icon;
+  }
+
+  private _handleMoreInfo(ev: Event): void {
+    const target = ev.currentTarget! as PlantAttributeTarget;
+    const stateObj = this.hass!.states[this._config!.entity];
+
+    if (target.value) {
+      fireEvent(this, "hass-more-info", {
+        entityId: stateObj.attributes.sensors[target.value],
+      });
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-plant-status-card": HuiPlantStatusCard;
+  }
+}