From c25a38b82f936fd6193b3c2a1070aac94f574ae3 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Mon, 21 Oct 2019 14:03:01 -0500 Subject: [PATCH] add actions to state-badge element and state-label-badge (default Lovelace badge type) (#4028) * add actions to state-badge element * address comments state-label-badge no longer handles clicks added actions to hui-state-label-badge moved ha-badges-card to Lit --- src/cards/ha-badges-card.js | 31 ------------- src/cards/ha-badges-card.ts | 45 +++++++++++++++++++ src/components/entity/ha-state-label-badge.ts | 11 ----- .../lovelace/badges/hui-state-label-badge.ts | 21 +++++++++ src/panels/lovelace/badges/types.ts | 5 ++- .../elements/hui-state-badge-element.ts | 21 +++++++++ .../elements/hui-state-label-element.ts | 1 - src/panels/lovelace/elements/types.ts | 3 ++ 8 files changed, 94 insertions(+), 44 deletions(-) delete mode 100644 src/cards/ha-badges-card.js create mode 100644 src/cards/ha-badges-card.ts diff --git a/src/cards/ha-badges-card.js b/src/cards/ha-badges-card.js deleted file mode 100644 index 6b62930888..0000000000 --- a/src/cards/ha-badges-card.js +++ /dev/null @@ -1,31 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import "../components/entity/ha-state-label-badge"; - -class HaBadgesCard extends PolymerElement { - static get template() { - return html` - - - `; - } - - static get properties() { - return { - hass: Object, - states: Array, - }; - } -} -customElements.define("ha-badges-card", HaBadgesCard); diff --git a/src/cards/ha-badges-card.ts b/src/cards/ha-badges-card.ts new file mode 100644 index 0000000000..7e12681456 --- /dev/null +++ b/src/cards/ha-badges-card.ts @@ -0,0 +1,45 @@ +import { TemplateResult, html } from "lit-html"; +import { customElement, LitElement, property } from "lit-element"; +import { HassEntity } from "home-assistant-js-websocket"; + +import "../components/entity/ha-state-label-badge"; + +import { HomeAssistant } from "../types"; +import { fireEvent } from "../common/dom/fire_event"; + +@customElement("ha-badges-card") +class HaBadgesCard extends LitElement { + @property() public hass?: HomeAssistant; + @property() public states?: HassEntity[]; + + protected render(): TemplateResult | void { + if (!this.hass || !this.states) { + return html``; + } + + return html` + ${this.states.map( + (state) => html` + + ` + )} + `; + } + + private _handleClick(ev: Event) { + const entityId = ((ev.target as any).state as HassEntity).entity_id; + fireEvent(this, "hass-more-info", { + entityId, + }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-badges-card": HaBadgesCard; + } +} diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts index 2d82e82095..33f7e1e5c1 100644 --- a/src/components/entity/ha-state-label-badge.ts +++ b/src/components/entity/ha-state-label-badge.ts @@ -11,7 +11,6 @@ import { import { HassEntity } from "home-assistant-js-websocket"; import { classMap } from "lit-html/directives/class-map"; -import { fireEvent } from "../../common/dom/fire_event"; import { HomeAssistant } from "../../types"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; @@ -90,16 +89,6 @@ export class HaStateLabelBadge extends LitElement { `; } - protected firstUpdated(changedProperties: PropertyValues): void { - super.firstUpdated(changedProperties); - this.addEventListener("click", (ev) => { - ev.stopPropagation(); - if (this.state) { - fireEvent(this, "hass-more-info", { entityId: this.state.entity_id }); - } - }); - } - protected updated(changedProperties: PropertyValues): void { super.updated(changedProperties); diff --git a/src/panels/lovelace/badges/hui-state-label-badge.ts b/src/panels/lovelace/badges/hui-state-label-badge.ts index acef603a0a..d0523880a0 100644 --- a/src/panels/lovelace/badges/hui-state-label-badge.ts +++ b/src/panels/lovelace/badges/hui-state-label-badge.ts @@ -13,6 +13,9 @@ import { LovelaceBadge } from "../types"; import { HomeAssistant } from "../../../types"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { StateLabelBadgeConfig } from "./types"; +import { longPress } from "../common/directives/long-press-directive"; +import { hasDoubleClick } from "../common/has-double-click"; +import { handleClick } from "../common/handle-click"; @customElement("hui-state-label-badge") export class HuiStateLabelBadge extends LitElement implements LovelaceBadge { @@ -41,9 +44,27 @@ export class HuiStateLabelBadge extends LitElement implements LovelaceBadge { : ""} .icon=${this._config.icon} .image=${this._config.image} + @ha-click=${this._handleClick} + @ha-hold=${this._handleHold} + @ha-dblclick=${this._handleDblClick} + .longPress=${longPress({ + hasDoubleClick: hasDoubleClick(this._config!.double_tap_action), + })} > `; } + + private _handleClick() { + handleClick(this, this.hass!, this._config!, false, false); + } + + private _handleHold() { + handleClick(this, this.hass!, this._config!, true, false); + } + + private _handleDblClick() { + handleClick(this, this.hass!, this._config!, false, true); + } } declare global { diff --git a/src/panels/lovelace/badges/types.ts b/src/panels/lovelace/badges/types.ts index e462a0a4ee..7b28dae4fb 100644 --- a/src/panels/lovelace/badges/types.ts +++ b/src/panels/lovelace/badges/types.ts @@ -1,4 +1,4 @@ -import { LovelaceBadgeConfig } from "../../../data/lovelace"; +import { LovelaceBadgeConfig, ActionConfig } from "../../../data/lovelace"; import { EntityFilterEntityConfig } from "../entity-rows/types"; export interface EntityFilterBadgeConfig extends LovelaceBadgeConfig { @@ -16,4 +16,7 @@ export interface StateLabelBadgeConfig extends LovelaceBadgeConfig { name?: string; icon?: string; image?: string; + tap_action?: ActionConfig; + hold_action?: ActionConfig; + double_tap_action?: ActionConfig; } diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts index 5102112bdb..8fa9722318 100644 --- a/src/panels/lovelace/elements/hui-state-badge-element.ts +++ b/src/panels/lovelace/elements/hui-state-badge-element.ts @@ -14,6 +14,9 @@ import { computeStateName } from "../../../common/entity/compute_state_name"; import { LovelaceElement, StateBadgeElementConfig } from "./types"; import { HomeAssistant } from "../../../types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; +import { longPress } from "../common/directives/long-press-directive"; +import { hasDoubleClick } from "../common/has-double-click"; +import { handleClick } from "../common/handle-click"; @customElement("hui-state-badge-element") export class HuiStateBadgeElement extends LitElement @@ -61,9 +64,27 @@ export class HuiStateBadgeElement extends LitElement : this._config.title === null ? "" : this._config.title}" + @ha-click=${this._handleClick} + @ha-hold=${this._handleHold} + @ha-dblclick=${this._handleDblClick} + .longPress=${longPress({ + hasDoubleClick: hasDoubleClick(this._config!.double_tap_action), + })} > `; } + + private _handleClick() { + handleClick(this, this.hass!, this._config!, false, false); + } + + private _handleHold() { + handleClick(this, this.hass!, this._config!, true, false); + } + + private _handleDblClick() { + handleClick(this, this.hass!, this._config!, false, true); + } } declare global { diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts index 37c629b455..bef30f904b 100644 --- a/src/panels/lovelace/elements/hui-state-label-element.ts +++ b/src/panels/lovelace/elements/hui-state-label-element.ts @@ -9,7 +9,6 @@ import { PropertyValues, } from "lit-element"; -import "../../../components/entity/ha-state-label-badge"; import "../components/hui-warning-element"; import { computeStateDisplay } from "../../../common/entity/compute_state_display"; diff --git a/src/panels/lovelace/elements/types.ts b/src/panels/lovelace/elements/types.ts index 2aec666e38..7c848c64ea 100644 --- a/src/panels/lovelace/elements/types.ts +++ b/src/panels/lovelace/elements/types.ts @@ -48,6 +48,9 @@ export interface ServiceButtonElementConfig extends LovelaceElementConfig { export interface StateBadgeElementConfig extends LovelaceElementConfig { entity: string; title?: string; + tap_action?: ActionConfig; + hold_action?: ActionConfig; + double_tap_action?: ActionConfig; } export interface StateIconElementConfig extends LovelaceElementConfig {