diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts index d2b208ae40..31c826c77c 100644 --- a/src/panels/lovelace/cards/hui-entity-button-card.ts +++ b/src/panels/lovelace/cards/hui-entity-button-card.ts @@ -17,12 +17,12 @@ 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 { LovelaceCard, LovelaceCardEditor } 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 { +export interface Config extends LovelaceCardConfig { entity: string; name?: string; icon?: string; @@ -33,6 +33,18 @@ interface Config extends LovelaceCardConfig { class HuiEntityButtonCard extends hassLocalizeLitMixin(LitElement) implements LovelaceCard { + public static async getConfigElement(): Promise { + await import(/* webpackChunkName: "hui-entity-button-card-editor" */ "../editor/config-elements/hui-entity-button-card-editor"); + return document.createElement("hui-entity-button-card-editor"); + } + + public static getStubConfig(): object { + return { + tap_action: { action: "more-info" }, + hold_action: { action: "none" }, + }; + } + public hass?: HomeAssistant; private _config?: Config; diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts new file mode 100644 index 0000000000..d5a7669008 --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts @@ -0,0 +1,165 @@ +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; +import { TemplateResult } from "lit-html"; +import "@polymer/paper-input/paper-input"; + +import { struct } from "../../common/structs/struct"; +import { + EntitiesEditorEvent, + EditorTarget, + actionConfigStruct, +} from "../types"; +import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin"; +import { HomeAssistant } from "../../../../types"; +import { LovelaceCardEditor } from "../../types"; +import { fireEvent } from "../../../../common/dom/fire_event"; +import { Config } from "../../cards/hui-entity-button-card"; +import { configElementStyle } from "./config-elements-style"; +import { ActionConfig } from "../../../../data/lovelace"; + +import "../../components/hui-action-editor"; +import "../../components/hui-theme-select-editor"; +import "../../components/hui-entity-editor"; + +const cardConfigStruct = struct({ + type: "string", + entity: "string?", + name: "string?", + icon: "string?", + tap_action: actionConfigStruct, + hold_action: actionConfigStruct, + theme: "string?", +}); + +export class HuiEntityButtonCardEditor extends hassLocalizeLitMixin(LitElement) + implements LovelaceCardEditor { + public hass?: HomeAssistant; + private _config?: Config; + + public setConfig(config: Config): void { + config = cardConfigStruct(config); + this._config = config; + } + + static get properties(): PropertyDeclarations { + return { hass: {}, _config: {} }; + } + + get _entity(): string { + return this._config!.entity || ""; + } + + get _name(): string { + return this._config!.name || ""; + } + + get _icon(): string { + return this._config!.icon || ""; + } + + get _tap_action(): ActionConfig { + return this._config!.tap_action || { action: "more-info" }; + } + + get _hold_action(): ActionConfig { + return this._config!.hold_action || { action: "none" }; + } + + get _theme(): string { + return this._config!.theme || "default"; + } + + protected render(): TemplateResult { + if (!this.hass) { + return html``; + } + + const actions = ["more-info", "toggle", "navigate", "call-service", "none"]; + + return html` + ${configElementStyle} +
+ +
+ + +
+ +
+ + +
+
+ `; + } + + private _valueChanged(ev: EntitiesEditorEvent): void { + if (!this._config || !this.hass) { + return; + } + const target = ev.target! as EditorTarget; + + if ( + this[`_${target.configValue}`] === target.value || + this[`_${target.configValue}`] === target.config + ) { + return; + } + if (target.configValue) { + if (target.value === "") { + delete this._config[target.configValue!]; + } else { + this._config = { + ...this._config, + [target.configValue!]: target.value ? target.value : target.config, + }; + } + } + fireEvent(this, "config-changed", { config: this._config }); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-entity-button-card-editor": HuiEntityButtonCardEditor; + } +} + +customElements.define( + "hui-entity-button-card-editor", + HuiEntityButtonCardEditor +);