feat(ui): allow to set a custom browser TZ/LOCALE using env vars

.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=''

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

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.

src/App.vue

@@ -534,7 +534,7 @@ export default {
 				return
 			}
 			this.showNodesManager('')
-			this.$refs.nodesManager.onGrantSecurityCC(requested)
+			this.$refs.nPodesManager.onGrantSecurityCC(requested)
 		},
 		...mapActions(useBaseStore, [
 			'init',

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'],

src/components/nodes-table/ExpandedNode.vue

@@ -225,7 +225,7 @@
 								<v-tooltip bottom>
 									<template v-slot:activator="{ on, attrs }">
 										<v-btn
-											@click="toggleAutoScroll"
+											@click="toggleAutoScroll()"
 											icon
 											:color="autoScroll ? 'primary' : ''"
 											:class="
@@ -241,6 +241,28 @@
 									</template>
 									<span>Enable/Disable auto scroll</span>
 								</v-tooltip>
+
+								<v-tooltip bottom>
+									<template v-slot:activator="{ on, attrs }">
+										<v-btn
+											@click="toggleSort()"
+											icon
+											:color="
+												inverseSort ? 'primary' : ''
+											"
+											:class="
+												inverseSort
+													? 'border-primary'
+													: ''
+											"
+											v-bind="attrs"
+											v-on="on"
+										>
+											<v-icon>swap_vert</v-icon>
+										</v-btn>
+									</template>
+									<span>Inverse Sort</span>
+								</v-tooltip>
 							</template>
 						</v-text-field>
 
@@ -252,7 +274,7 @@
 							>
 								<span
 									><i>{{
-										new Date(event.time).toISOString()
+										getDateTimeString(event.time)
 									}}</i></span
 								>
 								-
@@ -378,14 +400,20 @@ export default {
 			return this.showStatistics ? 'border-primary' : ''
 		},
 		filteredNodeEvents() {
-			return this.node.eventsQueue.filter((event) => {
-				return (
-					!this.searchEvents ||
-					JSON.stringify(event)
-						.toLowerCase()
-						.includes(this.searchEvents.toLowerCase())
-				)
-			})
+			return this.node.eventsQueue
+				.filter((event) => {
+					return (
+						!this.searchEvents ||
+						JSON.stringify(event)
+							.toLowerCase()
+							.includes(this.searchEvents.toLowerCase())
+					)
+				})
+				.sort((a, b) => {
+					a = new Date(a.time)
+					b = new Date(b.time)
+					return this.inverseSort ? b - a : a - b
+				})
 		},
 		advancedActions() {
 			const nodeActions = this.node.isControllerNode
@@ -558,13 +586,18 @@ export default {
 		return {
 			currentTab: 0,
 			autoScroll: true,
+			inverseSort: false,
 			searchEvents: '',
 			advancedShowDialog: false,
 			showStatistics: false,
 		}
 	},
 	methods: {
-		...mapActions(useBaseStore, ['showSnackbar', 'setValue']),
+		...mapActions(useBaseStore, [
+			'showSnackbar',
+			'setValue',
+			'getDateTimeString',
+		]),
 		async updateValue(v, customValue) {
 			if (v) {
 				// in this way I can check when the value receives an update
@@ -704,6 +737,9 @@ export default {
 		toggleAutoScroll() {
 			this.autoScroll = !this.autoScroll
 		},
+		toggleSort() {
+			this.inverseSort = !this.inverseSort
+		},
 		async scrollBottom() {
 			if (!this.autoScroll) {
 				return

src/stores/base.js

@@ -17,6 +17,8 @@ const useBaseStore = defineStore('base', {
 		nodes: [],
 		nodesMap: new Map(),
 		user: {},
+		tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
+		locale: undefined, // uses default browser locale
 		zwave: {
 			port: '/dev/zwave',
 			allowBootloaderOnly: false,
@@ -112,6 +114,15 @@ const useBaseStore = defineStore('base', {
 		},
 	},
 	actions: {
+		getDateTimeString(date) {
+			if (typeof date === 'string' || typeof date === 'number') {
+				date = new Date(date)
+			}
+
+			return date.toLocaleString(this.locale, {
+				timeZone: this.tz,
+			})
+		},
 		getNode(id) {
 			if (typeof id === 'string') {
 				id = parseInt(id)
@@ -493,6 +504,14 @@ const useBaseStore = defineStore('base', {
 		},
 		init(data) {
 			if (data) {
+				if (data.tz) {
+					this.tz = data.tzd
+				}
+
+				if (data.locale) {
+					this.locale = data.locale
+				}
+
 				this.initSettings(data.settings)
 				this.initPorts(data.serial_ports)
 				this.initScales(data.scales)