this kind of works :)

This commit is contained in:
Zack Arnett 2020-09-14 15:06:34 -05:00
parent c64d88d8b5
commit 42f720496b

View File

@ -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,18 +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>
@ -74,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>
`
: ""}
@ -84,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>
`
: ""}
@ -94,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>
`
@ -104,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 });
}
}