jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 14:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add global yaml editor

Browse Source
This commit is contained in:
Paul Bottein 2024-09-02 18:53:24 +02:00
parent 14308c9057
commit bbf8a8e3e7
No known key found for this signature in database
1 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import {
mdiOpenInNew, mdiOpenInNew,
} from "@mdi/js"; } from "@mdi/js";
import deepFreeze from "deep-freeze"; import deepFreeze from "deep-freeze";
import { dump, load } from "js-yaml";
import { import {
CSSResultGroup, CSSResultGroup,
LitElement, LitElement,
@ -23,6 +24,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-button"; import "../../../../components/ha-button";
import "../../../../components/ha-button-menu-new"; import "../../../../components/ha-button-menu-new";
import "../../../../components/ha-circular-progress"; import "../../../../components/ha-circular-progress";
import "../../../../components/ha-code-editor";
import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header"; import "../../../../components/ha-dialog-header";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
@ -82,7 +84,7 @@ export class HuiDialogEditCard
@query("hui-card-editor") @query("hui-card-editor")
private _cardEditorEl?: HuiCardElementEditor; private _cardEditorEl?: HuiCardElementEditor;
@state() private _yamlMode = true; @state() private _yamlMode = false;
@state() private _documentationURL?: string; @state() private _documentationURL?: string;
@ -92,8 +94,7 @@ export class HuiDialogEditCard
public async showDialog(params: EditCardDialogParams): Promise<void> { public async showDialog(params: EditCardDialogParams): Promise<void> {
this._params = params; this._params = params;
this._yamlMode = true; this._yamlMode = false;
this._guiModeAvailable = true;
const containerConfig = findLovelaceContainer( const containerConfig = findLovelaceContainer(
params.lovelaceConfig, params.lovelaceConfig,
@ -275,17 +276,33 @@ export class HuiDialogEditCard
</ha-dialog-header> </ha-dialog-header>
<div class="content"> <div class="content">
<div class="element-editor"> <div class="element-editor">
<hui-card-editor ${this._yamlMode
.containerConfig=${this._containerConfig} ? html`
.hass=${this.hass} <ha-code-editor
.lovelace=${this._params.lovelaceConfig} mode="yaml"
.config=${this._cardConfig} autofocus
@config-changed=${this._handleConfigChanged} autocomplete-entities
@GUImode-changed=${this._handleGUIModeChanged} autocomplete-icons
@editor-save=${this._save} .hass=${this.hass}
dialogInitialFocus .value=${dump(this._cardConfig)}
> @value-changed=${this._handleYAMLChanged}
</hui-card-editor> @keydown=${this._ignoreKeydown}
dir="ltr"
></ha-code-editor>
`
: html`
<hui-card-editor
.containerConfig=${this._containerConfig}
.hass=${this.hass}
.lovelace=${this._params.lovelaceConfig}
.config=${this._cardConfig}
@config-changed=${this._handleConfigChanged}
@GUImode-changed=${this._handleGUIModeChanged}
@editor-save=${this._save}
dialogInitialFocus
>
</hui-card-editor>
`}
</div> </div>
<div class="element-preview"> <div class="element-preview">
${this._isInSection ${this._isInSection
@ -361,17 +378,20 @@ export class HuiDialogEditCard
ev.stopPropagation(); ev.stopPropagation();
} }
private _handleYAMLChanged(ev: CustomEvent) {
this._cardConfig = load(ev.detail.value) as LovelaceCardConfig;
this._dirty = true;
}
private _handleConfigChanged(ev: HASSDomEvent<ConfigChangedEvent>) { private _handleConfigChanged(ev: HASSDomEvent<ConfigChangedEvent>) {
this._cardConfig = deepFreeze(ev.detail.config); this._cardConfig = deepFreeze(ev.detail.config);
this._error = ev.detail.error; this._error = ev.detail.error;
this._guiModeAvailable = ev.detail.guiModeAvailable;
this._dirty = true; this._dirty = true;
} }
private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void { private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
ev.stopPropagation(); ev.stopPropagation();
this._yamlMode = ev.detail.guiMode; this._yamlMode = ev.detail.guiMode;
this._guiModeAvailable = ev.detail.guiModeAvailable;
} }
private _opened() { private _opened() {