mirror of
https://github.com/home-assistant/frontend.git
synced 2025-11-16 14:30:36 +00:00
Allow to set an id and icon when creating new script (#6373)
Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
This commit is contained in:
@@ -10,12 +10,14 @@ import {
|
||||
property,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
internalProperty,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
import { computeObjectId } from "../../../common/entity/compute_object_id";
|
||||
import { navigate } from "../../../common/navigate";
|
||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-icon-input";
|
||||
import "@material/mwc-fab";
|
||||
import {
|
||||
Action,
|
||||
@@ -36,6 +38,7 @@ import { configSections } from "../ha-panel-config";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { mdiContentSave } from "@mdi/js";
|
||||
import { PaperListboxElement } from "@polymer/paper-listbox";
|
||||
import { slugify } from "../../../common/string/slugify";
|
||||
|
||||
export class HaScriptEditor extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
@@ -48,11 +51,15 @@ export class HaScriptEditor extends LitElement {
|
||||
|
||||
@property() public narrow!: boolean;
|
||||
|
||||
@property() private _config?: ScriptConfig;
|
||||
@internalProperty() private _config?: ScriptConfig;
|
||||
|
||||
@property() private _dirty?: boolean;
|
||||
@internalProperty() private _entityId?: string;
|
||||
|
||||
@property() private _errors?: string;
|
||||
@internalProperty() private _idError = false;
|
||||
|
||||
@internalProperty() private _dirty?: boolean;
|
||||
|
||||
@internalProperty() private _errors?: string;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
@@ -107,9 +114,32 @@ export class HaScriptEditor extends LitElement {
|
||||
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",
|
||||
@@ -283,6 +313,30 @@ export class HaScriptEditor extends LitElement {
|
||||
this._dirty = true;
|
||||
}
|
||||
|
||||
private _aliasChanged(ev: CustomEvent) {
|
||||
if (this.scriptEntityId || this._entityId) {
|
||||
return;
|
||||
}
|
||||
const aliasSlugify = slugify((ev.target as any).value, "_");
|
||||
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;
|
||||
if (this.hass.states[`script.${this._entityId}`]) {
|
||||
this._idError = true;
|
||||
} else {
|
||||
this._idError = false;
|
||||
}
|
||||
}
|
||||
|
||||
private _valueChanged(ev: CustomEvent) {
|
||||
ev.stopPropagation();
|
||||
const target = ev.target as any;
|
||||
@@ -337,9 +391,15 @@ export class HaScriptEditor extends LitElement {
|
||||
}
|
||||
|
||||
private _saveScript(): void {
|
||||
if (this._idError) {
|
||||
this._errors = this.hass.localize(
|
||||
"ui.panel.config.script.editor.id_already_exists_save_error"
|
||||
);
|
||||
return;
|
||||
}
|
||||
const id = this.scriptEntityId
|
||||
? computeObjectId(this.scriptEntityId)
|
||||
: Date.now();
|
||||
: this._entityId || Date.now();
|
||||
this.hass!.callApi("POST", "config/script/config/" + id, this._config).then(
|
||||
() => {
|
||||
this._dirty = false;
|
||||
|
||||
Reference in New Issue
Block a user