diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts index 146c5b97a7..02e5444ac2 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts @@ -5,9 +5,11 @@ import { mdiNetwork, mdiPlus, mdiPencil, + mdiCheckCircle, + mdiAlertCircle, } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; -import { css, html, LitElement } from "lit"; +import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import type { ConfigEntry } from "../../../../../data/config_entries"; import { getConfigEntries } from "../../../../../data/config_entries"; @@ -25,6 +27,8 @@ import "../../../ha-config-section"; import "../../../../../components/ha-form/ha-form"; import "../../../../../components/buttons/ha-progress-button"; import "../../../../../components/ha-settings-row"; +import "../../../../../components/ha-svg-icon"; +import "../../../../../components/ha-alert"; import { showZHAChangeChannelDialog } from "./show-dialog-zha-change-channel"; import type { ZHAConfiguration, @@ -36,6 +40,7 @@ import { updateZHAConfiguration, fetchZHANetworkSettings, createZHANetworkBackup, + fetchDevices, } from "../../../../../data/zha"; import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box"; @@ -75,18 +80,27 @@ class ZHAConfigDashboard extends LitElement { @state() private _networkSettings?: ZHANetworkSettings; + @state() private _totalDevices = 0; + + @state() private _offlineDevices = 0; + + @state() private _error?: string; + @state() private _generatingBackup = false; - protected firstUpdated(changedProperties: PropertyValues): void { + protected firstUpdated(changedProperties: PropertyValues) { super.firstUpdated(changedProperties); if (this.hass) { this.hass.loadBackendTranslation("config_panel", "zha", false); this._fetchConfiguration(); this._fetchSettings(); + this._fetchDevicesAndUpdateStatus(); } } protected render(): TemplateResult { + const deviceOnline = + this._offlineDevices < this._totalDevices || this._totalDevices === 0; return html` - + + ${this._error + ? html`${this._error}` + : nothing} +
+
+
+ +
+
+ ZHA + ${this.hass.localize( + "ui.panel.config.zha.configuration_page.status_title" + )}: + ${this.hass.localize( + `ui.panel.config.zha.configuration_page.status_${deviceOnline ? "online" : "offline"}` + )}
+ + ${this.hass.localize( + "ui.panel.config.zha.configuration_page.devices", + { count: this._totalDevices } + )} + + + ${this._offlineDevices > 0 + ? html`(${this.hass.localize( + "ui.panel.config.zha.configuration_page.devices_offline", + { count: this._offlineDevices } + )})` + : nothing} + +
+
+
${this.configEntryId ? html`
{ + try { + const devices = await fetchDevices(this.hass); + this._totalDevices = devices.length; + this._offlineDevices = + this._totalDevices - devices.filter((d) => d.available).length; + } catch (err: any) { + this._error = err.message || err; + } + } + private async _showChannelMigrationDialog(): Promise { if (this._networkSettings!.device.path === MULTIPROTOCOL_ADDON_URL) { showAlertDialog(this, { @@ -388,6 +445,43 @@ class ZHAConfigDashboard extends LitElement { margin-top: -16px; margin-bottom: -16px; } + + .content { + margin-top: 24px; + } + + .network-status div.heading { + display: flex; + align-items: center; + } + + .network-status div.heading .icon { + margin-inline-end: 16px; + } + + .network-status div.heading ha-svg-icon { + --mdc-icon-size: 48px; + } + + .network-status div.heading .details { + font-size: var(--ha-font-size-xl); + } + + .network-status small { + font-size: var(--ha-font-size-m); + } + + .network-status small.offline { + color: var(--secondary-text-color); + } + + .network-status .online { + color: var(--state-on-color, var(--success-color)); + } + + .network-status .offline { + color: var(--error-color, var(--error-color)); + } `, ]; } diff --git a/src/translations/en.json b/src/translations/en.json index 01755ffdde..f8166bdb31 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5610,7 +5610,11 @@ "value": "Value" }, "configuration_page": { - "shortcuts_title": "Shortcuts", + "status_title": "status", + "status_online": "online", + "status_offline": "offline", + "devices": "{count} {count, plural,\n one {device}\n other {devices}\n}", + "devices_offline": "{count} offline", "update_button": "Update configuration", "download_backup": "Download backup", "migrate_radio": "Migrate radio",