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

POC

Browse Source
This commit is contained in:
Thomas Lovén 2020-09-14 13:32:22 +02:00
parent 92ed14c0e4
commit bda951e6d1
1 changed files with 254 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

408
src/panels/config/script/ha-script-editor.ts
View File

@ -1,7 +1,10 @@
import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-header/app-header";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "@polymer/app-layout/app-toolbar/app-toolbar"; 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-icon-button";
import "../../../components/ha-button-menu";
import { import {
css, css,
CSSResult, CSSResult,
@ -38,7 +41,7 @@ import { HaDeviceAction } from "../automation/action/types/ha-automation-action-
import "../ha-config-section"; import "../ha-config-section";
import { configSections } from "../ha-panel-config"; import { configSections } from "../ha-panel-config";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import { mdiContentSave } from "@mdi/js"; import { mdiContentSave, mdiDotsVertical } from "@mdi/js";
import { PaperListboxElement } from "@polymer/paper-listbox"; import { PaperListboxElement } from "@polymer/paper-listbox";
import { slugify } from "../../../common/string/slugify"; import { slugify } from "../../../common/string/slugify";
@ -63,6 +66,8 @@ export class HaScriptEditor extends LitElement {
@internalProperty() private _errors?: string; @internalProperty() private _errors?: string;
@internalProperty() private _yamlMode = false;
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<hass-tabs-subpage <hass-tabs-subpage
@ -72,19 +77,46 @@ export class HaScriptEditor extends LitElement {
.backCallback=${() => this._backTapped()} .backCallback=${() => this._backTapped()}
.tabs=${configSections.automation} .tabs=${configSections.automation}
> >
${!this.scriptEntityId <ha-button-menu
? "" corner="BOTTOM_START"
: html` slot="toolbar-icon"
<ha-icon-button @action=${this._handleAction}
class="warning" >
slot="toolbar-icon" <mwc-icon-button
title="${this.hass.localize( slot="trigger"
"ui.panel.config.script.editor.delete_script" .title=${this.hass.localize("ui.common.menu")}
)}" .label=${this.hass.localize("ui.common.overflow_menu")}
icon="hass:delete" ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
@click=${this._deleteConfirm} </mwc-icon-button>
></ha-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`
<mwc-list-item
class="warning"
aria-label=${this.hass.localize(
"ui.panel.config.script.editor.delete_script"
)}
>
${this.hass.localize(
"ui.panel.config.script.editor.delete_script"
)}
</mwc-list-item>
`}
</ha-button-menu>
${this.narrow ${this.narrow
? html` <span slot="header">${this._config?.alias}</span> ` ? html` <span slot="header">${this._config?.alias}</span> `
: ""} : ""}
@ -98,151 +130,195 @@ export class HaScriptEditor extends LitElement {
})}" })}"
> >
${this._config ${this._config
? html` ? this._yamlMode
<ha-config-section .isWide=${this.isWide}> ? html`
${!this.narrow <ha-config-section .isWide=${false}>
? html` <span slot="header">${this._config.alias}</span> ` ${!this.narrow
: ""} ? html`
<span slot="introduction"> <span slot="header">${this._config.alias}</span>
${this.hass.localize( `
"ui.panel.config.script.editor.introduction" : ""}
)} <ha-card>
</span> <div class="card-content">
<ha-card> <ha-yaml-editor
<div class="card-content"> .defaultValue=${this._config}
<paper-input @value-changed=${this._onYamlChange}
.label=${this.hass.localize( ></ha-yaml-editor>
"ui.panel.config.script.editor.alias" </div>
)} ${this.scriptEntityId
name="alias" ? html`
.value=${this._config.alias} <div
@value-changed=${this._valueChanged} class="card-actions layout horizontal justified center"
@change=${this._aliasChanged} >
> <span></span>
</paper-input> <mwc-button
<ha-icon-input @click=${this._runScript}
.label=${this.hass.localize( title="${this.hass.localize(
"ui.panel.config.script.editor.icon" "ui.panel.config.script.picker.activate_script"
)} )}"
.name=${"icon"} ?disabled=${this._dirty}
.value=${this._config.icon} >
@value-changed=${this._valueChanged} ${this.hass.localize(
> "ui.card.script.execute"
</ha-icon-input> )}
${!this.scriptEntityId </mwc-button>
? html` <paper-input </div>
.label=${this.hass.localize( `
"ui.panel.config.script.editor.id" : ``}
)} </ha-card>
.errorMessage=${this.hass.localize( </ha-config-section>
"ui.panel.config.script.editor.id_already_exists" `
)} : html`
.invalid=${this._idError} <ha-config-section .isWide=${this.isWide}>
.value=${this._entityId} ${!this.narrow
@value-changed=${this._idChanged} ? html`
<span slot="header">${this._config.alias}</span>
`
: ""}
<span slot="introduction">
${this.hass.localize(
"ui.panel.config.script.editor.introduction"
)}
</span>
<ha-card>
<div class="card-content">
<paper-input
.label=${this.hass.localize(
"ui.panel.config.script.editor.alias"
)}
name="alias"
.value=${this._config.alias}
@value-changed=${this._valueChanged}
@change=${this._aliasChanged}
>
</paper-input>
<ha-icon-input
.label=${this.hass.localize(
"ui.panel.config.script.editor.icon"
)}
.name=${"icon"}
.value=${this._config.icon}
@value-changed=${this._valueChanged}
>
</ha-icon-input>
${!this.scriptEntityId
? html` <paper-input
.label=${this.hass.localize(
"ui.panel.config.script.editor.id"
)}
.errorMessage=${this.hass.localize(
"ui.panel.config.script.editor.id_already_exists"
)}
.invalid=${this._idError}
.value=${this._entityId}
@value-changed=${this._idChanged}
>
</paper-input>`
: ""}
<p>
${this.hass.localize(
"ui.panel.config.script.editor.modes.description",
"documentation_link",
html`<a
href="https://www.home-assistant.io/integrations/script/#script-modes"
target="_blank"
rel="noreferrer"
>${this.hass.localize(
"ui.panel.config.script.editor.modes.documentation"
)}</a
>`
)}
</p>
<paper-dropdown-menu-light
.label=${this.hass.localize(
"ui.panel.config.script.editor.modes.label"
)}
no-animations
>
<paper-listbox
slot="dropdown-content"
.selected=${this._config.mode
? MODES.indexOf(this._config.mode)
: 0}
@iron-select=${this._modeChanged}
> >
</paper-input>` ${MODES.map(
: ""} (mode) => html`
<paper-item .mode=${mode}>
${this.hass.localize(
`ui.panel.config.script.editor.modes.${mode}`
) || mode}
</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu-light>
${this._config.mode &&
MODES_MAX.includes(this._config.mode)
? html` <paper-input
.label=${this.hass.localize(
`ui.panel.config.script.editor.max.${this._config.mode}`
)}
type="number"
name="max"
.value=${this._config.max || "10"}
@value-changed=${this._valueChanged}
>
</paper-input>`
: html``}
</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>
<ha-config-section .isWide=${this.isWide}>
<span slot="header">
${this.hass.localize(
"ui.panel.config.script.editor.sequence"
)}
</span>
<span slot="introduction">
<p> <p>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.script.editor.modes.description", "ui.panel.config.script.editor.sequence_sentence"
"documentation_link",
html`<a
href="https://www.home-assistant.io/integrations/script/#script-modes"
target="_blank"
rel="noreferrer"
>${this.hass.localize(
"ui.panel.config.script.editor.modes.documentation"
)}</a
>`
)} )}
</p> </p>
<paper-dropdown-menu-light <a
.label=${this.hass.localize( href="https://home-assistant.io/docs/scripts/"
"ui.panel.config.script.editor.modes.label" target="_blank"
)} rel="noreferrer"
no-animations
> >
<paper-listbox ${this.hass.localize(
slot="dropdown-content" "ui.panel.config.script.editor.link_available_actions"
.selected=${this._config.mode )}
? MODES.indexOf(this._config.mode) </a>
: 0} </span>
@iron-select=${this._modeChanged} <ha-automation-action
> .actions=${this._config.sequence}
${MODES.map( @value-changed=${this._sequenceChanged}
(mode) => html` .hass=${this.hass}
<paper-item .mode=${mode}> ></ha-automation-action>
${this.hass.localize( </ha-config-section>
`ui.panel.config.script.editor.modes.${mode}` `
) || mode}
</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu-light>
${this._config.mode &&
MODES_MAX.includes(this._config.mode)
? html` <paper-input
.label=${this.hass.localize(
`ui.panel.config.script.editor.max.${this._config.mode}`
)}
type="number"
name="max"
.value=${this._config.max || "10"}
@value-changed=${this._valueChanged}
>
</paper-input>`
: html``}
</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>
<ha-config-section .isWide=${this.isWide}>
<span slot="header">
${this.hass.localize(
"ui.panel.config.script.editor.sequence"
)}
</span>
<span slot="introduction">
<p>
${this.hass.localize(
"ui.panel.config.script.editor.sequence_sentence"
)}
</p>
<a
href="https://home-assistant.io/docs/scripts/"
target="_blank"
rel="noreferrer"
>
${this.hass.localize(
"ui.panel.config.script.editor.link_available_actions"
)}
</a>
</span>
<ha-automation-action
.actions=${this._config.sequence}
@value-changed=${this._sequenceChanged}
.hass=${this.hass}
></ha-automation-action>
</ha-config-section>
`
: ""} : ""}
</div> </div>
</div> </div>
@ -319,7 +395,7 @@ export class HaScriptEditor extends LitElement {
} }
} }
private async _runScript(ev) { private async _runScript(ev: Event) {
ev.stopPropagation(); ev.stopPropagation();
await triggerScript(this.hass, this.scriptEntityId); await triggerScript(this.hass, this.scriptEntityId);
showToast(this, { 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) { private _modeChanged(ev: CustomEvent) {
const mode = ((ev.target as PaperListboxElement)?.selectedItem as any) const mode = ((ev.target as PaperListboxElement)?.selectedItem as any)
?.mode; ?.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) { private _valueChanged(ev: CustomEvent) {
ev.stopPropagation(); ev.stopPropagation();
const target = ev.target as any; const target = ev.target as any;