diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index dc86845be5..fc5365b91b 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/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;
- icon: string;
+ name?: 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;
diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts
new file mode 100644
index 0000000000..886dc206a8
--- /dev/null
+++ b/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()}
+
Entities
+
+ ${
+ this.entities.map((entityConf, index) => {
+ return html`
+
+ `;
+ })
+ }
+
+ Add Entity
+ `;
+ }
+
+ 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`
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-entity-editor": HuiEntityEditor;
+ }
+}
+
+customElements.define("hui-entity-editor", HuiEntityEditor);
diff --git a/src/panels/lovelace/components/hui-theme-select-editor.ts b/src/panels/lovelace/components/hui-theme-select-editor.ts
new file mode 100644
index 0000000000..8c8a4b4de1
--- /dev/null
+++ b/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()}
+
+
+ ${
+ themes.map((theme) => {
+ return html`
+ ${theme}
+ `;
+ })
+ }
+
+
+ `;
+ }
+
+ private renderStyle(): TemplateResult {
+ return html`
+
+ `;
+ }
+
+ 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);
diff --git a/src/panels/lovelace/editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/hui-dialog-edit-card.ts
index 7256a8d17e..b982e09487 100644
--- a/src/panels/lovelace/editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/hui-dialog-edit-card.ts
@@ -108,15 +108,13 @@ export class HuiDialogEditCard extends LitElement {
>
`;
@@ -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 {
diff --git a/src/panels/lovelace/editor/hui-glance-card-editor.ts b/src/panels/lovelace/editor/hui-glance-card-editor.ts
index 2efabbf4bd..0993a3a528 100644
--- a/src/panels/lovelace/editor/hui-glance-card-editor.ts
+++ b/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()}
+ >
+
+
+
Show Entity's Name?
+ >
Show Entity's State Text?
+ >
`;
}
- 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 =
- target.checked !== undefined ? target.checked : target.value;
+ 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: { ...this._config, [target.configValue]: newValue },
+ config: newConfig,
});
}
+
+ private renderStyle(): TemplateResult {
+ return html`
+
+ `;
+ }
}
declare global {
diff --git a/src/panels/lovelace/editor/process-editor-entities.ts b/src/panels/lovelace/editor/process-editor-entities.ts
new file mode 100644
index 0000000000..53c1451fb5
--- /dev/null
+++ b/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;
+ });
+}
diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index c585cad86f..534583bac8 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/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;
+}
diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts
index b2c7d272cf..88e983bc69 100644
--- a/src/panels/lovelace/entity-rows/types.ts
+++ b/src/panels/lovelace/entity-rows/types.ts
@@ -2,8 +2,9 @@ import { HomeAssistant } from "../../../types";
export interface EntityConfig {
entity: string;
- name: string;
- icon: string;
+ type?: string;
+ name?: string;
+ icon?: string;
}
export interface DividerConfig {
style: string;