From 75235ec54492caf29a259e8d0b5f22a886095a75 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Wed, 30 Jan 2019 13:14:33 -0800 Subject: [PATCH] Convert generic row to LitElement/TS (#2636) --- .../components/hui-generic-entity-row.js | 138 ------------------ .../components/hui-generic-entity-row.ts | 125 ++++++++++++++++ 2 files changed, 125 insertions(+), 138 deletions(-) delete mode 100644 src/panels/lovelace/components/hui-generic-entity-row.js create mode 100644 src/panels/lovelace/components/hui-generic-entity-row.ts diff --git a/src/panels/lovelace/components/hui-generic-entity-row.js b/src/panels/lovelace/components/hui-generic-entity-row.js deleted file mode 100644 index 4d1a30066c..0000000000 --- a/src/panels/lovelace/components/hui-generic-entity-row.js +++ /dev/null @@ -1,138 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import "../../../components/entity/state-badge"; -import "../../../components/ha-relative-time"; -import "../../../components/ha-icon"; - -import computeStateName from "../../../common/entity/compute_state_name"; - -class HuiGenericEntityRow extends PolymerElement { - static get template() { - return html` - ${this.styleTemplate} - - - `; - } - - static get styleTemplate() { - return html` - - `; - } - - static get stateBadgeTemplate() { - return html` - - `; - } - - static get infoTemplate() { - return html` -
- [[_computeName(config.name, _stateObj)]] -
- - -
-
- `; - } - - static get properties() { - return { - hass: Object, - config: Object, - _stateObj: { - type: Object, - computed: "_computeStateObj(hass.states, config.entity)", - }, - showSecondary: { - type: Boolean, - value: true, - }, - }; - } - - _equals(a, b) { - return a === b; - } - - _computeStateObj(states, entityId) { - return states && entityId in states ? states[entityId] : null; - } - - _computeName(name, stateObj) { - return name || computeStateName(stateObj); - } -} -customElements.define("hui-generic-entity-row", HuiGenericEntityRow); diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts new file mode 100644 index 0000000000..ef2afdd5e3 --- /dev/null +++ b/src/panels/lovelace/components/hui-generic-entity-row.ts @@ -0,0 +1,125 @@ +import "../../../components/entity/state-badge"; +import "../../../components/ha-relative-time"; +import "../../../components/ha-icon"; + +import computeStateName from "../../../common/entity/compute_state_name"; +import { + LitElement, + PropertyDeclarations, + html, + css, + CSSResult, +} from "lit-element"; +import { HomeAssistant } from "../../../types"; +import { EntitiesCardEntityConfig } from "../cards/hui-entities-card"; + +class HuiGenericEntityRow extends LitElement { + public hass?: HomeAssistant; + public config?: EntitiesCardEntityConfig; + public showSecondary: boolean; + + constructor() { + super(); + this.showSecondary = true; + } + + protected render() { + if (!this.hass || !this.config) { + return html``; + } + const stateObj = this.config.entity + ? this.hass.states[this.config.entity] + : undefined; + + if (!stateObj) { + return html` +
Entity not available: [[config.entity]]
+ `; + } + + return html` + +
+
+ ${this.config.name || computeStateName(stateObj)} +
+ ${!this.showSecondary + ? html` + + ` + : this.config.secondary_info === "entity-id" + ? stateObj.entity_id + : this.config.secondary_info === "last-changed" + ? html` + + ` + : ""} +
+
+ + +
+ `; + } + + static get properties(): PropertyDeclarations { + return { + hass: {}, + config: {}, + showSecondary: {}, + }; + } + + static get styles(): CSSResult { + return css` + :host { + display: flex; + align-items: center; + } + .flex { + flex: 1; + margin-left: 16px; + display: flex; + justify-content: space-between; + align-items: center; + min-width: 0; + } + .info { + flex: 1 0 60px; + } + .info, + .info > * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .flex ::slotted(*) { + margin-left: 8px; + min-width: 0; + } + .flex ::slotted([slot="secondary"]) { + margin-left: 0; + } + .secondary, + ha-relative-time { + display: block; + color: var(--secondary-text-color); + } + .not-found { + flex: 1; + background-color: yellow; + padding: 8px; + } + state-badge { + flex: 0 0 40px; + } + `; + } +} +customElements.define("hui-generic-entity-row", HuiGenericEntityRow);