From 6692fa439ab273aebf6e8da9421c430554cc2a93 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Tue, 31 Mar 2020 10:52:20 -0500 Subject: [PATCH] hold/double actions for light-card (#5361) * hold/double actions for light-card * lint --- src/panels/lovelace/cards/hui-light-card.ts | 21 +++-- src/panels/lovelace/cards/types.ts | 3 + .../config-elements/hui-light-card-editor.ts | 83 +++++++++++++++---- src/translations/en.json | 1 + 4 files changed, 88 insertions(+), 20 deletions(-) diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index 133bf7245f..51fcd575f8 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -25,12 +25,15 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { HomeAssistant, LightEntity } from "../../../types"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; -import { toggleEntity } from "../common/entity/toggle-entity"; import { LightCardConfig } from "./types"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { SUPPORT_BRIGHTNESS } from "../../../data/light"; import { findEntities } from "../common/find-entites"; import { UNAVAILABLE } from "../../../data/entity"; +import { actionHandler } from "../common/directives/action-handler-directive"; +import { hasAction } from "../common/has-action"; +import { ActionHandlerEvent } from "../../../data/lovelace"; +import { handleAction } from "../common/handle-action"; @customElement("hui-light-card") export class HuiLightCard extends LitElement implements LovelaceCard { @@ -74,7 +77,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard { throw new Error("Specify an entity from within the light domain."); } - this._config = { theme: "default", ...config }; + this._config = { + theme: "default", + ...config, + tap_action: { action: "toggle" }, + }; } protected render(): TemplateResult { @@ -143,7 +150,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard { filter: this._computeBrightness(stateObj), color: this._computeColor(stateObj), })} - @click=${this._handleClick} + @action=${this._handleAction} + .actionHandler=${actionHandler({ + hasHold: hasAction(this._config!.hold_action), + hasDoubleClick: hasAction(this._config!.double_tap_action), + })} tabindex="0" > @@ -240,8 +251,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard { return `hsl(${hue}, 100%, ${100 - sat / 2}%)`; } - private _handleClick() { - toggleEntity(this.hass!, this._config!.entity!); + private _handleAction(ev: ActionHandlerEvent) { + handleAction(this, this.hass!, this._config!, ev.detail.action!); } private _handleMoreInfo() { diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index 4460b8dc09..64b5f5e234 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -138,6 +138,9 @@ export interface LightCardConfig extends LovelaceCardConfig { name?: string; theme?: string; icon?: string; + tap_action?: ActionConfig; + hold_action?: ActionConfig; + double_tap_action?: ActionConfig; } export interface MapCardConfig extends LovelaceCardConfig { diff --git a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts index 88992579a6..161aba745d 100644 --- a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts @@ -8,18 +8,23 @@ import { import "@polymer/paper-input/paper-input"; import "../../components/hui-theme-select-editor"; - +import "../../components/hui-action-editor"; import "../../../../components/ha-icon-input"; import "../../components/hui-entity-editor"; import { struct } from "../../common/structs/struct"; -import { EntitiesEditorEvent, EditorTarget } from "../types"; +import { + EntitiesEditorEvent, + EditorTarget, + actionConfigStruct, +} from "../types"; import { HomeAssistant } from "../../../../types"; import { LovelaceCardEditor } from "../../types"; import { fireEvent } from "../../../../common/dom/fire_event"; import { configElementStyle } from "./config-elements-style"; import { LightCardConfig } from "../../cards/types"; import { stateIcon } from "../../../../common/entity/state_icon"; +import { ActionConfig } from "../../../../data/lovelace"; const cardConfigStruct = struct({ type: "string", @@ -27,6 +32,8 @@ const cardConfigStruct = struct({ entity: "string?", theme: "string?", icon: "string?", + hold_action: struct.optional(actionConfigStruct), + double_tap_action: struct.optional(actionConfigStruct), }); @customElement("hui-light-card-editor") @@ -56,11 +63,28 @@ export class HuiLightCardEditor extends LitElement return this._config!.icon || ""; } + get _hold_action(): ActionConfig { + return this._config!.hold_action || { action: "none" }; + } + + get _double_tap_action(): ActionConfig { + return this._config!.double_tap_action || { action: "none" }; + } + protected render(): TemplateResult { if (!this.hass) { return html``; } + const actions = [ + "more-info", + "toggle", + "navigate", + "url", + "call-service", + "none", + ]; + return html` ${configElementStyle}
@@ -71,10 +95,10 @@ export class HuiLightCardEditor extends LitElement "ui.panel.lovelace.editor.card.config.required" )})" .hass=${this.hass} - .value="${this._entity}" + .value=${this._entity} .configValue=${"entity"} include-domains='["light"]' - @change="${this._valueChanged}" + @change=${this._valueChanged} allow-custom-entity >
@@ -84,9 +108,9 @@ export class HuiLightCardEditor extends LitElement )} (${this.hass.localize( "ui.panel.lovelace.editor.card.config.optional" )})" - .value="${this._name}" - .configValue="${"name"}" - @value-changed="${this._valueChanged}" + .value=${this._name} + .configValue=${"name"} + @value-changed=${this._valueChanged} >
+ + + +
`; } @@ -118,7 +168,10 @@ export class HuiLightCardEditor extends LitElement } const target = ev.target! as EditorTarget; - if (this[`_${target.configValue}`] === target.value) { + if ( + this[`_${target.configValue}`] === target.value || + this[`_${target.configValue}`] === target.config + ) { return; } if (target.configValue) { @@ -127,7 +180,7 @@ export class HuiLightCardEditor extends LitElement } else { this._config = { ...this._config, - [target.configValue!]: target.value, + [target.configValue!]: target.value ? target.value : target.config, }; } } diff --git a/src/translations/en.json b/src/translations/en.json index bf785cde5b..156583d97e 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2068,6 +2068,7 @@ "attribute": "Attribute", "camera_image": "Camera Entity", "camera_view": "Camera View", + "double_tap_action": "Double Tap Action", "entities": "Entities", "entity": "Entity", "hold_action": "Hold Action",