mirror of
https://github.com/home-assistant/frontend.git
synced 2025-09-02 04:50:25 +00:00
Compare commits
3 Commits
script-yam
...
fix-action
| Author | SHA1 | Date | |
|---|---|---|---|
|
42f720496b | ||
|
|
c64d88d8b5 | ||
|
|
3030b8d476 |
@@ -6,9 +6,9 @@ import {
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
internalProperty,
|
||||
LitElement,
|
||||
property,
|
||||
internalProperty,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
@@ -48,12 +48,12 @@ class HaInputNumberForm extends LitElement {
|
||||
this._max = item.max ?? 100;
|
||||
this._min = item.min ?? 0;
|
||||
this._mode = item.mode || "slider";
|
||||
this._step = item.step || 1;
|
||||
this._step = item.step ?? 1;
|
||||
this._unit_of_measurement = item.unit_of_measurement;
|
||||
} else {
|
||||
this._item = {
|
||||
min: 0,
|
||||
max: 0,
|
||||
max: 100,
|
||||
};
|
||||
this._name = "";
|
||||
this._icon = "";
|
||||
@@ -176,8 +176,10 @@ class HaInputNumberForm extends LitElement {
|
||||
return;
|
||||
}
|
||||
ev.stopPropagation();
|
||||
const configValue = (ev.target as any).configValue;
|
||||
const value = ev.detail.value;
|
||||
const target = ev.target as any;
|
||||
const configValue = target.configValue;
|
||||
const value =
|
||||
target.type === "number" ? Number(ev.detail.value) : ev.detail.value;
|
||||
if (this[`_${configValue}`] === value) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
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,
|
||||
@@ -41,7 +38,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, mdiDotsVertical } from "@mdi/js";
|
||||
import { mdiContentSave } from "@mdi/js";
|
||||
import { PaperListboxElement } from "@polymer/paper-listbox";
|
||||
import { slugify } from "../../../common/string/slugify";
|
||||
|
||||
@@ -66,8 +63,6 @@ export class HaScriptEditor extends LitElement {
|
||||
|
||||
@internalProperty() private _errors?: string;
|
||||
|
||||
@internalProperty() private _yamlMode = false;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<hass-tabs-subpage
|
||||
@@ -77,46 +72,19 @@ 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`
|
||||
<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.scriptEntityId
|
||||
? ""
|
||||
: html`
|
||||
<ha-icon-button
|
||||
class="warning"
|
||||
slot="toolbar-icon"
|
||||
title="${this.hass.localize(
|
||||
"ui.panel.config.script.editor.delete_script"
|
||||
)}"
|
||||
icon="hass:delete"
|
||||
@click=${this._deleteConfirm}
|
||||
></ha-icon-button>
|
||||
`}
|
||||
${this.narrow
|
||||
? html` <span slot="header">${this._config?.alias}</span> `
|
||||
: ""}
|
||||
@@ -130,195 +98,151 @@ 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>
|
||||
`
|
||||
: ""}
|
||||
<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}
|
||||
>
|
||||
${MODES.map(
|
||||
(mode) => html`
|
||||
<paper-item .mode=${mode}>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.script.editor.modes.${mode}`
|
||||
) || mode}
|
||||
</paper-item>
|
||||
`
|
||||
? html`
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
${!this.narrow
|
||||
? 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"
|
||||
)}
|
||||
</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">
|
||||
.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.sequence_sentence"
|
||||
"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>
|
||||
<a
|
||||
href="https://home-assistant.io/docs/scripts/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.script.editor.link_available_actions"
|
||||
<paper-dropdown-menu-light
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.script.editor.modes.label"
|
||||
)}
|
||||
</a>
|
||||
</span>
|
||||
<ha-automation-action
|
||||
.actions=${this._config.sequence}
|
||||
@value-changed=${this._sequenceChanged}
|
||||
.hass=${this.hass}
|
||||
></ha-automation-action>
|
||||
</ha-config-section>
|
||||
`
|
||||
no-animations
|
||||
>
|
||||
<paper-listbox
|
||||
slot="dropdown-content"
|
||||
.selected=${this._config.mode
|
||||
? MODES.indexOf(this._config.mode)
|
||||
: 0}
|
||||
@iron-select=${this._modeChanged}
|
||||
>
|
||||
${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>
|
||||
${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>
|
||||
@@ -395,7 +319,7 @@ export class HaScriptEditor extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
private async _runScript(ev: Event) {
|
||||
private async _runScript(ev) {
|
||||
ev.stopPropagation();
|
||||
await triggerScript(this.hass, this.scriptEntityId);
|
||||
showToast(this, {
|
||||
@@ -407,21 +331,6 @@ 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;
|
||||
@@ -461,15 +370,6 @@ 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;
|
||||
|
||||
@@ -23,13 +23,13 @@ import { EditorTarget } from "../editor/types";
|
||||
|
||||
@customElement("hui-action-editor")
|
||||
export class HuiActionEditor extends LitElement {
|
||||
@property() public config?: ActionConfig;
|
||||
@property({ attribute: false }) public config?: ActionConfig;
|
||||
|
||||
@property() public label?: string;
|
||||
@property({ attribute: false }) public label?: string;
|
||||
|
||||
@property() public actions?: string[];
|
||||
@property({ attribute: false }) public actions?: string[];
|
||||
|
||||
@property() protected hass?: HomeAssistant;
|
||||
@property({ attribute: false }) protected hass?: HomeAssistant;
|
||||
|
||||
get _action(): string {
|
||||
return this.config?.action || "";
|
||||
@@ -55,17 +55,19 @@ export class HuiActionEditor extends LitElement {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<paper-dropdown-menu
|
||||
.label="${this.label}"
|
||||
.configValue="${"action"}"
|
||||
@value-changed="${this._valueChanged}"
|
||||
>
|
||||
<paper-dropdown-menu .label=${this.label}>
|
||||
<paper-listbox
|
||||
slot="dropdown-content"
|
||||
.selected="${this.actions.indexOf(this._action)}"
|
||||
attr-for-selected="item-value"
|
||||
.configValue=${"action"}
|
||||
.selected=${this._action}
|
||||
@iron-select=${this._valueChanged}
|
||||
>
|
||||
<paper-item></paper-item>
|
||||
${this.actions.map((action) => {
|
||||
return html` <paper-item>${action}</paper-item> `;
|
||||
return html`
|
||||
<paper-item .itemValue=${action}>${action}</paper-item>
|
||||
`;
|
||||
})}
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
@@ -73,9 +75,9 @@ export class HuiActionEditor extends LitElement {
|
||||
? html`
|
||||
<paper-input
|
||||
label="Navigation Path"
|
||||
.value="${this._navigation_path}"
|
||||
.configValue="${"navigation_path"}"
|
||||
@value-changed="${this._valueChanged}"
|
||||
.value=${this._navigation_path}
|
||||
.configValue=${"navigation_path"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></paper-input>
|
||||
`
|
||||
: ""}
|
||||
@@ -83,9 +85,9 @@ export class HuiActionEditor extends LitElement {
|
||||
? html`
|
||||
<paper-input
|
||||
label="Url Path"
|
||||
.value="${this._url_path}"
|
||||
.configValue="${"url_path"}"
|
||||
@value-changed="${this._valueChanged}"
|
||||
.value=${this._url_path}
|
||||
.configValue=${"url_path"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></paper-input>
|
||||
`
|
||||
: ""}
|
||||
@@ -93,9 +95,9 @@ export class HuiActionEditor extends LitElement {
|
||||
? html`
|
||||
<ha-service-picker
|
||||
.hass=${this.hass}
|
||||
.value="${this._service}"
|
||||
.configValue="${"service"}"
|
||||
@value-changed="${this._valueChanged}"
|
||||
.value=${this._service}
|
||||
.configValue=${"service"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-service-picker>
|
||||
<b>Service data can only be entered in the code editor</b>
|
||||
`
|
||||
@@ -103,20 +105,26 @@ export class HuiActionEditor extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private _valueChanged(ev: Event): void {
|
||||
private _valueChanged(ev: CustomEvent): void {
|
||||
ev.stopPropagation();
|
||||
if (!this.hass) {
|
||||
if (!this.hass || !ev.detail.item?.itemValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = ev.target! as EditorTarget;
|
||||
if (this[`_${target.configValue}`] === target.value) {
|
||||
|
||||
if (this[`_${target.configValue}`] === ev.detail.item.itemValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (target.configValue) {
|
||||
const newConfig =
|
||||
target.configValue === "action"
|
||||
? { action: target.value }
|
||||
: { ...this.config!, [target.configValue!]: target.value };
|
||||
? { action: ev.detail.item.itemValue }
|
||||
: {
|
||||
...this.config!,
|
||||
[target.configValue!]: ev.detail.item.itemValue,
|
||||
};
|
||||
fireEvent(this, "value-changed", { value: newConfig });
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user