From 4150ac045d5c07b93882ecdc404a806883eb4f4f Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 2 Apr 2020 17:47:01 +0200 Subject: [PATCH] Gui editor fixes (#5416) * Gui editor fixes * Fix * Add change mode button to conditional card editor --- src/panels/lovelace/cards/hui-map-card.ts | 5 ++ .../editor/card-editor/hui-card-editor.ts | 41 ++++++++----- .../card-editor/hui-dialog-edit-card.ts | 14 +++-- .../hui-alarm-panel-card-editor.ts | 2 +- .../config-elements/hui-button-card-editor.ts | 2 +- .../hui-conditional-card-editor.ts | 60 ++++++++++++++++++- .../hui-entities-card-editor.ts | 2 +- .../config-elements/hui-entity-card-editor.ts | 2 +- .../config-elements/hui-gauge-card-editor.ts | 2 +- .../config-elements/hui-glance-card-editor.ts | 2 +- .../hui-history-graph-card-editor.ts | 2 +- .../config-elements/hui-iframe-card-editor.ts | 2 +- .../config-elements/hui-light-card-editor.ts | 2 +- .../config-elements/hui-map-card-editor.ts | 2 +- .../hui-markdown-card-editor.ts | 2 +- .../hui-media-control-card-editor.ts | 2 +- .../hui-picture-card-editor.ts | 2 +- .../hui-picture-entity-card-editor.ts | 2 +- .../hui-picture-glance-card-editor.ts | 2 +- .../hui-plant-status-card-editor.ts | 2 +- .../config-elements/hui-sensor-card-editor.ts | 2 +- .../hui-shopping-list-editor.ts | 2 +- .../config-elements/hui-stack-card-editor.ts | 41 +++++++++---- .../hui-thermostat-card-editor.ts | 2 +- .../hui-weather-forecast-card-editor.ts | 2 +- src/panels/lovelace/editor/types.ts | 1 + 26 files changed, 146 insertions(+), 56 deletions(-) diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index 445177e44b..b7258fd6b8 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -79,6 +79,7 @@ class HuiMapCard extends LitElement implements LovelaceCard { @property() private _history?: HassEntity[][]; private _date?: Date; + private _loaded = false; @property() private _config?: MapCardConfig; @@ -282,6 +283,10 @@ class HuiMapCard extends LitElement implements LovelaceCard { } private async loadMap(): Promise { + if (this._loaded) { + return; + } + this._loaded = true; [this._leafletMap, this.Leaflet] = await setupLeafletMap( this._mapEl, this._config !== undefined ? this._config.dark_mode === true : false diff --git a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts index 90043f69e8..69b7a24891 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts @@ -25,15 +25,18 @@ import { EntityConfig } from "../../entity-rows/types"; import { getCardElementClass } from "../../create-element/create-card-element"; import { GUIModeChangedEvent } from "../types"; +export interface ConfigChangedEvent { + config: LovelaceCardConfig; + error?: string; + guiModeAvailable?: boolean; +} + declare global { interface HASSDomEvents { "entities-changed": { entities: EntityConfig[]; }; - "config-changed": { - config: LovelaceCardConfig; - error?: string; - }; + "config-changed": ConfigChangedEvent; "GUImode-changed": GUIModeChangedEvent; } } @@ -75,6 +78,7 @@ export class HuiCardEditor extends LitElement { fireEvent(this, "config-changed", { config: this.value!, error: this._error, + guiModeAvailable: !(this.hasWarning || this.hasError), }); } @@ -101,7 +105,10 @@ export class HuiCardEditor extends LitElement { public set GUImode(guiMode: boolean) { this._GUImode = guiMode; - fireEvent(this as HTMLElement, "GUImode-changed", { guiMode }); + fireEvent(this as HTMLElement, "GUImode-changed", { + guiMode, + guiModeAvailable: !(this.hasWarning || this.hasError), + }); } private get _yamlEditor(): HaCodeEditor { @@ -174,6 +181,13 @@ export class HuiCardEditor extends LitElement { } fireEvent(this as HTMLElement, "iron-resize"); } + + if (this._configElement && changedProperties.has("hass")) { + this._configElement.hass = this.hass; + } + if (this._configElement && changedProperties.has("lovelace")) { + this._configElement.lovelace = this.lovelace; + } } private _refreshYamlEditor(focus = false) { @@ -232,6 +246,13 @@ export class HuiCardEditor extends LitElement { this._configElement = configElement; this._configElType = cardType; + + // Perform final setup + this._configElement.hass = this.hass; + this._configElement.lovelace = this.lovelace; + this._configElement.addEventListener("config-changed", (ev) => + this._handleUIConfigChanged(ev as UIConfigChangedEvent) + ); } // Setup GUI editor and check that it can handle the current config @@ -240,16 +261,6 @@ export class HuiCardEditor extends LitElement { } catch (err) { throw Error(`WARNING: ${err.message}`); } - - // Perform final setup - this._configElement!.hass = this.hass; - this._configElement!.lovelace = this.lovelace; - this._configElement!.addEventListener("config-changed", (ev) => - this._handleUIConfigChanged(ev as UIConfigChangedEvent) - ); - - this.GUImode = true; - return; } catch (err) { if (err.message.startsWith("WARNING:")) { this._warning = err.message.substr(8); diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 092482c5fe..59dee5b1f6 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -19,7 +19,7 @@ import { } from "../../../../data/lovelace"; import "./hui-card-editor"; // tslint:disable-next-line -import { HuiCardEditor } from "./hui-card-editor"; +import { HuiCardEditor, ConfigChangedEvent } from "./hui-card-editor"; import "./hui-card-preview"; import "./hui-card-picker"; import { EditCardDialogParams } from "./show-edit-card-dialog"; @@ -52,12 +52,15 @@ export class HuiDialogEditCard extends LitElement { @property() private _saving: boolean = false; @property() private _error?: string; + @property() private _guiModeAvailable? = true; @query("hui-card-editor") private _cardEditorEl?: HuiCardEditor; - @property() private _GUImode?: boolean; + @property() private _GUImode = true; public async showDialog(params: EditCardDialogParams): Promise { this._params = params; + this._GUImode = true; + this._guiModeAvailable = true; const [view, card] = params.path; this._viewConfig = params.lovelaceConfig.views[view]; this._cardConfig = @@ -139,8 +142,7 @@ export class HuiDialogEditCard extends LitElement { ? html` ${this.hass!.localize( @@ -288,9 +290,10 @@ export class HuiDialogEditCard extends LitElement { this._error = ev.detail.error; } - private _handleConfigChanged(ev) { + private _handleConfigChanged(ev: HASSDomEvent) { this._cardConfig = deepFreeze(ev.detail.config); this._error = ev.detail.error; + this._guiModeAvailable = ev.detail.guiModeAvailable; } private _handleKeyUp(ev: KeyboardEvent) { @@ -302,6 +305,7 @@ export class HuiDialogEditCard extends LitElement { private _handleGUIModeChanged(ev: HASSDomEvent): void { ev.stopPropagation(); this._GUImode = ev.detail.guiMode; + this._guiModeAvailable = ev.detail.guiModeAvailable; } private _toggleMode(): void { diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts index a849401772..a2ab98022b 100644 --- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts @@ -60,7 +60,7 @@ export class HuiAlarmPanelCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts index fc80cde874..ace26dfa5f 100644 --- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts @@ -88,7 +88,7 @@ export class HuiButtonCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts index c05fdbd133..dec169ca6e 100644 --- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts @@ -6,6 +6,7 @@ import { property, CSSResult, css, + query, } from "lit-element"; import "@polymer/paper-tabs"; @@ -13,11 +14,16 @@ import { struct } from "../../common/structs/struct"; import { HomeAssistant } from "../../../../types"; import { LovelaceCardEditor } from "../../types"; import { StackCardConfig } from "../../cards/types"; -import { fireEvent } from "../../../../common/dom/fire_event"; +import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event"; import { LovelaceConfig } from "../../../../data/lovelace"; import "../../../../components/entity/ha-entity-picker"; import "../../../../components/ha-switch"; +import { + HuiCardEditor, + ConfigChangedEvent, +} from "../card-editor/hui-card-editor"; +import { GUIModeChangedEvent } from "../types"; const conditionStruct = struct({ entity: "string", @@ -36,7 +42,10 @@ export class HuiConditionalCardEditor extends LitElement @property() public hass?: HomeAssistant; @property() public lovelace?: LovelaceConfig; @property() private _config?: StackCardConfig; + @property() private _GUImode = true; + @property() private _guiModeAvailable? = true; @property() private _cardTab: boolean = false; + @query("hui-card-editor") private _cardEditorEl?: HuiCardEditor; public setConfig(config: StackCardConfig): void { this._config = cardConfigStruct(config); @@ -69,6 +78,17 @@ export class HuiConditionalCardEditor extends LitElement ${this._config.card.type ? html`
+ + ${this.hass!.localize( + !this._cardEditorEl || this._GUImode + ? "ui.panel.lovelace.editor.edit_card.show_code_editor" + : "ui.panel.lovelace.editor.edit_card.show_visual_editor" + )} + ${this.hass!.localize( "ui.panel.lovelace.editor.card.conditional.change_type" @@ -80,13 +100,14 @@ export class HuiConditionalCardEditor extends LitElement .value=${this._config.card} .lovelace=${this.lovelace} @config-changed=${this._handleCardChanged} + @GUImode-changed=${this._handleGUIModeChanged} > ` : html` `}
@@ -162,14 +183,44 @@ export class HuiConditionalCardEditor extends LitElement this._cardTab = parseInt((ev.target! as any).selected!, 10) === 1; } - private _handleCardChanged(ev: CustomEvent): void { + private _toggleMode(): void { + this._cardEditorEl?.toggleMode(); + } + + private _setMode(value: boolean): void { + this._GUImode = value; + if (this._cardEditorEl) { + this._cardEditorEl!.GUImode = value; + } + } + + private _handleGUIModeChanged(ev: HASSDomEvent): void { + ev.stopPropagation(); + this._GUImode = ev.detail.guiMode; + this._guiModeAvailable = ev.detail.guiModeAvailable; + } + + private _handleCardPicked(ev: CustomEvent): void { + ev.stopPropagation(); + if (!this._config) { + return; + } + this._setMode(true); + this._guiModeAvailable = true; + this._config.card = ev.detail.config; + fireEvent(this, "config-changed", { config: this._config }); + } + + private _handleCardChanged(ev: HASSDomEvent): void { ev.stopPropagation(); if (!this._config) { return; } this._config.card = ev.detail.config; + this._guiModeAvailable = ev.detail.guiModeAvailable; fireEvent(this, "config-changed", { config: this._config }); } + private _handleReplaceCard(): void { if (!this._config) { return; @@ -267,6 +318,9 @@ export class HuiConditionalCardEditor extends LitElement justify-content: flex-end; width: 100%; } + .gui-mode-button { + margin-right: auto; + } `; } } 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 index 02cd1b8574..9e32bf222a 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts @@ -67,7 +67,7 @@ export class HuiEntitiesCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts index 511be106e3..7774d217de 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts @@ -69,7 +69,7 @@ export class HuiEntityCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index 8e17c179cd..23e3e4eef3 100644 --- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts @@ -73,7 +73,7 @@ export class HuiGaugeCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 a4cb511a20..a019bc6a89 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 @@ -80,7 +80,7 @@ export class HuiGlanceCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } diff --git a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts index d8e1dfd134..9d8f777fa4 100644 --- a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts @@ -67,7 +67,7 @@ export class HuiHistoryGraphCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index dab2a372de..39ba0c4194 100644 --- a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts @@ -47,7 +47,7 @@ export class HuiIframeCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index 3564980a63..1a76e716b2 100644 --- a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts @@ -72,7 +72,7 @@ export class HuiLightCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index 58a880eebf..3eb81676b1 100644 --- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts @@ -79,7 +79,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor { } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index 507bf9536e..372d64d2ac 100644 --- a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts @@ -50,7 +50,7 @@ export class HuiMarkdownCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index 0efb4403d1..b740bae1be 100644 --- 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 @@ -37,7 +37,7 @@ export class HuiMediaControlCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index 2a17fe107f..eaab41e64d 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts @@ -60,7 +60,7 @@ export class HuiPictureCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts index bd63fcd92d..52ae73dc25 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts @@ -100,7 +100,7 @@ export class HuiPictureEntityCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts index d87225615f..677e110767 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts @@ -111,7 +111,7 @@ export class HuiPictureGlanceCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index 96acf94aaa..7ac5ba8b34 100644 --- 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 @@ -51,7 +51,7 @@ export class HuiPlantStatusCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index f608df420b..ed69b36fe6 100644 --- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts @@ -78,7 +78,7 @@ export class HuiSensorCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index b6f656a2fb..a6c2a01f1d 100644 --- a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts @@ -46,7 +46,7 @@ export class HuiShoppingListEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts index f253f518a1..44ff449cfd 100644 --- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts @@ -16,7 +16,10 @@ import { LovelaceCardEditor } from "../../types"; import { StackCardConfig } from "../../cards/types"; import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event"; import { LovelaceConfig } from "../../../../data/lovelace"; -import { HuiCardEditor } from "../card-editor/hui-card-editor"; +import { + HuiCardEditor, + ConfigChangedEvent, +} from "../card-editor/hui-card-editor"; import { GUIModeChangedEvent } from "../types"; const cardConfigStruct = struct({ @@ -32,7 +35,8 @@ export class HuiStackCardEditor extends LitElement @property() public lovelace?: LovelaceConfig; @property() private _config?: StackCardConfig; @property() private _selectedCard: number = 0; - @property() private _GUImode?: boolean; + @property() private _GUImode = true; + @property() private _guiModeAvailable? = true; @query("hui-card-editor") private _cardEditorEl?: HuiCardEditor; public setConfig(config: StackCardConfig): void { @@ -52,7 +56,7 @@ export class HuiStackCardEditor extends LitElement ${this._config.cards.map((_card, i) => { return html` @@ -65,7 +69,7 @@ export class HuiStackCardEditor extends LitElement @@ -80,8 +84,7 @@ export class HuiStackCardEditor extends LitElement
${this.hass!.localize( @@ -94,7 +97,7 @@ export class HuiStackCardEditor extends LitElement id="move-before" title="Move card before" icon="hass:arrow-left" - ?disabled=${selected === 0} + .disabled=${selected === 0} @click=${this._handleMove} > @@ -102,7 +105,7 @@ export class HuiStackCardEditor extends LitElement id="move-after" title="Move card after" icon="hass:arrow-right" - ?disabled=${selected === numcards - 1} + .disabled=${selected === numcards - 1} @click=${this._handleMove} > @@ -134,18 +137,22 @@ export class HuiStackCardEditor extends LitElement } private _handleSelectedCard(ev) { - this._selectedCard = - ev.target.id === "add-card" - ? this._config!.cards.length - : parseInt(ev.target.selected, 10); + if (ev.target.id === "add-card") { + this._selectedCard = this._config!.cards.length; + return; + } + this._setMode(true); + this._guiModeAvailable = true; + this._selectedCard = parseInt(ev.detail.selected, 10); } - private _handleConfigChanged(ev) { + private _handleConfigChanged(ev: HASSDomEvent) { ev.stopPropagation(); if (!this._config) { return; } this._config.cards[this._selectedCard] = ev.detail.config; + this._guiModeAvailable = ev.detail.guiModeAvailable; fireEvent(this, "config-changed", { config: this._config }); } @@ -183,12 +190,20 @@ export class HuiStackCardEditor extends LitElement private _handleGUIModeChanged(ev: HASSDomEvent): void { ev.stopPropagation(); this._GUImode = ev.detail.guiMode; + this._guiModeAvailable = ev.detail.guiModeAvailable; } private _toggleMode(): void { this._cardEditorEl?.toggleMode(); } + private _setMode(value: boolean): void { + this._GUImode = value; + if (this._cardEditorEl) { + this._cardEditorEl!.GUImode = value; + } + } + static get styles(): CSSResult { return css` .toolbar { 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 index 8372fda9df..f767d5429b 100644 --- a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts @@ -50,7 +50,7 @@ export class HuiThermostatCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } 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 index 408091c741..0c89045edd 100644 --- 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 @@ -49,7 +49,7 @@ export class HuiWeatherForecastCardEditor extends LitElement } protected render(): TemplateResult { - if (!this.hass) { + if (!this.hass || !this._config) { return html``; } diff --git a/src/panels/lovelace/editor/types.ts b/src/panels/lovelace/editor/types.ts index b48deb1bff..7dda045726 100644 --- a/src/panels/lovelace/editor/types.ts +++ b/src/panels/lovelace/editor/types.ts @@ -16,6 +16,7 @@ export interface YamlChangedEvent extends Event { export interface GUIModeChangedEvent { guiMode: boolean; + guiModeAvailable: boolean; } export interface ViewEditEvent extends Event {