Entities Card UI Editor (#2072)

* Entity Card ui + extras

* Travis Fix

* Bram already has this in  another PR

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<LovelaceCardEditor> {
+    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[];

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<LovelaceCardEditor> {
-    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) {

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()}
+      <paper-input
+        label="Title"
+        value="${this._config!.title || ""}"
+        .configValue="${"title"}"
+        @value-changed="${this._valueChanged}"
+      ></paper-input>
+      <hui-theme-select-editor
+        .hass="${this.hass}"
+        .value="${this._config!.theme}"
+        .configValue="${"theme"}"
+        @change="${this._valueChanged}"
+      ></hui-theme-select-editor>
+      <hui-entity-editor
+        .hass="${this.hass}"
+        .entities="${this._configEntities}"
+        @change="${this._valueChanged}"
+      ></hui-entity-editor>
+      <paper-checkbox
+        ?checked="${this._config!.show_header_toggle !== false}"
+        .configValue="${"show_header_toggle"}"
+        @change="${this._valueChanged}"
+        >Show Header Toggle?</paper-checkbox
+      >
+    `;
+  }
+
+  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`
+      <style>
+        paper-checkbox {
+          display: block;
+          padding-top: 16px;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-entities-card-editor": HuiEntitiesCardEditor;
+  }
+}
+
+customElements.define("hui-entities-card-editor", HuiEntitiesCardEditor);

src/panels/lovelace/editor/hui-glance-card-editor.ts → 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 {