From 49542c49facff88afcb9a707667da1cc3b4f9c67 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Wed, 21 Nov 2018 03:29:06 -0500 Subject: [PATCH] Entities Card UI Editor (#2072) * Entity Card ui + extras * Travis Fix * Bram already has this in another PR --- .../lovelace/cards/hui-entities-card.ts | 12 +- src/panels/lovelace/cards/hui-glance-card.ts | 14 +-- .../hui-entities-card-editor.ts | 115 ++++++++++++++++++ .../hui-glance-card-editor.ts | 26 ++-- 4 files changed, 142 insertions(+), 25 deletions(-) create mode 100644 src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts rename src/panels/lovelace/editor/{ => config-elements}/hui-glance-card-editor.ts (80%) diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 21ac58a323..2689fa4ad9 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -14,22 +14,22 @@ import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const"; import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; import { HomeAssistant } from "../../../types"; import { EntityConfig, EntityRow } from "../entity-rows/types"; -import { LovelaceCard, LovelaceConfig } from "../types"; +import { LovelaceCard, LovelaceConfig, LovelaceCardEditor } from "../types"; import processConfigEntities from "../common/process-config-entities"; import createRowElement from "../common/create-row-element"; import computeDomain from "../../../common/entity/compute_domain"; import applyThemesOnElement from "../../../common/dom/apply_themes_on_element"; -interface ConfigEntity extends EntityConfig { +export interface ConfigEntity extends EntityConfig { type?: string; - secondary_info: "entity-id" | "last-changed"; + secondary_info?: "entity-id" | "last-changed"; action_name?: string; service?: string; service_data?: object; url?: string; } -interface Config extends LovelaceConfig { +export interface Config extends LovelaceConfig { show_header_toggle?: boolean; title?: string; entities: ConfigEntity[]; @@ -38,6 +38,10 @@ interface Config extends LovelaceConfig { class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement) implements LovelaceCard { + public static async getConfigElement(): Promise { + await import("../editor/config-elements/hui-entities-card-editor"); + return document.createElement("hui-entities-card-editor"); + } protected _hass?: HomeAssistant; protected _config?: Config; protected _configEntities?: ConfigEntity[]; diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index fc5365b91b..3a09b856ed 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -12,6 +12,7 @@ import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; import { HomeAssistant } from "../../../types"; import { LovelaceCard, LovelaceConfig, LovelaceCardEditor } from "../types"; import { longPress } from "../common/directives/long-press-directive"; +import { EntityConfig } from "../entity-rows/types"; import computeStateDisplay from "../../../common/entity/compute_state_display"; import computeStateName from "../../../common/entity/compute_state_name"; @@ -23,10 +24,7 @@ import "../../../components/entity/state-badge"; import "../../../components/ha-card"; import "../../../components/ha-icon"; -export interface EntityConfig { - name?: string; - icon?: string; - entity: string; +export interface ConfigEntity extends EntityConfig { tap_action?: "toggle" | "call-service" | "more-info"; hold_action?: "toggle" | "call-service" | "more-info"; service?: string; @@ -38,20 +36,20 @@ export interface Config extends LovelaceConfig { show_state?: boolean; title?: string; theme?: string; - entities: EntityConfig[]; + entities: ConfigEntity[]; columns?: number; } export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement) implements LovelaceCard { public static async getConfigElement(): Promise { - await import("../editor/hui-glance-card-editor"); + await import("../editor/config-elements/hui-glance-card-editor"); return document.createElement("hui-glance-card-editor"); } public hass?: HomeAssistant; private _config?: Config; - private _configEntities?: EntityConfig[]; + private _configEntities?: ConfigEntity[]; static get properties(): PropertyDeclarations { return { @@ -242,7 +240,7 @@ export class HuiGlanceCard extends hassLocalizeLitMixin(LitElement) } private handleClick(ev: MouseEvent, hold: boolean): void { - const config = (ev.currentTarget as any).entityConf as EntityConfig; + const config = (ev.currentTarget as any).entityConf as ConfigEntity; const entityId = config.entity; const action = hold ? config.hold_action : config.tap_action || "more-info"; switch (action) { diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts new file mode 100644 index 0000000000..f4d761ddda --- /dev/null +++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts @@ -0,0 +1,115 @@ +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; +import { TemplateResult } from "lit-html"; +import "@polymer/paper-checkbox/paper-checkbox"; +import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; +import "@polymer/paper-item/paper-item"; +import "@polymer/paper-listbox/paper-listbox"; + +import { processEditorEntities } from "../process-editor-entities"; +import { EntitiesEditorEvent, EditorTarget } 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, ConfigEntity } from "../../cards/hui-entities-card"; + +import "../../../../components/entity/state-badge"; +import "../../components/hui-theme-select-editor"; +import "../../components/hui-entity-editor"; +import "../../../../components/ha-card"; +import "../../../../components/ha-icon"; + +export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement) + implements LovelaceCardEditor { + public hass?: HomeAssistant; + private _config?: Config; + private _configEntities?: ConfigEntity[]; + + static get properties(): PropertyDeclarations { + return { + hass: {}, + _config: {}, + _configEntities: {}, + }; + } + + public setConfig(config: Config): void { + this._config = { type: "entities", ...config }; + this._configEntities = processEditorEntities(config.entities); + } + + protected render(): TemplateResult { + if (!this.hass) { + return html``; + } + + return html` + ${this.renderStyle()} + + + + Show Header Toggle? + `; + } + + private _valueChanged(ev: EntitiesEditorEvent): void { + if (!this._config || !this.hass) { + return; + } + + const target = ev.target! as EditorTarget; + let newConfig = this._config; + + if (ev.detail && ev.detail.entities) { + newConfig.entities = ev.detail.entities; + } else { + newConfig = { + ...this._config, + [target.configValue!]: + target.checked !== undefined ? target.checked : target.value, + }; + } + + fireEvent(this, "config-changed", { + config: newConfig, + }); + } + + private renderStyle(): TemplateResult { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-entities-card-editor": HuiEntitiesCardEditor; + } +} + +customElements.define("hui-entities-card-editor", HuiEntitiesCardEditor); diff --git a/src/panels/lovelace/editor/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts similarity index 80% rename from src/panels/lovelace/editor/hui-glance-card-editor.ts rename to src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts index 0993a3a528..5b52e8f89b 100644 --- a/src/panels/lovelace/editor/hui-glance-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts @@ -5,25 +5,25 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; -import { processEditorEntities } from "./process-editor-entities"; -import { EntitiesEditorEvent, EditorTarget } 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, EntityConfig } from "../cards/hui-glance-card"; +import { processEditorEntities } from "../process-editor-entities"; +import { EntitiesEditorEvent, EditorTarget } 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, ConfigEntity } from "../../cards/hui-glance-card"; -import "../../../components/entity/state-badge"; -import "../components/hui-theme-select-editor"; -import "../components/hui-entity-editor"; -import "../../../components/ha-card"; -import "../../../components/ha-icon"; +import "../../../../components/entity/state-badge"; +import "../../components/hui-theme-select-editor"; +import "../../components/hui-entity-editor"; +import "../../../../components/ha-card"; +import "../../../../components/ha-icon"; export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement) implements LovelaceCardEditor { public hass?: HomeAssistant; private _config?: Config; - private _configEntities?: EntityConfig[]; + private _configEntities?: ConfigEntity[]; static get properties(): PropertyDeclarations { return {