feat: show inclusion state on UI (#3527)

api/lib/ZwaveClient.ts

@@ -99,6 +99,7 @@ import {
 	FirmwareUpdateInfo,
 	PartialZWaveOptions,
 	InclusionUserCallbacks,
+	InclusionState,
 } from 'zwave-js'
 import { getEnumMemberName, parseQRCodeString } from 'zwave-js/Utils'
 import { logsDir, nvmBackupsDir, storeDir } from '../config/app'
@@ -594,6 +595,7 @@ export type ZUIDriverInfo = {
 	lastUpdate?: number
 	status?: ZwaveClientStatus
 	cntStatus?: string
+	inclusionState?: InclusionState
 	appVersion?: string
 	zwaveVersion?: string
 	serverVersion?: string
@@ -700,6 +702,9 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 		validateDSKAndEnterPIN: this._onValidateDSK.bind(this),
 		abort: this._onAbortInclusion.bind(this),
 	}
+	private _inclusionStateInterval: NodeJS.Timeout
+
+	private _inclusionState: InclusionState = undefined
 
 	public get driverReady() {
 		return this.driver && this._driverReady && !this.closed
@@ -1101,6 +1106,11 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 		this.closed = true
 		this.driverReady = false
 
+		if (this._inclusionStateInterval) {
+			clearInterval(this._inclusionStateInterval)
+			this._inclusionStateInterval = null
+		}
+
 		if (this.commandsTimeout) {
 			clearTimeout(this.commandsTimeout)
 			this.commandsTimeout = null
@@ -1175,6 +1185,7 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 			info: this.getInfo(),
 			error: this.error,
 			cntStatus: this.cntStatus,
+			inclusionState: this._inclusionState,
 		}
 	}
 
@@ -2708,6 +2719,7 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 		info.status = this.status
 		info.error = this.error
 		info.cntStatus = this._cntStatus
+		info.inclusionState = this._inclusionState
 		info.appVersion = utils.getVersion()
 		info.zwaveVersion = libVersion
 		info.serverVersion = serverVersion
@@ -4206,6 +4218,20 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 
 		this._updateControllerStatus('Driver ready')
 
+		this._inclusionStateInterval = setInterval(() => {
+			if (
+				this._driver.controller.inclusionState !== this._inclusionState
+			) {
+				this._inclusionState = this._driver.controller.inclusionState
+
+				this.sendToSocket(socketEvents.controller, {
+					status: this._cntStatus,
+					error: this._error,
+					inclusionState: this._inclusionState,
+				})
+			}
+		}, 2000)
+
 		try {
 			// this must be done only after driver is ready
 			this._scheduledConfigCheck().catch(() => {
@@ -4497,6 +4523,7 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 			this.sendToSocket(socketEvents.controller, {
 				status,
 				error: this._error,
+				inclusionState: this._inclusionState,
 			})
 		}
 	}

src/App.vue

@@ -104,6 +104,21 @@
 					</div>
 				</v-tooltip>
 
+				<v-tooltip v-if="appInfo.controllerStatus" bottom>
+					<template v-slot:activator="{ on }">
+						<v-icon
+							class="ml-3"
+							dark
+							medium
+							style="cursor: default"
+							:color="inclusionState.color"
+							v-on="on"
+							>{{ inclusionState.icon }}</v-icon
+						>
+					</template>
+					<span>{{ inclusionState.message }}</span>
+				</v-tooltip>
+
 				<v-tooltip bottom>
 					<template v-slot:activator="{ on }">
 						<v-icon
@@ -398,6 +413,7 @@ import {
 	getEnumMemberName,
 	SecurityBootstrapFailure,
 	FirmwareUpdateStatus,
+	InclusionState,
 } from 'zwave-js/safe'
 import DialogNodesManager from '@/components/dialogs/DialogNodesManager.vue'
 
@@ -428,6 +444,46 @@ export default {
 		updateAvailable() {
 			return this.appInfo.newConfigVersion ? 1 : 0
 		},
+		inclusionState() {
+			const state = this.appInfo.controllerStatus?.inclusionState
+
+			const toReturn = {
+				icon: 'help',
+				color: 'grey',
+				message: 'Unknown state',
+			}
+
+			switch (state) {
+				case InclusionState.Idle:
+					toReturn.message = 'Controller is idle'
+					toReturn.icon = 'notifications_paused'
+					toReturn.color = 'grey'
+					break
+				case InclusionState.Including:
+					toReturn.message = 'Inclusion is active'
+					toReturn.icon = 'all_inclusive'
+					toReturn.color = 'purple'
+					break
+				case InclusionState.Excluding:
+					toReturn.message = 'Exclusion is active'
+					toReturn.icon = 'cancel'
+					toReturn.color = 'red'
+					break
+				case InclusionState.Busy:
+					toReturn.message =
+						'Waiting for inclusion/exclusion to complete...'
+					toReturn.icon = 'hourglass_bottom'
+					toReturn.color = 'yellow'
+					break
+				case InclusionState.SmartStart:
+					toReturn.message = 'SmartStart inclusion is active'
+					toReturn.icon = 'auto_fix_normal'
+					toReturn.color = 'primary'
+					break
+			}
+
+			return toReturn
+		},
 	},
 	watch: {
 		$route: function (value) {
@@ -897,6 +953,7 @@ export default {
 			this.setControllerStatus({
 				error: data.error,
 				status: data.cntStatus,
+				inclusionState: data.inclusionState,
 			})
 			// convert node values in array
 			this.initNodes(data.nodes)