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") @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 });
} }
} }