Fix and improve remove z-wave node (#25078)

* Fix and improve remove zwave node

* Improve error

* Fix lint
This commit is contained in:
Wendelin 2025-04-16 12:48:26 +02:00 committed by GitHub
parent b02f1037fb
commit 5459eaff30
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 157 additions and 146 deletions

View File

@ -1,17 +1,25 @@
import "@material/mwc-button/mwc-button"; import {
import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js"; mdiCheckCircle,
import type { CSSResultGroup } from "lit"; mdiClose,
mdiCloseCircle,
mdiVectorSquareRemove,
} 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 { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-spinner";
import "../../../../../components/ha-alert"; import "../../../../../components/ha-alert";
import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-button";
import "../../../../../components/ha-dialog";
import "../../../../../components/ha-dialog-header";
import "../../../../../components/ha-spinner";
import { haStyleDialog } from "../../../../../resources/styles"; import { haStyleDialog } from "../../../../../resources/styles";
import type { HomeAssistant } from "../../../../../types"; import type { HomeAssistant } from "../../../../../types";
import type { ZWaveJSRemoveNodeDialogParams } from "./show-dialog-zwave_js-remove-node"; import type { ZWaveJSRemoveNodeDialogParams } from "./show-dialog-zwave_js-remove-node";
const EXCLUSION_TIMEOUT_SECONDS = 120;
export interface ZWaveJSRemovedNode { export interface ZWaveJSRemovedNode {
node_id: number; node_id: number;
manufacturer: string; manufacturer: string;
@ -24,7 +32,13 @@ class DialogZWaveJSRemoveNode extends LitElement {
@state() private entry_id?: string; @state() private entry_id?: string;
@state() private _status = ""; @state() private _step:
| "start"
| "exclusion"
| "remove"
| "finished"
| "failed"
| "timeout" = "start";
@state() private _node?: ZWaveJSRemovedNode; @state() private _node?: ZWaveJSRemovedNode;
@ -56,142 +70,126 @@ class DialogZWaveJSRemoveNode extends LitElement {
return nothing; return nothing;
} }
const dialogTitle = this.hass.localize(
"ui.panel.config.zwave_js.remove_node.title"
);
return html` return html`
<ha-dialog <ha-dialog open @closed=${this.closeDialog} .heading=${dialogTitle}>
open <ha-dialog-header slot="heading">
@closed=${this.closeDialog} <ha-icon-button
.heading=${createCloseHeading( slot="navigationIcon"
this.hass, .path=${mdiClose}
this.hass.localize("ui.panel.config.zwave_js.remove_node.title") @click=${this.closeDialog}
)} .label=${this.hass.localize("ui.common.close")}
> ></ha-icon-button>
${this._status === "" <span slot="title">${dialogTitle}</span>
? html` </ha-dialog-header>
<p> <div class="content">${this._renderStepContent()}</div>
${this.hass.localize( ${this._renderAction()}
"ui.panel.config.zwave_js.remove_node.introduction"
)}
</p>
<mwc-button slot="primaryAction" @click=${this._startExclusion}>
${this.hass.localize(
"ui.panel.config.zwave_js.remove_node.start_exclusion"
)}
</mwc-button>
`
: nothing}
${this._status === "started"
? html`
<div class="flex-container">
<ha-spinner></ha-spinner>
<div class="status">
<p>
<b
>${this.hass.localize(
"ui.panel.config.zwave_js.remove_node.controller_in_exclusion_mode"
)}</b
>
</p>
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.remove_node.follow_device_instructions"
)}
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize(
"ui.panel.config.zwave_js.remove_node.cancel_exclusion"
)}
</mwc-button>
`
: nothing}
${this._status === "failed"
? html`
<div class="flex-container">
<ha-svg-icon
.path=${mdiCloseCircle}
class="failed"
></ha-svg-icon>
<div class="status">
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.remove_node.exclusion_failed"
)}
</p>
${this._error
? html`<ha-alert alert-type="error">
${this._error}
</ha-alert>`
: nothing}
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
`
: nothing}
${this._status === "finished"
? html`
<div class="flex-container">
<ha-svg-icon
.path=${mdiCheckCircle}
class="success"
></ha-svg-icon>
<div class="status">
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.remove_node.exclusion_finished",
{ id: this._node!.node_id }
)}
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.common.close")}
</mwc-button>
`
: nothing}
</ha-dialog> </ha-dialog>
`; `;
} }
private _startExclusion(): void { private _renderStepContent(): TemplateResult {
if (!this.hass) { if (this._step === "start") {
return; return html`
<ha-svg-icon .path=${mdiVectorSquareRemove}></ha-svg-icon>
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.remove_node.introduction"
)}
</p>
`;
} }
if (["exclusion", "remove"].includes(this._step)) {
return html`
<ha-spinner></ha-spinner>
<div>
<p>
${this.hass.localize(
`ui.panel.config.zwave_js.remove_node.${this._step === "exclusion" ? "follow_device_instructions" : "removing_device"}`
)}
</p>
</div>
`;
}
if (this._step === "finished") {
return html` <ha-svg-icon
.path=${mdiCheckCircle}
class="success"
></ha-svg-icon>
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.remove_node.exclusion_finished",
{ id: html`<b>${this._node!.node_id}</b>` }
)}
</p>`;
}
// failed
return html`
<ha-svg-icon .path=${mdiCloseCircle} class="failed"></ha-svg-icon>
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.remove_node.exclusion_failed"
)}
</p>
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: nothing}
`;
}
private _renderAction(): TemplateResult {
return html`
<ha-button
slot="primaryAction"
@click=${this._step === "start"
? this._startExclusion
: this.closeDialog}
>
${this.hass.localize(
this._step === "start"
? "ui.panel.config.zwave_js.remove_node.start_exclusion"
: this._step === "exclusion"
? "ui.panel.config.zwave_js.remove_node.cancel_exclusion"
: "ui.common.close"
)}
</ha-button>
`;
}
private _startExclusion(): void {
this._subscribed = this.hass.connection this._subscribed = this.hass.connection
.subscribeMessage((message) => this._handleMessage(message), { .subscribeMessage((message) => this._handleMessage(message), {
type: "zwave_js/remove_node", type: "zwave_js/remove_node",
entry_id: this.entry_id, entry_id: this.entry_id,
}) })
.catch((err) => { .catch((err) => {
this._status = "failed"; this._step = "failed";
this._error = err.message; this._error = err.message;
return undefined; return undefined;
}); });
this._status = "started"; this._step = "exclusion";
this._removeNodeTimeoutHandle = window.setTimeout( this._removeNodeTimeoutHandle = window.setTimeout(() => {
() => this._unsubscribe(), this._unsubscribe();
120000 this._step = "timeout";
); }, EXCLUSION_TIMEOUT_SECONDS * 1000);
} }
private _handleMessage(message: any): void { private _handleMessage(message: any): void {
if (message.event === "exclusion started") {
this._status = "started";
}
if (message.event === "exclusion failed") { if (message.event === "exclusion failed") {
this._unsubscribe(); this._unsubscribe();
this._status = "failed"; this._step = "failed";
} }
if (message.event === "exclusion stopped") { if (message.event === "exclusion stopped") {
if (this._status !== "finished") { this._step = "remove";
this._status = "";
}
this._unsubscribe();
} }
if (message.event === "node removed") { if (message.event === "node removed") {
this._status = "finished"; this._step = "finished";
this._node = message.node; this._node = message.node;
this._unsubscribe(); this._unsubscribe();
if (this._removedCallback) { if (this._removedCallback) {
@ -200,29 +198,35 @@ class DialogZWaveJSRemoveNode extends LitElement {
} }
} }
private _unsubscribe(): void { private _stopExclusion(): void {
if (this._subscribed) { try {
this._subscribed.then((unsub) => unsub && unsub());
this._subscribed = undefined;
}
if (this._status === "started") {
this.hass.callWS({ this.hass.callWS({
type: "zwave_js/stop_exclusion", type: "zwave_js/stop_exclusion",
entry_id: this.entry_id, entry_id: this.entry_id,
}); });
} catch (err) {
// eslint-disable-next-line no-console
console.error(err);
} }
if (this._status !== "finished") { }
this._status = "";
private _unsubscribe = () => {
if (this._subscribed) {
this._subscribed.then((unsub) => unsub && unsub());
this._subscribed = undefined;
}
if (this._step === "exclusion") {
this._stopExclusion();
} }
if (this._removeNodeTimeoutHandle) { if (this._removeNodeTimeoutHandle) {
clearTimeout(this._removeNodeTimeoutHandle); clearTimeout(this._removeNodeTimeoutHandle);
} }
} };
public closeDialog(): void { public closeDialog(): void {
this._unsubscribe(); this._unsubscribe();
this.entry_id = undefined; this.entry_id = undefined;
this._status = ""; this._step = "start";
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
@ -231,29 +235,36 @@ class DialogZWaveJSRemoveNode extends LitElement {
return [ return [
haStyleDialog, haStyleDialog,
css` css`
.success { .content {
color: var(--success-color);
}
.failed {
color: var(--error-color);
}
.flex-container {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column;
gap: 16px;
text-align: center;
}
.content ha-spinner {
padding: 32px 0;
}
.content p {
color: var(--secondary-text-color);
} }
ha-svg-icon { ha-svg-icon {
width: 68px; padding: 32px 0;
width: 48px;
height: 48px; height: 48px;
} }
ha-svg-icon.success {
color: var(--success-color);
}
.flex-container ha-spinner, ha-svg-icon.failed {
.flex-container ha-svg-icon { color: var(--error-color);
margin-right: 20px; }
margin-inline-end: 20px; ha-alert {
margin-inline-start: initial; width: 100%;
} }
`, `,
]; ];

View File

@ -5941,9 +5941,9 @@
"introduction": "Remove a device from your Z-Wave network, and remove the associated device and entities from Home Assistant.", "introduction": "Remove a device from your Z-Wave network, and remove the associated device and entities from Home Assistant.",
"start_exclusion": "Start exclusion", "start_exclusion": "Start exclusion",
"cancel_exclusion": "Cancel exclusion", "cancel_exclusion": "Cancel exclusion",
"controller_in_exclusion_mode": "Your Z-Wave controller is now in exclusion mode.",
"follow_device_instructions": "Follow the directions that came with your device to trigger exclusion on the device.", "follow_device_instructions": "Follow the directions that came with your device to trigger exclusion on the device.",
"exclusion_failed": "The device could not be removed. Please check the logs for more information.", "removing_device": "Removing device",
"exclusion_failed": "An error occurred during exclusion. Please check the logs for more information.",
"exclusion_finished": "Device {id} has been removed from your Z-Wave network." "exclusion_finished": "Device {id} has been removed from your Z-Wave network."
}, },
"remove_failed_node": { "remove_failed_node": {