POC

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`
       <hass-tabs-subpage
@@ -72,19 +77,46 @@ export class HaScriptEditor extends LitElement {
         .backCallback=${() => this._backTapped()}
         .tabs=${configSections.automation}
       >
+        <ha-button-menu
+          corner="BOTTOM_START"
+          slot="toolbar-icon"
+          @action=${this._handleAction}
+        >
+          <mwc-icon-button
+            slot="trigger"
+            .title=${this.hass.localize("ui.common.menu")}
+            .label=${this.hass.localize("ui.common.overflow_menu")}
+            ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+          </mwc-icon-button>
+          <mwc-list-item
+            aria-label=${this._yamlMode
+              ? this.hass.localize("ui.panel.config.automation.editor.edit_ui")
+              : this.hass.localize(
+                  "ui.panel.config.automation.editor.edit_yaml"
+                )}
+          >
+            ${this._yamlMode
+              ? this.hass.localize("ui.panel.config.automation.editor.edit_ui")
+              : this.hass.localize(
+                  "ui.panel.config.automation.editor.edit_yaml"
+                )}
+          </mwc-list-item>
           ${!this.scriptEntityId
             ? ""
             : html`
-              <ha-icon-button
+                <mwc-list-item
                   class="warning"
-                slot="toolbar-icon"
+                  aria-label=${this.hass.localize(
-                title="${this.hass.localize(
                     "ui.panel.config.script.editor.delete_script"
-                )}"
+                  )}
-                icon="hass:delete"
+                >
-                @click=${this._deleteConfirm}
+                  ${this.hass.localize(
-              ></ha-icon-button>
+                    "ui.panel.config.script.editor.delete_script"
+                  )}
+                </mwc-list-item>
               `}
+        </ha-button-menu>
+
         ${this.narrow
           ? html` <span slot="header">${this._config?.alias}</span> `
           : ""}
@@ -98,10 +130,50 @@ export class HaScriptEditor extends LitElement {
             })}"
           >
             ${this._config
+              ? this._yamlMode
                 ? html`
+                    <ha-config-section .isWide=${false}>
+                      ${!this.narrow
+                        ? html`
+                            <span slot="header">${this._config.alias}</span>
+                          `
+                        : ""}
+                      <ha-card>
+                        <div class="card-content">
+                          <ha-yaml-editor
+                            .defaultValue=${this._config}
+                            @value-changed=${this._onYamlChange}
+                          ></ha-yaml-editor>
+                        </div>
+                        ${this.scriptEntityId
+                          ? html`
+                              <div
+                                class="card-actions layout horizontal justified center"
+                              >
+                                <span></span>
+                                <mwc-button
+                                  @click=${this._runScript}
+                                  title="${this.hass.localize(
+                                    "ui.panel.config.script.picker.activate_script"
+                                  )}"
+                                  ?disabled=${this._dirty}
+                                >
+                                  ${this.hass.localize(
+                                    "ui.card.script.execute"
+                                  )}
+                                </mwc-button>
+                              </div>
+                            `
+                          : ``}
+                      </ha-card>
+                    </ha-config-section>
+                  `
+                : html`
                     <ha-config-section .isWide=${this.isWide}>
                       ${!this.narrow
-                      ? html` <span slot="header">${this._config.alias}</span> `
+                        ? html`
+                            <span slot="header">${this._config.alias}</span>
+                          `
                         : ""}
                       <span slot="introduction">
                         ${this.hass.localize(
@@ -197,7 +269,9 @@ export class HaScriptEditor extends LitElement {
                         </div>
                         ${this.scriptEntityId
                           ? html`
-                          <div class="card-actions layout horizontal justified center">
+                              <div
+                                class="card-actions layout horizontal justified center"
+                              >
                                 <span></span>
                                 <mwc-button
                                   @click=${this._runScript}
@@ -206,7 +280,9 @@ export class HaScriptEditor extends LitElement {
                                   )}"
                                   ?disabled=${this._dirty}
                                 >
-                              ${this.hass.localize("ui.card.script.execute")}
+                                  ${this.hass.localize(
+                                    "ui.card.script.execute"
+                                  )}
                                 </mwc-button>
                               </div>
                             `
@@ -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<ActionDetail>) {
+    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;