Glance fix (#2040)

src/panels/lovelace/cards/hui-glance-card.ts

@@ -24,10 +24,10 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon";
 
 export interface EntityConfig {
-  name: string;
+  name?: string;
-  icon: string;
+  icon?: string;
   entity: string;
-  tap_action: "toggle" | "call-service" | "more-info";
+  tap_action?: "toggle" | "call-service" | "more-info";
   hold_action?: "toggle" | "call-service" | "more-info";
   service?: string;
   service_data?: object;

src/panels/lovelace/components/hui-entity-editor.ts

@@ -0,0 +1,94 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import "@polymer/paper-button/paper-button";
+import { TemplateResult } from "lit-html";
+
+import { HomeAssistant } from "../../../types";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { EntityConfig } from "../entity-rows/types";
+
+import "../../../components/entity/ha-entity-picker";
+import { EditorTarget } from "../editor/types";
+
+export class HuiEntityEditor extends LitElement {
+  protected hass?: HomeAssistant;
+  protected entities?: EntityConfig[];
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      entities: {},
+    };
+  }
+
+  protected render(): TemplateResult {
+    if (!this.entities) {
+      return html``;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <h3>Entities</h3>
+      <div class="entities">
+        ${
+          this.entities.map((entityConf, index) => {
+            return html`
+              <ha-entity-picker
+                .hass="${this.hass}"
+                .value="${entityConf.entity}"
+                .index="${index}"
+                @change="${this._valueChanged}"
+                allow-custom-entity
+              ></ha-entity-picker>
+            `;
+          })
+        }
+      </div>
+      <paper-button noink raised @click="${this._addEntity}"
+        >Add Entity</paper-button
+      >
+    `;
+  }
+
+  private _addEntity() {
+    const newConfigEntities = this.entities!.concat({ entity: "" });
+
+    fireEvent(this, "change", { entities: newConfigEntities });
+  }
+
+  private _valueChanged(ev: Event): void {
+    const target = ev.target! as EditorTarget;
+    const newConfigEntities = this.entities!.concat();
+
+    if (target.value === "") {
+      newConfigEntities.splice(target.index!, 1);
+    } else {
+      newConfigEntities[target.index!] = {
+        ...newConfigEntities[target.index!],
+        entity: target.value!,
+      };
+    }
+
+    fireEvent(this, "change", { entities: newConfigEntities });
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        .entities {
+          padding-left: 20px;
+        }
+        paper-button {
+          margin: 8px 0;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-entity-editor": HuiEntityEditor;
+  }
+}
+
+customElements.define("hui-entity-editor", HuiEntityEditor);

src/panels/lovelace/components/hui-theme-select-editor.ts

@@ -0,0 +1,71 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import "@polymer/paper-button/paper-button";
+import { TemplateResult } from "lit-html";
+
+import { HomeAssistant } from "../../../types";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+
+export class HuiThemeSelectionEditor extends hassLocalizeLitMixin(LitElement) {
+  public value?: string;
+  protected hass?: HomeAssistant;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      value: {},
+    };
+  }
+
+  protected render(): TemplateResult {
+    const themes = ["Backend-selected", "default"].concat(
+      Object.keys(this.hass!.themes.themes).sort()
+    );
+
+    return html`
+      ${this.renderStyle()}
+      <paper-dropdown-menu
+        label="Theme"
+        dynamic-align
+        @value-changed="${this._changed}"
+      >
+        <paper-listbox
+          slot="dropdown-content"
+          .selected="${this.value || "Backend-selected"}"
+          attr-for-selected="theme"
+        >
+          ${
+            themes.map((theme) => {
+              return html`
+                <paper-item theme="${theme}">${theme}</paper-item>
+              `;
+            })
+          }
+        </paper-listbox>
+      </paper-dropdown-menu>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        paper-dropdown-menu {
+          width: 100%;
+        }
+      </style>
+    `;
+  }
+
+  private _changed(ev): void {
+    this.value = ev.target.value;
+    fireEvent(this, "change");
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-theme-select-editor": HuiThemeSelectionEditor;
+  }
+}
+
+customElements.define("hui-theme-select-editor", HuiThemeSelectionEditor);

src/panels/lovelace/editor/hui-dialog-edit-card.ts

@@ -108,15 +108,13 @@ export class HuiDialogEditCard extends LitElement {
           ></hui-yaml-card-preview>
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <paper-button
+          <paper-button @click="${this._toggleEditor}"
-            @click="${this._toggleEditor}"
+            >Toggle Editor</paper-button
-          >Toggle Editor</paper-button>
+          >
-          <paper-button
+          <paper-button @click="${this._closeDialog}">Cancel</paper-button>
-            @click="${this._closeDialog}"
+          <paper-button @click="${this._updateConfigInBackend}"
-          >Cancel</paper-button>
+            >Save</paper-button
-          <paper-button
+          >
-            @click="${this._updateConfigInBackend}"'
-          >Save</paper-button>
         </div>
       </paper-dialog>
     `;
@@ -167,6 +165,9 @@ export class HuiDialogEditCard extends LitElement {
       value: cardConfig,
     };
     this._originalConfigYaml = cardConfig;
+
+    // This will center the dialog with the updated config Element
+    fireEvent(this._dialog, "iron-resize");
   }
 
   private async _loadConfigElement(): Promise<void> {

src/panels/lovelace/editor/hui-glance-card-editor.ts

@@ -1,15 +1,21 @@
 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 } from "../cards/hui-glance-card";
+import { Config, EntityConfig } from "../cards/hui-glance-card";
 
 import "../../../components/entity/state-badge";
-import "../../../components/entity/ha-entity-picker";
+import "../components/hui-theme-select-editor";
+import "../components/hui-entity-editor";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
 
@@ -17,16 +23,19 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCardEditor {
   public hass?: HomeAssistant;
   private _config?: Config;
+  private _configEntities?: EntityConfig[];
 
   static get properties(): PropertyDeclarations {
     return {
       hass: {},
       _config: {},
+      _configEntities: {},
     };
   }
 
   public setConfig(config: Config): void {
     this._config = { type: "glance", ...config };
+    this._configEntities = processEditorEntities(config.entities);
   }
 
   protected render(): TemplateResult {
@@ -35,42 +44,78 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
     }
 
     return html`
+      ${this.renderStyle()}
       <paper-input
         label="Title"
         value="${this._config!.title}"
         .configValue="${"title"}"
         @value-changed="${this._valueChanged}"
-      ></paper-input
+      ></paper-input>
-      ><br />
+      <hui-theme-select-editor
+        .hass="${this.hass}"
+        .value="${this._config!.theme}"
+        .configValue="${"theme"}"
+        @change="${this._valueChanged}"
+      ></hui-theme-select-editor>
+      <paper-input
+        label="Columns"
+        value="${this._config!.columns || ""}"
+        .configValue="${"columns"}"
+        @value-changed="${this._valueChanged}"
+      ></paper-input>
+      <hui-entity-editor
+        .hass="${this.hass}"
+        .entities="${this._configEntities}"
+        @change="${this._valueChanged}"
+      ></hui-entity-editor>
       <paper-checkbox
         ?checked="${this._config!.show_name !== false}"
         .configValue="${"show_name"}"
         @change="${this._valueChanged}"
         >Show Entity's Name?</paper-checkbox
-      ><br /><br />
+      >
       <paper-checkbox
         ?checked="${this._config!.show_state !== false}"
         .configValue="${"show_state"}"
         @change="${this._valueChanged}"
         >Show Entity's State Text?</paper-checkbox
-      ><br />
+      >
     `;
   }
 
-  private _valueChanged(ev: MouseEvent): void {
+  private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;
     }
 
-    const target = ev.target! as any;
+    const target = ev.target! as EditorTarget;
+    let newConfig = this._config;
 
-    const newValue =
+    if (ev.detail && ev.detail.entities) {
-      target.checked !== undefined ? target.checked : target.value;
+      newConfig.entities = ev.detail.entities;
+    } else {
+      newConfig = {
+        ...this._config,
+        [target.configValue!]:
+          target.checked !== undefined ? target.checked : target.value,
+      };
+    }
 
     fireEvent(this, "config-changed", {
-      config: { ...this._config, [target.configValue]: newValue },
+      config: newConfig,
     });
   }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        paper-checkbox {
+          display: block;
+          padding-top: 16px;
+        }
+      </style>
+    `;
+  }
 }
 
 declare global {

src/panels/lovelace/editor/process-editor-entities.ts

@@ -0,0 +1,10 @@
+import { EntityConfig } from "../entity-rows/types";
+
+export function processEditorEntities(entities): EntityConfig[] {
+  return entities.map((entityConf) => {
+    if (typeof entityConf === "string") {
+      return { entity: entityConf };
+    }
+    return entityConf;
+  });
+}

src/panels/lovelace/editor/types.ts

@@ -1,4 +1,5 @@
 import { LovelaceConfig } from "../types";
+import { EntityConfig } from "../entity-rows/types";
 
 export interface YamlChangedEvent extends Event {
   detail: {
@@ -10,3 +11,17 @@ export interface ConfigValue {
   format: "js" | "yaml";
   value: string | LovelaceConfig;
 }
+
+export interface EntitiesEditorEvent {
+  detail?: {
+    entities?: EntityConfig[];
+  };
+  target?: EventTarget;
+}
+
+export interface EditorTarget extends EventTarget {
+  value?: string;
+  index?: number;
+  checked?: boolean;
+  configValue?: string;
+}

src/panels/lovelace/entity-rows/types.ts

@@ -2,8 +2,9 @@ import { HomeAssistant } from "../../../types";
 
 export interface EntityConfig {
   entity: string;
-  name: string;
+  type?: string;
-  icon: string;
+  name?: string;
+  icon?: string;
 }
 export interface DividerConfig {
   style: string;