From a259a12eabe4e30e80a7a7635d83d741872fe10b Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Fri, 22 Feb 2019 22:37:27 -0600 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20cleanup=20elements=20(#2820)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🧹 cleanup elements * lint --- src/panels/lovelace/common/compute-tooltip.ts | 12 ++- .../lovelace/elements/hui-icon-element.ts | 49 ++++++------ .../lovelace/elements/hui-image-element.ts | 58 +++++++------- .../elements/hui-service-button-element.ts | 40 ++++++---- .../elements/hui-state-badge-element.ts | 51 +++++++----- .../elements/hui-state-icon-element.ts | 73 ++++++++++------- .../elements/hui-state-label-element.ts | 78 ++++++++++++------- src/panels/lovelace/elements/types.ts | 7 -- 8 files changed, 219 insertions(+), 149 deletions(-) diff --git a/src/panels/lovelace/common/compute-tooltip.ts b/src/panels/lovelace/common/compute-tooltip.ts index 2a7b7129c3..87f921319d 100644 --- a/src/panels/lovelace/common/compute-tooltip.ts +++ b/src/panels/lovelace/common/compute-tooltip.ts @@ -3,10 +3,14 @@ import { HomeAssistant } from "../../../types"; import { LovelaceElementConfig } from "../elements/types"; import { ActionConfig } from "../../../data/lovelace"; -export const computeTooltip = ( - hass: HomeAssistant, - config: LovelaceElementConfig -): string => { +interface Config extends LovelaceElementConfig { + entity?: string; + title?: string; + tap_action?: ActionConfig; + hold_action?: ActionConfig; +} + +export const computeTooltip = (hass: HomeAssistant, config: Config): string => { if (config.title) { return config.title; } diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts index fa817a4684..87a4f959f3 100644 --- a/src/panels/lovelace/elements/hui-icon-element.ts +++ b/src/panels/lovelace/elements/hui-icon-element.ts @@ -1,4 +1,12 @@ -import { html, LitElement, TemplateResult } from "lit-element"; +import { + html, + LitElement, + TemplateResult, + property, + css, + CSSResult, + customElement, +} from "lit-element"; import "../../../components/ha-icon"; @@ -7,18 +15,20 @@ import { handleClick } from "../common/handle-click"; import { longPress } from "../common/directives/long-press-directive"; import { LovelaceElement, LovelaceElementConfig } from "./types"; import { HomeAssistant } from "../../../types"; +import { ActionConfig } from "../../../data/lovelace"; -interface Config extends LovelaceElementConfig { +export interface Config extends LovelaceElementConfig { + entity?: string; + name?: string; + tap_action?: ActionConfig; + hold_action?: ActionConfig; icon: string; } +@customElement("hui-icon-element") export class HuiIconElement extends LitElement implements LovelaceElement { - public hass?: HomeAssistant; - private _config?: Config; - - static get properties() { - return { hass: {}, _config: {} }; - } + @property() public hass?: HomeAssistant; + @property() private _config?: Config; public setConfig(config: Config): void { if (!config.icon) { @@ -29,15 +39,14 @@ export class HuiIconElement extends LitElement implements LovelaceElement { } protected render(): TemplateResult | void { - if (!this._config) { + if (!this._config || !this.hass) { return html``; } return html` - ${this.renderStyle()} - :host { - cursor: pointer; - } - + static get styles(): CSSResult { + return css` + :host { + cursor: pointer; + } `; } } @@ -69,5 +76,3 @@ declare global { "hui-icon-element": HuiIconElement; } } - -customElements.define("hui-icon-element", HuiIconElement); diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts index 77e96bb75d..76e55b08e2 100644 --- a/src/panels/lovelace/elements/hui-image-element.ts +++ b/src/panels/lovelace/elements/hui-image-element.ts @@ -1,4 +1,12 @@ -import { html, LitElement, TemplateResult } from "lit-element"; +import { + html, + LitElement, + TemplateResult, + property, + customElement, + css, + CSSResult, +} from "lit-element"; import "../components/hui-image"; @@ -7,8 +15,12 @@ import { handleClick } from "../common/handle-click"; import { longPress } from "../common/directives/long-press-directive"; import { LovelaceElement, LovelaceElementConfig } from "./types"; import { HomeAssistant } from "../../../types"; +import { ActionConfig } from "../../../data/lovelace"; -interface Config extends LovelaceElementConfig { +export interface Config extends LovelaceElementConfig { + entity?: string; + tap_action?: ActionConfig; + hold_action?: ActionConfig; image?: string; state_image?: string; camera_image?: string; @@ -17,13 +29,10 @@ interface Config extends LovelaceElementConfig { aspect_ratio?: string; } +@customElement("hui-image-element") export class HuiImageElement extends LitElement implements LovelaceElement { - public hass?: HomeAssistant; - private _config?: Config; - - static get properties() { - return { hass: {}, _config: {} }; - } + @property() public hass?: HomeAssistant; + @property() private _config?: Config; public setConfig(config: Config): void { if (!config) { @@ -38,12 +47,11 @@ export class HuiImageElement extends LitElement implements LovelaceElement { } protected render(): TemplateResult | void { - if (!this._config) { + if (!this._config || !this.hass) { return html``; } return html` - ${this.renderStyle()} - :host(.clickable) { - cursor: pointer; - overflow: hidden; - -webkit-touch-callout: none !important; - } - hui-image { - -webkit-user-select: none !important; - } - + static get styles(): CSSResult { + return css` + :host(.clickable) { + cursor: pointer; + overflow: hidden; + -webkit-touch-callout: none !important; + } + hui-image { + -webkit-user-select: none !important; + } `; } - private _handleTap() { + private _handleTap(): void { handleClick(this, this.hass!, this._config!, false); } - private _handleHold() { + private _handleHold(): void { handleClick(this, this.hass!, this._config!, true); } } @@ -90,5 +96,3 @@ declare global { "hui-image-element": HuiImageElement; } } - -customElements.define("hui-image-element", HuiImageElement); diff --git a/src/panels/lovelace/elements/hui-service-button-element.ts b/src/panels/lovelace/elements/hui-service-button-element.ts index 13fb73d3d0..1c3ecef0ab 100644 --- a/src/panels/lovelace/elements/hui-service-button-element.ts +++ b/src/panels/lovelace/elements/hui-service-button-element.ts @@ -1,14 +1,29 @@ -import { html, LitElement, TemplateResult } from "lit-element"; +import { + html, + LitElement, + TemplateResult, + property, + customElement, + CSSResult, + css, +} from "lit-element"; import "../../../components/buttons/ha-call-service-button"; import { LovelaceElement, LovelaceElementConfig } from "./types"; import { HomeAssistant } from "../../../types"; +export interface Config extends LovelaceElementConfig { + title?: string; + service?: string; + service_data?: object; +} + +@customElement("hui-service-button-element") export class HuiServiceButtonElement extends LitElement implements LovelaceElement { public hass?: HomeAssistant; - private _config?: LovelaceElementConfig; + @property() private _config?: Config; private _domain?: string; private _service?: string; @@ -16,7 +31,7 @@ export class HuiServiceButtonElement extends LitElement return { _config: {} }; } - public setConfig(config: LovelaceElementConfig): void { + public setConfig(config: Config): void { if (!config || !config.service) { throw Error("Invalid Configuration: 'service' required"); } @@ -37,12 +52,11 @@ export class HuiServiceButtonElement extends LitElement } protected render(): TemplateResult | void { - if (!this._config) { + if (!this._config || !this.hass) { return html``; } return html` - ${this.renderStyle()} - ha-call-service-button { - color: var(--primary-color); - white-space: nowrap; - } - + static get styles(): CSSResult { + return css` + ha-call-service-button { + color: var(--primary-color); + white-space: nowrap; + } `; } } @@ -70,5 +82,3 @@ declare global { "hui-service-button-element": HuiServiceButtonElement; } } - -customElements.define("hui-service-button-element", HuiServiceButtonElement); diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts index c7cc4294da..6d452a1928 100644 --- a/src/panels/lovelace/elements/hui-state-badge-element.ts +++ b/src/panels/lovelace/elements/hui-state-badge-element.ts @@ -1,21 +1,29 @@ -import { html, LitElement, TemplateResult } from "lit-element"; +import { + html, + LitElement, + TemplateResult, + customElement, + property, +} from "lit-element"; import "../../../components/entity/ha-state-label-badge"; +import "../components/hui-warning"; import computeStateName from "../../../common/entity/compute_state_name"; import { LovelaceElement, LovelaceElementConfig } from "./types"; import { HomeAssistant } from "../../../types"; +export interface Config extends LovelaceElementConfig { + entity: string; +} + +@customElement("hui-state-badge-element") export class HuiStateBadgeElement extends LitElement implements LovelaceElement { - public hass?: HomeAssistant; - private _config?: LovelaceElementConfig; + @property() public hass?: HomeAssistant; + @property() private _config?: Config; - static get properties() { - return { hass: {}, _config: {} }; - } - - public setConfig(config: LovelaceElementConfig): void { + public setConfig(config: Config): void { if (!config.entity) { throw Error("Invalid Configuration: 'entity' required"); } @@ -24,20 +32,29 @@ export class HuiStateBadgeElement extends LitElement } protected render(): TemplateResult | void { - if ( - !this._config || - !this.hass || - !this.hass.states[this._config.entity!] - ) { + if (!this._config || !this.hass) { return html``; } - const state = this.hass.states[this._config.entity!]; + const stateObj = this.hass.states[this._config.entity!]; + + if (!stateObj) { + return html` + ${this.hass.localize( + "ui.panel.lovelace.warning.entity_not_found", + "entity", + this._config.entity + )} + `; + } + return html` `; } @@ -48,5 +65,3 @@ declare global { "hui-state-badge-element": HuiStateBadgeElement; } } - -customElements.define("hui-state-badge-element", HuiStateBadgeElement); diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts index 8e07402f9d..df9ddac572 100644 --- a/src/panels/lovelace/elements/hui-state-icon-element.ts +++ b/src/panels/lovelace/elements/hui-state-icon-element.ts @@ -1,22 +1,35 @@ -import { html, LitElement, TemplateResult } from "lit-element"; +import { + html, + LitElement, + TemplateResult, + customElement, + property, + css, + CSSResult, +} from "lit-element"; import "../../../components/entity/state-badge"; +import "../components/hui-warning"; import { computeTooltip } from "../common/compute-tooltip"; import { handleClick } from "../common/handle-click"; import { longPress } from "../common/directives/long-press-directive"; import { LovelaceElement, LovelaceElementConfig } from "./types"; import { HomeAssistant } from "../../../types"; +import { ActionConfig } from "../../../data/lovelace"; +export interface Config extends LovelaceElementConfig { + entity: string; + tap_action?: ActionConfig; + hold_action?: ActionConfig; +} + +@customElement("hui-state-icon-element") export class HuiStateIconElement extends LitElement implements LovelaceElement { - public hass?: HomeAssistant; - private _config?: LovelaceElementConfig; + @property() public hass?: HomeAssistant; + @property() private _config?: Config; - static get properties() { - return { hass: {}, _config: {} }; - } - - public setConfig(config: LovelaceElementConfig): void { + public setConfig(config: Config): void { if (!config.entity) { throw Error("Invalid Configuration: 'entity' required"); } @@ -25,20 +38,28 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement { } protected render(): TemplateResult | void { - if ( - !this._config || - !this.hass || - !this.hass.states[this._config.entity!] - ) { + if (!this._config || !this.hass) { return html``; } - const state = this.hass!.states[this._config.entity!]; + const stateObj = this.hass.states[this._config.entity!]; + + if (!stateObj) { + return html` + ${this.hass.localize( + "ui.panel.lovelace.warning.entity_not_found", + "entity", + this._config.entity + )} + `; + } + return html` - ${this.renderStyle()} - :host { - cursor: pointer; - } - + static get styles(): CSSResult { + return css` + :host { + cursor: pointer; + } `; } - private _handleClick() { + private _handleClick(): void { handleClick(this, this.hass!, this._config!, false); } - private _handleHold() { + private _handleHold(): void { handleClick(this, this.hass!, this._config!, true); } } @@ -70,5 +89,3 @@ declare global { "hui-state-icon-element": HuiStateIconElement; } } - -customElements.define("hui-state-icon-element", HuiStateIconElement); diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts index b4185c09a8..5decd2d415 100644 --- a/src/panels/lovelace/elements/hui-state-label-element.ts +++ b/src/panels/lovelace/elements/hui-state-label-element.ts @@ -1,6 +1,15 @@ -import { html, LitElement, TemplateResult } from "lit-element"; +import { + html, + LitElement, + TemplateResult, + customElement, + property, + css, + CSSResult, +} from "lit-element"; import "../../../components/entity/ha-state-label-badge"; +import "../components/hui-warning"; import computeStateDisplay from "../../../common/entity/compute_state_display"; import { computeTooltip } from "../common/compute-tooltip"; @@ -8,19 +17,20 @@ import { handleClick } from "../common/handle-click"; import { longPress } from "../common/directives/long-press-directive"; import { LovelaceElement, LovelaceElementConfig } from "./types"; import { HomeAssistant } from "../../../types"; +import { ActionConfig } from "../../../data/lovelace"; interface Config extends LovelaceElementConfig { + entity: string; prefix?: string; suffix?: string; + tap_action?: ActionConfig; + hold_action?: ActionConfig; } +@customElement("hui-state-label-element") class HuiStateLabelElement extends LitElement implements LovelaceElement { - public hass?: HomeAssistant; - private _config?: Config; - - static get properties() { - return { hass: {}, _config: {} }; - } + @property() public hass?: HomeAssistant; + @property() private _config?: Config; public setConfig(config: Config): void { if (!config.entity) { @@ -31,45 +41,59 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement { } protected render(): TemplateResult | void { - if (!this._config) { + if (!this._config || !this.hass) { return html``; } - const state = this.hass!.states[this._config.entity!]; + const stateObj = this.hass.states[this._config.entity!]; + + if (!stateObj) { + return html` + ${this.hass.localize( + "ui.panel.lovelace.warning.entity_not_found", + "entity", + this._config.entity + )} + `; + } + return html` - ${this.renderStyle()}
- ${this._config.prefix}${state - ? computeStateDisplay(this.hass!.localize, state, this.hass!.language) + ${this._config.prefix}${stateObj + ? computeStateDisplay( + this.hass.localize, + stateObj, + this.hass.language + ) : "-"}${this._config.suffix}
`; } - private _handleTap() { + private _handleTap(): void { handleClick(this, this.hass!, this._config!, false); } - private _handleHold() { + private _handleHold(): void { handleClick(this, this.hass!, this._config!, true); } - private renderStyle(): TemplateResult { - return html` - + static get styles(): CSSResult { + return css` + :host { + cursor: pointer; + } + div { + padding: 8px; + white-space: nowrap; + } `; } } @@ -79,5 +103,3 @@ declare global { "hui-state-label-element": HuiStateLabelElement; } } - -customElements.define("hui-state-label-element", HuiStateLabelElement); diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts index ebc66605d9..6d6b908a29 100644 --- a/src/panels/lovelace/elements/types.ts +++ b/src/panels/lovelace/elements/types.ts @@ -1,15 +1,8 @@ import { HomeAssistant } from "../../../types"; -import { ActionConfig } from "../../../data/lovelace"; export interface LovelaceElementConfig { type: string; style: object; - entity?: string; - hold_action?: ActionConfig; - service?: string; - service_data?: object; - tap_action?: ActionConfig; - title?: string; } export interface LovelaceElement extends HTMLElement {