From cf2171ece107e93a25324f01176e0f622482770e Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Wed, 24 Oct 2018 05:11:09 -0500 Subject: [PATCH] Convert hui-vertical-stack-card to TypeScript/LitElement (#1846) Failed to rebase previous branch and am taking my working changes and applying to a new branch based off of current master. Updated tslint.json to allow for prefixed `_` to variable names --- .../lovelace/cards/hui-vertical-stack-card.js | 92 ------------------ .../lovelace/cards/hui-vertical-stack-card.ts | 93 +++++++++++++++++++ .../lovelace/common/create-card-element.js | 2 +- tslint.json | 8 +- 4 files changed, 101 insertions(+), 94 deletions(-) delete mode 100644 src/panels/lovelace/cards/hui-vertical-stack-card.js create mode 100644 src/panels/lovelace/cards/hui-vertical-stack-card.ts diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.js b/src/panels/lovelace/cards/hui-vertical-stack-card.js deleted file mode 100644 index 5b213c157c..0000000000 --- a/src/panels/lovelace/cards/hui-vertical-stack-card.js +++ /dev/null @@ -1,92 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag.js"; -import { PolymerElement } from "@polymer/polymer/polymer-element.js"; - -import computeCardSize from "../common/compute-card-size.js"; -import createCardElement from "../common/create-card-element.js"; - -class HuiVerticalStackCard extends PolymerElement { - static get template() { - return html` - -
- `; - } - - static get properties() { - return { - hass: { - type: Object, - observer: "_hassChanged", - }, - }; - } - - constructor() { - super(); - this._elements = []; - } - - ready() { - super.ready(); - if (this._config) this._buildConfig(); - } - - getCardSize() { - let totalSize = 0; - this._elements.forEach((element) => { - totalSize += computeCardSize(element); - }); - return totalSize; - } - - setConfig(config) { - if (!config || !config.cards || !Array.isArray(config.cards)) { - throw new Error("Card config incorrect"); - } - - this._config = config; - if (this.$) this._buildConfig(); - } - - _buildConfig() { - const config = this._config; - - this._elements = []; - const root = this.$.root; - - while (root.lastChild) { - root.removeChild(root.lastChild); - } - - const elements = []; - config.cards.forEach((card) => { - const element = createCardElement(card); - element.hass = this.hass; - elements.push(element); - root.appendChild(element); - }); - this._elements = elements; - } - - _hassChanged(hass) { - this._elements.forEach((element) => { - element.hass = hass; - }); - } -} - -customElements.define("hui-vertical-stack-card", HuiVerticalStackCard); diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts new file mode 100644 index 0000000000..4629552a2f --- /dev/null +++ b/src/panels/lovelace/cards/hui-vertical-stack-card.ts @@ -0,0 +1,93 @@ +import { html, LitElement } from "@polymer/lit-element"; + +import computeCardSize from "../common/compute-card-size.js"; +import createCardElement from "../common/create-card-element.js"; + +import { LovelaceCard, LovelaceConfig } from "../types"; +import { HomeAssistant } from "../../../types"; + +interface Config extends LovelaceConfig { + cards: LovelaceConfig[]; +} + +class HuiVerticalStackCard extends LitElement implements LovelaceCard { + protected config?: Config; + private _hass?: HomeAssistant; + + static get properties() { + return { + config: {}, + }; + } + + set hass(hass: HomeAssistant) { + this._hass = hass; + for (const el of this.shadowRoot!.querySelectorAll("#root > *")) { + const element = el as LovelaceCard; + element.hass = this._hass; + } + } + + public getCardSize() { + let totalSize = 0; + for (const element of this.shadowRoot!.querySelectorAll("#root > *")) { + totalSize += computeCardSize(element); + } + + return totalSize; + } + + public setConfig(config: Config) { + if (!config || !config.cards || !Array.isArray(config.cards)) { + throw new Error("Card config incorrect"); + } + this.config = config; + } + + protected render() { + if (!this.config) { + return html``; + } + + return html` + ${this.renderStyle()} +
+ ${this.config.cards.map((card) => this.createCardElement(card))} +
+ `; + } + + private renderStyle() { + return html` + + `; + } + + private createCardElement(card: LovelaceConfig): LovelaceCard { + const element = createCardElement(card) as LovelaceCard; + element.hass = this._hass; + return element; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-vertical-stack-card": HuiVerticalStackCard; + } +} + +customElements.define("hui-vertical-stack-card", HuiVerticalStackCard); diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js index 18380d5993..73ee2bf8af 100644 --- a/src/panels/lovelace/common/create-card-element.js +++ b/src/panels/lovelace/common/create-card-element.js @@ -19,7 +19,7 @@ import "../cards/hui-picture-entity-card"; import "../cards/hui-picture-glance-card"; import "../cards/hui-plant-status-card.js"; import "../cards/hui-sensor-card.js"; -import "../cards/hui-vertical-stack-card.js"; +import "../cards/hui-vertical-stack-card.ts"; import "../cards/hui-weather-forecast-card"; import "../cards/hui-gauge-card.js"; diff --git a/tslint.json b/tslint.json index 617b239654..8a92682c4e 100644 --- a/tslint.json +++ b/tslint.json @@ -4,6 +4,12 @@ "interface-name": false, "no-submodule-imports": false, "ordered-imports": false, - "object-literal-sort-keys": false + "object-literal-sort-keys": false, + "variable-name": [ + true, + "ban-keywords", + "check-format", + "allow-leading-underscore" + ] } }