From 0a3fa3e218ab7213bde003c28399eb81c070491f Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 13 Oct 2022 14:43:24 +0200 Subject: [PATCH] Ha selector UI action (#14082) Co-authored-by: Bram Kragten --- .../ha-selector/ha-selector-ui-action.ts | 43 ++++++ src/components/ha-selector/ha-selector.ts | 1 + src/data/selector.ts | 10 +- .../lovelace/components/hui-action-editor.ts | 27 +++- .../config-elements/hui-button-card-editor.ts | 133 +++++------------ .../config-elements/hui-light-card-editor.ts | 135 ++++-------------- .../hui-picture-entity-card-editor.ts | 74 ++-------- .../hui-picture-glance-card-editor.ts | 53 ++----- 8 files changed, 166 insertions(+), 310 deletions(-) create mode 100644 src/components/ha-selector/ha-selector-ui-action.ts diff --git a/src/components/ha-selector/ha-selector-ui-action.ts b/src/components/ha-selector/ha-selector-ui-action.ts new file mode 100644 index 0000000000..b9b983c9c5 --- /dev/null +++ b/src/components/ha-selector/ha-selector-ui-action.ts @@ -0,0 +1,43 @@ +import { html, LitElement } from "lit"; +import { customElement, property } from "lit/decorators"; +import { fireEvent } from "../../common/dom/fire_event"; +import { UiActionSelector } from "../../data/selector"; +import { HomeAssistant } from "../../types"; +import "../../panels/lovelace/components/hui-action-editor"; +import { ActionConfig } from "../../data/lovelace"; + +@customElement("ha-selector-ui-action") +export class HaSelectorUiAction extends LitElement { + @property() public hass!: HomeAssistant; + + @property() public selector!: UiActionSelector; + + @property() public value?: ActionConfig; + + @property() public label?: string; + + @property() public helper?: string; + + protected render() { + return html` + + `; + } + + private _valueChanged(ev: CustomEvent) { + fireEvent(this, "value-changed", { value: ev.detail.value }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-selector-ui-action": HaSelectorUiAction; + } +} diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts index d4074c49c4..e77a3e7847 100644 --- a/src/components/ha-selector/ha-selector.ts +++ b/src/components/ha-selector/ha-selector.ts @@ -32,6 +32,7 @@ const LOAD_ELEMENTS = { theme: () => import("./ha-selector-theme"), location: () => import("./ha-selector-location"), "color-temp": () => import("./ha-selector-color-temp"), + "ui-action": () => import("./ha-selector-ui-action"), }; @customElement("ha-selector") diff --git a/src/data/selector.ts b/src/data/selector.ts index d687fad157..393ec28399 100644 --- a/src/data/selector.ts +++ b/src/data/selector.ts @@ -1,5 +1,6 @@ import type { HassEntity } from "home-assistant-js-websocket"; import { computeStateDomain } from "../common/entity/compute_state_domain"; +import { UiAction } from "../panels/lovelace/components/hui-action-editor"; import type { DeviceRegistryEntry } from "./device_registry"; import type { EntitySources } from "./entity_sources"; @@ -30,7 +31,8 @@ export type Selector = | TargetSelector | TemplateSelector | ThemeSelector - | TimeSelector; + | TimeSelector + | UiActionSelector; export interface ActionSelector { // eslint-disable-next-line @typescript-eslint/ban-types @@ -257,6 +259,12 @@ export interface TimeSelector { time: {}; } +export interface UiActionSelector { + "ui-action": { + actions?: UiAction[]; + }; +} + export const filterSelectorDevices = ( filterDevice: SelectorDevice, device: DeviceRegistryEntry, diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts index 86d98726e4..1d3d558c28 100644 --- a/src/panels/lovelace/components/hui-action-editor.ts +++ b/src/panels/lovelace/components/hui-action-editor.ts @@ -16,13 +16,24 @@ import { HomeAssistant } from "../../../types"; import { EditorTarget } from "../editor/types"; import "../../../components/ha-navigation-picker"; +export type UiAction = Exclude; + +const DEFAULT_ACTIONS: UiAction[] = [ + "more-info", + "toggle", + "navigate", + "url", + "call-service", + "none", +]; + @customElement("hui-action-editor") export class HuiActionEditor extends LitElement { @property() public config?: ActionConfig; @property() public label?: string; - @property() public actions?: string[]; + @property() public actions?: UiAction[]; @property() public tooltipText?: string; @@ -52,10 +63,12 @@ export class HuiActionEditor extends LitElement { ); protected render(): TemplateResult { - if (!this.hass || !this.actions) { + if (!this.hass) { return html``; } + const actions = this.actions ?? DEFAULT_ACTIONS; + return html`