diff --git a/src/panels/lovelace/cards/hui-entity-button-card.js b/src/panels/lovelace/cards/hui-entity-button-card.js deleted file mode 100644 index b59d437cf3..0000000000 --- a/src/panels/lovelace/cards/hui-entity-button-card.js +++ /dev/null @@ -1,161 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag.js"; -import { PolymerElement } from "@polymer/polymer/polymer-element.js"; -import { fireEvent } from "../../../common/dom/fire_event.js"; - -import "../../../components/ha-card.js"; - -import toggleEntity from "../common/entity/toggle-entity.js"; -import stateIcon from "../../../common/entity/state_icon.js"; -import computeStateDomain from "../../../common/entity/compute_state_domain.js"; -import computeStateName from "../../../common/entity/compute_state_name.js"; -import EventsMixin from "../../../mixins/events-mixin.js"; -import LocalizeMixin from "../../../mixins/localize-mixin.js"; - -/* - * @appliesMixin EventsMixin - */ -class HuiEntityButtonCard extends LocalizeMixin(EventsMixin(PolymerElement)) { - static get template() { - return html` - - - -
- - [[_computeName(_stateObj)]] -
- - - `; - } - - static get properties() { - return { - hass: { - type: Object, - }, - _config: Object, - _stateObj: { - type: Object, - computed: "_computeStateObj(hass.states, _config.entity)", - observer: "stateObjChanged", - }, - }; - } - - getCardSize() { - return 2; - } - - setConfig(config) { - if (!config || !config.entity) { - throw new Error("Invalid card configuration"); - } - this._config = { show_state: true, ...config }; - } - - _computeStateObj(states, entityId) { - return states && entityId in states ? states[entityId] : null; - } - - stateObjChanged() { - const stateObj = this._stateObj; - if (!stateObj) return; - - const iconStyle = { - color: "", - filter: "", - }; - if (stateObj.attributes.hs_color) { - const hue = stateObj.attributes.hs_color[0]; - const sat = stateObj.attributes.hs_color[1]; - if (sat > 10) iconStyle.color = `hsl(${hue}, 100%, ${100 - sat / 2}%)`; - } - if (stateObj.attributes.brightness) { - const brightness = stateObj.attributes.brightness; - iconStyle.filter = `brightness(${(brightness + 245) / 5}%)`; - } - Object.assign(this.$.ButtonIcon.style, iconStyle); - } - - _computeDomain(stateObj) { - if (!stateObj) return ""; - return computeStateDomain(stateObj); - } - - _computeName(stateObj) { - const config = this._config; - if (!stateObj) return "Entity not available: " + this._config.entity; - return config.name ? config.name : computeStateName(stateObj); - } - - _computeIcon(stateObj) { - const config = this._config; - if (!stateObj) return ""; - return config.icon ? config.icon : stateIcon(stateObj); - } - - _computeClassName(stateObj) { - if (!stateObj) return "not-found"; - return ""; - } - - _handleClick() { - if (!this._stateObj) return; - const config = this._config; - const stateObj = this._stateObj; - var entityId = stateObj.entity_id; - switch (config.tap_action) { - case "toggle": - toggleEntity(this.hass, entityId); - break; - case "call-service": { - const [domain, service] = config.service.split(".", 2); - const serviceData = { entity_id: entityId, ...config.service_data }; - this.hass.callService(domain, service, serviceData); - break; - } - default: - fireEvent(this, "hass-more-info", { entityId }); - } - } -} - -customElements.define("hui-entity-button-card", HuiEntityButtonCard); diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts new file mode 100644 index 0000000000..b1905d9a76 --- /dev/null +++ b/src/panels/lovelace/cards/hui-entity-button-card.ts @@ -0,0 +1,182 @@ +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; +import { fireEvent } from "../../../common/dom/fire_event.js"; + +import "../../../components/ha-card.js"; + +import toggleEntity from "../common/entity/toggle-entity.js"; +import isValidEntityId from "../../../common/entity/valid_entity_id.js"; +import stateIcon from "../../../common/entity/state_icon.js"; +import computeStateDomain from "../../../common/entity/compute_state_domain.js"; +import computeStateName from "../../../common/entity/compute_state_name.js"; +import { styleMap } from "lit-html/directives/styleMap.js"; +import { HomeAssistant } from "../../../types.js"; +import { HassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; +import { LovelaceCard, LovelaceConfig } from "../types.js"; + +interface Config extends LovelaceConfig { + entity: string; + name?: string; + icon?: string; + tap_action?: "toggle" | "call-service" | "more-info"; + service?: string; + service_data?: object; +} + +class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement) +implements LovelaceCard { + static get properties(): PropertyDeclarations { + return { + hass: {} + }; + } + + protected hass?: HomeAssistant; + protected config?: Config; + + public getCardSize() { + return 2; + } + + public setConfig(config: Config) { + if(!isValidEntityId(config.entity)) { + throw new Error("Invalid Entity"); + } + + this.config = config; + + if(this.hass) { + this.requestUpdate(); + } + } + + protected render() { + if (!this.config) { + return html``; + } + const stateObj = this.hass!.states[this.config.entity]; + + return html` + ${this.renderStyle()} + + ${ + !stateObj + ? html`
Entity not available: ${this.config.entity}
` + : html` + +
+ + + ${this.config.name + ? this.config.name + : computeStateName(stateObj) + } + +
+ + ` + } + + `; + } + + private renderStyle() { + return html` + + `; + } + + private _computeBrightness(stateObj) { + if (!stateObj.attributes.brightness) { + return ""; + } + const brightness = stateObj.attributes.brightness; + return `brightness(${(brightness + 245) / 5}%)`; + } + + private _computeColor(stateObj) { + if (!stateObj.attributes.hs_color) { + return ''; + } + const hue = stateObj.attributes.hs_color[0]; + const sat = stateObj.attributes.hs_color[1]; + if (sat <= 10) { + return ''; + } + return `hsl(${hue}, 100%, ${100 - sat / 2}%)`; + } + + private handleClick() { + const config = this.config; + if (!config) { + return; + } + const stateObj = this.hass!.states[config.entity]; + if(!stateObj) { + return; + } + const entityId = stateObj.entity_id; + switch (config.tap_action) { + case "toggle": + toggleEntity(this.hass, entityId); + break; + case "call-service": { + if(!config.service){ + return; + } + const [domain, service] = config.service.split(".", 2); + const serviceData = { entity_id: entityId, ...config.service_data }; + this.hass!.callService(domain, service, serviceData); + break; + } + default: + fireEvent(this, "hass-more-info", { entityId }); + } + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-entity-button-card": HuiEntityButtonCard; + } +} + +customElements.define("hui-entity-button-card", HuiEntityButtonCard); diff --git a/src/panels/lovelace/common/create-card-element.js b/src/panels/lovelace/common/create-card-element.js index 354decfc9d..c474e36d04 100644 --- a/src/panels/lovelace/common/create-card-element.js +++ b/src/panels/lovelace/common/create-card-element.js @@ -3,7 +3,7 @@ import { fireEvent } from "../../../common/dom/fire_event.js"; import "../cards/hui-alarm-panel-card.js"; import "../cards/hui-conditional-card.js"; import "../cards/hui-entities-card.js"; -import "../cards/hui-entity-button-card.js"; +import "../cards/hui-entity-button-card.ts"; import "../cards/hui-entity-filter-card.js"; import "../cards/hui-error-card.js"; import "../cards/hui-glance-card.ts";