mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-01 21:47:46 +00:00
this kind of works :)
This commit is contained in:
parent
c64d88d8b5
commit
42f720496b
@ -23,13 +23,13 @@ import { EditorTarget } from "../editor/types";
|
|||||||
|
|
||||||
@customElement("hui-action-editor")
|
@customElement("hui-action-editor")
|
||||||
export class HuiActionEditor extends LitElement {
|
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 {
|
get _action(): string {
|
||||||
return this.config?.action || "";
|
return this.config?.action || "";
|
||||||
@ -55,18 +55,19 @@ export class HuiActionEditor extends LitElement {
|
|||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
return html`
|
return html`
|
||||||
<paper-dropdown-menu
|
<paper-dropdown-menu .label=${this.label}>
|
||||||
.label="${this.label}"
|
|
||||||
.configValue="${"action"}"
|
|
||||||
@value-changed="${this._valueChanged}"
|
|
||||||
>
|
|
||||||
<paper-listbox
|
<paper-listbox
|
||||||
slot="dropdown-content"
|
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>
|
<paper-item></paper-item>
|
||||||
${this.actions.map((action) => {
|
${this.actions.map((action) => {
|
||||||
return html`<paper-item>${action}</paper-item>`;
|
return html`
|
||||||
|
<paper-item .itemValue=${action}>${action}</paper-item>
|
||||||
|
`;
|
||||||
})}
|
})}
|
||||||
</paper-listbox>
|
</paper-listbox>
|
||||||
</paper-dropdown-menu>
|
</paper-dropdown-menu>
|
||||||
@ -74,9 +75,9 @@ export class HuiActionEditor extends LitElement {
|
|||||||
? html`
|
? html`
|
||||||
<paper-input
|
<paper-input
|
||||||
label="Navigation Path"
|
label="Navigation Path"
|
||||||
.value="${this._navigation_path}"
|
.value=${this._navigation_path}
|
||||||
.configValue="${"navigation_path"}"
|
.configValue=${"navigation_path"}
|
||||||
@value-changed="${this._valueChanged}"
|
@value-changed=${this._valueChanged}
|
||||||
></paper-input>
|
></paper-input>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
@ -84,9 +85,9 @@ export class HuiActionEditor extends LitElement {
|
|||||||
? html`
|
? html`
|
||||||
<paper-input
|
<paper-input
|
||||||
label="Url Path"
|
label="Url Path"
|
||||||
.value="${this._url_path}"
|
.value=${this._url_path}
|
||||||
.configValue="${"url_path"}"
|
.configValue=${"url_path"}
|
||||||
@value-changed="${this._valueChanged}"
|
@value-changed=${this._valueChanged}
|
||||||
></paper-input>
|
></paper-input>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
@ -94,9 +95,9 @@ export class HuiActionEditor extends LitElement {
|
|||||||
? html`
|
? html`
|
||||||
<ha-service-picker
|
<ha-service-picker
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.value="${this._service}"
|
.value=${this._service}
|
||||||
.configValue="${"service"}"
|
.configValue=${"service"}
|
||||||
@value-changed="${this._valueChanged}"
|
@value-changed=${this._valueChanged}
|
||||||
></ha-service-picker>
|
></ha-service-picker>
|
||||||
<b>Service data can only be entered in the code editor</b>
|
<b>Service data can only be entered in the code editor</b>
|
||||||
`
|
`
|
||||||
@ -104,20 +105,26 @@ export class HuiActionEditor extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _valueChanged(ev: Event): void {
|
private _valueChanged(ev: CustomEvent): void {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
if (!this.hass) {
|
if (!this.hass || !ev.detail.item?.itemValue) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const target = ev.target! as EditorTarget;
|
const target = ev.target! as EditorTarget;
|
||||||
if (this[`_${target.configValue}`] === target.value) {
|
|
||||||
|
if (this[`_${target.configValue}`] === ev.detail.item.itemValue) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (target.configValue) {
|
if (target.configValue) {
|
||||||
const newConfig =
|
const newConfig =
|
||||||
target.configValue === "action"
|
target.configValue === "action"
|
||||||
? { action: target.value }
|
? { action: ev.detail.item.itemValue }
|
||||||
: { ...this.config!, [target.configValue!]: target.value };
|
: {
|
||||||
|
...this.config!,
|
||||||
|
[target.configValue!]: ev.detail.item.itemValue,
|
||||||
|
};
|
||||||
fireEvent(this, "value-changed", { value: newConfig });
|
fireEvent(this, "value-changed", { value: newConfig });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user