@@ -117,11 +115,15 @@ export class HuiEntitiesCardEditor extends hassLocalizeLitMixin(LitElement)
this._config.entities = ev.detail.entities;
this._configEntities = processEditorEntities(this._config.entities);
} else if (target.configValue) {
- this._config = {
- ...this._config,
- [target.configValue]:
- target.checked !== undefined ? target.checked : target.value,
- };
+ if (target.value === "") {
+ delete this._config[target.configValue!];
+ } else {
+ this._config = {
+ ...this._config,
+ [target.configValue]:
+ target.checked !== undefined ? target.checked : target.value,
+ };
+ }
}
fireEvent(this, "config-changed", { config: this._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
+);
diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
new file mode 100644
index 0000000000..1b7d734940
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
@@ -0,0 +1,244 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+
+import { struct } from "../../common/structs/struct";
+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, SeverityConfig } from "../../cards/hui-gauge-card";
+import { configElementStyle } from "./config-elements-style";
+
+import "../../components/hui-theme-select-editor";
+import "../../components/hui-entity-editor";
+
+const cardConfigStruct = struct({
+ type: "string",
+ name: "string?",
+ entity: "string?",
+ unit: "string?",
+ min: "number?",
+ max: "number?",
+ severity: "object?",
+ theme: "string?",
+});
+
+export class HuiGaugeCardEditor extends hassLocalizeLitMixin(LitElement)
+ implements LovelaceCardEditor {
+ public hass?: HomeAssistant;
+ private _config?: Config;
+ private _useSeverity?: boolean;
+
+ public setConfig(config: Config): void {
+ config = cardConfigStruct(config);
+ this._useSeverity = config.severity ? true : false;
+ this._config = config;
+ }
+
+ static get properties(): PropertyDeclarations {
+ return { hass: {}, _config: {} };
+ }
+
+ get _name(): string {
+ return this._config!.name || "";
+ }
+
+ get _entity(): string {
+ return this._config!.entity || "";
+ }
+
+ get _unit(): string {
+ return this._config!.unit || "";
+ }
+
+ get _theme(): string {
+ return this._config!.theme || "default";
+ }
+
+ get _min(): number {
+ return this._config!.number || 0;
+ }
+
+ get _max(): number {
+ return this._config!.max || 100;
+ }
+
+ get _severity(): SeverityConfig | undefined {
+ return this._config!.severity || undefined;
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ return html`
+ ${configElementStyle} ${this.renderStyle()}
+
+ `;
+ }
+
+ private renderStyle(): TemplateResult {
+ return html`
+
+ `;
+ }
+
+ private _toggleSeverity(ev: EntitiesEditorEvent): void {
+ if (!this._config || !this.hass) {
+ return;
+ }
+ const target = ev.target! as EditorTarget;
+
+ this._config.severity = target.checked
+ ? {
+ green: 0,
+ yellow: 0,
+ red: 0,
+ }
+ : undefined;
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+
+ private _severityChanged(ev: EntitiesEditorEvent): void {
+ if (!this._config || !this.hass) {
+ return;
+ }
+ const target = ev.target! as EditorTarget;
+ const severity = {
+ ...this._config.severity,
+ [target.configValue!]: Number(target.value),
+ };
+ this._config = {
+ ...this._config,
+ severity,
+ };
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+
+ private _valueChanged(ev: EntitiesEditorEvent): void {
+ if (!this._config || !this.hass) {
+ return;
+ }
+ const target = ev.target! as EditorTarget;
+
+ if (target.configValue) {
+ if (
+ target.value === "" ||
+ (target.type === "number" && isNaN(Number(target.value)))
+ ) {
+ delete this._config[target.configValue!];
+ } else {
+ let value: any = target.value;
+ if (target.type === "number") {
+ value = Number(value);
+ }
+ this._config = { ...this._config, [target.configValue!]: value };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-gauge-card-editor": HuiGaugeCardEditor;
+ }
+}
+
+customElements.define("hui-gauge-card-editor", HuiGaugeCardEditor);
diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
index dadb82f702..da8b1ff2cd 100644
--- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
@@ -1,11 +1,11 @@
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
import { TemplateResult } from "lit-html";
-import { struct } from "../../common/structs/struct";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-toggle-button/paper-toggle-button";
+import { struct } from "../../common/structs/struct";
import { processEditorEntities } from "../process-editor-entities";
import { EntitiesEditorEvent, EditorTarget } from "../types";
import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
@@ -48,8 +48,7 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
public setConfig(config: Config): void {
config = cardConfigStruct(config);
-
- this._config = { type: "glance", ...config };
+ this._config = config;
this._configEntities = processEditorEntities(config.entities);
}
@@ -65,8 +64,8 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
return this._config!.theme || "Backend-selected";
}
- get _columns(): string {
- return this._config!.columns ? String(this._config!.columns) : "";
+ get _columns(): number {
+ return this._config!.columns || NaN;
}
protected render(): TemplateResult {
@@ -79,7 +78,7 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
@@ -93,7 +92,7 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
@@ -127,22 +126,29 @@ export class HuiGlanceCardEditor extends hassLocalizeLitMixin(LitElement)
}
const target = ev.target! as EditorTarget;
- if (this[`_${target.configValue}`] === target.value) {
+ if (target.configValue && this[`_${target.configValue}`] === target.value) {
return;
}
if (ev.detail && ev.detail.entities) {
this._config.entities = ev.detail.entities;
this._configEntities = processEditorEntities(this._config.entities);
} else if (target.configValue) {
- let value: any = target.value;
- if (target.type === "number") {
- value = Number(value);
+ if (
+ target.value === "" ||
+ (target.type === "number" && isNaN(Number(target.value)))
+ ) {
+ delete this._config[target.configValue!];
+ } else {
+ let value: any = target.value;
+ if (target.type === "number") {
+ value = Number(value);
+ }
+ this._config = {
+ ...this._config,
+ [target.configValue!]:
+ target.checked !== undefined ? target.checked : value,
+ };
}
- this._config = {
- ...this._config,
- [target.configValue!]:
- target.checked !== undefined ? target.checked : value,
- };
}
fireEvent(this, "config-changed", { config: this._config });
}
diff --git a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
new file mode 100644
index 0000000000..673156032d
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
@@ -0,0 +1,111 @@
+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 } 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-iframe-card";
+import { configElementStyle } from "./config-elements-style";
+
+const cardConfigStruct = struct({
+ type: "string",
+ title: "string?",
+ url: "string?",
+ aspect_ratio: "string?",
+});
+
+export class HuiIframeCardEditor 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 _title(): string {
+ return this._config!.title || "";
+ }
+
+ get _url(): string {
+ return this._config!.url || "";
+ }
+
+ get _aspect_ratio(): string {
+ return this._config!.aspect_ratio || "";
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ return html`
+ ${configElementStyle}
+
+ `;
+ }
+
+ private _valueChanged(ev: EntitiesEditorEvent): void {
+ if (!this._config || !this.hass) {
+ return;
+ }
+ const target = ev.target! as EditorTarget;
+ let value = target.value;
+
+ if (target.configValue! === "aspect_ratio" && target.value) {
+ value += "%";
+ }
+
+ if (this[`_${target.configValue}`] === value) {
+ return;
+ }
+ if (target.configValue) {
+ if (target.value === "") {
+ delete this._config[target.configValue!];
+ } else {
+ this._config = { ...this._config, [target.configValue!]: value };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-iframe-card-editor": HuiIframeCardEditor;
+ }
+}
+
+customElements.define("hui-iframe-card-editor", HuiIframeCardEditor);
diff --git a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
new file mode 100644
index 0000000000..ba65142b1b
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
@@ -0,0 +1,113 @@
+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 } 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-light-card";
+import { configElementStyle } from "./config-elements-style";
+
+import "../../components/hui-theme-select-editor";
+import "../../components/hui-entity-editor";
+
+const cardConfigStruct = struct({
+ type: "string",
+ name: "string?",
+ entity: "string?",
+ theme: "string?",
+});
+
+export class HuiLightCardEditor 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: {}, _configEntities: {} };
+ }
+
+ get _name(): string {
+ return this._config!.name || "";
+ }
+
+ get _theme(): string {
+ return this._config!.theme || "default";
+ }
+
+ get _entity(): string {
+ return this._config!.entity || "";
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ 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) {
+ return;
+ }
+ if (target.configValue) {
+ if (target.value === "") {
+ delete this._config[target.configValue!];
+ } else {
+ this._config = {
+ ...this._config,
+ [target.configValue!]: target.value,
+ };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-light-card-editor": HuiLightCardEditor;
+ }
+}
+
+customElements.define("hui-light-card-editor", HuiLightCardEditor);
diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
new file mode 100644
index 0000000000..ed6531a0e0
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
@@ -0,0 +1,143 @@
+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 } 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-alarm-panel-card";
+import { configElementStyle } from "./config-elements-style";
+import { processEditorEntities } from "../process-editor-entities";
+import { EntityConfig } from "../../entity-rows/types";
+
+import "../../components/hui-entity-editor";
+
+const entitiesConfigStruct = struct.union([
+ {
+ entity: "entity-id",
+ name: "string?",
+ icon: "icon?",
+ },
+ "entity-id",
+]);
+
+const cardConfigStruct = struct({
+ type: "string",
+ title: "string?",
+ aspect_ratio: "string?",
+ default_zoom: "number?",
+ entities: [entitiesConfigStruct],
+});
+
+export class HuiMapCardEditor extends hassLocalizeLitMixin(LitElement)
+ implements LovelaceCardEditor {
+ public hass?: HomeAssistant;
+ private _config?: Config;
+ private _configEntities?: EntityConfig[];
+
+ public setConfig(config: Config): void {
+ config = cardConfigStruct(config);
+ this._config = config;
+ this._configEntities = processEditorEntities(config.entities);
+ }
+
+ static get properties(): PropertyDeclarations {
+ return { hass: {}, _config: {}, _configEntities: {} };
+ }
+
+ get _title(): string {
+ return this._config!.title || "";
+ }
+
+ get _aspect_ratio(): string {
+ return this._config!.aspect_ratio || "";
+ }
+
+ get _default_zoom(): number {
+ return this._config!.default_zoom || NaN;
+ }
+
+ get _entities(): string[] {
+ return this._config!.entities || [];
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ return html`
+ ${configElementStyle}
+
+ `;
+ }
+
+ private _valueChanged(ev: EntitiesEditorEvent): void {
+ if (!this._config || !this.hass) {
+ return;
+ }
+ const target = ev.target! as EditorTarget;
+ if (target.configValue && this[`_${target.configValue}`] === target.value) {
+ return;
+ }
+ if (ev.detail && ev.detail.entities) {
+ this._config.entities = ev.detail.entities;
+ this._configEntities = processEditorEntities(this._config.entities);
+ } else if (target.configValue) {
+ if (
+ target.value === "" ||
+ (target.type === "number" && isNaN(Number(target.value)))
+ ) {
+ delete this._config[target.configValue!];
+ } else {
+ let value: any = target.value;
+ if (target.type === "number") {
+ value = Number(value);
+ }
+ this._config = {
+ ...this._config,
+ [target.configValue!]: value,
+ };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-map-card-editor": HuiMapCardEditor;
+ }
+}
+
+customElements.define("hui-map-card-editor", HuiMapCardEditor);
diff --git a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
new file mode 100644
index 0000000000..c4b002eff1
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
@@ -0,0 +1,99 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-input/paper-textarea";
+
+import { struct } from "../../common/structs/struct";
+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 { configElementStyle } from "./config-elements-style";
+
+const cardConfigStruct = struct({
+ type: "string",
+ title: "string?",
+ content: "string",
+});
+
+export class HuiMarkdownCardEditor 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 _title(): string {
+ return this._config!.title || "";
+ }
+
+ get _content(): string {
+ return this._config!.content || "";
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ 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) {
+ return;
+ }
+ if (target.configValue) {
+ if (target.value === "") {
+ delete this._config[target.configValue!];
+ } else {
+ this._config = {
+ ...this._config,
+ [target.configValue!]: target.value,
+ };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-markdown-card-editor": HuiMarkdownCardEditor;
+ }
+}
+
+customElements.define("hui-markdown-card-editor", HuiMarkdownCardEditor);
diff --git a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
new file mode 100644
index 0000000000..b6ac24fe3f
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
@@ -0,0 +1,87 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import { struct } from "../../common/structs/struct";
+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-media-control-card";
+
+import "../../../../components/entity/ha-entity-picker";
+
+const cardConfigStruct = struct({
+ type: "string",
+ entity: "string?",
+});
+
+export class HuiMediaControlCardEditor 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 || "";
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ return html`
+
+
+
+ `;
+ }
+
+ private _valueChanged(ev: EntitiesEditorEvent): void {
+ if (!this._config || !this.hass) {
+ return;
+ }
+ const target = ev.target! as EditorTarget;
+ if (this[`_${target.configValue}`] === target.value) {
+ return;
+ }
+ if (target.configValue) {
+ if (target.value === "") {
+ delete this._config[target.configValue!];
+ } else {
+ this._config = {
+ ...this._config,
+ [target.configValue!]: target.value,
+ };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-media-control-card-editor": HuiMediaControlCardEditor;
+ }
+}
+
+customElements.define(
+ "hui-media-control-card-editor",
+ HuiMediaControlCardEditor
+);
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
new file mode 100644
index 0000000000..52bba01b3c
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
@@ -0,0 +1,124 @@
+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-picture-card";
+import { configElementStyle } from "./config-elements-style";
+import { ActionConfig } from "../../../../data/lovelace";
+
+import "../../components/hui-action-editor";
+
+const cardConfigStruct = struct({
+ type: "string",
+ image: "string?",
+ tap_action: actionConfigStruct,
+ hold_action: actionConfigStruct,
+});
+
+export class HuiPictureCardEditor 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 _image(): string {
+ return this._config!.image || "";
+ }
+
+ get _tap_action(): ActionConfig {
+ return this._config!.tap_action || { action: "none" };
+ }
+
+ get _hold_action(): ActionConfig {
+ return this._config!.hold_action || { action: "none" };
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ const actions = ["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-picture-card-editor": HuiPictureCardEditor;
+ }
+}
+
+customElements.define("hui-picture-card-editor", HuiPictureCardEditor);
diff --git a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
new file mode 100644
index 0000000000..d321f52b76
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
@@ -0,0 +1,101 @@
+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 } 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-alarm-panel-card";
+import { configElementStyle } from "./config-elements-style";
+
+import "../../../../components/entity/ha-entity-picker";
+import "../../../../components/ha-icon";
+
+const cardConfigStruct = struct({
+ type: "string",
+ entity: "string",
+ name: "string?",
+});
+
+export class HuiPlantStatusCardEditor 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 || "";
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ 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) {
+ return;
+ }
+ if (target.configValue) {
+ if (target.value === "") {
+ delete this._config[target.configValue!];
+ } else {
+ this._config = {
+ ...this._config,
+ [target.configValue!]: target.value,
+ };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-plant-status-card-editor": HuiPlantStatusCardEditor;
+ }
+}
+
+customElements.define("hui-plant-status-card-editor", HuiPlantStatusCardEditor);
diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
new file mode 100644
index 0000000000..dcf108c3ed
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
@@ -0,0 +1,197 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+
+import { struct } from "../../common/structs/struct";
+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-sensor-card";
+import { configElementStyle } from "./config-elements-style";
+
+import "../../components/hui-theme-select-editor";
+import "../../../../components/entity/ha-entity-picker";
+
+const cardConfigStruct = struct({
+ type: "string",
+ entity: "string?",
+ name: "string?",
+ icon: "string?",
+ graph: "string?",
+ unit: "string?",
+ detail: "number?",
+ theme: "string?",
+ hours_to_show: "number?",
+});
+
+export class HuiSensorCardEditor 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 _graph(): string {
+ return this._config!.graph || "none";
+ }
+
+ get _unit(): string {
+ return this._config!.unit || "";
+ }
+
+ get _detail(): number | string {
+ return this._config!.number || "1";
+ }
+
+ get _theme(): string {
+ return this._config!.theme || "default";
+ }
+
+ get _hours_to_show(): number | string {
+ return this._config!.hours_to_show || "24";
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ const graphs = ["line", "none"];
+
+ return html`
+ ${configElementStyle}
+
+
+
+
+
+
+ ${
+ graphs.map((graph) => {
+ return html`
+ ${graph}
+ `;
+ })
+ }
+
+
+
+
+
+
+ `;
+ }
+
+ private _valueChanged(ev: EntitiesEditorEvent): void {
+ if (!this._config || !this.hass) {
+ return;
+ }
+ const target = ev.target! as EditorTarget;
+
+ if (this[`_${target.configValue}`] === target.value) {
+ return;
+ }
+ if (target.configValue) {
+ if (
+ target.value === "" ||
+ (target.type === "number" && isNaN(Number(target.value)))
+ ) {
+ delete this._config[target.configValue!];
+ } else {
+ let value: any = target.value;
+ if (target.type === "number") {
+ value = Number(value);
+ }
+ this._config = { ...this._config, [target.configValue!]: value };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-sensor-card-editor": HuiSensorCardEditor;
+ }
+}
+
+customElements.define("hui-sensor-card-editor", HuiSensorCardEditor);
diff --git a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
new file mode 100644
index 0000000000..6bd987db6a
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
@@ -0,0 +1,82 @@
+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 } 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-shopping-list-card";
+
+const cardConfigStruct = struct({
+ type: "string",
+ title: "string?",
+});
+
+export class HuiShoppingListEditor 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 _title(): string {
+ return this._config!.title || "";
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ return html`
+
+ `;
+ }
+
+ private _valueChanged(ev: EntitiesEditorEvent): void {
+ if (!this._config || !this.hass) {
+ return;
+ }
+ const target = ev.target! as EditorTarget;
+
+ if (this[`_${target.configValue}`] === target.value) {
+ return;
+ }
+ if (target.configValue) {
+ if (target.value === "") {
+ delete this._config[target.configValue!];
+ } else {
+ this._config = {
+ ...this._config,
+ [target.configValue!]: target.value,
+ };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-shopping-list-card-editor": HuiShoppingListEditor;
+ }
+}
+
+customElements.define("hui-shopping-list-card-editor", HuiShoppingListEditor);
diff --git a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
new file mode 100644
index 0000000000..e1db48583e
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
@@ -0,0 +1,110 @@
+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 } 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-thermostat-card";
+import { configElementStyle } from "./config-elements-style";
+
+import "../../components/hui-theme-select-editor";
+import "../../../../components/entity/ha-entity-picker";
+
+const cardConfigStruct = struct({
+ type: "string",
+ entity: "string",
+ name: "string?",
+ theme: "string?",
+});
+
+export class HuiThermostatCardEditor 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 _theme(): string {
+ return this._config!.theme || "default";
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ 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) {
+ return;
+ }
+ if (target.configValue) {
+ if (target.value === "") {
+ delete this._config[target.configValue!];
+ } else {
+ this._config = { ...this._config, [target.configValue!]: target.value };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-thermostat-card-editor": HuiThermostatCardEditor;
+ }
+}
+
+customElements.define("hui-thermostat-card-editor", HuiThermostatCardEditor);
diff --git a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
new file mode 100644
index 0000000000..8854c411a8
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
@@ -0,0 +1,103 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import { struct } from "../../common/structs/struct";
+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-weather-forecast-card";
+import { configElementStyle } from "./config-elements-style";
+
+import "../../../../components/entity/ha-entity-picker";
+
+const cardConfigStruct = struct({
+ type: "string",
+ entity: "string?",
+ name: "string?",
+});
+
+export class HuiWeatherForecastCardEditor
+ 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 || "";
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+
+ 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) {
+ return;
+ }
+ if (target.configValue) {
+ if (target.value === "") {
+ delete this._config[target.configValue!];
+ } else {
+ this._config = {
+ ...this._config,
+ [target.configValue!]: target.value,
+ };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-weather-forecast-card-editor": HuiWeatherForecastCardEditor;
+ }
+}
+
+customElements.define(
+ "hui-weather-forecast-card-editor",
+ HuiWeatherForecastCardEditor
+);
diff --git a/src/panels/lovelace/editor/config-util.ts b/src/panels/lovelace/editor/config-util.ts
index 2c87b57737..d1f834a2c8 100644
--- a/src/panels/lovelace/editor/config-util.ts
+++ b/src/panels/lovelace/editor/config-util.ts
@@ -121,6 +121,44 @@ export const swapCard = (
};
};
+export const moveCard = (
+ config: LovelaceConfig,
+ fromPath: [number, number],
+ toPath: [number]
+): LovelaceConfig => {
+ if (fromPath[0] === toPath[0]) {
+ throw new Error("You can not move a card to the view it is in.");
+ }
+ const fromView = config.views[fromPath[0]];
+ const card = fromView.cards![fromPath[1]];
+
+ const newView1 = {
+ ...fromView,
+ cards: (fromView.cards || []).filter(
+ (_origConf, ind) => ind !== fromPath[1]
+ ),
+ };
+
+ const toView = config.views[toPath[0]];
+ const cards = toView.cards ? [...toView.cards, card] : [card];
+
+ const newView2 = {
+ ...toView,
+ cards,
+ };
+
+ return {
+ ...config,
+ views: config.views.map((origView, index) =>
+ index === toPath[0]
+ ? newView2
+ : index === fromPath[0]
+ ? newView1
+ : origView
+ ),
+ };
+};
+
export const addView = (
config: LovelaceConfig,
viewConfig: LovelaceViewConfig
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index 7e00454cfa..295d9ae87c 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -14,7 +14,7 @@ import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
import { SaveDialogParams } from "./show-save-config-dialog";
export class HuiSaveConfig extends hassLocalizeLitMixin(LitElement) {
- protected hass?: HomeAssistant;
+ public hass?: HomeAssistant;
private _params?: SaveDialogParams;
private _saving: boolean;
diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
new file mode 100644
index 0000000000..2cb86b013b
--- /dev/null
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
@@ -0,0 +1,152 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-spinner/paper-spinner";
+import "@polymer/paper-dialog/paper-dialog";
+// This is not a duplicate import, one is for types, one is for element.
+// tslint:disable-next-line
+import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import "./hui-lovelace-editor";
+import { HomeAssistant } from "../../../../types";
+import { LovelaceConfig } from "../../../../data/lovelace";
+import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
+import { Lovelace } from "../../types";
+
+export class HuiDialogEditLovelace extends hassLocalizeLitMixin(LitElement) {
+ public hass?: HomeAssistant;
+ private _lovelace?: Lovelace;
+ private _config?: LovelaceConfig;
+ private _saving: boolean;
+
+ static get properties(): PropertyDeclarations {
+ return {
+ hass: {},
+ _lovelace: {},
+ };
+ }
+
+ protected constructor() {
+ super();
+ this._saving = false;
+ }
+
+ public async showDialog(lovelace: Lovelace): Promise
{
+ this._lovelace = lovelace;
+ if (this._dialog == null) {
+ await this.updateComplete;
+ }
+
+ const { views, ...lovelaceConfig } = this._lovelace!.config;
+ this._config = lovelaceConfig as LovelaceConfig;
+
+ this._dialog.open();
+ }
+
+ private get _dialog(): PaperDialogElement {
+ return this.shadowRoot!.querySelector("paper-dialog")!;
+ }
+
+ protected render(): TemplateResult {
+ return html`
+ ${this.renderStyle()}
+
+ Edit Lovelace
+
+
+
+
+ `;
+ }
+
+ private _closeDialog(): void {
+ this._config = undefined;
+ this._dialog.close();
+ }
+
+ private async _save(): Promise {
+ if (!this._config) {
+ return;
+ }
+ if (!this._isConfigChanged()) {
+ this._closeDialog();
+ return;
+ }
+
+ this._saving = true;
+ const lovelace = this._lovelace!;
+
+ const config: LovelaceConfig = {
+ ...lovelace.config,
+ ...this._config,
+ };
+
+ try {
+ await lovelace.saveConfig(config);
+ this._closeDialog();
+ } catch (err) {
+ alert(`Saving failed: ${err.message}`);
+ } finally {
+ this._saving = false;
+ }
+ }
+
+ private _ConfigChanged(ev: CustomEvent): void {
+ if (ev.detail && ev.detail.config) {
+ this._config = ev.detail.config;
+ }
+ }
+
+ private _isConfigChanged(): boolean {
+ const { views, ...lovelaceConfig } = this._lovelace!.config;
+ return JSON.stringify(this._config) !== JSON.stringify(lovelaceConfig);
+ }
+
+ private renderStyle(): TemplateResult {
+ return html`
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-dialog-edit-lovelace": HuiDialogEditLovelace;
+ }
+}
+
+customElements.define("hui-dialog-edit-lovelace", HuiDialogEditLovelace);
diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts b/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts
new file mode 100644
index 0000000000..68761be409
--- /dev/null
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts
@@ -0,0 +1,80 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-input/paper-input";
+
+import { EditorTarget } from "../types";
+import { hassLocalizeLitMixin } from "../../../../mixins/lit-localize-mixin";
+import { HomeAssistant } from "../../../../types";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { configElementStyle } from "../config-elements/config-elements-style";
+
+import { LovelaceConfig } from "../../../../data/lovelace";
+
+declare global {
+ interface HASSDomEvents {
+ "lovelace-config-changed": {
+ config: LovelaceConfig;
+ };
+ }
+}
+
+export class HuiLovelaceEditor extends hassLocalizeLitMixin(LitElement) {
+ static get properties(): PropertyDeclarations {
+ return { hass: {}, config: {} };
+ }
+
+ public hass?: HomeAssistant;
+ public config?: LovelaceConfig;
+
+ get _title(): string {
+ if (!this.config) {
+ return "";
+ }
+ return this.config.title || "";
+ }
+
+ protected render(): TemplateResult {
+ return html`
+ ${configElementStyle}
+
+ `;
+ }
+
+ private _valueChanged(ev: Event): void {
+ if (!this.config) {
+ return;
+ }
+
+ const target = ev.currentTarget! as EditorTarget;
+
+ if (this[`_${target.configValue}`] === target.value) {
+ return;
+ }
+
+ let newConfig;
+
+ if (target.configValue) {
+ newConfig = {
+ ...this.config,
+ [target.configValue]: target.value,
+ };
+ }
+
+ fireEvent(this, "lovelace-config-changed", { config: newConfig });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-lovelace-editor": HuiLovelaceEditor;
+ }
+}
+
+customElements.define("hui-lovelace-editor", HuiLovelaceEditor);
diff --git a/src/panels/lovelace/editor/lovelace-editor/show-edit-lovelace-dialog.ts b/src/panels/lovelace/editor/lovelace-editor/show-edit-lovelace-dialog.ts
new file mode 100644
index 0000000000..bc042dfa15
--- /dev/null
+++ b/src/panels/lovelace/editor/lovelace-editor/show-edit-lovelace-dialog.ts
@@ -0,0 +1,32 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { Lovelace } from "../../types";
+
+declare global {
+ // for fire event
+ interface HASSDomEvents {
+ "show-edit-lovelace": Lovelace;
+ }
+}
+
+let registeredDialog = false;
+const dialogShowEvent = "show-edit-lovelace";
+const dialogTag = "hui-dialog-edit-lovelace";
+
+const registerEditLovelaceDialog = (element: HTMLElement) =>
+ fireEvent(element, "register-dialog", {
+ dialogShowEvent,
+ dialogTag,
+ dialogImport: () =>
+ import(/* webpackChunkName: "hui-dialog-edit-lovelace" */ "./hui-dialog-edit-lovelace"),
+ });
+
+export const showEditLovelaceDialog = (
+ element: HTMLElement,
+ lovelace: Lovelace
+) => {
+ if (!registeredDialog) {
+ registeredDialog = true;
+ registerEditLovelaceDialog(element);
+ }
+ fireEvent(element, dialogShowEvent, lovelace);
+};
diff --git a/src/panels/lovelace/editor/show-save-config-dialog.ts b/src/panels/lovelace/editor/show-save-config-dialog.ts
index f5207c8241..8025d5a7b7 100644
--- a/src/panels/lovelace/editor/show-save-config-dialog.ts
+++ b/src/panels/lovelace/editor/show-save-config-dialog.ts
@@ -26,7 +26,8 @@ export const showSaveDialog = (
fireEvent(element, "register-dialog", {
dialogShowEvent,
dialogTag,
- dialogImport: () => import("./hui-dialog-save-config"),
+ dialogImport: () =>
+ import(/* webpackChunkName: "hui-dialog-save-config" */ "./hui-dialog-save-config"),
});
}
fireEvent(element, dialogShowEvent, saveDialogParams);
diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts
index b91e381632..aea4a4e65c 100644
--- a/src/panels/lovelace/editor/types.ts
+++ b/src/panels/lovelace/editor/types.ts
@@ -1,6 +1,11 @@
-import { LovelaceCardConfig, LovelaceViewConfig } from "../../../data/lovelace";
+import {
+ LovelaceCardConfig,
+ LovelaceViewConfig,
+ ActionConfig,
+} from "../../../data/lovelace";
import { EntityConfig } from "../entity-rows/types";
import { InputType } from "zlib";
+import { struct } from "../common/structs/struct";
export interface YamlChangedEvent extends Event {
detail: {
@@ -37,8 +42,16 @@ export interface EditorTarget extends EventTarget {
checked?: boolean;
configValue?: string;
type?: InputType;
+ config: ActionConfig;
}
export interface CardPickTarget extends EventTarget {
type: string;
}
+
+export const actionConfigStruct = struct({
+ action: "string",
+ navigation_path: "string?",
+ service: "string?",
+ service_data: "object?",
+});
diff --git a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
index 733ec46a39..8b27068812 100644
--- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
@@ -30,7 +30,7 @@ import { deleteView, addView, replaceView } from "../config-util";
export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
public lovelace?: Lovelace;
public viewIndex?: number;
- protected hass?: HomeAssistant;
+ public hass?: HomeAssistant;
private _config?: LovelaceViewConfig;
private _badges?: EntityConfig[];
private _cards?: LovelaceCardConfig[];
diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
index f9f95d7ad2..e85cbff0d1 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@@ -69,19 +69,19 @@ export class HuiViewEditor extends hassLocalizeLitMixin(LitElement) {
diff --git a/src/panels/lovelace/editor/view-editor/show-edit-view-dialog.ts b/src/panels/lovelace/editor/view-editor/show-edit-view-dialog.ts
index a912d89662..a3f7748de7 100644
--- a/src/panels/lovelace/editor/view-editor/show-edit-view-dialog.ts
+++ b/src/panels/lovelace/editor/view-editor/show-edit-view-dialog.ts
@@ -26,7 +26,8 @@ const registerEditViewDialog = (element: HTMLElement) =>
fireEvent(element, "register-dialog", {
dialogShowEvent,
dialogTag,
- dialogImport: () => import("./hui-dialog-edit-view"),
+ dialogImport: () =>
+ import(/* webpackChunkName: "hui-dialog-edit-view" */ "./hui-dialog-edit-view"),
});
export const showEditViewDialog = (
diff --git a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
index 35d6720205..3186c9c62b 100644
--- a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
@@ -31,12 +31,22 @@ class HuiClimateEntityRow extends LitElement implements EntityRow {
return html``;
}
+ const stateObj = this.hass.states[this._config.entity];
+
+ if (!stateObj) {
+ return html`
+
+ `;
+ }
+
return html`
${this.renderStyle()}
`;
diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts
index 88e983bc69..c73cf9ef50 100644
--- a/src/panels/lovelace/entity-rows/types.ts
+++ b/src/panels/lovelace/entity-rows/types.ts
@@ -29,7 +29,7 @@ export type EntityRowConfig =
| WeblinkConfig
| CallServiceConfig;
-export interface EntityRow {
+export interface EntityRow extends HTMLElement {
hass?: HomeAssistant;
setConfig(config: EntityRowConfig);
}
diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
index 202de5b0bb..f2ac450904 100644
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -1,4 +1,5 @@
import { LitElement, html } from "@polymer/lit-element";
+import { classMap } from "lit-html/directives/classMap";
import { TemplateResult } from "lit-html";
import yaml from "js-yaml";
@@ -7,20 +8,37 @@ import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-button/paper-button";
import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-spinner/paper-spinner";
+import { struct } from "./common/structs/struct";
import { Lovelace } from "./types";
import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin";
+import "../../components/ha-icon";
+
const TAB_INSERT = " ";
+const lovelaceStruct = struct.partial({
+ title: "string?",
+ views: ["object"],
+});
+
class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
public lovelace?: Lovelace;
public closeEditor?: () => void;
private _haStyle?: DocumentFragment;
+ private _saving?: boolean;
+ private _changed?: boolean;
+ private _hashAdded?: boolean;
+ private _hash?: boolean;
static get properties() {
return {
lovelace: {},
+ _saving: {},
+ _changed: {},
+ _hashAdded: {},
+ _hash: {},
};
}
@@ -32,10 +50,26 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
Edit Config
+ ${
+ this._hash
+ ? html`
+
+ `
+ : ""
+ }
Save
+
@@ -44,6 +78,7 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
autocorrect="off"
autocapitalize="off"
spellcheck="false"
+ @input="${this._yamlChanged}"
>
@@ -54,6 +89,11 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
const textArea = this.textArea;
textArea.value = yaml.safeDump(this.lovelace!.config);
textArea.addEventListener("keydown", (e) => {
+ if (e.keyCode === 51) {
+ this._hashAdded = true;
+ return;
+ }
+
if (e.keyCode !== 9) {
return;
}
@@ -90,10 +130,17 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
app-header-layout {
height: 100vh;
}
-
paper-button {
font-size: 16px;
}
+ app-toolbar {
+ background-color: var(--dark-background-color, #455a64);
+ color: var(--dark-text-color);
+ }
+
+ .comments {
+ font-size: 16px;
+ }
.content {
height: calc(100vh - 68px);
@@ -110,20 +157,80 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
font-family: "Courier New", Courier, monospace;
padding: 8px;
}
+
+ .save-button {
+ opacity: 0;
+ margin-left: -16px;
+ margin-top: -4px;
+ transition: opacity 1.5s;
+ }
+
+ .saved {
+ opacity: 1;
+ }
`;
}
- private _handleSave() {
+ private _closeEditor() {
+ if (this._changed) {
+ if (
+ !confirm("You have unsafed changes, are you sure you want to exit?")
+ ) {
+ return;
+ }
+ }
+ window.onbeforeunload = null;
+ this.closeEditor!();
+ }
+
+ private async _handleSave() {
+ this._saving = true;
+
+ if (this._hashAdded) {
+ if (
+ !confirm(
+ "Your config might contain comments, these will not be saved. Do you want to continue?"
+ )
+ ) {
+ return;
+ }
+ }
+
let value;
try {
value = yaml.safeLoad(this.textArea.value);
} catch (err) {
alert(`Unable to parse YAML: ${err}`);
+ this._saving = false;
return;
}
+ try {
+ value = lovelaceStruct(value);
+ } catch (err) {
+ alert(`Your config is not valid: ${err}`);
+ return;
+ }
+ try {
+ await this.lovelace!.saveConfig(value);
+ } catch (err) {
+ alert(`Unable to save YAML: ${err}`);
+ }
+ window.onbeforeunload = null;
+ this._saving = false;
+ this._changed = false;
+ this._hashAdded = false;
+ }
- this.lovelace!.saveConfig(value);
+ private _yamlChanged() {
+ this._hash = this._hashAdded || this.textArea.value.includes("#");
+ if (this._changed) {
+ return;
+ }
+ window.onbeforeunload = () => {
+ return true;
+ };
+ this._changed = true;
}
private get textArea(): HTMLTextAreaElement {
@@ -131,4 +238,10 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) {
}
}
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-editor": LovelaceFullConfigEditor;
+ }
+}
+
customElements.define("hui-editor", LovelaceFullConfigEditor);
diff --git a/src/panels/lovelace/hui-root.js b/src/panels/lovelace/hui-root.js
deleted file mode 100644
index 415855e555..0000000000
--- a/src/panels/lovelace/hui-root.js
+++ /dev/null
@@ -1,454 +0,0 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/app-route/app-route";
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-button/paper-button";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-menu-button/paper-menu-button";
-import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
-
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import scrollToTarget from "../../common/dom/scroll-to-target";
-
-import EventsMixin from "../../mixins/events-mixin";
-import localizeMixin from "../../mixins/localize-mixin";
-import NavigateMixin from "../../mixins/navigate-mixin";
-
-import "../../layouts/ha-app-layout";
-import "../../components/ha-start-voice-button";
-import "../../components/ha-icon";
-import { loadModule, loadCSS, loadJS } from "../../common/dom/load_resource";
-import { subscribeNotifications } from "../../data/ws-notifications";
-import { computeNotifications } from "./common/compute-notifications";
-import "./components/notifications/hui-notification-drawer";
-import "./components/notifications/hui-notifications-button";
-import "./hui-unused-entities";
-import "./hui-view";
-import debounce from "../../common/util/debounce";
-import createCardElement from "./common/create-card-element";
-import { showEditViewDialog } from "./editor/view-editor/show-edit-view-dialog";
-
-// CSS and JS should only be imported once. Modules and HTML are safe.
-const CSS_CACHE = {};
-const JS_CACHE = {};
-
-class HUIRoot extends NavigateMixin(
- EventsMixin(localizeMixin(PolymerElement))
-) {
- static get template() {
- return html`
-
-
-
-
-
-
-
-
- [[_computeTitle(config)]]
-
-
-
-
-
-
- Refresh
-
- Unused entities
- [[localize("ui.panel.lovelace.editor.configure_ui")]]
-
- Raw config editor
-
- Help
-
-
-
-
-
-
-
- [[localize("ui.panel.lovelace.editor.header")]]
-
-
-
-
-
-
-
-
-
-
-
- [[_computeTabTitle(item.title)]]
-
-
-
-
-
-
-
-
-
-
-
-
-
+ ${
+ this.config.title ||
+ this.localize("ui.panel.lovelace.editor.header")
+ }
+
+
${this.config.title || "Home Assistant"}
+
+
+
+
+
+ ${
+ this._yamlMode
+ ? html`
+ Refresh
+ `
+ : ""
+ }
+ Unused entities
+ ${
+ this.localize("ui.panel.lovelace.editor.configure_ui")
+ }
+ Help
+
+
+
+ `
+ }
+
+ ${
+ this.lovelace!.config.views.length > 1 || this._editMode
+ ? html`
+
+
+ ${
+ this.lovelace!.config.views.map(
+ (view) => html`
+
+ ${
+ view.icon
+ ? html`
+
+ `
+ : view.title || "Unnamed view"
+ }
+ ${
+ this._editMode
+ ? html`
+
+ `
+ : ""
+ }
+
+ `
+ )
+ }
+ ${
+ this._editMode
+ ? html`
+
+
+
+ `
+ : ""
+ }
+
+