From 4d7d76c9aa807ca9c14dd5a83e40dfe4580cf397 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Fri, 13 Feb 2026 13:03:08 +0000 Subject: [PATCH] Migrate Z-Wave and Zigbee config dialogs to wa (#29583) --- .../zha/dialog-zha-change-channel.ts | 69 ++--- .../zha/dialog-zha-manage-zigbee-device.ts | 41 ++- .../zha/dialog-zha-reconfigure-device.ts | 122 ++++----- .../add-node/dialog-zwave_js-add-node.ts | 247 ++++++++++-------- .../dialog-zwave_js-hard-reset-controller.ts | 38 +-- .../dialog-zwave_js-node-statistics.ts | 23 +- .../dialog-zwave_js-rebuild-network-routes.ts | 90 ++++--- .../dialog-zwave_js-rebuild-node-routes.ts | 64 ++--- .../dialog-zwave_js-reinterview-node.ts | 56 ++-- .../zwave_js/dialog-zwave_js-remove-node.ts | 46 ++-- .../dialog-zwave_js-update-firmware-node.ts | 76 ++++-- 11 files changed, 469 insertions(+), 403 deletions(-) diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-change-channel.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-change-channel.ts index 459284bac6..78bf3f2f7e 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-change-channel.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-change-channel.ts @@ -5,12 +5,12 @@ import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/buttons/ha-progress-button"; import "../../../../../components/ha-alert"; import "../../../../../components/ha-button"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; +import "../../../../../components/ha-dialog-footer"; +import "../../../../../components/ha-wa-dialog"; import "../../../../../components/ha-select"; import type { HaSelectSelectEvent } from "../../../../../components/ha-select"; import { changeZHANetworkChannel } from "../../../../../data/zha"; import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box"; -import type { HassDialog } from "../../../../../dialogs/make-dialog-manager"; import type { HomeAssistant } from "../../../../../types"; import type { ZHAChangeChannelDialogParams } from "./show-dialog-zha-change-channel"; @@ -35,7 +35,7 @@ const VALID_CHANNELS = [ ]; @customElement("dialog-zha-change-channel") -class DialogZHAChangeChannel extends LitElement implements HassDialog { +class DialogZHAChangeChannel extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @state() private _migrationInProgress = false; @@ -44,16 +44,22 @@ class DialogZHAChangeChannel extends LitElement implements HassDialog { @state() private _newChannel?: "auto" | number; + @state() private _open = false; + public async showDialog(params: ZHAChangeChannelDialogParams): Promise { this._params = params; this._newChannel = "auto"; + this._open = true; } public closeDialog() { + this._open = false; + } + + private _dialogClosed() { this._params = undefined; this._newChannel = undefined; fireEvent(this, "dialog-closed", { dialog: this.localName }); - return true; } protected render(): TemplateResult | typeof nothing { @@ -62,15 +68,13 @@ class DialogZHAChangeChannel extends LitElement implements HassDialog { } return html` - ${this.hass.localize( @@ -109,26 +113,27 @@ class DialogZHAChangeChannel extends LitElement implements HassDialog { >

- - - ${this.hass.localize( - "ui.panel.config.zha.change_channel_dialog.change_channel" - )} - - - ${this.hass.localize("ui.common.cancel")} - + + + ${this.hass.localize("ui.common.cancel")} + + + ${this.hass.localize( + "ui.panel.config.zha.change_channel_dialog.change_channel" + )} + + + `; } diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts index 5f5c3b902d..a4ad341a96 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts @@ -6,10 +6,10 @@ import { cache } from "lit/directives/cache"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-code-editor"; -import "../../../../../components/ha-dialog"; import "../../../../../components/ha-dialog-header"; import "../../../../../components/ha-tab-group"; import "../../../../../components/ha-tab-group-tab"; +import "../../../../../components/ha-wa-dialog"; import type { ZHADevice, ZHAGroup } from "../../../../../data/zha"; import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha"; import { @@ -44,6 +44,8 @@ class DialogZHAManageZigbeeDevice extends LitElement { @state() private _groups: ZHAGroup[] = []; + @state() private _open = false; + public async showDialog( params: ZHAManageZigbeeDeviceDialogParams ): Promise { @@ -54,9 +56,14 @@ class DialogZHAManageZigbeeDevice extends LitElement { } this._currTab = params.tab || "clusters"; this.large = false; + this._open = true; } public closeDialog() { + this._open = false; + } + + private _dialogClosed() { this._device = undefined; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -88,18 +95,17 @@ class DialogZHAManageZigbeeDevice extends LitElement { const tabs = this._getTabs(this._device); return html` - - + -
+
${cache( this._currTab === "clusters" ? html` @@ -170,7 +176,7 @@ class DialogZHAManageZigbeeDevice extends LitElement { ` )}
- + `; } @@ -216,11 +222,6 @@ class DialogZHAManageZigbeeDevice extends LitElement { haStyleDialog, haStyleDialogFixedTop, css` - ha-dialog { - --dialog-surface-position: static; - --dialog-content-position: static; - } - .content { outline: none; display: flex; @@ -228,16 +229,6 @@ class DialogZHAManageZigbeeDevice extends LitElement { gap: var(--ha-space-2); } - @media all and (min-width: 600px) and (min-height: 501px) { - ha-dialog { - --mdc-dialog-min-width: 560px; - --mdc-dialog-max-width: 560px; - --mdc-dialog-max-height: calc( - 100vh - var(--ha-space-18) - var(--safe-area-inset-y) - ); - } - } - ha-tab-group-tab { flex: 1; } diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts index 8d71981604..95cad5c651 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts @@ -5,10 +5,11 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-spinner"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-svg-icon"; import "../../../../../components/ha-tooltip"; import "../../../../../components/ha-button"; +import "../../../../../components/ha-dialog-footer"; +import "../../../../../components/ha-wa-dialog"; import type { AttributeConfigurationStatus, Cluster, @@ -46,15 +47,22 @@ class DialogZHAReconfigureDevice extends LitElement { @state() private _showDetails = false; + @state() private _open = false; + private _subscribed?: Promise; public showDialog(params: ZHAReconfigureDeviceDialogParams): void { this._params = params; this._clusterConfigurationStatuses = new Map(); this._stages = undefined; + this._open = true; } public closeDialog(): void { + this._open = false; + } + + private _dialogClosed(): void { this._unsubscribe(); this._params = undefined; this._status = undefined; @@ -71,15 +79,16 @@ class DialogZHAReconfigureDevice extends LitElement { } return html` - ${!this._status ? html` @@ -95,14 +104,6 @@ class DialogZHAReconfigureDevice extends LitElement { )}

- - ${this.hass.localize( - "ui.dialogs.zha_reconfigure_device.start_reconfiguration" - )} - ` : ``} ${this._status === "started" @@ -124,22 +125,6 @@ class DialogZHAReconfigureDevice extends LitElement {

- - ${this._showDetails - ? this.hass.localize( - `ui.dialogs.zha_reconfigure_device.button_hide` - ) - : this.hass.localize( - `ui.dialogs.zha_reconfigure_device.button_show` - )} - - - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._status === "failed" @@ -157,22 +142,6 @@ class DialogZHAReconfigureDevice extends LitElement {

- - ${this.hass.localize("ui.common.close")} - - - ${this._showDetails - ? this.hass.localize( - `ui.dialogs.zha_reconfigure_device.button_hide` - ) - : this.hass.localize( - `ui.dialogs.zha_reconfigure_device.button_show` - )} - ` : ``} ${this._status === "finished" @@ -190,22 +159,6 @@ class DialogZHAReconfigureDevice extends LitElement {

- - ${this.hass.localize("ui.common.close")} - - - ${this._showDetails - ? this.hass.localize( - `ui.dialogs.zha_reconfigure_device.button_hide` - ) - : this.hass.localize( - `ui.dialogs.zha_reconfigure_device.button_show` - )} - ` : ``} ${this._stages @@ -339,7 +292,38 @@ class DialogZHAReconfigureDevice extends LitElement { ` : ""} - + + ${!this._status + ? html` + + ${this.hass.localize( + "ui.dialogs.zha_reconfigure_device.start_reconfiguration" + )} + + ` + : html` + + ${this._showDetails + ? this.hass.localize( + `ui.dialogs.zha_reconfigure_device.button_hide` + ) + : this.hass.localize( + `ui.dialogs.zha_reconfigure_device.button_show` + )} + + + ${this.hass.localize("ui.common.close")} + + `} + + `; } @@ -426,10 +410,6 @@ class DialogZHAReconfigureDevice extends LitElement { return [ haStyleDialog, css` - ha-dialog { - --mdc-dialog-max-width: 800px; - } - .wrapper { display: grid; grid-template-columns: 3fr 1fr 2fr; diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts index 3b288a0ab2..9fdf4e11fb 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts @@ -2,10 +2,9 @@ import { mdiChevronLeft, mdiClose } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; -import { customElement, property, query, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../../../common/dom/fire_event"; -import type { HaDialog } from "../../../../../../components/ha-dialog"; import { updateDeviceRegistryEntry } from "../../../../../../data/device/device_registry"; import type { QRProvisioningInformation, @@ -42,11 +41,12 @@ import { import type { ZWaveJSAddNodeDialogParams } from "./show-dialog-zwave_js-add-node"; import "../../../../../../components/ha-button"; -import "../../../../../../components/ha-dialog"; import "../../../../../../components/ha-dialog-header"; +import "../../../../../../components/ha-dialog-footer"; import "../../../../../../components/ha-fade-in"; import "../../../../../../components/ha-icon-button"; import "../../../../../../components/ha-qr-scanner"; +import "../../../../../../components/ha-wa-dialog"; import { navigate } from "../../../../../../common/navigate"; import type { EntityRegistryEntry } from "../../../../../../data/entity/entity_registry"; @@ -67,6 +67,12 @@ import "./zwave-js-add-node-select-security-strategy"; const INCLUSION_TIMEOUT_MINUTES = 5; +interface ButtonParams { + disabled?: boolean; + label: string; + onClick: () => void; +} + @customElement("dialog-zwave_js-add-node") class DialogZWaveJSAddNode extends LitElement { // #region variables @@ -106,8 +112,6 @@ class DialogZWaveJSAddNode extends LitElement { @state() private _codeInput = ""; - @query("ha-dialog") private _dialog?: HaDialog; - private _qrProcessing = false; private _addNodeTimeoutHandle?: number; @@ -130,36 +134,38 @@ class DialogZWaveJSAddNode extends LitElement { // Prevent accidentally closing the dialog in certain stages const preventClose = !!this._step && this._shouldPreventClose(this._step); - const { headerText, headerHtml } = this._renderHeader(); + const headerHtml = this._renderHeader(); + + const content = this._renderStepContent(); + const actions = this._renderStepActions(); return html` - - ${headerHtml} - ${this._renderStep()} - + ${headerHtml} + ${content} + ${actions === nothing + ? nothing + : html`${actions}`} + `; } - private _renderHeader(): { headerText: string; headerHtml: TemplateResult } { + private _renderHeader(): TemplateResult { let headerText = this.hass.localize( `ui.panel.config.zwave_js.add_node.title` ); if (this._step === "loading") { - return { - headerText, - headerHtml: html` - - ${headerText} - - `, - }; + return html` + + ${headerText} + + `; } let icon: string | undefined; @@ -219,23 +225,20 @@ class DialogZWaveJSAddNode extends LitElement { `ui.panel.config.zwave_js.add_node.${titleTranslationKey}` ); - return { - headerText, - headerHtml: html` - ${icon - ? html`` - : nothing} - ${headerText} - `, - }; + return html` + ${icon + ? html`` + : nothing} + ${headerText} + `; } - private _renderStep() { + private _renderStepContent() { if (["select_method", "select_other_method"].includes(this._step!)) { return html` - - ${this.hass.localize("ui.common.next")} - `; } @@ -297,52 +293,25 @@ class DialogZWaveJSAddNode extends LitElement { ._searchDevicesShowSecurityOptions} @add-another-z-wave-device=${this._addAnotherDevice} > - ${this._step === "search_smart_start_device" - ? html` - - ${this.hass.localize("ui.common.close")} - - ` - : nothing} `; } if (this._step === "choose_security_strategy") { return html` - - ${this.hass.localize( - "ui.panel.config.zwave_js.add_node.select_method.search_device" - )} - `; + .hass=${this.hass} + @z-wave-strategy-selected=${this._setSecurityStrategy} + >`; } if (this._step === "configure_device") { return html` - - ${this.hass.localize( - this._device?.id - ? "ui.common.save" - : "ui.panel.config.zwave_js.add_node.configure_device.add_device" - )} - `; + .hass=${this.hass} + .deviceName=${this._device?.name ?? ""} + .longRangeSupported=${!!this._device?.provisioningInfo?.supportedProtocols?.includes( + Protocols.ZWaveLongRange + ) && this._controllerSupportsLongRange} + @value-changed=${this._setDeviceOptions} + > `; } if (this._step === "validate_dsk_enter_pin") { @@ -361,15 +330,6 @@ class DialogZWaveJSAddNode extends LitElement { numeric .error=${this._error} > - - ${this.hass.localize( - "ui.panel.config.zwave_js.add_node.configure_device.add_device" - )} - `; } @@ -394,11 +354,6 @@ class DialogZWaveJSAddNode extends LitElement { .deviceName=${this._device?.name} .reason=${this._lowSecurityReason?.toString()} > - - ${this.hass.localize( - "ui.panel.config.zwave_js.add_node.added_insecure.view_device" - )} - `; } @@ -411,9 +366,6 @@ class DialogZWaveJSAddNode extends LitElement { .selectedSecurityClasses=${this._securityClasses} @value-changed=${this._securityClassChange} > - - ${this.hass.localize("ui.common.submit")} - `; } @@ -432,6 +384,86 @@ class DialogZWaveJSAddNode extends LitElement { >`; } + private _renderStepActions() { + const buttonParams: ButtonParams | undefined = + new Map([ + [ + "qr_code_input", + { + label: this.hass.localize("ui.common.next"), + onClick: this._qrCodeScanned, + }, + ], + [ + "search_smart_start_device", + { + label: this.hass.localize("ui.common.close"), + onClick: this.closeDialog, + }, + ], + [ + "choose_security_strategy", + { + label: this.hass.localize( + "ui.panel.config.zwave_js.add_node.select_method.search_device" + ), + onClick: this._searchDevicesWithStrategy, + }, + ], + [ + "configure_device", + { + label: this.hass.localize( + this._device?.id + ? "ui.common.save" + : "ui.panel.config.zwave_js.add_node.configure_device.add_device" + ), + onClick: this._saveDevice, + }, + ], + [ + "validate_dsk_enter_pin", + { + disabled: !this._dskPin || this._dskPin.length !== 5, + label: this.hass.localize( + "ui.panel.config.zwave_js.add_node.configure_device.add_device" + ), + onClick: this._validateDskAndEnterPin, + }, + ], + [ + "added_insecure", + { + label: this.hass.localize( + "ui.panel.config.zwave_js.add_node.added_insecure.view_device" + ), + onClick: this._navigateToDevice, + }, + ], + [ + "grant_security_classes", + { + label: this.hass.localize("ui.common.submit"), + onClick: this._grantSecurityClasses, + }, + ], + ]).get(this._step!) ?? undefined; + + if (!buttonParams) { + return nothing; + } + + return html` + + ${buttonParams.label} + + `; + } + private _onBeforeUnload = (event: BeforeUnloadEvent) => { if (this._step && this._shouldPreventClose(this._step)) { event.preventDefault(); @@ -1095,10 +1127,10 @@ class DialogZWaveJSAddNode extends LitElement { } if (this._open) { - this._dialog?.close(); - } else { - this._dialogClosed(); + this._open = false; + return; } + this._dialogClosed(); } public disconnectedCallback(): void { @@ -1112,19 +1144,6 @@ class DialogZWaveJSAddNode extends LitElement { static get styles(): CSSResultGroup { return [ css` - ha-dialog { - --mdc-dialog-min-width: 512px; - } - @media all and (max-width: 500px), all and (max-height: 500px) { - ha-dialog { - --mdc-dialog-min-width: 100vw; - --mdc-dialog-max-width: 100vw; - --mdc-dialog-min-height: 100%; - --mdc-dialog-max-height: 100%; - --vertical-align-dialog: flex-end; - --ha-dialog-border-radius: var(--ha-border-radius-square); - } - } ha-fade-in { display: block; } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts index 96dff920e5..0ac386390e 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-hard-reset-controller.ts @@ -3,9 +3,10 @@ import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-svg-icon"; import "../../../../../components/ha-button"; +import "../../../../../components/ha-dialog-footer"; +import "../../../../../components/ha-wa-dialog"; import { hardResetController } from "../../../../../data/zwave_js"; import { haStyleDialog } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; @@ -33,11 +34,18 @@ class DialogZWaveJSHardResetController extends LitElement { @state() private _resetStatus = ResetStatus.NotStarted; + @state() private _open = false; + public showDialog(params: ZWaveJSHardResetControllerDialogParams): void { this._entryId = params.entryId; + this._open = true; } public closeDialog(): void { + this._open = false; + } + + private _dialogClosed(): void { this._entryId = undefined; this._resetStatus = ResetStatus.NotStarted; @@ -49,17 +57,15 @@ class DialogZWaveJSHardResetController extends LitElement { return nothing; } - return html`
@@ -77,18 +83,20 @@ class DialogZWaveJSHardResetController extends LitElement {

${this._resetStatus === ResetStatus.NotStarted - ? html` + ${this.hass.localize("ui.common.cancel")} ${this.hass.localize("ui.common.continue")} - ` + + ` : nothing} - `; + `; } private async _hardResetController(): Promise { diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts index 3f55357613..36aa279dcf 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts @@ -5,12 +5,12 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-expansion-panel"; import "../../../../../components/ha-help-tooltip"; import "../../../../../components/ha-list"; import "../../../../../components/ha-list-item"; import "../../../../../components/ha-svg-icon"; +import "../../../../../components/ha-wa-dialog"; import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry"; import { subscribeDeviceRegistry } from "../../../../../data/device/device_registry"; import type { @@ -51,17 +51,24 @@ class DialogZWaveJSNodeStatistics extends LitElement { nlwr?: WorkingRouteStatistics; } = {}; + @state() private _open = false; + private _subscribedNodeStatistics?: Promise; private _subscribedDeviceRegistry?: UnsubscribeFunc; public showDialog(params: ZWaveJSNodeStatisticsDialogParams): void { this.device = params.device; + this._open = true; this._subscribeDeviceRegistry(); this._subscribeNodeStatistics(); } public closeDialog(): void { + this._open = false; + } + + private _dialogClosed(): void { this._nodeStatistics = undefined; this.device = undefined; @@ -76,13 +83,13 @@ class DialogZWaveJSNodeStatistics extends LitElement { } return html` - @@ -307,7 +314,7 @@ class DialogZWaveJSNodeStatistics extends LitElement { ` : `` )} - + `; } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts index c668b84210..37e372b727 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-network-routes.ts @@ -6,7 +6,8 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-button"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; +import "../../../../../components/ha-dialog-footer"; +import "../../../../../components/ha-wa-dialog"; import type { ZWaveJSNetwork, ZWaveJSRebuildRoutesStatusMessage, @@ -37,13 +38,20 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement { private _subscribed?: Promise; + @state() private _open = false; + public showDialog(params: ZWaveJSRebuildNetworkRoutesDialogParams): void { this._progress_total = 0; this.entry_id = params.entry_id; + this._open = true; this._fetchData(); } public closeDialog(): void { + this._open = false; + } + + private _dialogClosed(): void { this.entry_id = undefined; this._status = undefined; this._progress_total = 0; @@ -59,15 +67,13 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement { } return html` - ${!this._status ? html` @@ -91,14 +97,6 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement { )}

- - ${this.hass.localize( - "ui.panel.config.zwave_js.rebuild_network_routes.start_rebuilding_routes" - )} - ` : ``} ${this._status === "started" @@ -122,19 +120,6 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement { ` : ""} - - ${this.hass.localize( - "ui.panel.config.zwave_js.rebuild_network_routes.stop_rebuilding_routes" - )} - - - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._status === "failed" @@ -152,9 +137,6 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {

- - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._status === "finished" @@ -172,9 +154,6 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {

- - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._status === "cancelled" @@ -192,9 +171,6 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement {

- - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._progress_total && this._status !== "finished" @@ -207,7 +183,41 @@ class DialogZWaveJSRebuildNetworkRoutes extends LitElement { ` : ""} - + + ${!this._status + ? html` + + ${this.hass.localize( + "ui.panel.config.zwave_js.rebuild_network_routes.start_rebuilding_routes" + )} + + ` + : this._status === "started" + ? html` + + ${this.hass.localize( + "ui.panel.config.zwave_js.rebuild_network_routes.stop_rebuilding_routes" + )} + + + ${this.hass.localize("ui.common.close")} + + ` + : html` + + ${this.hass.localize("ui.common.close")} + + `} + + `; } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts index 6edfb807db..b98d983102 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-rebuild-node-routes.ts @@ -5,8 +5,9 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name"; import "../../../../../components/ha-button"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-spinner"; +import "../../../../../components/ha-dialog-footer"; +import "../../../../../components/ha-wa-dialog"; import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry"; import type { ZWaveJSNetwork } from "../../../../../data/zwave_js"; import { @@ -27,12 +28,19 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement { @state() private _error?: string; + @state() private _open = false; + public showDialog(params: ZWaveJSRebuildNodeRoutesDialogParams): void { this.device = params.device; + this._open = true; this._fetchData(); } public closeDialog(): void { + this._open = false; + } + + private _dialogClosed(): void { this._status = undefined; this.device = undefined; this._error = undefined; @@ -46,15 +54,13 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement { } return html` - ${!this._status ? html` @@ -83,14 +89,6 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement { )}

- - ${this.hass.localize( - "ui.panel.config.zwave_js.rebuild_node_routes.start_rebuilding_routes" - )} - ` : ``} ${this._status === "started" @@ -110,9 +108,6 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {

- - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._status === "failed" @@ -147,9 +142,6 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {

- - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._status === "finished" @@ -172,9 +164,6 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {

- - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._status === "rebuilding-routes" @@ -192,12 +181,27 @@ class DialogZWaveJSRebuildNodeRoutes extends LitElement {

- - ${this.hass.localize("ui.common.close")} - ` : ``} - + + ${!this._status + ? html` + + ${this.hass.localize( + "ui.panel.config.zwave_js.rebuild_node_routes.start_rebuilding_routes" + )} + + ` + : html` + + ${this.hass.localize("ui.common.close")} + + `} + + `; } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts index 6c74a47863..86897dbc2c 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts @@ -6,7 +6,8 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-spinner"; import "../../../../../components/ha-button"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; +import "../../../../../components/ha-dialog-footer"; +import "../../../../../components/ha-wa-dialog"; import { reinterviewZwaveNode } from "../../../../../data/zwave_js"; import { haStyleDialog } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; @@ -22,6 +23,8 @@ class DialogZWaveJSReinterviewNode extends LitElement { @state() private _stages?: string[]; + @state() private _open = false; + private _subscribed?: Promise; public async showDialog( @@ -29,6 +32,7 @@ class DialogZWaveJSReinterviewNode extends LitElement { ): Promise { this._stages = undefined; this.device_id = params.device_id; + this._open = true; } protected render() { @@ -37,13 +41,13 @@ class DialogZWaveJSReinterviewNode extends LitElement { } return html` - ${!this._status ? html` @@ -59,11 +63,6 @@ class DialogZWaveJSReinterviewNode extends LitElement { )}

- - ${this.hass.localize( - "ui.panel.config.zwave_js.reinterview_node.start_reinterview" - )} - ` : ``} ${this._status === "started" @@ -85,9 +84,6 @@ class DialogZWaveJSReinterviewNode extends LitElement {

- - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._status === "failed" @@ -105,9 +101,6 @@ class DialogZWaveJSReinterviewNode extends LitElement {

- - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._status === "finished" @@ -125,9 +118,6 @@ class DialogZWaveJSReinterviewNode extends LitElement {

- - ${this.hass.localize("ui.common.close")} - ` : ``} ${this._stages @@ -147,7 +137,25 @@ class DialogZWaveJSReinterviewNode extends LitElement { ` : ""} - + + ${!this._status + ? html` + + ${this.hass.localize( + "ui.panel.config.zwave_js.reinterview_node.start_reinterview" + )} + + ` + : html` + + ${this.hass.localize("ui.common.close")} + + `} + + `; } @@ -191,6 +199,10 @@ class DialogZWaveJSReinterviewNode extends LitElement { } public closeDialog(): void { + this._open = false; + } + + private _dialogClosed(): void { this.device_id = undefined; this._status = undefined; this._stages = undefined; diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts index aa8b630ca3..ffa594677f 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts @@ -12,11 +12,11 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-alert"; import "../../../../../components/ha-button"; -import "../../../../../components/ha-dialog"; -import "../../../../../components/ha-dialog-header"; import "../../../../../components/ha-icon-next"; import "../../../../../components/ha-list-item"; import "../../../../../components/ha-spinner"; +import "../../../../../components/ha-dialog-footer"; +import "../../../../../components/ha-wa-dialog"; import type { DeviceRegistryEntry } from "../../../../../data/device/device_registry"; import { fetchZwaveNodeStatus, @@ -65,6 +65,8 @@ class DialogZWaveJSRemoveNode extends LitElement { @state() private _error?: string; + @state() private _open = false; + public disconnectedCallback(): void { super.disconnectedCallback(); this._unsubscribe(); @@ -76,6 +78,7 @@ class DialogZWaveJSRemoveNode extends LitElement { this._entryId = params.entryId; this._deviceId = params.deviceId; this._onClose = params.onClose; + this._open = true; if (this._deviceId) { const nodeStatus = await fetchZwaveNodeStatus(this.hass, this._deviceId!); this._device = this.hass.devices[this._deviceId]; @@ -98,24 +101,25 @@ class DialogZWaveJSRemoveNode extends LitElement { ); return html` - - - - ${dialogTitle} - +
${this._renderStepContent()}
- ${this._renderAction()} - + ${this._step === "start" + ? nothing + : html` + ${this._renderAction()} + `} + `; } @@ -340,14 +344,18 @@ class DialogZWaveJSRemoveNode extends LitElement { }; public closeDialog(): void { - this._unsubscribe(); - this._entryId = undefined; + if (this._open) { + this._open = false; + return; + } + this.handleDialogClosed(); } public handleDialogClosed(): void { this._unsubscribe(); this._entryId = undefined; this._step = "start"; + this._open = false; if (this._onClose) { this._onClose(); } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts index de32303db7..40c822f412 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-update-firmware-node.ts @@ -7,7 +7,8 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_device_name"; import "../../../../../components/ha-button"; -import { createCloseHeading } from "../../../../../components/ha-dialog"; +import "../../../../../components/ha-dialog-footer"; +import "../../../../../components/ha-wa-dialog"; import "../../../../../components/ha-file-upload"; import "../../../../../components/ha-form/ha-form"; import type { HaFormSchema } from "../../../../../components/ha-form/types"; @@ -71,6 +72,8 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { @state() private _firmwareTarget?: number; + @state() private _open = false; + private _subscribedNodeStatus?: Promise; private _subscribedNodeFirmwareUpdate?: Promise; @@ -82,11 +85,16 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { public showDialog(params: ZWaveJSUpdateFirmwareNodeDialogParams): void { this._deviceName = computeDeviceNameDisplay(params.device, this.hass!); this.device = params.device; + this._open = true; this._fetchData(); this._subscribeNodeStatus(); } public closeDialog(): void { + this._open = false; + } + + private _dialogClosed(): void { this._unsubscribeNodeFirmwareUpdate(); this._unsubscribeNodeStatus(); this.device = undefined; @@ -136,16 +144,7 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { .schema=${firmwareTargetSchema} @value-changed=${this._firmwareTargetChanged} .disabled=${this._uploading} - >`} - - ${this.hass.localize( - "ui.panel.config.zwave_js.update_firmware.begin_update" - )} - `; + >`} `; const status = this._updateFinishedMessage ? this._updateFinishedMessage.success @@ -157,11 +156,24 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { ? "_controller" : ""; + const beginFirmwareUpdateButton = html` + + ${this.hass.localize( + "ui.panel.config.zwave_js.update_firmware.begin_update" + )} + + `; + const abortFirmwareUpdateButton = this._nodeStatus.is_controller_node ? nothing : html` @@ -178,13 +190,13 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { `; return html` - ${!this._updateProgressMessage && !this._updateFinishedMessage ? !this._updateInProgress @@ -206,7 +218,6 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { )}

` : nothing} - ${this._uploading ? abortFirmwareUpdateButton : nothing} ` : html`

@@ -239,7 +250,6 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { } )}

- ${abortFirmwareUpdateButton} ${closeButton} ` : this._updateProgressMessage && !this._updateFinishedMessage ? html` @@ -268,7 +278,6 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement { } )}

- ${abortFirmwareUpdateButton} ${closeButton} ` : html`
@@ -302,11 +311,10 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {
${this._updateFinishedMessage!.success ? html`

- ${this.hass.localize( - `ui.panel.config.zwave_js.update_firmware.finished_status.done${localizationKeySuffix}` - )} -

- ${closeButton}` + ${this.hass.localize( + `ui.panel.config.zwave_js.update_firmware.finished_status.done${localizationKeySuffix}` + )} +

` : html`

${this.hass.localize( "ui.panel.config.zwave_js.update_firmware.finished_status.try_again" @@ -314,7 +322,21 @@ class DialogZWaveJSUpdateFirmwareNode extends LitElement {

${beginFirmwareUpdateHTML}`} `} - + + ${!this._updateProgressMessage && !this._updateFinishedMessage + ? !this._updateInProgress + ? html` + ${this._uploading ? abortFirmwareUpdateButton : nothing} + ${beginFirmwareUpdateButton} + ` + : html` ${abortFirmwareUpdateButton} ${closeButton} ` + : this._updateProgressMessage && !this._updateFinishedMessage + ? html` ${abortFirmwareUpdateButton} ${closeButton} ` + : this._updateFinishedMessage!.success + ? html` ${closeButton} ` + : html` ${beginFirmwareUpdateButton} `} + + `; }