From 96703cb7469b31bd411811a12a49c359dd2b312e Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 6 Dec 2018 10:31:24 -0600 Subject: [PATCH 1/8] Initial Need to switch branches --- src/panels/lovelace/cards/hui-button-card.ts | 90 +++++++++++ .../lovelace/common/create-hui-element.js | 4 +- .../hui-button-element.ts} | 147 +++++++----------- .../elements/hui-service-button-element.ts | 75 --------- 4 files changed, 145 insertions(+), 171 deletions(-) create mode 100644 src/panels/lovelace/cards/hui-button-card.ts rename src/panels/lovelace/{cards/hui-entity-button-card.ts => elements/hui-button-element.ts} (52%) delete mode 100644 src/panels/lovelace/elements/hui-service-button-element.ts diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts new file mode 100644 index 000000000000..f768046211ce --- /dev/null +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -0,0 +1,90 @@ +import { + html, + LitElement, + PropertyDeclarations, + PropertyValues, +} from "@polymer/lit-element"; +import { TemplateResult } from "lit-html"; + +import "../../../components/ha-card"; +import createHuiElement from "../common/create-hui-element"; + +import isValidEntityId from "../../../common/entity/valid_entity_id"; +import { HomeAssistant } from "../../../types"; +import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; +import { LovelaceCard } from "../types"; +import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace"; +import { LovelaceElement } from "../elements/types"; + +interface Config extends LovelaceCardConfig { + entity: string; + name?: string; + icon?: string; + theme?: string; + tap_action?: ActionConfig; + hold_action?: ActionConfig; +} + +class HuiButtonCard extends hassLocalizeLitMixin(LitElement) + implements LovelaceCard { + public hass?: HomeAssistant; + private _config?: Config; + + static get properties(): PropertyDeclarations { + return { + hass: {}, + _config: {}, + }; + } + + public getCardSize(): number { + return 2; + } + + public setConfig(config: Config): void { + if (!isValidEntityId(config.entity)) { + throw new Error("Invalid Entity"); + } + + this._config = { theme: "default", ...config }; + } + + protected shouldUpdate(changedProps: PropertyValues): boolean { + if (changedProps.has("_config")) { + return true; + } + + const oldHass = changedProps.get("hass") as HomeAssistant | undefined; + if (oldHass) { + return ( + oldHass.states[this._config!.entity] !== + this.hass!.states[this._config!.entity] + ); + } + return true; + } + + protected render(): TemplateResult { + if (!this._config || !this.hass) { + return html``; + } + + const element = createHuiElement({ + type: "hui-button-element", + ...this._config, + }) as LovelaceElement; + element.hass = this._hass; + + return html` + ${element} + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-button-card": HuiButtonCard; + } +} + +customElements.define("hui-button-card", HuiButtonCard); diff --git a/src/panels/lovelace/common/create-hui-element.js b/src/panels/lovelace/common/create-hui-element.js index c9d10924dbb6..bfd7e309e5fc 100644 --- a/src/panels/lovelace/common/create-hui-element.js +++ b/src/panels/lovelace/common/create-hui-element.js @@ -1,6 +1,6 @@ +import "../elements/hui-button-element"; import "../elements/hui-icon-element"; import "../elements/hui-image-element"; -import "../elements/hui-service-button-element"; import "../elements/hui-state-badge-element"; import "../elements/hui-state-icon-element"; import "../elements/hui-state-label-element"; @@ -10,9 +10,9 @@ import createErrorCardConfig from "./create-error-card-config"; const CUSTOM_TYPE_PREFIX = "custom:"; const ELEMENT_TYPES = new Set([ + "button", "icon", "image", - "service-button", "state-badge", "state-icon", "state-label", diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/elements/hui-button-element.ts similarity index 52% rename from src/panels/lovelace/cards/hui-entity-button-card.ts rename to src/panels/lovelace/elements/hui-button-element.ts index fbb074b0b43c..3f304d38681a 100644 --- a/src/panels/lovelace/cards/hui-entity-button-card.ts +++ b/src/panels/lovelace/elements/hui-button-element.ts @@ -1,117 +1,76 @@ -import { - html, - LitElement, - PropertyDeclarations, - PropertyValues, -} from "@polymer/lit-element"; -import { HassEntity } from "home-assistant-js-websocket"; +import { html, LitElement, PropertyValues } from "@polymer/lit-element"; import { TemplateResult } from "lit-html"; -import { styleMap } from "lit-html/directives/styleMap"; -import "../../../components/ha-card"; +import "../../../components/buttons/ha-call-service-button"; -import isValidEntityId from "../../../common/entity/valid_entity_id"; +import { LovelaceElement, LovelaceElementConfig } from "./types"; +import { HomeAssistant, LightEntity } from "../../../types"; +import { handleClick } from "../common/handle-click"; +import { HassEntity } from "home-assistant-js-websocket"; +import { longPress } from "../common/directives/long-press-directive"; +import computeStateName from "../../../common/entity/compute_state_name"; import stateIcon from "../../../common/entity/state_icon"; import computeStateDomain from "../../../common/entity/compute_state_domain"; -import computeStateName from "../../../common/entity/compute_state_name"; import applyThemesOnElement from "../../../common/dom/apply_themes_on_element"; -import { HomeAssistant, LightEntity } from "../../../types"; -import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; -import { LovelaceCard } from "../types"; -import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace"; -import { longPress } from "../common/directives/long-press-directive"; -import { handleClick } from "../common/handle-click"; - -interface Config extends LovelaceCardConfig { - entity: string; - name?: string; - icon?: string; - theme?: string; - tap_action?: ActionConfig; - hold_action?: ActionConfig; -} - -class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement) - implements LovelaceCard { - public hass?: HomeAssistant; - private _config?: Config; +import { styleMap } from "lit-html/directives/styleMap"; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _config: {}, - }; - } +export class HuiButtonElement extends LitElement implements LovelaceElement { + private _hass?: HomeAssistant; + private _config?: LovelaceElementConfig; - public getCardSize(): number { - return 2; + static get properties() { + return { _config: {} }; } - public setConfig(config: Config): void { - if (!isValidEntityId(config.entity)) { - throw new Error("Invalid Entity"); + public setConfig(config: LovelaceElementConfig): void { + if (!config) { + throw Error("Invalid Configuration"); } this._config = { theme: "default", ...config }; } - protected shouldUpdate(changedProps: PropertyValues): boolean { - if (changedProps.has("_config")) { - return true; - } - - const oldHass = changedProps.get("hass") as HomeAssistant | undefined; - if (oldHass) { - return ( - oldHass.states[this._config!.entity] !== - this.hass!.states[this._config!.entity] - ); - } - return true; - } - protected render(): TemplateResult { - if (!this._config || !this.hass) { + if (!this._hass || !this._config) { return html``; } - const stateObj = this.hass.states[this._config.entity]; + + const stateObj = this._hass.states[this._config.entity]; return html` ${this.renderStyle()} - - ${ - !stateObj - ? html` -
- Entity not available: ${this._config.entity} + ${ + !stateObj + ? html` +
+ Entity not available: ${this._config.entity} +
+ ` + : html` + +
+ + + ${this._config.name || computeStateName(stateObj)} +
- ` - : html` - -
- - - ${this._config.name || computeStateName(stateObj)} - -
- - ` - } - + + ` + } `; } @@ -195,8 +154,8 @@ class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement) declare global { interface HTMLElementTagNameMap { - "hui-entity-button-card": HuiEntityButtonCard; + "hui-button-element": HuiButtonElement; } } -customElements.define("hui-entity-button-card", HuiEntityButtonCard); +customElements.define("hui-button-element", HuiButtonElement); diff --git a/src/panels/lovelace/elements/hui-service-button-element.ts b/src/panels/lovelace/elements/hui-service-button-element.ts deleted file mode 100644 index 32a39600fe9d..000000000000 --- a/src/panels/lovelace/elements/hui-service-button-element.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { html, LitElement } from "@polymer/lit-element"; -import { TemplateResult } from "lit-html"; - -import "../../../components/buttons/ha-call-service-button"; - -import { LovelaceElement, LovelaceElementConfig } from "./types"; -import { HomeAssistant } from "../../../types"; - -export class HuiServiceButtonElement extends LitElement - implements LovelaceElement { - public hass?: HomeAssistant; - private _config?: LovelaceElementConfig; - private _domain?: string; - private _service?: string; - - static get properties() { - return { _config: {} }; - } - - public setConfig(config: LovelaceElementConfig): void { - if (!config || !config.service) { - throw Error("Invalid Configuration: 'service' required"); - } - - [this._domain, this._service] = config.service.split(".", 2); - - if (!this._domain) { - throw Error("Invalid Configuration: 'service' does not have a domain"); - } - - if (!this._service) { - throw Error( - "Invalid Configuration: 'service' does not have a service name" - ); - } - - this._config = config; - } - - protected render(): TemplateResult { - if (!this._config) { - return html``; - } - - return html` - ${this.renderStyle()} - ${this._config.title} - `; - } - - private renderStyle(): TemplateResult { - return html` - - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - "hui-service-button-element": HuiServiceButtonElement; - } -} - -customElements.define("hui-service-button-element", HuiServiceButtonElement); From 200c11872ec1038334c6cc4929cada897ce9d3f1 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 6 Dec 2018 12:23:42 -0600 Subject: [PATCH 2/8] Seemingly works. Needs cleanup and more testing --- src/common/entity/compute_state_domain.ts | 5 +- src/common/entity/compute_state_name.ts | 5 +- src/common/entity/state_icon.ts | 2 +- src/panels/lovelace/cards/hui-button-card.ts | 41 +++------ .../lovelace/common/create-card-element.js | 4 +- .../lovelace/elements/hui-button-element.ts | 84 +++++++++---------- src/panels/lovelace/elements/types.ts | 3 + 7 files changed, 65 insertions(+), 79 deletions(-) diff --git a/src/common/entity/compute_state_domain.ts b/src/common/entity/compute_state_domain.ts index 1ef02f4e8fca..b8d455ca0ab7 100644 --- a/src/common/entity/compute_state_domain.ts +++ b/src/common/entity/compute_state_domain.ts @@ -1,6 +1,9 @@ import { HassEntity } from "home-assistant-js-websocket"; import computeDomain from "./compute_domain"; -export default function computeStateDomain(stateObj: HassEntity) { +export default function computeStateDomain(stateObj: HassEntity | undefined) { + if (!stateObj) { + return ""; + } return computeDomain(stateObj.entity_id); } diff --git a/src/common/entity/compute_state_name.ts b/src/common/entity/compute_state_name.ts index c20bde78b7c3..4aa9ccd78086 100644 --- a/src/common/entity/compute_state_name.ts +++ b/src/common/entity/compute_state_name.ts @@ -5,7 +5,10 @@ type CachedDisplayEntity = HassEntity & { _entityDisplay?: string; }; -export default function computeStateName(stateObj: HassEntity) { +export default function computeStateName(stateObj: HassEntity | undefined) { + if (!stateObj) { + return ""; + } const state = stateObj as CachedDisplayEntity; if (state._entityDisplay === undefined) { diff --git a/src/common/entity/state_icon.ts b/src/common/entity/state_icon.ts index 351db86d12f9..68fa2656940b 100644 --- a/src/common/entity/state_icon.ts +++ b/src/common/entity/state_icon.ts @@ -17,7 +17,7 @@ const domainIcons = { input_datetime: inputDateTimeIcon, }; -export default function stateIcon(state: HassEntity) { +export default function stateIcon(state: HassEntity | undefined) { if (!state) { return DEFAULT_DOMAIN_ICON; } diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index f768046211ce..b4403400ae5c 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -1,15 +1,9 @@ -import { - html, - LitElement, - PropertyDeclarations, - PropertyValues, -} from "@polymer/lit-element"; +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; import { TemplateResult } from "lit-html"; import "../../../components/ha-card"; import createHuiElement from "../common/create-hui-element"; -import isValidEntityId from "../../../common/entity/valid_entity_id"; import { HomeAssistant } from "../../../types"; import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; import { LovelaceCard } from "../types"; @@ -27,7 +21,7 @@ interface Config extends LovelaceCardConfig { class HuiButtonCard extends hassLocalizeLitMixin(LitElement) implements LovelaceCard { - public hass?: HomeAssistant; + private _hass?: HomeAssistant; private _config?: Config; static get properties(): PropertyDeclarations { @@ -37,35 +31,24 @@ class HuiButtonCard extends hassLocalizeLitMixin(LitElement) }; } + set hass(hass: HomeAssistant) { + this._hass = hass; + for (const el of this.shadowRoot!.querySelectorAll("hui-button-element")) { + const element = el as LovelaceElement; + element.hass = this._hass; + } + } + public getCardSize(): number { return 2; } public setConfig(config: Config): void { - if (!isValidEntityId(config.entity)) { - throw new Error("Invalid Entity"); - } - this._config = { theme: "default", ...config }; } - protected shouldUpdate(changedProps: PropertyValues): boolean { - if (changedProps.has("_config")) { - return true; - } - - const oldHass = changedProps.get("hass") as HomeAssistant | undefined; - if (oldHass) { - return ( - oldHass.states[this._config!.entity] !== - this.hass!.states[this._config!.entity] - ); - } - return true; - } - protected render(): TemplateResult { - if (!this._config || !this.hass) { + if (!this._config || !this._hass) { return html``; } @@ -76,7 +59,7 @@ class HuiButtonCard extends hassLocalizeLitMixin(LitElement) element.hass = this._hass; return html` - ${element} + ${element} `; } } diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js index 60ff05659f6a..a1bab42933ea 100644 --- a/src/panels/lovelace/common/create-card-element.js +++ b/src/panels/lovelace/common/create-card-element.js @@ -1,9 +1,9 @@ import { fireEvent } from "../../../common/dom/fire_event"; import "../cards/hui-alarm-panel-card"; +import "../cards/hui-button-card"; import "../cards/hui-conditional-card"; import "../cards/hui-entities-card"; -import "../cards/hui-entity-button-card"; import "../cards/hui-entity-filter-card"; import "../cards/hui-error-card"; import "../cards/hui-glance-card"; @@ -30,9 +30,9 @@ import createErrorCardConfig from "./create-error-card-config"; const CARD_TYPES = new Set([ "alarm-panel", + "button", "conditional", "entities", - "entity-button", "entity-filter", "error", "gauge", diff --git a/src/panels/lovelace/elements/hui-button-element.ts b/src/panels/lovelace/elements/hui-button-element.ts index 3f304d38681a..c8f3cd4e614c 100644 --- a/src/panels/lovelace/elements/hui-button-element.ts +++ b/src/panels/lovelace/elements/hui-button-element.ts @@ -1,5 +1,6 @@ import { html, LitElement, PropertyValues } from "@polymer/lit-element"; import { TemplateResult } from "lit-html"; +import { styleMap } from "lit-html/directives/styleMap"; import "../../../components/buttons/ha-call-service-button"; @@ -12,10 +13,10 @@ import computeStateName from "../../../common/entity/compute_state_name"; import stateIcon from "../../../common/entity/state_icon"; import computeStateDomain from "../../../common/entity/compute_state_domain"; import applyThemesOnElement from "../../../common/dom/apply_themes_on_element"; -import { styleMap } from "lit-html/directives/styleMap"; +import isValidEntityId from "../../../common/entity/valid_entity_id"; export class HuiButtonElement extends LitElement implements LovelaceElement { - private _hass?: HomeAssistant; + public hass?: HomeAssistant; private _config?: LovelaceElementConfig; static get properties() { @@ -27,50 +28,44 @@ export class HuiButtonElement extends LitElement implements LovelaceElement { throw Error("Invalid Configuration"); } + if (config.entity && !isValidEntityId(config.entity)) { + throw new Error("Invalid Entity"); + } + this._config = { theme: "default", ...config }; } protected render(): TemplateResult { - if (!this._hass || !this._config) { + if (!this.hass || !this._config) { return html``; } - const stateObj = this._hass.states[this._config.entity]; + const stateObj = this._config.entity + ? this.hass.states[this._config.entity] + : undefined; return html` ${this.renderStyle()} - ${ - !stateObj - ? html` -
- Entity not available: ${this._config.entity} -
- ` - : html` - -
- - - ${this._config.name || computeStateName(stateObj)} - -
- - ` - } + +
+ + ${this._config.name || computeStateName(stateObj)} +
+ `; } @@ -115,25 +110,24 @@ export class HuiButtonElement extends LitElement implements LovelaceElement { margin: auto; text-align: center; } - .not-found { - flex: 1; - background-color: yellow; - padding: 8px; - } `; } - private _computeBrightness(stateObj: HassEntity | LightEntity): string { - if (!stateObj.attributes.brightness) { + private _computeBrightness( + stateObj: HassEntity | LightEntity | undefined + ): string { + if (!stateObj || !stateObj.attributes.brightness) { return ""; } const brightness = stateObj.attributes.brightness; return `brightness(${(brightness + 245) / 5}%)`; } - private _computeColor(stateObj: HassEntity | LightEntity): string { - if (!stateObj.attributes.hs_color) { + private _computeColor( + stateObj: HassEntity | LightEntity | undefined + ): string { + if (!stateObj || !stateObj.attributes.hs_color) { return ""; } const { hue, sat } = stateObj.attributes.hs_color; diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts index ebc66605d9ee..891cfb808ef4 100644 --- a/src/panels/lovelace/elements/types.ts +++ b/src/panels/lovelace/elements/types.ts @@ -10,6 +10,9 @@ export interface LovelaceElementConfig { service_data?: object; tap_action?: ActionConfig; title?: string; + theme?: string; + icon?: string; + name?: string; } export interface LovelaceElement extends HTMLElement { From 1fd1d249f6dd60dda71b3adf835999b1fe08e162 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 6 Dec 2018 12:27:08 -0600 Subject: [PATCH 3/8] cleanup imports --- src/panels/lovelace/elements/hui-button-element.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/panels/lovelace/elements/hui-button-element.ts b/src/panels/lovelace/elements/hui-button-element.ts index c8f3cd4e614c..abf4861d8a52 100644 --- a/src/panels/lovelace/elements/hui-button-element.ts +++ b/src/panels/lovelace/elements/hui-button-element.ts @@ -1,8 +1,9 @@ import { html, LitElement, PropertyValues } from "@polymer/lit-element"; import { TemplateResult } from "lit-html"; import { styleMap } from "lit-html/directives/styleMap"; +import "@polymer/paper-button/paper-button"; -import "../../../components/buttons/ha-call-service-button"; +import "../../../components/ha-icon"; import { LovelaceElement, LovelaceElementConfig } from "./types"; import { HomeAssistant, LightEntity } from "../../../types"; From 501cb8cafd569241a515ae5ca0dc250312cb76c9 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 6 Dec 2018 12:31:59 -0600 Subject: [PATCH 4/8] cleanup types --- src/panels/lovelace/cards/hui-button-card.ts | 2 +- src/panels/lovelace/elements/hui-button-element.ts | 2 +- src/panels/lovelace/elements/types.ts | 3 --- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index b4403400ae5c..a60bc4644caf 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -12,7 +12,7 @@ import { LovelaceElement } from "../elements/types"; interface Config extends LovelaceCardConfig { entity: string; - name?: string; + title?: string; icon?: string; theme?: string; tap_action?: ActionConfig; diff --git a/src/panels/lovelace/elements/hui-button-element.ts b/src/panels/lovelace/elements/hui-button-element.ts index abf4861d8a52..48e7a96a8537 100644 --- a/src/panels/lovelace/elements/hui-button-element.ts +++ b/src/panels/lovelace/elements/hui-button-element.ts @@ -64,7 +64,7 @@ export class HuiButtonElement extends LitElement implements LovelaceElement { }) }" > - ${this._config.name || computeStateName(stateObj)} + ${this._config.title || computeStateName(stateObj)}
`; diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts index 891cfb808ef4..bfd3bb599b25 100644 --- a/src/panels/lovelace/elements/types.ts +++ b/src/panels/lovelace/elements/types.ts @@ -6,13 +6,10 @@ export interface LovelaceElementConfig { style: object; entity?: string; hold_action?: ActionConfig; - service?: string; - service_data?: object; tap_action?: ActionConfig; title?: string; theme?: string; icon?: string; - name?: string; } export interface LovelaceElement extends HTMLElement { From 6253974163f73656f8282b96a13b13d28f45c543 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 6 Dec 2018 20:30:50 -0600 Subject: [PATCH 5/8] Address review comments --- src/common/entity/compute_state_domain.ts | 5 +- src/common/entity/compute_state_name.ts | 5 +- src/common/entity/state_icon.ts | 2 +- .../lovelace/elements/hui-button-element.ts | 54 +++++++------------ 4 files changed, 22 insertions(+), 44 deletions(-) diff --git a/src/common/entity/compute_state_domain.ts b/src/common/entity/compute_state_domain.ts index b8d455ca0ab7..1ef02f4e8fca 100644 --- a/src/common/entity/compute_state_domain.ts +++ b/src/common/entity/compute_state_domain.ts @@ -1,9 +1,6 @@ import { HassEntity } from "home-assistant-js-websocket"; import computeDomain from "./compute_domain"; -export default function computeStateDomain(stateObj: HassEntity | undefined) { - if (!stateObj) { - return ""; - } +export default function computeStateDomain(stateObj: HassEntity) { return computeDomain(stateObj.entity_id); } diff --git a/src/common/entity/compute_state_name.ts b/src/common/entity/compute_state_name.ts index 4aa9ccd78086..c20bde78b7c3 100644 --- a/src/common/entity/compute_state_name.ts +++ b/src/common/entity/compute_state_name.ts @@ -5,10 +5,7 @@ type CachedDisplayEntity = HassEntity & { _entityDisplay?: string; }; -export default function computeStateName(stateObj: HassEntity | undefined) { - if (!stateObj) { - return ""; - } +export default function computeStateName(stateObj: HassEntity) { const state = stateObj as CachedDisplayEntity; if (state._entityDisplay === undefined) { diff --git a/src/common/entity/state_icon.ts b/src/common/entity/state_icon.ts index 68fa2656940b..351db86d12f9 100644 --- a/src/common/entity/state_icon.ts +++ b/src/common/entity/state_icon.ts @@ -17,7 +17,7 @@ const domainIcons = { input_datetime: inputDateTimeIcon, }; -export default function stateIcon(state: HassEntity | undefined) { +export default function stateIcon(state: HassEntity) { if (!state) { return DEFAULT_DOMAIN_ICON; } diff --git a/src/panels/lovelace/elements/hui-button-element.ts b/src/panels/lovelace/elements/hui-button-element.ts index 48e7a96a8537..c0f5195682d7 100644 --- a/src/panels/lovelace/elements/hui-button-element.ts +++ b/src/panels/lovelace/elements/hui-button-element.ts @@ -45,6 +45,8 @@ export class HuiButtonElement extends LitElement implements LovelaceElement { ? this.hass.states[this._config.entity] : undefined; + console.log(this._config.title); + return html` ${this.renderStyle()}
- - ${this._config.title || computeStateName(stateObj)} + ${ + stateObj + ? html` + + + ${this._config.title || computeStateName(stateObj!)} + + ` + : html` + + ${this._config.title} + ` + }
`; @@ -115,29 +122,6 @@ export class HuiButtonElement extends LitElement implements LovelaceElement { `; } - private _computeBrightness( - stateObj: HassEntity | LightEntity | undefined - ): string { - if (!stateObj || !stateObj.attributes.brightness) { - return ""; - } - const brightness = stateObj.attributes.brightness; - return `brightness(${(brightness + 245) / 5}%)`; - } - - private _computeColor( - stateObj: HassEntity | LightEntity | undefined - ): string { - if (!stateObj || !stateObj.attributes.hs_color) { - return ""; - } - const { hue, sat } = stateObj.attributes.hs_color; - if (sat <= 10) { - return ""; - } - return `hsl(${hue}, 100%, ${100 - sat / 2}%)`; - } - private _handleTap() { handleClick(this, this.hass!, this._config!, false); } From c1662e8786bf8d23916b03bda57422ffe37ef4c6 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 6 Dec 2018 20:32:38 -0600 Subject: [PATCH 6/8] cleanup --- src/panels/lovelace/elements/hui-button-element.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/panels/lovelace/elements/hui-button-element.ts b/src/panels/lovelace/elements/hui-button-element.ts index c0f5195682d7..3f68fc781d62 100644 --- a/src/panels/lovelace/elements/hui-button-element.ts +++ b/src/panels/lovelace/elements/hui-button-element.ts @@ -1,14 +1,12 @@ import { html, LitElement, PropertyValues } from "@polymer/lit-element"; import { TemplateResult } from "lit-html"; -import { styleMap } from "lit-html/directives/styleMap"; import "@polymer/paper-button/paper-button"; import "../../../components/ha-icon"; import { LovelaceElement, LovelaceElementConfig } from "./types"; -import { HomeAssistant, LightEntity } from "../../../types"; +import { HomeAssistant } from "../../../types"; import { handleClick } from "../common/handle-click"; -import { HassEntity } from "home-assistant-js-websocket"; import { longPress } from "../common/directives/long-press-directive"; import computeStateName from "../../../common/entity/compute_state_name"; import stateIcon from "../../../common/entity/state_icon"; @@ -45,8 +43,6 @@ export class HuiButtonElement extends LitElement implements LovelaceElement { ? this.hass.states[this._config.entity] : undefined; - console.log(this._config.title); - return html` ${this.renderStyle()} Date: Thu, 6 Dec 2018 20:40:46 -0600 Subject: [PATCH 7/8] typo --- src/panels/lovelace/elements/hui-button-element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/lovelace/elements/hui-button-element.ts b/src/panels/lovelace/elements/hui-button-element.ts index 3f68fc781d62..0b06c493e2a3 100644 --- a/src/panels/lovelace/elements/hui-button-element.ts +++ b/src/panels/lovelace/elements/hui-button-element.ts @@ -56,7 +56,7 @@ export class HuiButtonElement extends LitElement implements LovelaceElement { ? html` From bb4d849fec32e22cfd2a6e03f1fbb5c0da941e3c Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 6 Dec 2018 21:25:19 -0600 Subject: [PATCH 8/8] Update gallery and render error for invalid entity --- ...button-card.ts => demo-hui-button-card.ts} | 33 ++++++-------- .../demos/demo-hui-picture-elements-card.ts | 10 +++-- src/panels/lovelace/cards/hui-button-card.ts | 2 +- .../lovelace/elements/hui-button-element.ts | 45 +++++++++++++++++-- 4 files changed, 62 insertions(+), 28 deletions(-) rename gallery/src/demos/{demo-hui-entity-button-card.ts => demo-hui-button-card.ts} (75%) diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/demo-hui-button-card.ts similarity index 75% rename from gallery/src/demos/demo-hui-entity-button-card.ts rename to gallery/src/demos/demo-hui-button-card.ts index 1b201734a4f0..f2a9a4cad53f 100644 --- a/gallery/src/demos/demo-hui-entity-button-card.ts +++ b/gallery/src/demos/demo-hui-button-card.ts @@ -15,60 +15,55 @@ const CONFIGS = [ { heading: "Basic example", config: ` -- type: entity-button +- type: button entity: light.bed_light `, }, { heading: "With Name", config: ` -- type: entity-button - name: Bedroom +- type: button + title: Bedroom entity: light.bed_light `, }, { heading: "With Icon", config: ` -- type: entity-button +- type: button entity: light.bed_light icon: mdi:hotel `, }, - { - heading: "Without State", - config: ` -- type: entity-button - entity: light.bed_light - show_state: false - `, - }, { heading: "Custom Tap Action (toggle)", config: ` -- type: entity-button +- type: button entity: light.bed_light - tap_action: toggle + tap_action: + action: toggle `, }, { heading: "Running Service", config: ` -- type: entity-button +- type: button entity: light.bed_light - service: light.toggle + tap_action: + type: call-service + service: light.toggle `, }, { heading: "Invalid Entity", config: ` -- type: entity-button +- type: button entity: sensor.invalid_entity `, }, ]; -class DemoEntityButtonEntity extends PolymerElement { +class DemoButtonCard extends PolymerElement { static get template() { return html` + `; + } + return html` ${this.renderStyle()} ${this._config.title || computeStateName(stateObj!)} @@ -113,11 +130,31 @@ export class HuiButtonElement extends LitElement implements LovelaceElement { display: flex; margin: auto; text-align: center; + white-space: nowrap; + color: var(--primary-color); } `; } + private _computeBrightness(stateObj: HassEntity | LightEntity): string { + if (!stateObj.attributes.brightness) { + return ""; + } + const brightness = stateObj.attributes.brightness; + return `brightness(${(brightness + 245) / 5}%)`; + } + private _computeColor(stateObj: HassEntity | LightEntity): string { + if (!stateObj.attributes.hs_color) { + return ""; + } + const { hue, sat } = stateObj.attributes.hs_color; + if (sat <= 10) { + return ""; + } + return `hsl(${hue}, 100%, ${100 - sat / 2}%)`; + } + private _handleTap() { handleClick(this, this.hass!, this._config!, false); }