mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 01:36:49 +00:00
ZHA device info dialog (#3529)
* zha device info dialog * cleanup * quick hack to make this work * remove hack * add mixin for zha device info dialog * fix potential exception * cleanup * review comments * lint * remove unused import * lint * review coments * review comments * translations and css
This commit is contained in:
parent
c4fca84ded
commit
164e433592
@ -80,6 +80,15 @@ export const fetchDevices = (hass: HomeAssistant): Promise<ZHADevice[]> =>
|
||||
type: "zha/devices",
|
||||
});
|
||||
|
||||
export const fetchZHADevice = (
|
||||
hass: HomeAssistant,
|
||||
ieeeAddress: string
|
||||
): Promise<ZHADevice> =>
|
||||
hass.callWS({
|
||||
type: "zha/device",
|
||||
ieee: ieeeAddress,
|
||||
});
|
||||
|
||||
export const fetchBindableDevices = (
|
||||
hass: HomeAssistant,
|
||||
ieeeAddress: string
|
||||
|
115
src/dialogs/zha-device-info-dialog/dialog-zha-device-info.ts
Normal file
115
src/dialogs/zha-device-info-dialog/dialog-zha-device-info.ts
Normal file
@ -0,0 +1,115 @@
|
||||
import {
|
||||
LitElement,
|
||||
html,
|
||||
css,
|
||||
CSSResult,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
property,
|
||||
} from "lit-element";
|
||||
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
|
||||
import "../../components/dialog/ha-paper-dialog";
|
||||
// Not duplicate, is for typing
|
||||
// tslint:disable-next-line
|
||||
import { HaPaperDialog } from "../../components/dialog/ha-paper-dialog";
|
||||
import "../../panels/config/zha/zha-device-card";
|
||||
|
||||
import { PolymerChangedEvent } from "../../polymer-types";
|
||||
import { haStyleDialog } from "../../resources/styles";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { ZHADeviceInfoDialogParams } from "./show-dialog-zha-device-info";
|
||||
import { ZHADevice, fetchZHADevice } from "../../data/zha";
|
||||
|
||||
@customElement("dialog-zha-device-info")
|
||||
class DialogZHADeviceInfo extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
@property() private _params?: ZHADeviceInfoDialogParams;
|
||||
@property() private _error?: string;
|
||||
@property() private _device?: ZHADevice;
|
||||
|
||||
public async showDialog(params: ZHADeviceInfoDialogParams): Promise<void> {
|
||||
this._params = params;
|
||||
this._device = await fetchZHADevice(this.hass, params.ieee);
|
||||
await this.updateComplete;
|
||||
this._dialog.open();
|
||||
}
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
if (!this._params || !this._device) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-paper-dialog
|
||||
with-backdrop
|
||||
opened
|
||||
@opened-changed=${this._openedChanged}
|
||||
>
|
||||
${this._error
|
||||
? html`
|
||||
<div class="error">${this._error}</div>
|
||||
`
|
||||
: html`
|
||||
<zha-device-card
|
||||
class="card"
|
||||
.hass=${this.hass}
|
||||
.device=${this._device}
|
||||
showActions
|
||||
isJoinPage
|
||||
@zha-device-removed=${this._onDeviceRemoved}
|
||||
></zha-device-card>
|
||||
`}
|
||||
</ha-paper-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
|
||||
if (!ev.detail.value) {
|
||||
this._params = undefined;
|
||||
this._error = undefined;
|
||||
this._device = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
private _onDeviceRemoved(): void {
|
||||
this._closeDialog();
|
||||
}
|
||||
|
||||
private get _dialog(): HaPaperDialog {
|
||||
return this.shadowRoot!.querySelector("ha-paper-dialog")!;
|
||||
}
|
||||
|
||||
private _closeDialog() {
|
||||
this._dialog.close();
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
haStyleDialog,
|
||||
css`
|
||||
ha-paper-dialog > * {
|
||||
margin: 0;
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 1 0 300px;
|
||||
min-width: 0;
|
||||
max-width: 600px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.error {
|
||||
color: var(--google-red-500);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"dialog-zha-device-info": DialogZHADeviceInfo;
|
||||
}
|
||||
}
|
@ -0,0 +1,19 @@
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
|
||||
export interface ZHADeviceInfoDialogParams {
|
||||
ieee: string;
|
||||
}
|
||||
|
||||
export const loadZHADeviceInfoDialog = () =>
|
||||
import(/* webpackChunkName: "dialog-zha-device-info" */ "./dialog-zha-device-info");
|
||||
|
||||
export const showZHADeviceInfoDialog = (
|
||||
element: HTMLElement,
|
||||
zhaDeviceInfoParams: ZHADeviceInfoDialogParams
|
||||
): void => {
|
||||
fireEvent(element, "show-dialog", {
|
||||
dialogTag: "dialog-zha-device-info",
|
||||
dialogImport: loadZHADeviceInfoDialog,
|
||||
dialogParams: zhaDeviceInfoParams,
|
||||
});
|
||||
};
|
@ -113,12 +113,12 @@ class ZHAAddDevicesPage extends LitElement {
|
||||
(device) => html`
|
||||
<zha-device-card
|
||||
class="card"
|
||||
.hass="${this.hass}"
|
||||
.device="${device}"
|
||||
.narrow="${!this.isWide}"
|
||||
.showHelp="${this._showHelp}"
|
||||
.showActions="${!this._active}"
|
||||
.isJoinPage="${true}"
|
||||
.hass=${this.hass}
|
||||
.device=${device}
|
||||
.narrow=${!this.isWide}
|
||||
.showHelp=${this._showHelp}
|
||||
.showActions=${!this._active}
|
||||
isJoinPage
|
||||
></zha-device-card>
|
||||
`
|
||||
)}
|
||||
|
@ -55,11 +55,11 @@ declare global {
|
||||
@customElement("zha-device-card")
|
||||
class ZHADeviceCard extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
@property() public narrow?: boolean;
|
||||
@property() public device?: ZHADevice;
|
||||
@property() public showHelp: boolean = false;
|
||||
@property() public showActions?: boolean;
|
||||
@property() public isJoinPage?: boolean;
|
||||
@property({ type: Boolean }) public narrow?: boolean;
|
||||
@property({ type: Boolean }) public showHelp?: boolean = false;
|
||||
@property({ type: Boolean }) public showActions?: boolean;
|
||||
@property({ type: Boolean }) public isJoinPage?: boolean;
|
||||
@property() private _serviceData?: NodeServiceData;
|
||||
@property() private _areas: AreaRegistryEntry[] = [];
|
||||
@property() private _selectedAreaIndex: number = -1;
|
||||
@ -139,7 +139,7 @@ class ZHADeviceCard extends LitElement {
|
||||
<div class="model">${this.device!.model}</div>
|
||||
<div class="manuf">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.integrations.config_entry.manuf",
|
||||
"ui.dialogs.zha_device_info.manuf",
|
||||
"manufacturer",
|
||||
this.device!.manufacturer
|
||||
)}
|
||||
@ -206,14 +206,14 @@ class ZHADeviceCard extends LitElement {
|
||||
@change="${this._saveCustomName}"
|
||||
.value="${this._userGivenName}"
|
||||
placeholder="${this.hass!.localize(
|
||||
"ui.panel.config.zha.device_card.device_name_placeholder"
|
||||
"ui.dialogs.zha_device_info.zha_device_card.device_name_placeholder"
|
||||
)}"
|
||||
></paper-input>
|
||||
</div>
|
||||
<div class="node-picker">
|
||||
<paper-dropdown-menu
|
||||
label="${this.hass!.localize(
|
||||
"ui.panel.config.zha.device_card.area_picker_label"
|
||||
"ui.dialogs.zha_device_info.zha_device_card.area_picker_label"
|
||||
)}"
|
||||
class="flex"
|
||||
>
|
||||
@ -223,9 +223,7 @@ class ZHADeviceCard extends LitElement {
|
||||
@iron-select="${this._selectedAreaChanged}"
|
||||
>
|
||||
<paper-item>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.integrations.config_entry.no_area"
|
||||
)}
|
||||
${this.hass!.localize("ui.dialogs.zha_device_info.no_area")}
|
||||
</paper-item>
|
||||
|
||||
${this._areas.map(
|
||||
@ -247,7 +245,7 @@ class ZHADeviceCard extends LitElement {
|
||||
? html`
|
||||
<div class="help-text">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.zha.services.reconfigure"
|
||||
"ui.dialogs.zha_device_info.services.reconfigure"
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
@ -264,7 +262,7 @@ class ZHADeviceCard extends LitElement {
|
||||
? html`
|
||||
<div class="help-text">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.config.zha.services.remove"
|
||||
"ui.dialogs.zha_device_info.services.remove"
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
@ -381,6 +379,7 @@ class ZHADeviceCard extends LitElement {
|
||||
}
|
||||
.device .manuf {
|
||||
color: var(--secondary-text-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.extra-info {
|
||||
margin-top: 8px;
|
||||
@ -393,14 +392,17 @@ class ZHADeviceCard extends LitElement {
|
||||
.info {
|
||||
margin-left: 16px;
|
||||
}
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: 125px 1fr;
|
||||
}
|
||||
dl dt {
|
||||
padding-left: 12px;
|
||||
float: left;
|
||||
width: 100px;
|
||||
text-align: left;
|
||||
}
|
||||
dt dd {
|
||||
text-align: left;
|
||||
dl dd {
|
||||
max-width: 200px;
|
||||
}
|
||||
paper-icon-item {
|
||||
cursor: pointer;
|
||||
|
@ -105,13 +105,12 @@ export class ZHANode extends LitElement {
|
||||
? html`
|
||||
<zha-device-card
|
||||
class="card"
|
||||
.hass="${this.hass}"
|
||||
.device="${this._selectedDevice}"
|
||||
.narrow="${!this.isWide}"
|
||||
.showHelp="${this._showHelp}"
|
||||
.showActions="${true}"
|
||||
@zha-device-removed="${this._onDeviceRemoved}"
|
||||
.isJoinPage="${false}"
|
||||
.hass=${this.hass}
|
||||
.device=${this._selectedDevice}
|
||||
.narrow=${!this.isWide}
|
||||
.showHelp=${this._showHelp}
|
||||
showActions
|
||||
@zha-device-removed=${this._onDeviceRemoved}
|
||||
></zha-device-card>
|
||||
`
|
||||
: ""}
|
||||
|
@ -3,6 +3,7 @@ import AuthMixin from "./auth-mixin";
|
||||
import TranslationsMixin from "./translations-mixin";
|
||||
import ThemesMixin from "./themes-mixin";
|
||||
import MoreInfoMixin from "./more-info-mixin";
|
||||
import ZHADialogMixin from "./zha-dialog-mixin";
|
||||
import SidebarMixin from "./sidebar-mixin";
|
||||
import { dialogManagerMixin } from "./dialog-manager-mixin";
|
||||
import { connectionMixin } from "./connection-mixin";
|
||||
@ -25,4 +26,5 @@ export class HassElement extends ext(HassBaseMixin(LitElement), [
|
||||
NotificationMixin,
|
||||
dialogManagerMixin,
|
||||
urlSyncMixin,
|
||||
ZHADialogMixin,
|
||||
]) {}
|
||||
|
29
src/state/zha-dialog-mixin.ts
Normal file
29
src/state/zha-dialog-mixin.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { Constructor, LitElement } from "lit-element";
|
||||
import { HassBaseEl } from "./hass-base-mixin";
|
||||
import {
|
||||
showZHADeviceInfoDialog,
|
||||
ZHADeviceInfoDialogParams,
|
||||
} from "../dialogs/zha-device-info-dialog/show-dialog-zha-device-info";
|
||||
import { HASSDomEvent } from "../common/dom/fire_event";
|
||||
|
||||
declare global {
|
||||
// for fire event
|
||||
interface HASSDomEvents {
|
||||
"zha-show-device-dialog": {
|
||||
ieee: string;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default (superClass: Constructor<LitElement & HassBaseEl>) =>
|
||||
class extends superClass {
|
||||
protected firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
this.addEventListener("zha-show-device-dialog", (e) =>
|
||||
showZHADeviceInfoDialog(
|
||||
e.target as HTMLElement,
|
||||
(e as HASSDomEvent<ZHADeviceInfoDialogParams>).detail
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
@ -554,6 +554,20 @@
|
||||
"title": "System Options",
|
||||
"enable_new_entities_label": "Enable newly added entities.",
|
||||
"enable_new_entities_description": "If disabled, newly discovered entities will not be automatically added to Home Assistant."
|
||||
},
|
||||
"zha_device_info": {
|
||||
"manuf": "by {manufacturer}",
|
||||
"no_area": "No Area",
|
||||
"services": {
|
||||
"reconfigure": "Reconfigure ZHA device (heal device). Use this if you are having issues with the device. If the device in question is a battery powered device please ensure it is awake and accepting commands when you use this service.",
|
||||
"updateDeviceName": "Set a custom name for this device in the device registry.",
|
||||
"remove": "Remove a device from the ZigBee network."
|
||||
},
|
||||
"zha_device_card": {
|
||||
"device_name_placeholder": "User given name",
|
||||
"area_picker_label": "Area",
|
||||
"update_name_button": "Update Name"
|
||||
}
|
||||
}
|
||||
},
|
||||
"duration": {
|
||||
@ -942,16 +956,6 @@
|
||||
"zha": {
|
||||
"caption": "ZHA",
|
||||
"description": "Zigbee Home Automation network management",
|
||||
"services": {
|
||||
"reconfigure": "Reconfigure ZHA device (heal device). Use this if you are having issues with the device. If the device in question is a battery powered device please ensure it is awake and accepting commands when you use this service.",
|
||||
"updateDeviceName": "Set a custom name for this device in the device registry.",
|
||||
"remove": "Remove a device from the ZigBee network."
|
||||
},
|
||||
"device_card": {
|
||||
"device_name_placeholder": "User given name",
|
||||
"area_picker_label": "Area",
|
||||
"update_name_button": "Update Name"
|
||||
},
|
||||
"add_device_page": {
|
||||
"header": "Zigbee Home Automation - Add Devices",
|
||||
"spinner": "Searching for ZHA Zigbee devices...",
|
||||
|
Loading…
x
Reference in New Issue
Block a user