From ef2aa2ea6fecd9801191d051f1e4962a9c00a57b Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Tue, 20 Nov 2018 06:24:30 -0500 Subject: [PATCH] Picture Glance Conversion to TS (#2029) * First Commit * Convert to TS * Extract entity render to own function * Making it one function like not an idiot * Addressing Reviews --- .../lovelace/cards/hui-picture-glance-card.js | 201 --------------- .../lovelace/cards/hui-picture-glance-card.ts | 236 ++++++++++++++++++ 2 files changed, 236 insertions(+), 201 deletions(-) delete mode 100644 src/panels/lovelace/cards/hui-picture-glance-card.js create mode 100644 src/panels/lovelace/cards/hui-picture-glance-card.ts diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.js b/src/panels/lovelace/cards/hui-picture-glance-card.js deleted file mode 100644 index 2a2e101fb3..0000000000 --- a/src/panels/lovelace/cards/hui-picture-glance-card.js +++ /dev/null @@ -1,201 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import "../../../components/ha-card"; -import "../../../components/ha-icon"; -import "../components/hui-image"; - -import computeStateDisplay from "../../../common/entity/compute_state_display"; -import computeStateName from "../../../common/entity/compute_state_name"; -import { DOMAINS_TOGGLE } from "../../../common/const"; -import stateIcon from "../../../common/entity/state_icon"; -import toggleEntity from "../common/entity/toggle-entity"; -import processConfigEntities from "../common/process-config-entities"; - -import EventsMixin from "../../../mixins/events-mixin"; -import LocalizeMixin from "../../../mixins/localize-mixin"; -import NavigateMixin from "../../../mixins/navigate-mixin"; -import computeDomain from "../../../common/entity/compute_domain"; - -const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]); - -/* - * @appliesMixin EventsMixin - * @appliesMixin LocalizeMixin - * @appliesMixin NavigateMixin - */ -class HuiPictureGlanceCard extends NavigateMixin( - LocalizeMixin(EventsMixin(PolymerElement)) -) { - static get template() { - return html` - - - - -
- -
- -
-
- -
-
- - `; - } - - static get properties() { - return { - hass: Object, - _config: Object, - _entitiesDialog: Array, - _entitiesToggle: Array, - }; - } - - getCardSize() { - return 3; - } - - setConfig(config) { - if ( - !config || - !config.entities || - !Array.isArray(config.entities) || - !(config.image || config.camera_image || config.state_image) || - (config.state_image && !config.entity) - ) { - throw new Error("Invalid card configuration"); - } - const entities = processConfigEntities(config.entities); - const dialog = []; - const toggle = []; - - entities.forEach((item) => { - if ( - config.force_dialog || - !DOMAINS_TOGGLE.has(computeDomain(item.entity)) - ) { - dialog.push(item); - } else { - toggle.push(item); - } - }); - this.setProperties({ - _config: config, - _entitiesDialog: dialog, - _entitiesToggle: toggle, - }); - } - - _computeVisible(collection, states) { - return collection.filter((el) => el.entity in states); - } - - _computeIcon(item, states) { - return item.icon || stateIcon(states[item.entity]); - } - - _computeButtonClass(entityId, states) { - return STATES_OFF.has(states[entityId].state) ? "" : "state-on"; - } - - _computeTooltip(entityId, states) { - return `${computeStateName(states[entityId])}: ${computeStateDisplay( - this.localize, - states[entityId] - )}`; - } - - _computeImageClass(config) { - return config.navigation_path || config.camera_image ? "clickable" : ""; - } - - _openDialog(ev) { - this.fire("hass-more-info", { entityId: ev.model.item.entity }); - } - - _callService(ev) { - toggleEntity(this.hass, ev.model.item.entity); - } - - _handleImageClick() { - if (this._config.navigation_path) { - this.navigate(this._config.navigation_path); - return; - } - - if (this._config.camera_image) { - this.fire("hass-more-info", { entityId: this._config.camera_image }); - } - } -} -customElements.define("hui-picture-glance-card", HuiPictureGlanceCard); diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts new file mode 100644 index 0000000000..e12e1c22e6 --- /dev/null +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -0,0 +1,236 @@ +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; +import { classMap } from "lit-html/directives/classMap"; +import { TemplateResult } from "lit-html"; + +import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; +import { fireEvent } from "../../../common/dom/fire_event"; +import { DOMAINS_TOGGLE } from "../../../common/const"; +import { LovelaceCard, LovelaceConfig } from "../types"; +import { EntityConfig } from "../entity-rows/types"; +import { navigate } from "../../../common/navigate"; +import { HomeAssistant } from "../../../types"; + +import computeStateDisplay from "../../../common/entity/compute_state_display"; +import computeStateName from "../../../common/entity/compute_state_name"; +import processConfigEntities from "../common/process-config-entities"; +import computeDomain from "../../../common/entity/compute_domain"; +import stateIcon from "../../../common/entity/state_icon"; +import toggleEntity from "../common/entity/toggle-entity"; + +import "../../../components/ha-card"; +import "../../../components/ha-icon"; +import "../components/hui-image"; + +const STATES_OFF = new Set(["closed", "locked", "not_home", "off"]); + +interface Config extends LovelaceConfig { + entities: EntityConfig[]; + title?: string; + navigation_path?: string; + image?: string; + camera_image?: string; + state_image?: {}; + aspect_ratio?: string; + entity?: string; + force_dialog?: boolean; +} + +class HuiPictureGlanceCard extends hassLocalizeLitMixin(LitElement) + implements LovelaceCard { + public hass?: HomeAssistant; + private _config?: Config; + private _entitiesDialog?: EntityConfig[]; + private _entitiesToggle?: EntityConfig[]; + + static get properties(): PropertyDeclarations { + return { + hass: {}, + _config: {}, + }; + } + + public getCardSize(): number { + return 3; + } + + public setConfig(config: Config): void { + if ( + !config || + !config.entities || + !Array.isArray(config.entities) || + !(config.image || config.camera_image || config.state_image) || + (config.state_image && !config.entity) + ) { + throw new Error("Invalid card configuration"); + } + + const entities = processConfigEntities(config.entities); + this._entitiesDialog = []; + this._entitiesToggle = []; + + entities.forEach((item) => { + if ( + config.force_dialog || + !DOMAINS_TOGGLE.has(computeDomain(item.entity)) + ) { + this._entitiesDialog!.push(item); + } else { + this._entitiesToggle!.push(item); + } + }); + + this._config = config; + } + + protected render(): TemplateResult { + if (!this._config || !this.hass) { + return html``; + } + + const isClickable = + this._config.navigation_path || this._config.camera_image; + + return html` + ${this.renderStyle()} + + +
+ ${ + this._config.title + ? html` +
${this._config.title}
+ ` + : "" + } +
+ ${ + this._entitiesDialog!.map((entityConf) => + this.renderEntity(entityConf, true) + ) + } +
+
+ ${ + this._entitiesToggle!.map((entityConf) => + this.renderEntity(entityConf, false) + ) + } +
+
+ + `; + } + + private renderEntity( + entityConf: EntityConfig, + dialog: boolean + ): TemplateResult { + const stateObj = this.hass!.states[entityConf.entity]; + + if (!stateObj) { + return html``; + } + + return html` + + `; + } + + private _openDialog(ev: MouseEvent): void { + fireEvent(this, "hass-more-info", { entityId: (ev.target as any).entity }); + } + + private _callService(ev: MouseEvent): void { + toggleEntity(this.hass, (ev.target as any).entity); + } + + private _handleImageClick(): void { + if (this._config!.navigation_path) { + navigate(this, this._config!.navigation_path!); + } else if (this._config!.camera_image) { + fireEvent(this, "hass-more-info", { + entityId: this._config!.camera_image, + }); + } + } + + private renderStyle(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-picture-glance-card": HuiPictureGlanceCard; + } +} + +customElements.define("hui-picture-glance-card", HuiPictureGlanceCard);