Add ability to see Zigbee information for a device (#5445)

* add ability to see zigbee information for a device

* cleanup

* handle resize correctly

* cleanup

* convert to ha-dialog

* Simplify

* Add close button

* Add readonly to code editor

* add class

* eslint fixes

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
David F. Mulcahey 2020-04-15 09:36:48 -04:00 committed by GitHub
parent 1b9f224569
commit 8383caf6a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 128 additions and 3 deletions

View File

@ -20,7 +20,9 @@ export class HaCodeEditor extends UpdatingElement {
@property() public mode?: string;
@property() public autofocus = false;
@property({ type: Boolean }) public autofocus = false;
@property({ type: Boolean }) public readOnly = false;
@property() public rtl = false;
@ -128,6 +130,7 @@ export class HaCodeEditor extends UpdatingElement {
mode: this.mode,
autofocus: this.autofocus !== false,
viewportMargin: Infinity,
readOnly: this.readOnly,
extraKeys: {
Tab: "indentMore",
"Shift-Tab": "indentLess",

View File

@ -23,6 +23,7 @@ export interface ZHADevice {
power_source?: string;
area_id?: string;
device_type: string;
signature: any;
}
export interface Attribute {

View File

@ -0,0 +1,70 @@
import {
CSSResult,
customElement,
html,
LitElement,
property,
TemplateResult,
} from "lit-element";
import "../../components/ha-code-editor";
import { createCloseHeading } from "../../components/ha-dialog";
import { haStyleDialog } from "../../resources/styles";
import { HomeAssistant } from "../../types";
import { ZHADeviceZigbeeInfoDialogParams } from "./show-dialog-zha-device-zigbee-info";
@customElement("dialog-zha-device-zigbee-info")
class DialogZHADeviceZigbeeInfo extends LitElement {
@property() public hass!: HomeAssistant;
@property() private _signature: any;
public async showDialog(
params: ZHADeviceZigbeeInfoDialogParams
): Promise<void> {
this._signature = JSON.stringify(
{
...params.device.signature,
manufacturer: params.device.manufacturer,
model: params.device.model,
class: params.device.quirk_class,
},
null,
2
);
}
protected render(): TemplateResult {
if (!this._signature) {
return html``;
}
return html`
<ha-dialog
open
hideActions
@closing="${this._close}"
.heading=${createCloseHeading(
this.hass,
this.hass.localize(`ui.dialogs.zha_device_info.device_signature`)
)}
>
<ha-code-editor mode="yaml" readonly .value=${this._signature}>
</ha-code-editor>
</ha-dialog>
`;
}
private _close(): void {
this._signature = undefined;
}
static get styles(): CSSResult {
return haStyleDialog;
}
}
declare global {
interface HTMLElementTagNameMap {
"dialog-zha-device-zigbee-info": DialogZHADeviceZigbeeInfo;
}
}

View File

@ -0,0 +1,22 @@
import { fireEvent } from "../../common/dom/fire_event";
import { ZHADevice } from "../../data/zha";
export interface ZHADeviceZigbeeInfoDialogParams {
device: ZHADevice;
}
export const loadZHADeviceZigbeeInfoDialog = () =>
import(
/* webpackChunkName: "dialog-zha-device-zigbee-info" */ "./dialog-zha-device-zigbee-info"
);
export const showZHADeviceZigbeeInfoDialog = (
element: HTMLElement,
zhaDeviceZigbeeInfoParams: ZHADeviceZigbeeInfoDialogParams
): void => {
fireEvent(element, "show-dialog", {
dialogTag: "dialog-zha-device-zigbee-info",
dialogImport: loadZHADeviceZigbeeInfoDialog,
dialogParams: zhaDeviceZigbeeInfoParams,
});
};

View File

@ -41,6 +41,7 @@ import { HomeAssistant } from "../../../types";
import { addEntitiesToLovelaceView } from "../../lovelace/editor/add-entities-to-view";
import { formatAsPaddedHex } from "./functions";
import { ItemSelectedEvent, NodeServiceData } from "./types";
import { showZHADeviceZigbeeInfoDialog } from "../../../dialogs/zha-device-zigbee-signature-dialog/show-dialog-zha-device-zigbee-info";
declare global {
// for fire event
@ -367,6 +368,24 @@ class ZHADeviceCard extends LitElement {
: ""}
`
: ""}
${this.device!.device_type !== "Coordinator"
? html`
<mwc-button @click=${this._handleZigbeeInfoClicked}>
${this.hass!.localize(
"ui.dialogs.zha_device_info.buttons.zigbee_information"
)}
</mwc-button>
${this.showHelp
? html`
<div class="help-text">
${this.hass!.localize(
"ui.dialogs.zha_device_info.services.zigbee_information"
)}
</div>
`
: ""}
`
: ""}
</div>
`
: ""
@ -437,6 +456,10 @@ class ZHADeviceCard extends LitElement {
navigate(this, "/config/zha/add/" + this.device!.ieee);
}
private async _handleZigbeeInfoClicked() {
showZHADeviceZigbeeInfoDialog(this, { device: this.device! });
}
private _addToLovelaceView(): void {
addEntitiesToLovelaceView(
this,
@ -528,6 +551,9 @@ class ZHADeviceCard extends LitElement {
padding-right: 28px;
padding-bottom: 10px;
}
.buttons .icon {
margin-right: 16px;
}
`,
];
}

View File

@ -719,15 +719,18 @@
"zha_device_info": {
"manuf": "by {manufacturer}",
"no_area": "No Area",
"device_signature": "Zigbee device signature",
"buttons": {
"add": "Add Devices",
"remove": "Remove Device",
"reconfigure": "Reconfigure Device"
"reconfigure": "Reconfigure Device",
"zigbee_information": "Zigbee Information"
},
"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."
"remove": "Remove a device from the Zigbee network.",
"zigbee_information": "View the Zigbee information for the device."
},
"confirmations": {
"remove": "Are you sure that you want to remove the device?"