Add Devices Picker (#12056)

This commit is contained in:
Zack Barett 2022-03-16 17:40:34 -05:00 committed by GitHub
parent 9908162ac2
commit 73ff8e28a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 18 deletions

View File

@ -184,6 +184,7 @@ const SCHEMAS: {
name: "Multiples", name: "Multiples",
input: { input: {
entity: { name: "Entity", selector: { entity: { multiple: true } } }, entity: { name: "Entity", selector: { entity: { multiple: true } } },
device: { name: "Device", selector: { device: { multiple: true } } },
}, },
}, },
]; ];

View File

@ -1,4 +1,4 @@
import { html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { PolymerChangedEvent } from "../../polymer-types"; import { PolymerChangedEvent } from "../../polymer-types";
@ -116,6 +116,12 @@ class HaDevicesPicker extends LitElement {
this._updateDevices([...currentDevices, toAdd]); this._updateDevices([...currentDevices, toAdd]);
} }
static override styles = css`
div {
margin-top: 8px;
}
`;
} }
declare global { declare global {

View File

@ -1,10 +1,11 @@
import { html, LitElement } from "lit"; import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { ConfigEntry, getConfigEntries } from "../../data/config_entries"; import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
import { DeviceRegistryEntry } from "../../data/device_registry"; import type { DeviceRegistryEntry } from "../../data/device_registry";
import { DeviceSelector } from "../../data/selector"; import type { DeviceSelector } from "../../data/selector";
import { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import "../device/ha-device-picker"; import "../device/ha-device-picker";
import "../device/ha-devices-picker";
@customElement("ha-selector-device") @customElement("ha-selector-device")
export class HaDeviceSelector extends LitElement { export class HaDeviceSelector extends LitElement {
@ -30,20 +31,36 @@ export class HaDeviceSelector extends LitElement {
} }
protected render() { protected render() {
return html`<ha-device-picker if (!this.selector.device.multiple) {
.hass=${this.hass} return html`<ha-device-picker
.value=${this.value} .hass=${this.hass}
.label=${this.label} .value=${this.value}
.deviceFilter=${this._filterDevices} .label=${this.label}
.includeDeviceClasses=${this.selector.device.entity?.device_class .deviceFilter=${this._filterDevices}
? [this.selector.device.entity.device_class] .includeDeviceClasses=${this.selector.device.entity?.device_class
: undefined} ? [this.selector.device.entity.device_class]
.includeDomains=${this.selector.device.entity?.domain : undefined}
? [this.selector.device.entity.domain] .includeDomains=${this.selector.device.entity?.domain
: undefined} ? [this.selector.device.entity.domain]
.disabled=${this.disabled} : undefined}
allow-custom-entity .disabled=${this.disabled}
></ha-device-picker>`; allow-custom-entity
></ha-device-picker> `;
}
return html`
${this.label ? html`<label>${this.label}</label>` : ""}
<ha-devices-picker
.hass=${this.hass}
.value=${this.value}
.includeDeviceClasses=${this.selector.device.entity?.device_class
? [this.selector.device.entity.device_class]
: undefined}
.includeDomains=${this.selector.device.entity?.domain
? [this.selector.device.entity.domain]
: undefined}
></ha-devices-picker>
`;
} }
private _filterDevices = (device: DeviceRegistryEntry): boolean => { private _filterDevices = (device: DeviceRegistryEntry): boolean => {

View File

@ -49,6 +49,7 @@ export interface DeviceSelector {
domain?: EntitySelector["entity"]["domain"]; domain?: EntitySelector["entity"]["domain"];
device_class?: EntitySelector["entity"]["device_class"]; device_class?: EntitySelector["entity"]["device_class"];
}; };
multiple?: boolean;
}; };
} }