diff --git a/src/data/zwave_js.ts b/src/data/zwave_js.ts index c6a84e75bd..eb54cd7147 100644 --- a/src/data/zwave_js.ts +++ b/src/data/zwave_js.ts @@ -167,6 +167,9 @@ export interface ZwaveJSNodeMetadata { wakeup: string; reset: string; device_database_url: string; +} + +export interface ZwaveJSNodeComments { comments: ZWaveJSNodeComment[]; } @@ -442,6 +445,15 @@ export const fetchZwaveNodeMetadata = ( device_id, }); +export const fetchZwaveNodeComments = ( + hass: HomeAssistant, + device_id: string +): Promise => + hass.callWS({ + type: "zwave_js/node_comments", + device_id, + }); + export const fetchZwaveNodeConfigParameters = ( hass: HomeAssistant, device_id: string diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-alerts-zwave_js.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-alerts-zwave_js.ts new file mode 100644 index 0000000000..f99683a9c9 --- /dev/null +++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-alerts-zwave_js.ts @@ -0,0 +1,52 @@ +import { html, LitElement, PropertyValues, TemplateResult } from "lit"; +import { customElement, property, state } from "lit/decorators"; +import { DeviceRegistryEntry } from "../../../../../../data/device_registry"; +import { + ZwaveJSNodeComments, + fetchZwaveNodeComments, +} from "../../../../../../data/zwave_js"; +import { HomeAssistant } from "../../../../../../types"; + +@customElement("ha-device-alerts-zwave_js") +export class HaDeviceAlertsZWaveJS extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public device!: DeviceRegistryEntry; + + @state() private _nodeComments?: ZwaveJSNodeComments; + + protected willUpdate(changedProperties: PropertyValues) { + super.willUpdate(changedProperties); + if (changedProperties.has("device")) { + this._fetchNodeDetails(); + } + } + + private async _fetchNodeDetails() { + this._nodeComments = await fetchZwaveNodeComments( + this.hass, + this.device.id + ); + } + + protected render(): TemplateResult { + if (this._nodeComments && this._nodeComments.comments?.length > 0) { + return html` +
+ ${this._nodeComments.comments.map( + (comment) => html` + ${comment.text} + ` + )} +
+ `; + } + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-device-alerts-zwave_js": HaDeviceAlertsZWaveJS; + } +} diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index af8840f508..7cfd800583 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -389,6 +389,7 @@ export class HaConfigDevicePage extends LitElement { : device.configuration_url; const deviceInfo: TemplateResult[] = []; + const deviceAlerts: TemplateResult[] = []; if (device.disabled_by) { deviceInfo.push( @@ -445,7 +446,8 @@ export class HaConfigDevicePage extends LitElement { device, integrations, deviceInfo, - deviceActions + deviceActions, + deviceAlerts ); if (Array.isArray(this._diagnosticDownloadLinks)) { @@ -547,6 +549,11 @@ export class HaConfigDevicePage extends LitElement {
+ ${ + deviceAlerts.length + ? html`
${deviceAlerts}
` + : "" + } int.domain); if (domains.includes("mqtt")) { @@ -959,12 +967,21 @@ export class HaConfigDevicePage extends LitElement { `); } if (domains.includes("zwave_js")) { + import( + "./device-detail/integration-elements/zwave_js/ha-device-alerts-zwave_js" + ); import( "./device-detail/integration-elements/zwave_js/ha-device-info-zwave_js" ); import( "./device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js" ); + deviceAlerts.push(html` + + `); deviceInfo.push(html`

- ${this._nodeMetadata.comments?.length > 0 - ? html` -
- ${this._nodeMetadata.comments.map( - (comment) => html` - ${comment.text} - ` - )} -
- ` - : ``} ${Object.entries(this._config).map( ([id, item]) => html`