From bda951e6d11f0cfcb399b105bf2ba486154ef9e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Mon, 14 Sep 2020 13:32:22 +0200 Subject: [PATCH] POC --- src/panels/config/script/ha-script-editor.ts | 408 ++++++++++++------- 1 file changed, 254 insertions(+), 154 deletions(-) diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 9e4ce3cc07..e04d4d187d 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1,7 +1,10 @@ import "@polymer/app-layout/app-header/app-header"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import "@polymer/app-layout/app-toolbar/app-toolbar"; +import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; +import "@material/mwc-list/mwc-list-item"; import "../../../components/ha-icon-button"; +import "../../../components/ha-button-menu"; import { css, CSSResult, @@ -38,7 +41,7 @@ import { HaDeviceAction } from "../automation/action/types/ha-automation-action- import "../ha-config-section"; import { configSections } from "../ha-panel-config"; import "../../../components/ha-svg-icon"; -import { mdiContentSave } from "@mdi/js"; +import { mdiContentSave, mdiDotsVertical } from "@mdi/js"; import { PaperListboxElement } from "@polymer/paper-listbox"; import { slugify } from "../../../common/string/slugify"; @@ -63,6 +66,8 @@ export class HaScriptEditor extends LitElement { @internalProperty() private _errors?: string; + @internalProperty() private _yamlMode = false; + protected render(): TemplateResult { return html` this._backTapped()} .tabs=${configSections.automation} > - ${!this.scriptEntityId - ? "" - : html` - - `} + + + + + ${this._yamlMode + ? this.hass.localize("ui.panel.config.automation.editor.edit_ui") + : this.hass.localize( + "ui.panel.config.automation.editor.edit_yaml" + )} + + ${!this.scriptEntityId + ? "" + : html` + + ${this.hass.localize( + "ui.panel.config.script.editor.delete_script" + )} + + `} + + ${this.narrow ? html` ${this._config?.alias} ` : ""} @@ -98,151 +130,195 @@ export class HaScriptEditor extends LitElement { })}" > ${this._config - ? html` - - ${!this.narrow - ? html` ${this._config.alias} ` - : ""} - - ${this.hass.localize( - "ui.panel.config.script.editor.introduction" - )} - - -
- - - - - ${!this.scriptEntityId - ? html` + ${!this.narrow + ? html` + ${this._config.alias} + ` + : ""} + +
+ +
+ ${this.scriptEntityId + ? html` +
+ + + ${this.hass.localize( + "ui.card.script.execute" + )} + +
+ ` + : ``} +
+ + ` + : html` + + ${!this.narrow + ? html` + ${this._config.alias} + ` + : ""} + + ${this.hass.localize( + "ui.panel.config.script.editor.introduction" + )} + + +
+ + + + + ${!this.scriptEntityId + ? html` + ` + : ""} +

+ ${this.hass.localize( + "ui.panel.config.script.editor.modes.description", + "documentation_link", + html`${this.hass.localize( + "ui.panel.config.script.editor.modes.documentation" + )}` + )} +

+ + - ` - : ""} + ${MODES.map( + (mode) => html` + + ${this.hass.localize( + `ui.panel.config.script.editor.modes.${mode}` + ) || mode} + + ` + )} + + + ${this._config.mode && + MODES_MAX.includes(this._config.mode) + ? html` + ` + : html``} +
+ ${this.scriptEntityId + ? html` +
+ + + ${this.hass.localize( + "ui.card.script.execute" + )} + +
+ ` + : ``} +
+
+ + + + ${this.hass.localize( + "ui.panel.config.script.editor.sequence" + )} + +

${this.hass.localize( - "ui.panel.config.script.editor.modes.description", - "documentation_link", - html`${this.hass.localize( - "ui.panel.config.script.editor.modes.documentation" - )}` + "ui.panel.config.script.editor.sequence_sentence" )}

- - - ${MODES.map( - (mode) => html` - - ${this.hass.localize( - `ui.panel.config.script.editor.modes.${mode}` - ) || mode} - - ` - )} - - - ${this._config.mode && - MODES_MAX.includes(this._config.mode) - ? html` - ` - : html``} -
- ${this.scriptEntityId - ? html` -
- - - ${this.hass.localize("ui.card.script.execute")} - -
- ` - : ``} -
-
- - - - ${this.hass.localize( - "ui.panel.config.script.editor.sequence" - )} - - -

- ${this.hass.localize( - "ui.panel.config.script.editor.sequence_sentence" - )} -

- - ${this.hass.localize( - "ui.panel.config.script.editor.link_available_actions" - )} - -
- -
- ` + ${this.hass.localize( + "ui.panel.config.script.editor.link_available_actions" + )} + + + + + ` : ""} @@ -319,7 +395,7 @@ export class HaScriptEditor extends LitElement { } } - private async _runScript(ev) { + private async _runScript(ev: Event) { ev.stopPropagation(); await triggerScript(this.hass, this.scriptEntityId); showToast(this, { @@ -331,6 +407,21 @@ export class HaScriptEditor extends LitElement { }); } + private _handleAction(ev: CustomEvent) { + switch (ev.detail.index) { + case 0: + this._switchYamlMode(); + break; + case 1: + this._deleteConfirm(); + break; + } + } + + private _switchYamlMode() { + this._yamlMode = !this._yamlMode; + } + private _modeChanged(ev: CustomEvent) { const mode = ((ev.target as PaperListboxElement)?.selectedItem as any) ?.mode; @@ -370,6 +461,15 @@ export class HaScriptEditor extends LitElement { } } + private _onYamlChange(ev: CustomEvent) { + ev.stopPropagation(); + if (!ev.detail.isValid) { + return; + } + this._config = ev.detail.value; + this._dirty = true; + } + private _valueChanged(ev: CustomEvent) { ev.stopPropagation(); const target = ev.target as any;