From 18be134ad8ec8567bbebc0ee1b552450c2285a41 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 17 Oct 2018 09:55:30 -0400 Subject: [PATCH 01/16] Updating Entities Card to TS+lit --- .../lovelace/cards/hui-entities-card.js | 150 -------------- .../lovelace/cards/hui-entities-card.ts | 194 ++++++++++++++++++ .../lovelace/common/create-card-element.js | 2 +- src/panels/lovelace/hui-unused-entities.js | 2 +- 4 files changed, 196 insertions(+), 152 deletions(-) delete mode 100644 src/panels/lovelace/cards/hui-entities-card.js create mode 100644 src/panels/lovelace/cards/hui-entities-card.ts diff --git a/src/panels/lovelace/cards/hui-entities-card.js b/src/panels/lovelace/cards/hui-entities-card.js deleted file mode 100644 index 85e89af5f3..0000000000 --- a/src/panels/lovelace/cards/hui-entities-card.js +++ /dev/null @@ -1,150 +0,0 @@ -import "@polymer/iron-flex-layout/iron-flex-layout-classes.js"; -import { html } from "@polymer/polymer/lib/utils/html-tag.js"; -import { PolymerElement } from "@polymer/polymer/polymer-element.js"; - -import "../../../components/ha-card.js"; -import "../components/hui-entities-toggle.js"; - -import createRowElement from "../common/create-row-element.js"; -import computeDomain from "../../../common/entity/compute_domain.js"; -import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const.js"; - -import EventsMixin from "../../../mixins/events-mixin.js"; - -/* - * @appliesMixin EventsMixin - */ -class HuiEntitiesCard extends EventsMixin(PolymerElement) { - static get template() { - return html` - - - - -
- -`; - } - - static get properties() { - return { - hass: { - type: Object, - observer: "_hassChanged", - }, - _config: Object, - }; - } - - constructor() { - super(); - this._elements = []; - } - - ready() { - super.ready(); - if (this._config) this._buildConfig(); - } - - getCardSize() { - // +1 for the header - return 1 + (this._config ? this._config.entities.length : 0); - } - - _showHeaderToggle(show) { - // If show is undefined, we treat it as true - return show !== false; - } - - _showHeader(config) { - // Show header if either title or toggle configured to show in it - return config.title || config.show_header_toggle; - } - - setConfig(config) { - this._config = config; - this._rows = config.entities.map( - (item) => (typeof item === "string" ? { entity: item } : item) - ); - if (this.$) this._buildConfig(); - } - - _buildConfig() { - const root = this.$.states; - - while (root.lastChild) { - root.removeChild(root.lastChild); - } - - this._elements = []; - - for (const row of this._rows) { - const entityId = row.entity; - const element = createRowElement(row); - if ( - entityId && - !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityId)) - ) { - element.classList.add("state-card-dialog"); - element.addEventListener("click", () => - this.fire("hass-more-info", { entityId }) - ); - } - element.hass = this.hass; - this._elements.push(element); - const container = document.createElement("div"); - container.appendChild(element); - root.appendChild(container); - } - } - - _hassChanged(hass) { - this._elements.forEach((element) => { - element.hass = hass; - }); - } - - _filterEntities(items) { - return items - .filter((item) => typeof item === "string" || item.entity) - .map((item) => (typeof item === "string" ? item : item.entity)); - } -} - -customElements.define("hui-entities-card", HuiEntitiesCard); diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts new file mode 100644 index 0000000000..d0af91aebf --- /dev/null +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -0,0 +1,194 @@ +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; +import { repeat } from "lit-html/directives/repeat"; + +import "../../../components/ha-card.js"; +import "../components/hui-entities-toggle.js"; + +import { fireEvent } from "../../../common/dom/fire_event.js"; +import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const.js"; +import { HassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; +import { LovelaceCard, LovelaceConfig } from "../types.js"; +import { HomeAssistant } from "../../../types.js"; +import createRowElement from "../common/create-row-element.js"; +import computeDomain from "../../../common/entity/compute_domain.js"; +import processConfigEntities from "../common/process-config-entities"; + +interface EntityConfig { + name?: string; + icon?: string; + entity: string; + type?: string; + secondary_info: "entity-id" | "last-changed"; + action_name?: string; + service?: string; + service_data?: object; + url?: string; +} + +interface Config extends LovelaceConfig { + show_header_toggle?: boolean; + title?: string; + entities: EntityConfig[]; +} + +class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) + implements LovelaceCard { + protected hass?: HomeAssistant; + protected config?: Config; + protected configEntities?: EntityConfig[]; + + static get properties(): PropertyDeclarations { + return { + hass: {}, + config: {}, + }; + } + + public getCardSize() { + // +1 for the header + return 1 + (this.config ? this.config.entities.length : 0); + } + + public setConfig(config: Config) { + this.config = { show_header_toggle: true, ...config }; + const entities = processConfigEntities(config.entities); + + for (const entity of entities) { + if ( + entity.type === "call-service" && + !entity.service && + !entity.name && + !entity.icon && + !entity.service_data && + !entity.action_name + ) { + throw new Error("Missing required property when type is call-service"); + } else if ( + entity.type === "weblink" && + !entity.name && + !entity.icon && + !entity.url + ) { + throw new Error("Missing required property when type is weblink"); + } + } + + this.configEntities = entities; + if (this.hass) { + this.requestUpdate(); + } + } + + protected render() { + if (!this.config || !this.hass) { + return html``; + } + const { show_header_toggle, title } = this.config; + const states = this.hass.states; + + const stateEntities = this.configEntities!.filter( + (conf) => conf.entity in states + ); + + const rowEntities = this.configEntities!.filter( + (item) => typeof item === "string" || item.entity + ).map((item) => (typeof item === "string" ? item : item.entity)); + + return html` + ${this.renderStyle()} + + ${ + !title && !show_header_toggle + ? html`` + : html` +
+ ${!title ? html`` : html`
${title}
`} + ${ + !show_header_toggle + ? html`` + : html` + + ` + } +
` + } +
+ ${repeat( + stateEntities, + (entityConf) => entityConf.entity, + (entityConf) => this.renderEntity(entityConf) + )} +
+ + `; + } + + private renderStyle() { + return html` + + `; + } + + private renderEntity(entityConf) { + const element = createRowElement(entityConf); + element.hass = this.hass; + element.entityConf = entityConf; + if (!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))) { + element.classList.add("state-card-dialog"); + element.onclick = this.handleClick; + } + + return html` +
+ ${element} +
+ `; + } + + private handleClick(ev: MouseEvent) { + const config = (ev.currentTarget as any).entityConf as EntityConfig; + const entityId = config.entity; + + fireEvent(this, "hass-more-info", { entityId }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-entities-card": HuiEntitiesCard; + } +} + +customElements.define("hui-entities-card", HuiEntitiesCard); diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js index 73ee2bf8af..c7d1a876ee 100644 --- a/src/panels/lovelace/common/create-card-element.js +++ b/src/panels/lovelace/common/create-card-element.js @@ -2,7 +2,7 @@ import { fireEvent } from "../../../common/dom/fire_event.js"; import "../cards/hui-alarm-panel-card.js"; import "../cards/hui-conditional-card.ts"; -import "../cards/hui-entities-card.js"; +import "../cards/hui-entities-card.ts"; import "../cards/hui-entity-button-card.ts"; import "../cards/hui-entity-filter-card.js"; import "../cards/hui-error-card.js"; diff --git a/src/panels/lovelace/hui-unused-entities.js b/src/panels/lovelace/hui-unused-entities.js index 196d464b48..9b9e318954 100644 --- a/src/panels/lovelace/hui-unused-entities.js +++ b/src/panels/lovelace/hui-unused-entities.js @@ -4,7 +4,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element.js"; import computeUnusedEntities from "./common/compute-unused-entities.js"; import createCardElement from "./common/create-card-element.js"; -import "./cards/hui-entities-card.js"; +import "./cards/hui-entities-card.ts"; class HuiUnusedEntities extends PolymerElement { static get template() { From 76e67d27e746043a68361b30faea0de9fc375b5e Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 17 Oct 2018 10:27:18 -0400 Subject: [PATCH 02/16] Update to Togglable entities --- src/panels/lovelace/cards/hui-entities-card.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index d0af91aebf..99559c635b 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -86,13 +86,13 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) const { show_header_toggle, title } = this.config; const states = this.hass.states; - const stateEntities = this.configEntities!.filter( + const entities = this.configEntities!.filter( (conf) => conf.entity in states ); - const rowEntities = this.configEntities!.filter( - (item) => typeof item === "string" || item.entity - ).map((item) => (typeof item === "string" ? item : item.entity)); + const toggableEntities = entities + .filter((item) => typeof item === "string" || item.entity) + .map((item) => (typeof item === "string" ? item : item.entity)); return html` ${this.renderStyle()} @@ -109,7 +109,7 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) : html` ` } @@ -117,7 +117,7 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) }
${repeat( - stateEntities, + entities, (entityConf) => entityConf.entity, (entityConf) => this.renderEntity(entityConf) )} From 2fd459381d2672723a318f0bf7ed3660b39f3fd9 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 17 Oct 2018 11:49:34 -0400 Subject: [PATCH 03/16] Updating from Reviews --- .../lovelace/cards/hui-entities-card.ts | 43 +++++++++---------- 1 file changed, 20 insertions(+), 23 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 99559c635b..9438cb7401 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -46,34 +46,35 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) public getCardSize() { // +1 for the header - return 1 + (this.config ? this.config.entities.length : 0); + if (!this.config) { + return 0; + } + return this.config.title ? 1 : 0 + this.config.entities.length; } public setConfig(config: Config) { - this.config = { show_header_toggle: true, ...config }; const entities = processConfigEntities(config.entities); - for (const entity of entities) { if ( entity.type === "call-service" && - !entity.service && - !entity.name && - !entity.icon && - !entity.service_data && - !entity.action_name + (!entity.service || + !entity.name || + !entity.icon || + !entity.service_data || + !entity.action_name) ) { throw new Error("Missing required property when type is call-service"); } else if ( entity.type === "weblink" && - !entity.name && - !entity.icon && - !entity.url + (!entity.name || !entity.icon || !entity.url) ) { throw new Error("Missing required property when type is weblink"); } } + this.config = config; this.configEntities = entities; + if (this.hass) { this.requestUpdate(); } @@ -84,15 +85,8 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) return html``; } const { show_header_toggle, title } = this.config; - const states = this.hass.states; - const entities = this.configEntities!.filter( - (conf) => conf.entity in states - ); - - const toggableEntities = entities - .filter((item) => typeof item === "string" || item.entity) - .map((item) => (typeof item === "string" ? item : item.entity)); + const entities = this.configEntities!.map((conf) => conf.entity); return html` ${this.renderStyle()} @@ -104,12 +98,12 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement)
${!title ? html`` : html`
${title}
`} ${ - !show_header_toggle + show_header_toggle === false ? html`` : html` ` } @@ -117,7 +111,7 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) }
${repeat( - entities, + this.configEntities as EntityConfig[], (entityConf) => entityConf.entity, (entityConf) => this.renderEntity(entityConf) )} @@ -165,7 +159,10 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) const element = createRowElement(entityConf); element.hass = this.hass; element.entityConf = entityConf; - if (!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))) { + if ( + !!entityConf.entity && + DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity)) + ) { element.classList.add("state-card-dialog"); element.onclick = this.handleClick; } From edf8027bf4bc60878e08712a05417774ce5e49ed Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 17 Oct 2018 12:22:02 -0400 Subject: [PATCH 04/16] Updating repeat array --- src/panels/lovelace/cards/hui-entities-card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 9438cb7401..e09c904b6d 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -111,7 +111,7 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) }
${repeat( - this.configEntities as EntityConfig[], + this.configEntities!, (entityConf) => entityConf.entity, (entityConf) => this.renderEntity(entityConf) )} From 3882a5aa896f5003de780ec15f2618ea02670084 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 17 Oct 2018 12:51:26 -0400 Subject: [PATCH 05/16] Fix for Click Event --- src/panels/lovelace/cards/hui-entities-card.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index e09c904b6d..87116fa922 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -160,8 +160,8 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) element.hass = this.hass; element.entityConf = entityConf; if ( - !!entityConf.entity && - DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity)) + entityConf.entity && + !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity)) ) { element.classList.add("state-card-dialog"); element.onclick = this.handleClick; From 772153e58ace5af7c0691702f162623ad0c6eae7 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Fri, 19 Oct 2018 21:45:47 -0400 Subject: [PATCH 06/16] Update entities --- .../lovelace/cards/hui-entities-card.ts | 55 ++++++++++++------- src/panels/lovelace/types.ts | 13 ++++- 2 files changed, 48 insertions(+), 20 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 87116fa922..b4f38116a3 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -1,5 +1,4 @@ import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; -import { repeat } from "lit-html/directives/repeat"; import "../../../components/ha-card.js"; import "../components/hui-entities-toggle.js"; @@ -7,11 +6,11 @@ import "../components/hui-entities-toggle.js"; import { fireEvent } from "../../../common/dom/fire_event.js"; import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const.js"; import { HassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; -import { LovelaceCard, LovelaceConfig } from "../types.js"; -import { HomeAssistant } from "../../../types.js"; +import { LovelaceCard, LovelaceConfig, EntityRow } from "../types.js"; import createRowElement from "../common/create-row-element.js"; import computeDomain from "../../../common/entity/compute_domain.js"; import processConfigEntities from "../common/process-config-entities"; +import { HomeAssistant } from "../../../types.js"; interface EntityConfig { name?: string; @@ -37,6 +36,28 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) protected config?: Config; protected configEntities?: EntityConfig[]; + // set hass(hass) { + // console.log("here"); + // this._hass = hass; + + // console.log(this.shadowRoot); + // console.log( + // this.shadowRoot && this.shadowRoot.querySelector("ha-card") + // ? this.shadowRoot + // .querySelector("ha-card")! + // .querySelectorAll("#states > div > *") + // : "" + // ); + // if (this.shadowRoot && this.shadowRoot.querySelector("ha-card")) { + // this.shadowRoot + // .querySelector("ha-card")! + // .querySelectorAll("#states > div > *") + // .forEach((element: any) => { + // element.hass = hass; + // }); + // } + // } + static get properties(): PropertyDeclarations { return { hass: {}, @@ -45,14 +66,16 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) } public getCardSize() { - // +1 for the header if (!this.config) { return 0; } - return this.config.title ? 1 : 0 + this.config.entities.length; + // +1 for the header + return (this.config.title ? 1 : 0) + this.config.entities.length; } public setConfig(config: Config) { + console.log(config); + const entities = processConfigEntities(config.entities); for (const entity of entities) { if ( @@ -74,10 +97,6 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) this.config = config; this.configEntities = entities; - - if (this.hass) { - this.requestUpdate(); - } } protected render() { @@ -86,8 +105,6 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) } const { show_header_toggle, title } = this.config; - const entities = this.configEntities!.map((conf) => conf.entity); - return html` ${this.renderStyle()} @@ -96,24 +113,24 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) ? html`` : html`
- ${!title ? html`` : html`
${title}
`} +
${title}
${ show_header_toggle === false ? html`` : html` - ` }
` }
- ${repeat( - this.configEntities!, - (entityConf) => entityConf.entity, - (entityConf) => this.renderEntity(entityConf) + ${this.configEntities!.map((entityConf) => + this.renderEntity(entityConf) )}
diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index 7583734616..036fe62fbf 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -1,4 +1,4 @@ -import { HomeAssistant } from "../../types.js"; +import { HomeAssistant } from "../../types"; export interface LovelaceConfig { type: string; @@ -9,3 +9,14 @@ export interface LovelaceCard extends HTMLElement { getCardSize(): number; setConfig(config: LovelaceConfig): void; } + +export interface EntityConfig { + entity: string; + name: string; + icon: string; +} + +export interface EntityRow { + hass: HomeAssistant; + config: EntityConfig; +} From 56e01e66fb101085c0fb379739883ae9bac37b5d Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Sun, 21 Oct 2018 19:05:56 -0400 Subject: [PATCH 07/16] Review fix --- .../lovelace/cards/hui-entities-card.ts | 42 +++++++------------ 1 file changed, 15 insertions(+), 27 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index b4f38116a3..022d31deda 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -36,31 +36,21 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) protected config?: Config; protected configEntities?: EntityConfig[]; - // set hass(hass) { - // console.log("here"); - // this._hass = hass; - - // console.log(this.shadowRoot); - // console.log( - // this.shadowRoot && this.shadowRoot.querySelector("ha-card") - // ? this.shadowRoot - // .querySelector("ha-card")! - // .querySelectorAll("#states > div > *") - // : "" - // ); - // if (this.shadowRoot && this.shadowRoot.querySelector("ha-card")) { - // this.shadowRoot - // .querySelector("ha-card")! - // .querySelectorAll("#states > div > *") - // .forEach((element: any) => { - // element.hass = hass; - // }); - // } - // } + set hass(hass) { + this._hass = hass; + if (this.shadowRoot && this.shadowRoot.querySelector("ha-card")) { + this.shadowRoot + .querySelector("ha-card")! + .querySelectorAll("#states > div > *") + .forEach((element: any) => { + element.hass = hass; + }); + } + } static get properties(): PropertyDeclarations { return { - hass: {}, + _hass: {}, config: {}, }; } @@ -74,8 +64,6 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) } public setConfig(config: Config) { - console.log(config); - const entities = processConfigEntities(config.entities); for (const entity of entities) { if ( @@ -100,7 +88,7 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) } protected render() { - if (!this.config || !this.hass) { + if (!this.config || !this._hass) { return html``; } const { show_header_toggle, title } = this.config; @@ -119,7 +107,7 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) ? html`` : html` Date: Mon, 22 Oct 2018 20:25:06 -0400 Subject: [PATCH 08/16] Review Update --- src/panels/lovelace/cards/hui-entities-card.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 022d31deda..5d07b54f8f 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -6,7 +6,7 @@ import "../components/hui-entities-toggle.js"; import { fireEvent } from "../../../common/dom/fire_event.js"; import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const.js"; import { HassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; -import { LovelaceCard, LovelaceConfig, EntityRow } from "../types.js"; +import { LovelaceCard, LovelaceConfig } from "../types.js"; import createRowElement from "../common/create-row-element.js"; import computeDomain from "../../../common/entity/compute_domain.js"; import processConfigEntities from "../common/process-config-entities"; @@ -32,7 +32,7 @@ interface Config extends LovelaceConfig { class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) implements LovelaceCard { - protected hass?: HomeAssistant; + protected _hass?: HomeAssistant; protected config?: Config; protected configEntities?: EntityConfig[]; @@ -50,7 +50,6 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) static get properties(): PropertyDeclarations { return { - _hass: {}, config: {}, }; } From 06aef18d0cb9457ffed3a10325644713cc01ab15 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Tue, 23 Oct 2018 16:38:23 -0400 Subject: [PATCH 09/16] addressiing reviews --- .../lovelace/cards/hui-entities-card.ts | 29 +++++++++---------- src/panels/lovelace/entity-rows/types.ts | 12 ++++++++ src/panels/lovelace/types.ts | 13 --------- 3 files changed, 25 insertions(+), 29 deletions(-) create mode 100644 src/panels/lovelace/entity-rows/types.ts diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 5d07b54f8f..26dd5c5b3e 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -11,11 +11,9 @@ import createRowElement from "../common/create-row-element.js"; import computeDomain from "../../../common/entity/compute_domain.js"; import processConfigEntities from "../common/process-config-entities"; import { HomeAssistant } from "../../../types.js"; +import { EntityConfig, EntityRow } from "../entity-rows/types.js"; -interface EntityConfig { - name?: string; - icon?: string; - entity: string; +interface ConfigEntity extends EntityConfig { type?: string; secondary_info: "entity-id" | "last-changed"; action_name?: string; @@ -27,23 +25,22 @@ interface EntityConfig { interface Config extends LovelaceConfig { show_header_toggle?: boolean; title?: string; - entities: EntityConfig[]; + entities: ConfigEntity[]; } class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) implements LovelaceCard { protected _hass?: HomeAssistant; protected config?: Config; - protected configEntities?: EntityConfig[]; + protected configEntities?: ConfigEntity[]; set hass(hass) { this._hass = hass; - if (this.shadowRoot && this.shadowRoot.querySelector("ha-card")) { + if (this.shadowRoot) { this.shadowRoot - .querySelector("ha-card")! - .querySelectorAll("#states > div > *") + .querySelectorAll("#states > *") .forEach((element: any) => { - element.hass = hass; + (element as EntityRow).hass = hass; }); } } @@ -133,10 +130,10 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) #states { margin: -4px 0; } - #states > div { + #states > * { margin: 4px 0; } - #states > div > * { + #states > * { overflow: hidden; } .header { @@ -168,19 +165,19 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity)) ) { element.classList.add("state-card-dialog"); - element.onclick = this.handleClick; + // element.onclick = this.handleClick; + element.addEventListener("click", this.handleClick); } return html` -
${element} -
`; } private handleClick(ev: MouseEvent) { - const config = (ev.currentTarget as any).entityConf as EntityConfig; + const config = (ev.currentTarget as any).entityConf as ConfigEntity; const entityId = config.entity; + console.log("clicked"); fireEvent(this, "hass-more-info", { entityId }); } diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts new file mode 100644 index 0000000000..249dfdbdbc --- /dev/null +++ b/src/panels/lovelace/entity-rows/types.ts @@ -0,0 +1,12 @@ +import { HomeAssistant } from "../../../types"; + +export interface EntityConfig { + entity: string; + name: string; + icon: string; +} + +export interface EntityRow { + hass: HomeAssistant; + config: EntityConfig; +} diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index 036fe62fbf..223edab055 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -1,5 +1,3 @@ -import { HomeAssistant } from "../../types"; - export interface LovelaceConfig { type: string; } @@ -9,14 +7,3 @@ export interface LovelaceCard extends HTMLElement { getCardSize(): number; setConfig(config: LovelaceConfig): void; } - -export interface EntityConfig { - entity: string; - name: string; - icon: string; -} - -export interface EntityRow { - hass: HomeAssistant; - config: EntityConfig; -} From 0856073e859c81930fd0c47b4fb678528290cac4 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Tue, 23 Oct 2018 16:39:37 -0400 Subject: [PATCH 10/16] Changing element to unknown --- src/panels/lovelace/cards/hui-entities-card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 26dd5c5b3e..4b983a5cb1 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -39,7 +39,7 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) if (this.shadowRoot) { this.shadowRoot .querySelectorAll("#states > *") - .forEach((element: any) => { + .forEach((element: unknown) => { (element as EntityRow).hass = hass; }); } From ddf59c8d5cca4f49ddee52857abbcb8d9db607ff Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Tue, 23 Oct 2018 16:46:27 -0400 Subject: [PATCH 11/16] Readding Homeasistant call in types --- src/panels/lovelace/types.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index 223edab055..def084c78b 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -1,3 +1,5 @@ +import { HomeAssistant } from "../../types"; + export interface LovelaceConfig { type: string; } From 66f5e34d529c2813cafaecb7e25452126f579a95 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Tue, 23 Oct 2018 16:47:53 -0400 Subject: [PATCH 12/16] Removing log console --- src/panels/lovelace/cards/hui-entities-card.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 4b983a5cb1..669b60768d 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -177,7 +177,6 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) private handleClick(ev: MouseEvent) { const config = (ev.currentTarget as any).entityConf as ConfigEntity; const entityId = config.entity; - console.log("clicked"); fireEvent(this, "hass-more-info", { entityId }); } From 7fbe0937dfc4f28da77b1dd56fbdebb621a8d516 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 24 Oct 2018 09:10:58 -0400 Subject: [PATCH 13/16] Review updates --- .../lovelace/cards/hui-entities-card.ts | 21 +++++++------------ src/panels/lovelace/entity-rows/types.ts | 18 +++++++++++++++- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 669b60768d..2da7cfcfcb 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -36,13 +36,11 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) set hass(hass) { this._hass = hass; - if (this.shadowRoot) { - this.shadowRoot - .querySelectorAll("#states > *") - .forEach((element: unknown) => { - (element as EntityRow).hass = hass; - }); - } + this.shadowRoot!.querySelectorAll("#states > *").forEach( + (element: unknown) => { + (element as EntityRow).hass = hass; + } + ); } static get properties(): PropertyDeclarations { @@ -159,14 +157,12 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) private renderEntity(entityConf) { const element = createRowElement(entityConf); element.hass = this._hass; - element.entityConf = entityConf; if ( entityConf.entity && !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity)) ) { element.classList.add("state-card-dialog"); - // element.onclick = this.handleClick; - element.addEventListener("click", this.handleClick); + element.addEventListener("click", () => this._handleClick(entityConf)); } return html` @@ -174,9 +170,8 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) `; } - private handleClick(ev: MouseEvent) { - const config = (ev.currentTarget as any).entityConf as ConfigEntity; - const entityId = config.entity; + private _handleClick(entityConf: ConfigEntity) { + const entityId = entityConf.entity; fireEvent(this, "hass-more-info", { entityId }); } diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts index 249dfdbdbc..87ff9f70bd 100644 --- a/src/panels/lovelace/entity-rows/types.ts +++ b/src/panels/lovelace/entity-rows/types.ts @@ -5,8 +5,24 @@ export interface EntityConfig { name: string; icon: string; } +export interface DividerConfig { + style: string; +} +export interface SectionConfig { + label: string; +} +export interface WeblinkConfig { + name: string; + icon: string; + url: string; +} +export type EntityRowConfig = + | EntityConfig + | DividerConfig + | SectionConfig + | WeblinkConfig; export interface EntityRow { hass: HomeAssistant; - config: EntityConfig; + setConfig(config: EntityConfig); } From faa08f9e1fc8a3d6a3578878aa5deb2ea078ebc6 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 24 Oct 2018 09:48:54 -0400 Subject: [PATCH 14/16] Review Update --- src/panels/lovelace/entity-rows/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts index 87ff9f70bd..6d145f2698 100644 --- a/src/panels/lovelace/entity-rows/types.ts +++ b/src/panels/lovelace/entity-rows/types.ts @@ -24,5 +24,5 @@ export type EntityRowConfig = export interface EntityRow { hass: HomeAssistant; - setConfig(config: EntityConfig); + setConfig(config: EntityRowConfig); } From 0b9a4c56a98c92140cee1f036ad83a243d2e71da Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 24 Oct 2018 09:49:44 -0400 Subject: [PATCH 15/16] Review Update --- src/panels/lovelace/cards/hui-entities-card.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 2da7cfcfcb..c7eeff0441 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -165,9 +165,7 @@ class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) element.addEventListener("click", () => this._handleClick(entityConf)); } - return html` - ${element} - `; + return element; } private _handleClick(entityConf: ConfigEntity) { From 25c6a4d3a68f804f06c321c16172b14c75ee769d Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 24 Oct 2018 11:14:37 -0400 Subject: [PATCH 16/16] Switching to new version of localize --- src/panels/lovelace/cards/hui-entities-card.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index c7eeff0441..e8f052c076 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -5,7 +5,7 @@ import "../components/hui-entities-toggle.js"; import { fireEvent } from "../../../common/dom/fire_event.js"; import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const.js"; -import { HassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; +import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; import { LovelaceCard, LovelaceConfig } from "../types.js"; import createRowElement from "../common/create-row-element.js"; import computeDomain from "../../../common/entity/compute_domain.js"; @@ -28,7 +28,7 @@ interface Config extends LovelaceConfig { entities: ConfigEntity[]; } -class HuiEntitiesCard extends HassLocalizeLitMixin(LitElement) +class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement) implements LovelaceCard { protected _hass?: HomeAssistant; protected config?: Config;