- ${this._errors
- ? html`
${this._errors}
`
- : ""}
+ ${this._errors ? html`
${this._errors}
` : ""}
${this._mode === "gui"
? html`
-
-
-
-
- ${!this.scriptEntityId
- ? html`
- `
- : ""}
- ${"use_blueprint" in this._config
- ? ""
- : 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`
@@ -328,47 +335,51 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
${"use_blueprint" in this._config
- ? html``
- : html`
-
- ${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"
- )}
-
-
-
- `}
+ .narrow=${this.narrow}
+ .isWide=${this.isWide}
+ .config=${this._config}
+ @value-changed=${this._configChanged}
+ >
+ `
+ : html`
+
+
+ ${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"
+ )}
+
+
+
+
+ `}
`
: ""}
@@ -495,7 +506,50 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
}
}
- private async _runScript(ev) {
+ private _computeLabelCallback = (
+ schema: HaFormSelector,
+ data: HaFormDataContainer
+ ): string => {
+ switch (schema.name) {
+ case "mode":
+ return this.hass.localize("ui.panel.config.script.editor.modes.label");
+ case "max":
+ return this.hass.localize(
+ `ui.panel.config.script.editor.max.${data.mode}`
+ );
+ default:
+ return this.hass.localize(
+ `ui.panel.config.script.editor.${schema.name}`
+ );
+ }
+ };
+
+ private _computeHelperCallback = (
+ schema: HaFormSelector
+ ): string | undefined => {
+ if (schema.name === "mode") {
+ return this.hass.localize(
+ "ui.panel.config.script.editor.modes.description",
+ "documentation_link",
+ html`
+
${this.hass.localize(
+ "ui.panel.config.script.editor.modes.documentation"
+ )}
+ `
+ );
+ }
+ return undefined;
+ };
+
+ private async _runScript(ev: CustomEvent) {
ev.stopPropagation();
await triggerScript(this.hass, this.scriptEntityId as string);
showToast(this, {
@@ -507,14 +561,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
});
}
- private _modeChanged(ev: CustomEvent) {
- const mode = ((ev.target as PaperListboxElement)?.selectedItem as any)
- ?.mode;
-
- if (mode === this._config!.mode) {
- return;
- }
-
+ private _modeChanged(mode) {
this._config = { ...this._config!, mode };
if (!MODES_MAX.includes(mode)) {
delete this._config.max;
@@ -522,23 +569,23 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
this._dirty = true;
}
- private _aliasChanged(ev: CustomEvent) {
+ private _aliasChanged(alias: string) {
if (this.scriptEntityId || this._entityId) {
return;
}
- const aliasSlugify = slugify((ev.target as any).value);
+ const aliasSlugify = slugify(alias);
let id = aliasSlugify;
let i = 2;
while (this.hass.states[`script.${id}`]) {
id = `${aliasSlugify}_${i}`;
i++;
}
+
this._entityId = id;
}
- private _idChanged(ev: CustomEvent) {
- ev.stopPropagation();
- this._entityId = (ev.target as any).value;
+ private _idChanged(id: string) {
+ this._entityId = id;
if (this.hass.states[`script.${this._entityId}`]) {
this._idError = true;
} else {
@@ -548,24 +595,39 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
private _valueChanged(ev: CustomEvent) {
ev.stopPropagation();
- const target = ev.target as any;
- const name = target.name;
- if (!name) {
- return;
- }
- let newVal = ev.detail.value;
- if (target.type === "number") {
- newVal = Number(newVal);
- }
- if ((this._config![name] || "") === newVal) {
- return;
- }
- if (!newVal) {
- delete this._config![name];
- this._config = { ...this._config! };
- } else {
- this._config = { ...this._config!, [name]: newVal };
+ const values = ev.detail.value as any;
+
+ for (const key of Object.keys(values)) {
+ if (key === "sequence") {
+ continue;
+ }
+
+ const value = values[key];
+
+ if (value === this._config![key]) {
+ continue;
+ }
+
+ switch (key) {
+ case "id":
+ this._idChanged(value);
+ return;
+ case "alias":
+ this._aliasChanged(value);
+ break;
+ case "mode":
+ this._modeChanged(value);
+ return;
+ }
+
+ if (values[key] === undefined) {
+ delete this._config![key];
+ this._config = { ...this._config! };
+ } else {
+ this._config = { ...this._config!, [key]: value };
+ }
}
+
this._dirty = true;
}
@@ -575,7 +637,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
}
private _sequenceChanged(ev: CustomEvent): void {
- this._config = { ...this._config!, sequence: ev.detail.value as Action[] };
+ this._config = {
+ ...this._config!,
+ sequence: ev.detail.value as Action[],
+ };
this._errors = undefined;
this._dirty = true;
}