Merge branch 'master' into external-auth-fix

.env.app.example

@@ -1,17 +1,21 @@
 # The host address to bind to
-# HOST="::"
+HOST="::"
 # The port to listen to for incoming requests. Default is `8091`
-# PORT=8091
+PORT=''
 # The absolute path to the directory where all files will be stored. Default is `<path to your zui dir>/store`
-# STORE_DIR
+STORE_DIR=''
 # Used as secret for session. If not provided the default one is used
-# SESSION_SECRET
+SESSION_SECRET="zwavejsisawesome"
 
-
-# NETWORK_KEY
-# HTTPS=true
+# S0 Key
+NETWORK_KEY=''
+HTTPS=''
 # Set the cookie [secure](https://github.com/expressjs/session#cookiesecure) option.
-# USE_SECURE_COOKIE
+USE_SECURE_COOKIE=''
 # Mostly needed for docker users.
 # https://zwave-js.github.io/node-zwave-js/#/usage/external-config?id=specifying-an-external-config-db-location
-# ZWAVEJS_EXTERNAL_CONFIG
+ZWAVEJS_EXTERNAL_CONFIG=''
+
+# Browser preferred locale/tz to use for date/time formatting 
+TZ=''
+LOCALE=''

CHANGELOG.md

@@ -1,5 +1,13 @@
 
 
+## [9.7.1](https://github.com/zwave-js/zwave-js-ui/compare/v9.7.0...v9.7.1) (2024-01-16)
+
+
+### Bug Fixes
+
+* **ui:** ensure all changelog links open on new tab ([#3521](https://github.com/zwave-js/zwave-js-ui/issues/3521)) ([51c53a1](https://github.com/zwave-js/zwave-js-ui/commit/51c53a1c9aeb76a0b3f8a6879b2b601f63f41bb2))
+* **ui:** make all links open in a new page to make them work in hass-addon (tx Andrew) ([d7db465](https://github.com/zwave-js/zwave-js-ui/commit/d7db46570f9b57e3381cd75084a2cbc82ed32fc7))
+
 # [9.7.0](https://github.com/zwave-js/zwave-js-ui/compare/v9.6.2...v9.7.0) (2024-01-15)
 
 

api/app.ts

@@ -1037,6 +1037,8 @@ app.get(
 			serial_ports: [],
 			scales: scales,
 			sslDisabled: sslDisabled(),
+			tz: process.env.TZ,
+			locale: process.env.LOCALE,
 			deprecationWarning: process.env.TAG_NAME === 'zwavejs2mqtt',
 		}
 

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,
 			})
 		}
 	}

docs/guide/env-vars.md

@@ -29,3 +29,5 @@ This is the list of the supported environment variables:
 - `FORCE_DISABLE_SSL`: Set this env var to `'true'` to disable SSL.
 - `BASE_PATH`: Set this env var to the base path where the application is served. Default is `/`.
 - `UID_DISCOVERY_PREFIX`: Sets the prefix used for MQTT Discovery `unique_id` of entities. Default is `zwavejs2mqtt_`.
+- `TZ`: Set this env var to the timezone you want to use on UI. Default to browser TZ.
+- `LOCALE`: Set this env var to the locale you want to use on UI. Default to browser locale.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zwave-js-ui",
-  "version": "9.7.0",
+  "version": "9.7.1",
   "description": "Z-Wave Control Panel and MQTT Gateway",
   "keywords": [
     "mqtt",

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
@@ -285,7 +300,9 @@
 						Made with &#10084;&#65039; by
 						<strong class="ml-1 mr-2">Daniel Lando</strong>-
 						Enjoying it?&nbsp;
-						<a href="https://github.com/sponsors/robertsLando"
+						<a
+							target="_blank"
+							href="https://github.com/sponsors/robertsLando"
 							>Support me &#128591;</a
 						>
 					</v-col>
@@ -396,6 +413,7 @@ import {
 	getEnumMemberName,
 	SecurityBootstrapFailure,
 	FirmwareUpdateStatus,
+	InclusionState,
 } from 'zwave-js/safe'
 import DialogNodesManager from '@/components/dialogs/DialogNodesManager.vue'
 
@@ -426,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) {
@@ -831,7 +889,7 @@ export default {
 							'Z-Wave JS UI',
 							`<h3 style="white-space:pre" class="text-center">If you are seeing this message it means that you are using the old <code>zwavejs2mqtt</code> docker tag.\nStarting from 8.0.0 version it is <b>DEPRECATED</b>, please use the new <code>zwave-js-ui</code> tag.</h3>
 						<p class="mt-4 text-center">
-						You can find more info about this change in <a href="https://github.com/zwave-js/zwavejs2mqtt/releases/tag/v8.0.0" target="_blank">v8.0.0 CHANGELOG</a>.
+						You can find more info about this change in <a target="_blank" href="https://github.com/zwave-js/zwavejs2mqtt/releases/tag/v8.0.0">v8.0.0 CHANGELOG</a>.
 						</p>`,
 							'info',
 							{
@@ -895,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)
@@ -1280,7 +1339,7 @@ export default {
 									.render(release.body)
 									.replace(
 										/#(\d+)/g,
-										'<a href="https://github.com/zwave-js/node-zwave-js/pull/$1">#$1</a>',
+										'<a target="_blank" href="https://github.com/zwave-js/node-zwave-js/pull/$1">#$1</a>',
 									)
 
 								return `${
@@ -1312,7 +1371,7 @@ export default {
 									)
 									.replace(
 										/#(\d+)/g,
-										'<a href="https://github.com/zwave-js/zwave-js-server/pull/$1">#$1</a>',
+										'<a target="_blank" href="https://github.com/zwave-js/zwave-js-server/pull/$1">#$1</a>',
 									)
 
 								// remove everything after "⬆️ Dependencies"
@@ -1336,6 +1395,12 @@ export default {
 						changelog += serverChangelogs.join('')
 					}
 
+					// ensure all links are opened in new tab
+					changelog = changelog.replace(
+						/<a href="/g,
+						'<a target="_blank" href="',
+					)
+
 					// means we never saw the changelog for this version
 					const result = await this.confirm(
 						`Changelog`,

src/components/custom/StatisticsArrows.vue

@@ -16,7 +16,7 @@
 					<i
 						>{{
 							node.lastActive
-								? new Date(node.lastActive).toLocaleString()
+								? getDateTimeString(node.lastActive)
 								: 'Never'
 						}}
 					</i>
@@ -31,6 +31,8 @@
 
 <script>
 import { jsonToList } from '@/lib/utils'
+import { mapActions } from 'pinia'
+import useBaseStore from '../../stores/base.js'
 
 export default {
 	props: {
@@ -49,6 +51,7 @@ export default {
 		}
 	},
 	methods: {
+		...mapActions(useBaseStore, ['getDateTimeString']),
 		jsonToList(item) {
 			return jsonToList(item, {
 				ignore: ['lwr', 'nlwr', 'rssi', 'backgroundRSSI', 'lastSeen'],