mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 17:56:46 +00:00
Fix and improve remove z-wave node (#25078)
* Fix and improve remove zwave node * Improve error * Fix lint
This commit is contained in:
parent
b02f1037fb
commit
5459eaff30
@ -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%;
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
|
@ -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": {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user