From 7d3ebca20ae8fa8d0808654763eec9c9634e8b52 Mon Sep 17 00:00:00 2001
From: floutchito <floutchito@gmail.com>
Date: Fri, 25 Feb 2022 12:07:25 +0100
Subject: [PATCH 01/11] feat(ui): Optional tabs navigation

Add a UI section in settings
Move dark mode switch to UI Settings section
Add UI setting to replace Navigation Drawer with tabs, useful when app is embedded in another one, typically Home Assistant integration
---
 src/App.vue                 | 67 +++++++++++++++++++++++--------------
 src/components/Settings.vue | 53 ++++++++++++++++++++++++++++-
 src/store/mutations.js      | 33 +++++++++++++++---
 3 files changed, 121 insertions(+), 32 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c8486cb1eb0..798180205d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,10 @@
 <template>
-	<v-app :dark="dark">
+	<v-app :dark="darkMode">
 		<div
 			v-if="$route.meta.requiresAuth && auth !== undefined && !hideTopbar"
 		>
 			<v-navigation-drawer
+				v-if="!navTabs || $vuetify.breakpoint.smAndDown"
 				clipped-left
 				:mini-variant="mini"
 				v-model="drawer"
@@ -29,7 +30,7 @@
 					<v-list-item
 						v-for="item in pages"
 						:key="item.title"
-						:to="item.path == '#' ? '' : item.path"
+						:to="item.path === '#' ? '' : item.path"
 						:color="item.path === $route.path ? 'primary' : ''"
 					>
 						<v-list-item-action>
@@ -42,13 +43,6 @@
 							>
 						</v-list-item-content>
 					</v-list-item>
-					<v-list-item v-if="!mini">
-						<v-switch
-							label="Dark theme"
-							hide-details
-							v-model="dark"
-						></v-switch>
-					</v-list-item>
 				</v-list>
 				<v-footer absolute v-if="!mini" class="pa-3">
 					<div>
@@ -58,10 +52,35 @@
 			</v-navigation-drawer>
 
 			<v-app-bar app>
-				<v-app-bar-nav-icon @click.stop="toggleDrawer" />
-				<v-toolbar-title v-if="$vuetify.breakpoint.smAndUp">{{
-					title
-				}}</v-toolbar-title>
+				<template v-if="!navTabs || $vuetify.breakpoint.smAndDown">
+					<v-app-bar-nav-icon @click.stop="toggleDrawer" />
+					<v-toolbar-title v-if="$vuetify.breakpoint.smAndUp">
+						{{ title }}
+					</v-toolbar-title>
+				</template>
+				<template v-else>
+					<v-tabs>
+						<v-tab
+							v-for="item in pages"
+							:key="item.title"
+							:to="item.path === '#' ? '' : item.path"
+							class="px-1"
+						>
+							<v-icon
+								left
+								:small="item.path === $router.currentRoute.path"
+							>
+								{{ item.icon }}
+							</v-icon>
+							<span
+								v-if="item.path === $router.currentRoute.path"
+								class="subtitle-2"
+							>
+								{{ item.title }}
+							</span>
+						</v-tab>
+					</v-tabs>
+				</template>
 
 				<v-spacer></v-spacer>
 
@@ -312,7 +331,6 @@ import io from 'socket.io-client'
 import ConfigApis from '@/apis/ConfigApis'
 import Confirm from '@/components/Confirm'
 import PasswordDialog from '@/components/dialogs/Password'
-import { Settings } from '@/modules/Settings'
 import { Routes } from '@/router'
 
 import { mapActions, mapMutations, mapGetters } from 'vuex'
@@ -326,7 +344,7 @@ export default {
 	},
 	name: 'app',
 	computed: {
-		...mapGetters(['user', 'auth', 'appInfo']),
+		...mapGetters(['user', 'auth', 'appInfo', 'navTabs', 'darkMode']),
 		updateAvailable() {
 			return this.appInfo.newConfigVersion ? 1 : 0
 		},
@@ -336,12 +354,6 @@ export default {
 			this.title = value.name || ''
 			this.startSocket()
 		},
-		dark(v) {
-			this.settings.store('dark', this.dark)
-
-			this.$vuetify.theme.dark = v
-			this.changeThemeColor()
-		},
 	},
 	data() {
 		return {
@@ -378,7 +390,6 @@ export default {
 				{ icon: 'folder', title: 'Store', path: Routes.store },
 				{ icon: 'share', title: 'Network graph', path: Routes.mesh },
 			],
-			settings: new Settings(localStorage),
 			status: '',
 			statusColor: '',
 			drawer: false,
@@ -388,7 +399,6 @@ export default {
 			title: '',
 			snackbar: false,
 			snackbarText: '',
-			dark: undefined,
 			baseURI: ConfigApis.getBasePath(),
 		}
 	},
@@ -535,8 +545,14 @@ export default {
 				'meta[name=msapplication-TileColor]'
 			)
 
-			metaThemeColor.setAttribute('content', this.dark ? '#000' : '#fff')
-			metaThemeColor2.setAttribute('content', this.dark ? '#000' : '#fff')
+			metaThemeColor.setAttribute(
+				'content',
+				this.darkMode ? '#000' : '#fff'
+			)
+			metaThemeColor2.setAttribute(
+				'content',
+				this.darkMode ? '#000' : '#fff'
+			)
 		},
 		importFile: function (ext) {
 			const self = this
@@ -828,7 +844,6 @@ export default {
 			this.hideTopbar = true
 		}
 
-		this.dark = this.settings.load('dark', false)
 		this.changeThemeColor()
 
 		this.$store.subscribe((mutation) => {
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 7875b207483..22fc584ec3e 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -9,6 +9,42 @@
 					ref="form_settings"
 				>
 					<v-expansion-panels accordion multiple>
+						<v-expansion-panel key="UI">
+							<v-expansion-panel-header>
+								<v-row no-gutters>
+									<v-col align-self="center"> UI </v-col>
+									<v-col class="text-right pr-5">
+										<v-btn
+											@click.stop="openDocs('general')"
+											x-small
+										>
+											Docs
+										</v-btn>
+									</v-col>
+								</v-row>
+							</v-expansion-panel-header>
+							<v-expansion-panel-content>
+								<v-row class="mb-5">
+									<v-col cols="12" sm="6">
+										<v-switch
+											hint="Enable dark mode"
+											persistent-hint
+											label="Dark mode"
+											v-model="internalDarkMode"
+										></v-switch>
+									</v-col>
+									<v-col cols="12" sm="6">
+										<v-switch
+											hint="Enable this to use Tabs in the top bar instead of a left menu for navigation (useful when integrated in Home Assistant)"
+											persistent-hint
+											label="Use tabs for navigation"
+											v-model="internalNavTabs"
+										></v-switch>
+									</v-col>
+								</v-row>
+							</v-expansion-panel-content>
+							<v-divider />
+						</v-expansion-panel>
 						<v-expansion-panel key="general">
 							<v-expansion-panel-header>
 								<v-row no-gutters>
@@ -1038,7 +1074,7 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
 import ConfigApis from '@/apis/ConfigApis'
 import fileInput from '@/components/custom/file-input.vue'
 import { parse } from 'native-url'
@@ -1121,12 +1157,21 @@ export default {
 			'devices',
 			'serial_ports',
 			'scales',
+			'darkMode',
+			'navTabs',
 		]),
 	},
 	watch: {
 		dialogValue(val) {
 			val || this.closeDialog()
 		},
+		internalDarkMode(v) {
+			this.setDarkMode(v)
+			this.$vuetify.theme.dark = v
+		},
+		internalNavTabs(v) {
+			this.setNavTabs(v)
+		},
 	},
 	data() {
 		return {
@@ -1242,10 +1287,13 @@ export default {
 					)
 				},
 			},
+			internalDarkMode: undefined,
+			internalNavTabs: undefined,
 		}
 	},
 	methods: {
 		...mapMutations(['showSnackbar']),
+		...mapActions(['setDarkMode', 'setNavTabs']),
 		differentKeys() {
 			const values = Object.values(this.newZwave.securityKeys)
 
@@ -1412,6 +1460,9 @@ export default {
 		// hide socket status indicator from toolbar
 		this.$emit('updateStatus')
 		this.getConfig()
+
+		this.internalDarkMode = this.darkMode
+		this.internalNavTabs = this.navTabs
 	},
 }
 </script>
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 6f41e9ec6ea..9f6a2df675f 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -1,4 +1,7 @@
 import { $set } from "../lib/utils"
+import { Settings } from '@/modules/Settings'
+
+const settings = new Settings(localStorage);
 
 export const state = {
   auth: undefined,
@@ -59,7 +62,11 @@ export const state = {
     zwaveVersion: '',
     controllerStatus: 'Unknown',
     newConfigVersion: undefined
-  }
+  },
+	ui: {
+		darkMode: settings.load('dark', false),
+		navTabs: settings.load('navTabs', false),
+	}
 }
 
 function getValue(v) {
@@ -91,7 +98,9 @@ export const getters = {
   devices: state => state.devices,
   gateway: state => state.gateway,
   appInfo: state => state.appInfo,
-  scales: state => state.scales
+  scales: state => state.scales,
+	darkMode: state => state.ui.darkMode,
+	navTabs: state => state.ui.navTabs
 }
 
 export const actions = {
@@ -132,7 +141,13 @@ export const actions = {
   },
   removeValue(store, data) {
     store.commit('removeValue', data)
-  }
+  },
+	setDarkMode(store, darkMode) {
+		store.commit('setDarkMode', darkMode)
+	},
+	setNavTabs(store, navTabs) {
+		store.commit('setNavTabs', navTabs)
+	}
 }
 
 export const mutations = {
@@ -249,7 +264,7 @@ export const mutations = {
       let lastTransmit = node.lastTransmit
       let errorReceive = false
       let errorTransmit = false
-  
+
       if (node.statistics) {
         if (node.isControllerNode) {
           const prev = node.statistics
@@ -373,5 +388,13 @@ export const mutations = {
         state.devices.push(d)
       }
     }
-  }
+  },
+	setDarkMode(state, value) {
+		settings.store('dark', value);
+		state.ui.darkMode = value
+	},
+	setNavTabs(state, value) {
+		settings.store('navTabs', value);
+		state.ui.navTabs = value
+	}
 }

From 83ad56e81d52d1251d2b43a082264d000f60f94b Mon Sep 17 00:00:00 2001
From: floutchito <floutchito@gmail.com>
Date: Fri, 25 Feb 2022 15:42:15 +0100
Subject: [PATCH 02/11] feat(ui): Flatten style and unnest elevation when
 necessary

Remove cards nesting when unnecessary
Flatten elevation when unnecessary
Use buttons instead of ExpansionPanels for actions and statistics on ControlPanel
Refactored StatisticsCard.vue
---
 src/App.vue                                |    8 +-
 src/components/ControlPanel.vue            |  207 +-
 src/components/Mesh.vue                    |  180 +-
 src/components/Settings.vue                | 1986 ++++++++++----------
 src/components/SmartStart.vue              |  102 +-
 src/components/custom/StatisticsCard.vue   |  185 +-
 src/components/dialogs/DialogAddRemove.vue |   12 +-
 src/components/nodes-table/index.vue       |    4 +-
 8 files changed, 1323 insertions(+), 1361 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 798180205d4..ca1f57d1604 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -64,7 +64,7 @@
 							v-for="item in pages"
 							:key="item.title"
 							:to="item.path === '#' ? '' : item.path"
-							class="px-1"
+							class="smaller-min-width-tabs"
 						>
 							<v-icon
 								left
@@ -860,3 +860,9 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+.smaller-min-width-tabs {
+	min-width: 60px;
+}
+</style>
diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index 0441209bc58..368f938c0a2 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -1,102 +1,127 @@
 <template>
-	<v-container fluid>
-		<v-card>
-			<v-card-text>
-				<v-container fluid>
-					<v-row justify="center">
-						<v-col cols="12" sm="6">
-							<v-expansion-panels style="justify-content: start">
-								<v-expansion-panel
-									class="ma-3"
-									style="max-width: 600px"
+	<div>
+		<v-container fluid class="pa-4">
+			<v-row class="py-4 align-center" no-gutters>
+				<v-col class="text-end">
+					<v-menu>
+						<template #activator="{ on }">
+							<v-item-group class="v-btn-toggle">
+								<v-btn
+									:color="
+										showControllerStatistics
+											? 'green'
+											: 'grey'
+									"
+									outlined
+									@click="toggleControllerStatistics"
 								>
-									<v-expansion-panel-header
-										>Actions</v-expansion-panel-header
+									Controller statistics
+									<v-icon
+										:color="
+											showControllerStatistics
+												? 'green'
+												: 'grey'
+										"
+										right
+										v-on="on"
 									>
-									<v-expansion-panel-content>
-										<v-card flat>
-											<v-card-text>
-												<v-row>
-													<v-col
-														cols="12"
-														md="6"
-														style="
-															text-align: center;
-														"
-													>
-														<v-btn
-															depressed
-															color="primary"
-															@click="
-																addRemoveShowDialog = true
-															"
-														>
-															Manage nodes
-														</v-btn>
-													</v-col>
-													<v-col
-														cols="12"
-														md="6"
-														style="
-															text-align: center;
-														"
-													>
-														<v-btn
-															dark
-															color="green"
-															depressed
-															@click="
-																advancedShowDialog = true
-															"
-														>
-															Advanced
-														</v-btn>
-													</v-col>
-												</v-row>
-											</v-card-text>
-										</v-card>
-									</v-expansion-panel-content>
-								</v-expansion-panel>
-							</v-expansion-panels>
-						</v-col>
+										multiline_chart
+									</v-icon>
+								</v-btn>
+								<v-btn color="primary" outlined v-on="on">
+									Actions
+									<v-icon right>arrow_drop_down</v-icon>
+								</v-btn>
+							</v-item-group>
+						</template>
 
-						<v-col
-							v-if="controllerNode"
-							cols="12"
-							sm="6"
-							style="text-align: center"
-						>
+						<v-list>
+							<v-list-item @click="addRemoveShowDialog = true">
+								<v-list-item-content
+									class="d-none d-sm-inline-flex"
+								>
+									<v-list-item-title>
+										Manage nodes
+									</v-list-item-title>
+									<v-list-item-subtitle>
+										Include, replace or exclude devices
+									</v-list-item-subtitle>
+								</v-list-item-content>
+								<v-list-item-action>
+									<v-btn
+										depressed
+										outlined
+										color="primary"
+										@click="addRemoveShowDialog = true"
+									>
+										Manage nodes
+									</v-btn>
+								</v-list-item-action>
+							</v-list-item>
+							<v-divider />
+							<v-list-item @click="advancedShowDialog = true">
+								<v-list-item-content
+									class="d-none d-sm-inline-flex"
+								>
+									<v-list-item-title>
+										Advanced actions
+									</v-list-item-title>
+									<v-list-item-subtitle>
+										Maintainance, troubleshooting and other
+										advanced actions
+									</v-list-item-subtitle>
+								</v-list-item-content>
+								<v-list-item-action>
+									<v-btn
+										dark
+										color="green"
+										depressed
+										outlined
+										@click="advancedShowDialog = true"
+									>
+										Advanced actions
+									</v-btn>
+								</v-list-item-action>
+							</v-list-item>
+						</v-list>
+					</v-menu>
+				</v-col>
+			</v-row>
+			<v-expand-transition>
+				<v-row v-show="showControllerStatistics">
+					<v-col class="mb-8">
+						<v-sheet outlined rounded>
 							<StatisticsCard
+								v-if="true || controllerNode"
 								title="Controller Statistics"
 								:node="this.controllerNode"
 							/>
-						</v-col>
-					</v-row>
-				</v-container>
-
-				<DialogAddRemove
-					v-model="addRemoveShowDialog"
-					:socket="socket"
-					@close="onAddRemoveClose"
-					@apiRequest="apiRequest"
-					v-on="{ showConfirm: $listeners.showConfirm }"
-				/>
+						</v-sheet>
+					</v-col>
+				</v-row>
+			</v-expand-transition>
+			<nodes-table
+				:socket="socket"
+				v-on="$listeners"
+				@action="sendAction"
+			/>
+		</v-container>
 
-				<DialogAdvanced
-					v-model="advancedShowDialog"
-					@close="advancedShowDialog = false"
-					:actions="actions"
-					@action="onAction"
-				/>
+		<DialogAddRemove
+			v-model="addRemoveShowDialog"
+			:socket="socket"
+			@close="onAddRemoveClose"
+			@apiRequest="apiRequest"
+			v-on="{ showConfirm: $listeners.showConfirm }"
+		/>
 
-				<nodes-table
-					:socket="socket"
-					v-on="$listeners"
-					@action="sendAction"
-				/>
-			</v-card-text>
-		</v-card>
-	</v-container>
+		<DialogAdvanced
+			v-model="advancedShowDialog"
+			@close="advancedShowDialog = false"
+			:actions="actions"
+			@action="onAction"
+		/>
+	</div>
 </template>
 
 <script>
@@ -260,6 +285,7 @@ export default {
 					return valid || 'This field is required.'
 				},
 			},
+			showControllerStatistics: false,
 		}
 	},
 	methods: {
@@ -572,6 +598,9 @@ export default {
 				)
 			}
 		},
+		toggleControllerStatistics() {
+			this.showControllerStatistics = !this.showControllerStatistics
+		},
 	},
 	mounted() {
 		const onApiResponse = this.onApiResponse.bind(this)
diff --git a/src/components/Mesh.vue b/src/components/Mesh.vue
index 29e633c6b56..39dadbdfb80 100644
--- a/src/components/Mesh.vue
+++ b/src/components/Mesh.vue
@@ -1,104 +1,92 @@
 <template>
-	<v-container fluid>
-		<v-card class="pa-5">
-			<zwave-graph
-				ref="mesh"
-				id="mesh"
-				:nodes="nodes"
-				@node-click="nodeClick"
-			/>
+	<v-container fluid class="pa-5">
+		<zwave-graph
+			ref="mesh"
+			id="mesh"
+			:nodes="nodes"
+			@node-click="nodeClick"
+		/>
 
-			<v-container
-				id="properties"
-				draggable
-				v-show="showProperties"
-				class="details"
+		<v-container
+			id="properties"
+			draggable
+			v-show="showProperties"
+			class="details"
+		>
+			<v-icon
+				@click="showProperties = false"
+				style="
+					cursor: pointer;
+					position: absolute;
+					right: 10px;
+					top: 10px;
+				"
+				>clear</v-icon
 			>
-				<v-icon
-					@click="showProperties = false"
-					style="
-						cursor: pointer;
-						position: absolute;
-						right: 10px;
-						top: 10px;
-					"
-					>clear</v-icon
-				>
-				<v-subheader>Node properties</v-subheader>
+			<v-subheader>Node properties</v-subheader>
 
-				<v-col v-if="selectedNode">
-					<v-list
-						dense
-						style="min-width: 300px; background: transparent"
-					>
-						<v-list-item>
-							<v-list-item-content>ID</v-list-item-content>
-							<v-list-item-content class="align-end">{{
-								selectedNode.id
-							}}</v-list-item-content>
-						</v-list-item>
-						<v-list-item>
-							<v-list-item-content>Status</v-list-item-content>
-							<v-list-item-content class="align-end">{{
-								selectedNode.status
-							}}</v-list-item-content>
-						</v-list-item>
-						<v-list-item>
-							<v-list-item-content>Code</v-list-item-content>
-							<v-list-item-content class="align-end">{{
-								selectedNode.productLabel
-							}}</v-list-item-content>
-						</v-list-item>
-						<v-list-item>
-							<v-list-item-content>Product</v-list-item-content>
-							<v-list-item-content class="align-end">{{
-								selectedNode.productDescription
-							}}</v-list-item-content>
-						</v-list-item>
-						<v-list-item>
-							<v-list-item-content
-								>Manufacturer</v-list-item-content
-							>
-							<v-list-item-content class="align-end">{{
-								selectedNode.manufacturer
-							}}</v-list-item-content>
-						</v-list-item>
-						<v-list-item v-if="selectedNode.name">
-							<v-list-item-content>Name</v-list-item-content>
-							<v-list-item-content class="align-end">{{
-								selectedNode.name
-							}}</v-list-item-content>
-						</v-list-item>
-						<v-list-item v-if="selectedNode.loc">
-							<v-list-item-content>Location</v-list-item-content>
-							<v-list-item-content class="align-end">{{
-								selectedNode.loc
-							}}</v-list-item-content>
-						</v-list-item>
-						<v-list-item>
-							<v-list-item-content
-								>Statistics</v-list-item-content
-							>
-							<v-list-item-content class="align-end"
-								><statistics-arrows :node="selectedNode"
-							/></v-list-item-content>
-						</v-list-item>
-					</v-list>
-					<v-row
-						v-if="!selectedNode.isControllerNode"
-						class="mt-1"
-						justify="center"
+			<v-col v-if="selectedNode">
+				<v-list dense style="min-width: 300px; background: transparent">
+					<v-list-item>
+						<v-list-item-content>ID</v-list-item-content>
+						<v-list-item-content class="align-end">{{
+							selectedNode.id
+						}}</v-list-item-content>
+					</v-list-item>
+					<v-list-item>
+						<v-list-item-content>Status</v-list-item-content>
+						<v-list-item-content class="align-end">{{
+							selectedNode.status
+						}}</v-list-item-content>
+					</v-list-item>
+					<v-list-item>
+						<v-list-item-content>Code</v-list-item-content>
+						<v-list-item-content class="align-end">{{
+							selectedNode.productLabel
+						}}</v-list-item-content>
+					</v-list-item>
+					<v-list-item>
+						<v-list-item-content>Product</v-list-item-content>
+						<v-list-item-content class="align-end">{{
+							selectedNode.productDescription
+						}}</v-list-item-content>
+					</v-list-item>
+					<v-list-item>
+						<v-list-item-content>Manufacturer</v-list-item-content>
+						<v-list-item-content class="align-end">{{
+							selectedNode.manufacturer
+						}}</v-list-item-content>
+					</v-list-item>
+					<v-list-item v-if="selectedNode.name">
+						<v-list-item-content>Name</v-list-item-content>
+						<v-list-item-content class="align-end">{{
+							selectedNode.name
+						}}</v-list-item-content>
+					</v-list-item>
+					<v-list-item v-if="selectedNode.loc">
+						<v-list-item-content>Location</v-list-item-content>
+						<v-list-item-content class="align-end">{{
+							selectedNode.loc
+						}}</v-list-item-content>
+					</v-list-item>
+					<v-list-item>
+						<v-list-item-content>Statistics</v-list-item-content>
+						<v-list-item-content class="align-end"
+							><statistics-arrows :node="selectedNode"
+						/></v-list-item-content>
+					</v-list-item>
+				</v-list>
+				<v-row
+					v-if="!selectedNode.isControllerNode"
+					class="mt-1"
+					justify="center"
+				>
+					<v-btn color="primary" rounded @click="dialogHealth = true"
+						>Check Health</v-btn
 					>
-						<v-btn
-							color="primary"
-							rounded
-							@click="dialogHealth = true"
-							>Check Health</v-btn
-						>
-					</v-row>
-				</v-col>
-			</v-container>
-		</v-card>
+				</v-row>
+			</v-col>
+		</v-container>
 		<v-speed-dial style="left: 100px" bottom fab left fixed v-model="fab">
 			<template v-slot:activator>
 				<v-btn color="blue darken-2" dark fab hover v-model="fab">
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 22fc584ec3e..2cdac84b8f1 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,1075 +1,981 @@
 <template>
-	<v-container fluid grid-list-md>
-		<v-card>
-			<v-card-text>
-				<v-form
-					id="form_settings"
-					@submit.prevent="update"
-					v-model="valid_zwave"
-					ref="form_settings"
-				>
-					<v-expansion-panels accordion multiple>
-						<v-expansion-panel key="UI">
-							<v-expansion-panel-header>
-								<v-row no-gutters>
-									<v-col align-self="center"> UI </v-col>
-									<v-col class="text-right pr-5">
-										<v-btn
-											@click.stop="openDocs('general')"
-											x-small
-										>
-											Docs
-										</v-btn>
-									</v-col>
-								</v-row>
-							</v-expansion-panel-header>
-							<v-expansion-panel-content>
+	<v-container fluid grid-list-md class="pa-4 pt-8">
+		<v-form
+			id="form_settings"
+			@submit.prevent="update"
+			v-model="valid_zwave"
+			ref="form_settings"
+		>
+			<v-expansion-panels
+				accordion
+				multiple
+				flat
+				class="expansion-panels-outlined"
+			>
+				<v-expansion-panel key="UI">
+					<v-expansion-panel-header>
+						<v-row no-gutters>
+							<v-col align-self="center"> UI </v-col>
+							<v-col class="text-right pr-5">
+								<v-btn
+									@click.stop="openDocs('general')"
+									color="primary"
+									outlined
+									x-small
+								>
+									Docs
+									<v-icon x-small right>launch</v-icon>
+								</v-btn>
+							</v-col>
+						</v-row>
+					</v-expansion-panel-header>
+					<v-expansion-panel-content>
+						<v-row class="mb-5">
+							<v-col cols="12" sm="6">
+								<v-switch
+									hint="Enable dark mode"
+									persistent-hint
+									label="Dark mode"
+									v-model="internalDarkMode"
+								></v-switch>
+							</v-col>
+							<v-col cols="12" sm="6">
+								<v-switch
+									hint="Enable this to use Tabs in the top bar instead of a left menu for navigation (useful when integrated in Home Assistant)"
+									persistent-hint
+									label="Use tabs for navigation"
+									v-model="internalNavTabs"
+								></v-switch>
+							</v-col>
+						</v-row>
+					</v-expansion-panel-content>
+					<v-divider />
+				</v-expansion-panel>
+				<v-expansion-panel key="general">
+					<v-expansion-panel-header>
+						<v-row no-gutters>
+							<v-col align-self="center"> General </v-col>
+							<v-col class="text-right pr-5">
+								<v-btn
+									@click.stop="openDocs('general')"
+									color="primary"
+									outlined
+									x-small
+								>
+									Docs
+									<v-icon x-small right>launch</v-icon>
+								</v-btn>
+							</v-col>
+						</v-row>
+					</v-expansion-panel-header>
+					<v-expansion-panel-content>
+						<v-card flat>
+							<v-card-text>
 								<v-row class="mb-5">
-									<v-col cols="12" sm="6">
+									<v-col cols="12" sm="6" md="4">
 										<v-switch
-											hint="Enable dark mode"
+											hint="Enable this to password protect your application. Default username is `admin`, password is `zwave`"
 											persistent-hint
-											label="Dark mode"
-											v-model="internalDarkMode"
+											label="Auth"
+											v-model="newGateway.authEnabled"
 										></v-switch>
 									</v-col>
-									<v-col cols="12" sm="6">
+									<v-col cols="12" sm="6" md="4">
 										<v-switch
-											hint="Enable this to use Tabs in the top bar instead of a left menu for navigation (useful when integrated in Home Assistant)"
+											hint="Enable this to serve page using HTTPS. REQUIRES APP RELOAD"
 											persistent-hint
-											label="Use tabs for navigation"
-											v-model="internalNavTabs"
+											label="HTTPS"
+											v-model="newGateway.https"
 										></v-switch>
 									</v-col>
-								</v-row>
-							</v-expansion-panel-content>
-							<v-divider />
-						</v-expansion-panel>
-						<v-expansion-panel key="general">
-							<v-expansion-panel-header>
-								<v-row no-gutters>
-									<v-col align-self="center"> General </v-col>
-									<v-col class="text-right pr-5">
-										<v-btn
-											@click.stop="openDocs('general')"
-											x-small
-										>
-											Docs
-										</v-btn>
+									<v-col cols="12" sm="6" md="4">
+										<v-combobox
+											hint="You can select a plugin from the list or write the path to your custom plugin and press enter"
+											persistent-hint
+											label="Plugins"
+											:items="[
+												'@varet/zj2m-prom-exporter',
+											]"
+											multiple
+											chips
+											deletable-chips
+											v-model="newGateway.plugins"
+										></v-combobox>
+									</v-col>
+									<v-col cols="12" sm="6" md="4">
+										<v-switch
+											hint="Enable logging"
+											persistent-hint
+											label="Log enabled"
+											v-model="newGateway.logEnabled"
+										></v-switch>
+									</v-col>
+									<v-col
+										cols="12"
+										sm="6"
+										md="4"
+										v-if="newGateway.logEnabled"
+									>
+										<v-select
+											:items="logLevels"
+											v-model="newGateway.logLevel"
+											label="Log Level"
+										></v-select>
+									</v-col>
+									<v-col
+										cols="12"
+										sm="6"
+										md="4"
+										v-if="newGateway.logEnabled"
+									>
+										<v-switch
+											hint="Store logs in a file. Default: store/zwavejs2mqtt_%DATE%.log"
+											persistent-hint
+											label="Log to file"
+											v-model="newGateway.logToFile"
+										></v-switch>
 									</v-col>
 								</v-row>
-							</v-expansion-panel-header>
-							<v-expansion-panel-content>
-								<v-card flat>
-									<v-card-text>
-										<v-row class="mb-5">
-											<v-col cols="12" sm="6" md="4">
-												<v-switch
-													hint="Enable this to password protect your application. Default username is `admin`, password is `zwave`"
-													persistent-hint
-													label="Auth"
-													v-model="
-														newGateway.authEnabled
-													"
-												></v-switch>
-											</v-col>
-											<v-col cols="12" sm="6" md="4">
-												<v-switch
-													hint="Enable this to serve page using HTTPS. REQUIRES APP RELOAD"
-													persistent-hint
-													label="HTTPS"
-													v-model="newGateway.https"
-												></v-switch>
-											</v-col>
-											<v-col cols="12" sm="6" md="4">
-												<v-combobox
-													hint="You can select a plugin from the list or write the path to your custom plugin and press enter"
-													persistent-hint
-													label="Plugins"
-													:items="[
-														'@varet/zj2m-prom-exporter',
-													]"
-													multiple
-													chips
-													deletable-chips
-													v-model="newGateway.plugins"
-												></v-combobox>
-											</v-col>
-											<v-col cols="12" sm="6" md="4">
-												<v-switch
-													hint="Enable logging"
-													persistent-hint
-													label="Log enabled"
-													v-model="
-														newGateway.logEnabled
-													"
-												></v-switch>
-											</v-col>
-											<v-col
-												cols="12"
-												sm="6"
-												md="4"
-												v-if="newGateway.logEnabled"
-											>
-												<v-select
-													:items="logLevels"
-													v-model="
-														newGateway.logLevel
-													"
-													label="Log Level"
-												></v-select>
-											</v-col>
-											<v-col
-												cols="12"
-												sm="6"
-												md="4"
-												v-if="newGateway.logEnabled"
-											>
-												<v-switch
-													hint="Store logs in a file. Default: store/zwavejs2mqtt_%DATE%.log"
-													persistent-hint
-													label="Log to file"
-													v-model="
-														newGateway.logToFile
-													"
-												></v-switch>
-											</v-col>
-										</v-row>
-										<v-subheader class="font-weight-bold"
-											>Devices values
-											configuration</v-subheader
+								<v-subheader class="font-weight-bold">
+									Devices values configuration
+								</v-subheader>
+								<div class="mb-5 caption">
+									Add here valueIds specific configurations
+									for each device. This means that if you
+									create an entry here this configuration will
+									be applied to each valueId of each device of
+									the same type in your Network.
+								</div>
+								<v-data-table
+									:headers="visibleHeaders"
+									:items="newGateway.values"
+									:items-per-page-options="[
+										10,
+										20,
+										{ text: 'All', value: -1 },
+									]"
+									class="elevation-1"
+								>
+									<template v-slot:[`item.device`]="{ item }">
+										{{ deviceName(item.device) }}
+									</template>
+									<template v-slot:[`item.value`]="{ item }">
+										{{
+											item.value.label +
+											' (' +
+											item.value.id +
+											')'
+										}}
+									</template>
+									<template v-slot:[`item.topic`]="{ item }">
+										{{ item.topic }}
+									</template>
+									<template
+										v-slot:[`item.postOperation`]="{ item }"
+									>
+										{{
+											item.postOperation || 'No operation'
+										}}
+									</template>
+									<template
+										v-slot:[`item.enablePoll`]="{ item }"
+									>
+										{{
+											item.enablePoll
+												? 'Interval: ' +
+												  item.pollInterval +
+												  's'
+												: 'No'
+										}}
+									</template>
+									<template
+										v-slot:[`item.actions`]="{ item }"
+									>
+										<v-icon
+											small
+											class="mr-2"
+											color="green"
+											@click="editItem(item)"
 										>
-										<div class="mb-5 caption">
-											Add here valueIds specific
-											configurations for each device. This
-											means that if you create an entry
-											here this configuration will be
-											applied to each valueId of each
-											device of the same type in your
-											Network.
-										</div>
-										<v-data-table
-											:headers="visibleHeaders"
-											:items="newGateway.values"
-											:items-per-page-options="[
-												10,
-												20,
-												{ text: 'All', value: -1 },
-											]"
-											class="elevation-1"
+											edit
+										</v-icon>
+										<v-icon
+											small
+											color="red"
+											@click="deleteItem(item)"
+										>
+											delete
+										</v-icon>
+									</template>
+								</v-data-table>
+							</v-card-text>
+							<v-card-actions>
+								<v-btn
+									color="blue darken-1"
+									text
+									@click="dialogValue = true"
+								>
+									New Value
+								</v-btn>
+							</v-card-actions>
+						</v-card>
+					</v-expansion-panel-content>
+					<v-divider />
+				</v-expansion-panel>
+
+				<v-expansion-panel key="zwave">
+					<v-expansion-panel-header>
+						<v-row no-gutters>
+							<v-col align-self="center"> Z-Wave </v-col>
+							<v-col class="text-right pr-5">
+								<v-btn
+									@click.stop="openDocs('zwave')"
+									color="primary"
+									outlined
+									x-small
+								>
+									Docs
+									<v-icon x-small right>launch</v-icon>
+								</v-btn>
+							</v-col>
+						</v-row>
+					</v-expansion-panel-header>
+					<v-expansion-panel-content>
+						<v-card flat>
+							<v-card-text>
+								<v-row>
+									<v-col cols="12" sm="6">
+										<v-combobox
+											v-model="newZwave.port"
+											label="Serial Port"
+											hint="Ex /dev/ttyUSB0. If your port is not listed here just write the port path here"
+											persistent-hint
+											:rules="[rules.required]"
+											required
+											:items="serial_ports"
+										></v-combobox>
+									</v-col>
+									<v-col cols="12" sm="6">
+										<v-text-field
+											v-model.trim="
+												newZwave.deviceConfigPriorityDir
+											"
+											label="Config priority directory"
+											:rules="[rules.required]"
+											hint="Directory from where device configuration files can be loaded with higher priority than the included ones. This directory does not get indexed and should be used sparingly, e.g. when custom files are absolutely necessary or for testing"
+											required
+										></v-text-field>
+									</v-col>
+									<v-row v-if="newZwave.securityKeys">
+										<v-col cols="12" sm="6">
+											<v-text-field
+												v-model="
+													newZwave.securityKeys
+														.S2_Unauthenticated
+												"
+												label="S2 Unauthenticated"
+												prepend-icon="vpn_key"
+												@paste="
+													fixKey(
+														$event,
+														'S2_Unauthenticated'
+													)
+												"
+												:rules="[
+													rules.validKey,
+													rules.validLength,
+													differentKeys,
+												]"
+												persistent-hint
+												append-outer-icon="wifi_protected_setup"
+												@click:append-outer="
+													randomKey(
+														'S2_Unauthenticated'
+													)
+												"
+											></v-text-field>
+										</v-col>
+										<v-col cols="12" sm="6">
+											<v-text-field
+												v-model="
+													newZwave.securityKeys
+														.S2_Authenticated
+												"
+												@paste="
+													fixKey(
+														$event,
+														'S2_Authenticated'
+													)
+												"
+												prepend-icon="vpn_key"
+												label="S2 Authenticated"
+												persistent-hint
+												:rules="[
+													rules.validKey,
+													rules.validLength,
+													differentKeys,
+												]"
+												append-outer-icon="wifi_protected_setup"
+												@click:append-outer="
+													randomKey(
+														'S2_Authenticated'
+													)
+												"
+											></v-text-field>
+										</v-col>
+										<v-col cols="12" sm="6">
+											<v-text-field
+												v-model="
+													newZwave.securityKeys
+														.S2_AccessControl
+												"
+												@paste="
+													fixKey(
+														$event,
+														'S2_AccessControl'
+													)
+												"
+												prepend-icon="vpn_key"
+												label="S2 Access Control"
+												:rules="[
+													rules.validKey,
+													rules.validLength,
+													differentKeys,
+												]"
+												append-outer-icon="wifi_protected_setup"
+												@click:append-outer="
+													randomKey(
+														'S2_AccessControl'
+													)
+												"
+											></v-text-field>
+										</v-col>
+										<v-col cols="12" sm="6">
+											<v-text-field
+												v-model="
+													newZwave.securityKeys
+														.S0_Legacy
+												"
+												@paste="
+													fixKey($event, 'S0_Legacy')
+												"
+												prepend-icon="vpn_key"
+												label="S0 Legacy"
+												:rules="[
+													rules.validKey,
+													rules.validLength,
+													differentKeys,
+												]"
+												append-outer-icon="wifi_protected_setup"
+												@click:append-outer="
+													randomKey('S0_Legacy')
+												"
+											></v-text-field>
+										</v-col>
+									</v-row>
+									<v-col cols="12" sm="6">
+										<v-switch
+											hint="Usage statistics allows us to gain insight how `zwave-js` is used, which manufacturers and devices are most prevalent and where to best focus our efforts in order to improve `zwave-js` the most. We do not store any personal information. Details can be found under https://zwave-js.github.io/node-zwave-js/#/data-collection/data-collection?id=usage-statistics"
+											persistent-hint
+											label="Enable statistics"
+											v-model="newZwave.enableStatistics"
+										></v-switch>
+									</v-col>
+									<v-col cols="12" sm="6">
+										<v-switch
+											label="Soft Reset"
+											hint="Soft Reset is required after some commands like changing the RF region or restoring an NVM backup. Because it may cause problems in Docker containers with certain Z-Wave sticks, this functionality may be disabled."
+											persistent-hint
+											v-model="newZwave.enableSoftReset"
+										></v-switch>
+									</v-col>
+									<input
+										type="hidden"
+										:value="newZwave.disclaimerVersion"
+									/>
+									<v-col cols="12" sm="6" md="4">
+										<v-autocomplete
+											hint="Select preferred sensors scales. You can select a scale For more info check https://github.com/zwave-js/node-zwave-js/blob/master/packages/config/config/sensorTypes.json"
+											persistent-hint
+											label="Preferred scales"
+											:items="filteredScales"
+											multiple
+											:item-text="scaleName"
+											:rules="[rules.uniqueSensorType]"
+											chips
+											return-object
+											deletable-chips
+											v-model="newZwave.scales"
 										>
 											<template
-												v-slot:[`item.device`]="{
-													item,
-												}"
-											>
-												{{ deviceName(item.device) }}
-											</template>
-											<template
-												v-slot:[`item.value`]="{ item }"
-											>
-												{{
-													item.value.label +
-													' (' +
-													item.value.id +
-													')'
-												}}
-											</template>
-											<template
-												v-slot:[`item.topic`]="{ item }"
-											>
-												{{ item.topic }}
-											</template>
-											<template
-												v-slot:[`item.postOperation`]="{
-													item,
-												}"
-											>
-												{{
-													item.postOperation ||
-													'No operation'
-												}}
-											</template>
-											<template
-												v-slot:[`item.enablePoll`]="{
-													item,
-												}"
-											>
-												{{
-													item.enablePoll
-														? 'Interval: ' +
-														  item.pollInterval +
-														  's'
-														: 'No'
-												}}
-											</template>
-											<template
-												v-slot:[`item.actions`]="{
+												v-slot:item="{
 													item,
+													attrs,
+													on,
 												}"
 											>
-												<v-icon
-													small
-													class="mr-2"
-													color="green"
-													@click="editItem(item)"
-													>edit</v-icon
-												>
-												<v-icon
-													small
-													color="red"
-													@click="deleteItem(item)"
-													>delete</v-icon
+												<v-list-item
+													v-on="on"
+													v-bind="attrs"
+													two-line
 												>
+													<v-list-item-content>
+														<v-list-item-title>{{
+															scaleName(item)
+														}}</v-list-item-title>
+														<v-list-item-subtitle>{{
+															item.description ||
+															''
+														}}</v-list-item-subtitle>
+													</v-list-item-content>
+												</v-list-item>
 											</template>
-										</v-data-table>
-									</v-card-text>
-									<v-card-actions>
-										<v-btn
-											color="blue darken-1"
-											text
-											@click="dialogValue = true"
-											>New Value</v-btn
-										>
-									</v-card-actions>
-								</v-card>
-							</v-expansion-panel-content>
-						</v-expansion-panel>
-
-						<v-expansion-panel key="zwave">
-							<v-expansion-panel-header>
-								<v-row no-gutters>
-									<v-col align-self="center"> Z-Wave </v-col>
-									<v-col class="text-right pr-5">
-										<v-btn
-											@click.stop="openDocs('zwave')"
-											x-small
-										>
-											Docs
-										</v-btn>
+										</v-autocomplete>
+									</v-col>
+									<v-col cols="12" sm="6">
+										<v-switch
+											hint="Enable zwave-js logging"
+											persistent-hint
+											label="Log Enabled"
+											v-model="newZwave.logEnabled"
+										></v-switch>
+									</v-col>
+									<v-col
+										v-if="newZwave.logEnabled"
+										cols="12"
+										sm="6"
+									>
+										<v-select
+											:items="logLevels"
+											v-model="newZwave.logLevel"
+											label="Log Level"
+										></v-select>
+									</v-col>
+									<v-col
+										v-if="newZwave.logEnabled"
+										cols="12"
+										sm="6"
+									>
+										<v-switch
+											hint="Store zwave logs in a file (stored in store folder)"
+											persistent-hint
+											label="Log to file"
+											v-model="newZwave.logToFile"
+										></v-switch>
+									</v-col>
+									<v-col
+										v-if="newZwave.logEnabled"
+										cols="12"
+										sm="6"
+									>
+										<v-combobox
+											hint="Choose which nodes to log. Leave this empty to log all nodes"
+											persistent-hint
+											label="Log nodes"
+											:items="newZwave.nodeFilter || []"
+											multiple
+											:rules="[rules.validNodeLog]"
+											chips
+											deletable-chips
+											v-model="newZwave.nodeFilter"
+										></v-combobox>
 									</v-col>
+									<v-col cols="6">
+										<v-text-field
+											v-model.number="
+												newZwave.commandsTimeout
+											"
+											label="Inclusion/Exclusion timeout"
+											:rules="[rules.required]"
+											required
+											suffix="seconds"
+											hint="Seconds to wait before to stop inclusion/exclusion mode"
+											type="number"
+										></v-text-field>
+									</v-col>
+									<input
+										type="hidden"
+										:value="newZwave.options"
+									/>
 								</v-row>
-							</v-expansion-panel-header>
-							<v-expansion-panel-content>
-								<v-card flat>
-									<v-card-text>
-										<v-row>
-											<v-col cols="12" sm="6">
-												<v-combobox
-													v-model="newZwave.port"
-													label="Serial Port"
-													hint="Ex /dev/ttyUSB0. If your port is not listed here just write the port path here"
-													persistent-hint
-													:rules="[rules.required]"
-													required
-													:items="serial_ports"
-												></v-combobox>
-											</v-col>
-											<v-col cols="12" sm="6">
-												<v-text-field
-													v-model.trim="
-														newZwave.deviceConfigPriorityDir
-													"
-													label="Config priority directory"
-													:rules="[rules.required]"
-													hint="Directory from where device configuration files can be loaded with higher priority than the included ones. This directory does not get indexed and should be used sparingly, e.g. when custom files are absolutely necessary or for testing"
-													required
-												></v-text-field>
-											</v-col>
-											<v-row v-if="newZwave.securityKeys">
-												<v-col cols="12" sm="6">
-													<v-text-field
-														v-model="
-															newZwave
-																.securityKeys
-																.S2_Unauthenticated
-														"
-														label="S2 Unauthenticated"
-														prepend-icon="vpn_key"
-														@paste="
-															fixKey(
-																$event,
-																'S2_Unauthenticated'
-															)
-														"
-														:rules="[
-															rules.validKey,
-															rules.validLength,
-															differentKeys,
-														]"
-														persistent-hint
-														append-outer-icon="wifi_protected_setup"
-														@click:append-outer="
-															randomKey(
-																'S2_Unauthenticated'
-															)
-														"
-													></v-text-field>
-												</v-col>
-												<v-col cols="12" sm="6">
-													<v-text-field
-														v-model="
-															newZwave
-																.securityKeys
-																.S2_Authenticated
-														"
-														@paste="
-															fixKey(
-																$event,
-																'S2_Authenticated'
-															)
-														"
-														prepend-icon="vpn_key"
-														label="S2 Authenticated"
-														persistent-hint
-														:rules="[
-															rules.validKey,
-															rules.validLength,
-															differentKeys,
-														]"
-														append-outer-icon="wifi_protected_setup"
-														@click:append-outer="
-															randomKey(
-																'S2_Authenticated'
-															)
-														"
-													></v-text-field>
-												</v-col>
-												<v-col cols="12" sm="6">
-													<v-text-field
-														v-model="
-															newZwave
-																.securityKeys
-																.S2_AccessControl
-														"
-														@paste="
-															fixKey(
-																$event,
-																'S2_AccessControl'
-															)
-														"
-														prepend-icon="vpn_key"
-														label="S2 Access Control"
-														:rules="[
-															rules.validKey,
-															rules.validLength,
-															differentKeys,
-														]"
-														append-outer-icon="wifi_protected_setup"
-														@click:append-outer="
-															randomKey(
-																'S2_AccessControl'
-															)
-														"
-													></v-text-field>
-												</v-col>
-												<v-col cols="12" sm="6">
-													<v-text-field
-														v-model="
-															newZwave
-																.securityKeys
-																.S0_Legacy
-														"
-														@paste="
-															fixKey(
-																$event,
-																'S0_Legacy'
-															)
-														"
-														prepend-icon="vpn_key"
-														label="S0 Legacy"
-														:rules="[
-															rules.validKey,
-															rules.validLength,
-															differentKeys,
-														]"
-														append-outer-icon="wifi_protected_setup"
-														@click:append-outer="
-															randomKey(
-																'S0_Legacy'
-															)
-														"
-													></v-text-field>
-												</v-col>
-											</v-row>
-											<v-col cols="12" sm="6">
-												<v-switch
-													hint="Usage statistics allows us to gain insight how `zwave-js` is used, which manufacturers and devices are most prevalent and where to best focus our efforts in order to improve `zwave-js` the most. We do not store any personal information. Details can be found under https://zwave-js.github.io/node-zwave-js/#/data-collection/data-collection?id=usage-statistics"
-													persistent-hint
-													label="Enable statistics"
-													v-model="
-														newZwave.enableStatistics
-													"
-												></v-switch>
-											</v-col>
-											<v-col cols="12" sm="6">
-												<v-switch
-													label="Soft Reset"
-													hint="Soft Reset is required after some commands like changing the RF region or restoring an NVM backup. Because it may cause problems in Docker containers with certain Z-Wave sticks, this functionality may be disabled."
-													persistent-hint
-													v-model="
-														newZwave.enableSoftReset
-													"
-												></v-switch>
-											</v-col>
-											<input
-												type="hidden"
-												:value="
-													newZwave.disclaimerVersion
-												"
-											/>
-											<v-col cols="12" sm="6" md="4">
-												<v-autocomplete
-													hint="Select preferred sensors scales. You can select a scale For more info check https://github.com/zwave-js/node-zwave-js/blob/master/packages/config/config/sensorTypes.json"
-													persistent-hint
-													label="Preferred scales"
-													:items="filteredScales"
-													multiple
-													:item-text="scaleName"
-													:rules="[
-														rules.uniqueSensorType,
-													]"
-													chips
-													return-object
-													deletable-chips
-													v-model="newZwave.scales"
-												>
-													<template
-														v-slot:item="{
-															item,
-															attrs,
-															on,
-														}"
-													>
-														<v-list-item
-															v-on="on"
-															v-bind="attrs"
-															two-line
-														>
-															<v-list-item-content>
-																<v-list-item-title
-																	>{{
-																		scaleName(
-																			item
-																		)
-																	}}</v-list-item-title
-																>
-																<v-list-item-subtitle
-																	>{{
-																		item.description ||
-																		''
-																	}}</v-list-item-subtitle
-																>
-															</v-list-item-content>
-														</v-list-item>
-													</template>
-												</v-autocomplete>
-											</v-col>
-											<v-col cols="12" sm="6">
-												<v-switch
-													hint="Enable zwave-js logging"
-													persistent-hint
-													label="Log Enabled"
-													v-model="
-														newZwave.logEnabled
-													"
-												></v-switch>
-											</v-col>
-											<v-col
-												v-if="newZwave.logEnabled"
-												cols="12"
-												sm="6"
-											>
-												<v-select
-													:items="logLevels"
-													v-model="newZwave.logLevel"
-													label="Log Level"
-												></v-select>
-											</v-col>
-											<v-col
-												v-if="newZwave.logEnabled"
-												cols="12"
-												sm="6"
-											>
-												<v-switch
-													hint="Store zwave logs in a file (stored in store folder)"
-													persistent-hint
-													label="Log to file"
-													v-model="newZwave.logToFile"
-												></v-switch>
-											</v-col>
-											<v-col
-												v-if="newZwave.logEnabled"
-												cols="12"
-												sm="6"
-											>
-												<v-combobox
-													hint="Choose which nodes to log. Leave this empty to log all nodes"
-													persistent-hint
-													label="Log nodes"
-													:items="
-														newZwave.nodeFilter ||
-														[]
-													"
-													multiple
-													:rules="[
-														rules.validNodeLog,
-													]"
-													chips
-													deletable-chips
-													v-model="
-														newZwave.nodeFilter
-													"
-												></v-combobox>
-											</v-col>
-											<v-col cols="6">
-												<v-text-field
-													v-model.number="
-														newZwave.commandsTimeout
-													"
-													label="Inclusion/Exclusion timeout"
-													:rules="[rules.required]"
-													required
-													suffix="seconds"
-													hint="Seconds to wait before to stop inclusion/exclusion mode"
-													type="number"
-												></v-text-field>
-											</v-col>
-											<input
-												type="hidden"
-												:value="newZwave.options"
-											/>
-										</v-row>
-									</v-card-text>
-								</v-card>
-							</v-expansion-panel-content>
-						</v-expansion-panel>
-
-						<v-divider></v-divider>
+							</v-card-text>
+						</v-card>
+					</v-expansion-panel-content>
+				</v-expansion-panel>
+			</v-expansion-panels>
 
-						<v-container cols="12" sm="6" class="ml-1">
-							<v-switch
-								hint="Enable this to use zwavejs2mqtt only as Control Panel"
-								persistent-hint
-								label="Disable MQTT Gateway"
-								v-model="newMqtt.disabled"
-							></v-switch>
-						</v-container>
+			<v-container cols="12" sm="6" class="ml-1">
+				<v-switch
+					hint="Enable this to use zwavejs2mqtt only as Control Panel"
+					persistent-hint
+					label="Disable MQTT Gateway"
+					v-model="newMqtt.disabled"
+				></v-switch>
+			</v-container>
 
-						<v-expansion-panel key="mqtt" v-if="!newMqtt.disabled">
-							<v-expansion-panel-header>
-								<v-row no-gutters>
-									<v-col align-self="center"> Mqtt </v-col>
-									<v-col class="text-right pr-5">
-										<v-btn
-											@click.stop="openDocs('mqtt')"
-											x-small
-										>
-											Docs
-										</v-btn>
+			<v-expansion-panels
+				accordion
+				multiple
+				flat
+				class="expansion-panels-outlined"
+			>
+				<v-expansion-panel key="mqtt" v-if="!newMqtt.disabled">
+					<v-expansion-panel-header>
+						<v-row no-gutters>
+							<v-col align-self="center"> Mqtt </v-col>
+							<v-col class="text-right pr-5">
+								<v-btn
+									@click.stop="openDocs('mqtt')"
+									color="primary"
+									outlined
+									x-small
+								>
+									Docs
+									<v-icon x-small right>launch</v-icon>
+								</v-btn>
+							</v-col>
+						</v-row>
+					</v-expansion-panel-header>
+					<v-expansion-panel-content>
+						<v-card flat>
+							<v-card-text>
+								<v-row>
+									<v-col cols="12" sm="6" md="4">
+										<v-text-field
+											v-model.trim="newMqtt.name"
+											label="Name"
+											:rules="[
+												rules.required,
+												rules.validName,
+											]"
+											hint="Unique name that identify this gateway"
+											required
+										></v-text-field>
+									</v-col>
+									<v-col cols="12" sm="6" md="4">
+										<v-text-field
+											v-model.trim="newMqtt.host"
+											label="Host url"
+											:rules="[rules.required]"
+											hint="The host url"
+											required
+										></v-text-field>
+									</v-col>
+									<v-col cols="12" sm="6" md="4">
+										<v-text-field
+											v-model.number="newMqtt.port"
+											label="Port"
+											:rules="[rules.required]"
+											hint="Host Port"
+											required
+											type="number"
+										></v-text-field>
+									</v-col>
+									<v-col cols="12" sm="6" md="4">
+										<v-text-field
+											v-model.number="
+												newMqtt.reconnectPeriod
+											"
+											label="Reconnect period (ms)"
+											hint="Reconnection period"
+											:rules="[rules.required]"
+											required
+											type="number"
+										></v-text-field>
+									</v-col>
+									<v-col cols="12" sm="6" md="4">
+										<v-text-field
+											v-model.trim="newMqtt.prefix"
+											label="Prefix"
+											:rules="[
+												rules.required,
+												rules.validPrefix,
+											]"
+											hint="The prefix to add to each topic"
+											required
+										></v-text-field>
+									</v-col>
+									<v-col cols="12" sm="6" md="4">
+										<v-select
+											v-model="newMqtt.qos"
+											label="QoS"
+											:rules="[rules.required]"
+											required
+											:items="[0, 1, 2]"
+										></v-select>
+									</v-col>
+									<v-col cols="12" sm="6">
+										<v-switch
+											hint="Set retain flag to true for outgoing messages"
+											persistent-hint
+											label="Retain"
+											v-model="newMqtt.retain"
+										></v-switch>
+									</v-col>
+									<v-col cols="12" sm="6">
+										<v-switch
+											hint="If true the client does not have a persistent session and all information are lost when the client disconnects for any reason"
+											persistent-hint
+											label="Clean"
+											v-model="newMqtt.clean"
+										></v-switch>
+									</v-col>
+									<v-col cols="12" sm="6">
+										<v-switch
+											hint="Enable persistent storage of packets (QoS > 0) while client is offline. If disabled the in memory store will be used."
+											persistent-hint
+											label="Store"
+											v-model="newMqtt.store"
+										></v-switch>
+									</v-col>
+									<v-col cols="12" sm="6" v-if="secure">
+										<v-switch
+											hint="Enable this when using self signed certificates"
+											persistent-hint
+											label="Allow self signed certs"
+											v-model="newMqtt.allowSelfsigned"
+										></v-switch>
+									</v-col>
+									<v-col
+										cols="12"
+										sm="6"
+										md="4"
+										v-if="secure"
+									>
+										<file-input
+											label="Key.pem"
+											keyProp="_key"
+											v-model="newMqtt.key"
+											@onFileSelect="onFileSelect"
+										></file-input>
+									</v-col>
+									<v-col
+										cols="12"
+										sm="6"
+										md="4"
+										v-if="secure"
+									>
+										<file-input
+											label="Cert.pem"
+											keyProp="_cert"
+											v-model="newMqtt.cert"
+											@onFileSelect="onFileSelect"
+										></file-input>
+									</v-col>
+									<v-col
+										cols="12"
+										sm="6"
+										md="4"
+										v-if="secure"
+									>
+										<file-input
+											label="Ca.pem"
+											keyProp="_ca"
+											v-model="newMqtt.ca"
+											@onFileSelect="onFileSelect"
+										></file-input>
+									</v-col>
+									<v-col cols="12" sm="4">
+										<v-switch
+											hint="Does this client require auth?"
+											persistent-hint
+											label="Auth"
+											v-model="newMqtt.auth"
+										></v-switch>
+									</v-col>
+									<v-col v-if="newMqtt.auth" cols="12" sm="4">
+										<v-text-field
+											v-model="newMqtt.username"
+											label="Username"
+											:rules="[requiredUser]"
+											required
+										></v-text-field>
+									</v-col>
+									<v-col v-if="newMqtt.auth" cols="12" sm="4">
+										<v-text-field
+											v-model="newMqtt.password"
+											label="Password"
+											:rules="[requiredPassword]"
+											required
+											:append-icon="
+												e1
+													? 'visibility'
+													: 'visibility_off'
+											"
+											@click:append="() => (e1 = !e1)"
+											:type="e1 ? 'password' : 'text'"
+										></v-text-field>
 									</v-col>
 								</v-row>
-							</v-expansion-panel-header>
-							<v-expansion-panel-content>
-								<v-card flat>
-									<v-card-text>
-										<v-row>
-											<v-col cols="12" sm="6" md="4">
-												<v-text-field
-													v-model.trim="newMqtt.name"
-													label="Name"
-													:rules="[
-														rules.required,
-														rules.validName,
-													]"
-													hint="Unique name that identify this gateway"
-													required
-												></v-text-field>
-											</v-col>
-											<v-col cols="12" sm="6" md="4">
-												<v-text-field
-													v-model.trim="newMqtt.host"
-													label="Host url"
-													:rules="[rules.required]"
-													hint="The host url"
-													required
-												></v-text-field>
-											</v-col>
-											<v-col cols="12" sm="6" md="4">
-												<v-text-field
-													v-model.number="
-														newMqtt.port
-													"
-													label="Port"
-													:rules="[rules.required]"
-													hint="Host Port"
-													required
-													type="number"
-												></v-text-field>
-											</v-col>
-											<v-col cols="12" sm="6" md="4">
-												<v-text-field
-													v-model.number="
-														newMqtt.reconnectPeriod
-													"
-													label="Reconnect period (ms)"
-													hint="Reconnection period"
-													:rules="[rules.required]"
-													required
-													type="number"
-												></v-text-field>
-											</v-col>
-											<v-col cols="12" sm="6" md="4">
-												<v-text-field
-													v-model.trim="
-														newMqtt.prefix
-													"
-													label="Prefix"
-													:rules="[
-														rules.required,
-														rules.validPrefix,
-													]"
-													hint="The prefix to add to each topic"
-													required
-												></v-text-field>
-											</v-col>
-											<v-col cols="12" sm="6" md="4">
-												<v-select
-													v-model="newMqtt.qos"
-													label="QoS"
-													:rules="[rules.required]"
-													required
-													:items="[0, 1, 2]"
-												></v-select>
-											</v-col>
-											<v-col cols="12" sm="6">
-												<v-switch
-													hint="Set retain flag to true for outgoing messages"
-													persistent-hint
-													label="Retain"
-													v-model="newMqtt.retain"
-												></v-switch>
-											</v-col>
-											<v-col cols="12" sm="6">
-												<v-switch
-													hint="If true the client does not have a persistent session and all information are lost when the client disconnects for any reason"
-													persistent-hint
-													label="Clean"
-													v-model="newMqtt.clean"
-												></v-switch>
-											</v-col>
-											<v-col cols="12" sm="6">
-												<v-switch
-													hint="Enable persistent storage of packets (QoS > 0) while client is offline. If disabled the in memory store will be used."
-													persistent-hint
-													label="Store"
-													v-model="newMqtt.store"
-												></v-switch>
-											</v-col>
-											<v-col
-												cols="12"
-												sm="6"
-												v-if="secure"
-											>
-												<v-switch
-													hint="Enable this when using self signed certificates"
-													persistent-hint
-													label="Allow self signed certs"
-													v-model="
-														newMqtt.allowSelfsigned
-													"
-												></v-switch>
-											</v-col>
-											<v-col
-												cols="12"
-												sm="6"
-												md="4"
-												v-if="secure"
-											>
-												<file-input
-													label="Key.pem"
-													keyProp="_key"
-													v-model="newMqtt.key"
-													@onFileSelect="onFileSelect"
-												></file-input>
-											</v-col>
-											<v-col
-												cols="12"
-												sm="6"
-												md="4"
-												v-if="secure"
-											>
-												<file-input
-													label="Cert.pem"
-													keyProp="_cert"
-													v-model="newMqtt.cert"
-													@onFileSelect="onFileSelect"
-												></file-input>
-											</v-col>
-											<v-col
-												cols="12"
-												sm="6"
-												md="4"
-												v-if="secure"
-											>
-												<file-input
-													label="Ca.pem"
-													keyProp="_ca"
-													v-model="newMqtt.ca"
-													@onFileSelect="onFileSelect"
-												></file-input>
-											</v-col>
-											<v-col cols="12" sm="4">
-												<v-switch
-													hint="Does this client require auth?"
-													persistent-hint
-													label="Auth"
-													v-model="newMqtt.auth"
-												></v-switch>
-											</v-col>
-											<v-col
-												v-if="newMqtt.auth"
-												cols="12"
-												sm="4"
-											>
-												<v-text-field
-													v-model="newMqtt.username"
-													label="Username"
-													:rules="[requiredUser]"
-													required
-												></v-text-field>
-											</v-col>
-											<v-col
-												v-if="newMqtt.auth"
-												cols="12"
-												sm="4"
-											>
-												<v-text-field
-													v-model="newMqtt.password"
-													label="Password"
-													:rules="[requiredPassword]"
-													required
-													:append-icon="
-														e1
-															? 'visibility'
-															: 'visibility_off'
-													"
-													@click:append="
-														() => (e1 = !e1)
-													"
-													:type="
-														e1 ? 'password' : 'text'
-													"
-												></v-text-field>
-											</v-col>
-										</v-row>
-									</v-card-text>
-								</v-card>
-							</v-expansion-panel-content>
-						</v-expansion-panel>
-
-						<v-divider></v-divider>
+							</v-card-text>
+						</v-card>
+					</v-expansion-panel-content>
+					<v-divider />
+				</v-expansion-panel>
 
-						<v-expansion-panel
-							key="gateway"
-							v-if="!newMqtt.disabled"
-						>
-							<v-expansion-panel-header>
-								<v-row no-gutters>
-									<v-col align-self="center"> Gateway </v-col>
-									<v-col class="text-right pr-5">
-										<v-btn
-											@click.stop="openDocs('gateway')"
-											x-small
-										>
-											Docs
-										</v-btn>
+				<v-expansion-panel key="gateway" v-if="!newMqtt.disabled">
+					<v-expansion-panel-header>
+						<v-row no-gutters>
+							<v-col align-self="center"> Gateway </v-col>
+							<v-col class="text-right pr-5">
+								<v-btn
+									@click.stop="openDocs('gateway')"
+									color="primary"
+									outlined
+									x-small
+								>
+									Docs
+									<v-icon x-small right>launch</v-icon>
+								</v-btn>
+							</v-col>
+						</v-row>
+					</v-expansion-panel-header>
+					<v-expansion-panel-content>
+						<v-card flat>
+							<v-card-text>
+								<v-row>
+									<v-col cols="12">
+										<v-select
+											v-model="newGateway.type"
+											label="Topic type"
+											:rules="[rules.required]"
+											required
+											:items="gw_types"
+										></v-select>
+									</v-col>
+									<v-col cols="12">
+										<v-select
+											v-model="newGateway.payloadType"
+											label="Payload type"
+											required
+											:rules="[validPayload]"
+											:items="py_types"
+										></v-select>
+									</v-col>
+									<v-col
+										v-if="newGateway.type === 0"
+										cols="6"
+									>
+										<v-switch
+											label="Use nodes name instead of numeric nodeIDs"
+											v-model="newGateway.nodeNames"
+										></v-switch>
+									</v-col>
+									<v-col cols="6">
+										<v-switch
+											label="Ignore location"
+											hint="Don't add nodes location to values topic"
+											v-model="newGateway.ignoreLoc"
+											persistent-hint
+										></v-switch>
+									</v-col>
+									<v-col cols="6">
+										<v-switch
+											label="Send Zwave events"
+											hint="Enable this to get all zwave events in MQTT on _EVENTS topic"
+											v-model="newGateway.sendEvents"
+											persistent-hint
+										></v-switch>
+									</v-col>
+									<v-col cols="6">
+										<v-switch
+											label="Ignore status updates"
+											hint="Prevent gateway to send updates when a node changes it's status (dead/sleep, alive)"
+											v-model="newGateway.ignoreStatus"
+											persistent-hint
+										></v-switch>
+									</v-col>
+									<v-col
+										v-if="newGateway.payloadType !== 2"
+										cols="6"
+									>
+										<v-switch
+											label="Include Node info"
+											hint="Include Node's Name and Location on Payload"
+											v-model="newGateway.includeNodeInfo"
+											persistent-hint
+										></v-switch>
+									</v-col>
+									<v-col cols="6">
+										<v-switch
+											label="Publish node details"
+											hint="Details published under a topic, can help automations receive device info"
+											v-model="
+												newGateway.publishNodeDetails
+											"
+											persistent-hint
+										></v-switch>
 									</v-col>
 								</v-row>
-							</v-expansion-panel-header>
-							<v-expansion-panel-content>
-								<v-card flat>
-									<v-card-text>
-										<v-row>
-											<v-col cols="12">
-												<v-select
-													v-model="newGateway.type"
-													label="Topic type"
-													:rules="[rules.required]"
-													required
-													:items="gw_types"
-												></v-select>
-											</v-col>
-											<v-col cols="12">
-												<v-select
-													v-model="
-														newGateway.payloadType
-													"
-													label="Payload type"
-													required
-													:rules="[validPayload]"
-													:items="py_types"
-												></v-select>
-											</v-col>
-											<v-col
-												v-if="newGateway.type === 0"
-												cols="6"
-											>
-												<v-switch
-													label="Use nodes name instead of numeric nodeIDs"
-													v-model="
-														newGateway.nodeNames
-													"
-												></v-switch>
-											</v-col>
-											<v-col cols="6">
-												<v-switch
-													label="Ignore location"
-													hint="Don't add nodes location to values topic"
-													v-model="
-														newGateway.ignoreLoc
-													"
-													persistent-hint
-												></v-switch>
-											</v-col>
-											<v-col cols="6">
-												<v-switch
-													label="Send Zwave events"
-													hint="Enable this to get all zwave events in MQTT on _EVENTS topic"
-													v-model="
-														newGateway.sendEvents
-													"
-													persistent-hint
-												></v-switch>
-											</v-col>
-											<v-col cols="6">
-												<v-switch
-													label="Ignore status updates"
-													hint="Prevent gateway to send updates when a node changes it's status (dead/sleep, alive)"
-													v-model="
-														newGateway.ignoreStatus
-													"
-													persistent-hint
-												></v-switch>
-											</v-col>
-											<v-col
-												v-if="
-													newGateway.payloadType !== 2
-												"
-												cols="6"
-											>
-												<v-switch
-													label="Include Node info"
-													hint="Include Node's Name and Location on Payload"
-													v-model="
-														newGateway.includeNodeInfo
-													"
-													persistent-hint
-												></v-switch>
-											</v-col>
-											<v-col cols="6">
-												<v-switch
-													label="Publish node details"
-													hint="Details published under a topic, can help automations receive device info"
-													v-model="
-														newGateway.publishNodeDetails
-													"
-													persistent-hint
-												></v-switch>
-											</v-col>
-										</v-row>
-									</v-card-text>
-								</v-card>
-							</v-expansion-panel-content>
-						</v-expansion-panel>
-
-						<v-divider></v-divider>
+							</v-card-text>
+						</v-card>
+					</v-expansion-panel-content>
+					<v-divider />
+				</v-expansion-panel>
 
-						<v-expansion-panel key="Hass">
-							<v-expansion-panel-header>
-								<v-row no-gutters>
-									<v-col align-self="center">
-										Home Assistant
+				<v-expansion-panel key="Hass">
+					<v-expansion-panel-header>
+						<v-row no-gutters>
+							<v-col align-self="center"> Home Assistant </v-col>
+							<v-col class="text-right pr-5">
+								<v-btn
+									@click.stop="openDocs('home-assistant')"
+									color="primary"
+									outlined
+									x-small
+								>
+									Docs
+									<v-icon x-small right>launch</v-icon>
+								</v-btn>
+							</v-col>
+						</v-row>
+					</v-expansion-panel-header>
+					<v-expansion-panel-content>
+						<v-card flat>
+							<v-card-text>
+								<v-row>
+									<v-col cols="12" sm="6">
+										<v-switch
+											hint="Enable Z-Wave JS websocket server. This can be used with Home Assistant Z-Wave JS integration to discover entities"
+											persistent-hint
+											label="WS Server"
+											v-model="newZwave.serverEnabled"
+										></v-switch>
+									</v-col>
+									<v-col
+										v-if="newZwave.serverEnabled"
+										cols="12"
+										sm="6"
+									>
+										<v-text-field
+											v-model.number="newZwave.serverPort"
+											label="Server Port"
+											:rules="[rules.required]"
+											required
+											hint="The port to bind the Zwave Server. Default: 3000"
+											type="number"
+										></v-text-field>
 									</v-col>
-									<v-col class="text-right pr-5">
-										<v-btn
-											@click.stop="
-												openDocs('home-assistant')
+								</v-row>
+								<v-row v-if="!newMqtt.disabled">
+									<v-col cols="6">
+										<v-switch
+											label="MQTT Discovery"
+											hint="Create devices in Home Assistant using MQTT discovery. This is an alternative to Home Assistant Z-Wave JS integration"
+											v-model="newGateway.hassDiscovery"
+											persistent-hint
+										></v-switch>
+									</v-col>
+									<v-col
+										cols="6"
+										v-if="newGateway.hassDiscovery"
+									>
+										<v-text-field
+											v-model="newGateway.discoveryPrefix"
+											label="Discovery prefix"
+											hint="The prefix to use for Hass MQTT discovery. Leave empty to use the mqtt prefix"
+										></v-text-field>
+									</v-col>
+									<v-col
+										cols="6"
+										v-if="newGateway.hassDiscovery"
+									>
+										<v-switch
+											label="Retained discovery"
+											hint="Set retain flag to true in discovery messages"
+											v-model="
+												newGateway.retainedDiscovery
 											"
-											x-small
-										>
-											Docs
-										</v-btn>
+											persistent-hint
+										></v-switch>
+									</v-col>
+									<v-col
+										cols="6"
+										v-if="newGateway.hassDiscovery"
+									>
+										<v-switch
+											label="Manual discovery"
+											hint="Don't automatically send the discovery payloads when a device is discovered"
+											v-model="newGateway.manualDiscovery"
+											persistent-hint
+										></v-switch>
+									</v-col>
+									<v-col
+										cols="6"
+										v-if="newGateway.hassDiscovery"
+									>
+										<v-text-field
+											v-model="newGateway.entityTemplate"
+											label="Entity name template"
+											persistent-hint
+											hint="Template which generates entity names"
+										></v-text-field>
+									</v-col>
+									<v-col
+										cols="6"
+										v-if="newGateway.hassDiscovery"
+									>
+										<div>
+											Default: <code>%ln_%o</code><br />
+											-<code>%ln</code>: Node location
+											with name
+											(<code>&lt;location-?&gt;&lt;name&gt;</code>)<br />-
+											<code>%nid</code>: Node ID <br />-
+											<code>%n</code>: Node Name <br />-
+											<code>%loc</code>: Node Location
+											<br />- <code>%p</code>: valueId
+											property (fallback to device type)
+											<br />- <code>%pk</code>: valueId
+											property key (fallback to device
+											type) <br />- <code>%pn</code>:
+											valueId property name (fallback to
+											device type) <br />-
+											<code>%o</code>: HASS object_id
+											<br />- <code>%l</code>: valueId
+											label (fallback to object_id)
+										</div>
 									</v-col>
 								</v-row>
-							</v-expansion-panel-header>
-							<v-expansion-panel-content>
-								<v-card flat>
-									<v-card-text>
-										<v-row>
-											<v-col cols="12" sm="6">
-												<v-switch
-													hint="Enable Z-Wave JS websocket server. This can be used with Home Assistant Z-Wave JS integration to discover entities"
-													persistent-hint
-													label="WS Server"
-													v-model="
-														newZwave.serverEnabled
-													"
-												></v-switch>
-											</v-col>
-											<v-col
-												v-if="newZwave.serverEnabled"
-												cols="12"
-												sm="6"
-											>
-												<v-text-field
-													v-model.number="
-														newZwave.serverPort
-													"
-													label="Server Port"
-													:rules="[rules.required]"
-													required
-													hint="The port to bind the Zwave Server. Default: 3000"
-													type="number"
-												></v-text-field>
-											</v-col>
-										</v-row>
-										<v-row v-if="!newMqtt.disabled">
-											<v-col cols="6">
-												<v-switch
-													label="MQTT Discovery"
-													hint="Create devices in Home Assistant using MQTT discovery. This is an alternative to Home Assistant Z-Wave JS integration"
-													v-model="
-														newGateway.hassDiscovery
-													"
-													persistent-hint
-												></v-switch>
-											</v-col>
-											<v-col
-												cols="6"
-												v-if="newGateway.hassDiscovery"
-											>
-												<v-text-field
-													v-model="
-														newGateway.discoveryPrefix
-													"
-													label="Discovery prefix"
-													hint="The prefix to use for Hass MQTT discovery. Leave empty to use the mqtt prefix"
-												></v-text-field>
-											</v-col>
-											<v-col
-												cols="6"
-												v-if="newGateway.hassDiscovery"
-											>
-												<v-switch
-													label="Retained discovery"
-													hint="Set retain flag to true in discovery messages"
-													v-model="
-														newGateway.retainedDiscovery
-													"
-													persistent-hint
-												></v-switch>
-											</v-col>
-											<v-col
-												cols="6"
-												v-if="newGateway.hassDiscovery"
-											>
-												<v-switch
-													label="Manual discovery"
-													hint="Don't automatically send the discovery payloads when a device is discovered"
-													v-model="
-														newGateway.manualDiscovery
-													"
-													persistent-hint
-												></v-switch>
-											</v-col>
-											<v-col
-												cols="6"
-												v-if="newGateway.hassDiscovery"
-											>
-												<v-text-field
-													v-model="
-														newGateway.entityTemplate
-													"
-													label="Entity name template"
-													persistent-hint
-													hint="Template which generates entity names"
-												></v-text-field>
-											</v-col>
-											<v-col
-												cols="6"
-												v-if="newGateway.hassDiscovery"
-											>
-												<div>
-													Default: <code>%ln_%o</code
-													><br />
-													-<code>%ln</code>: Node
-													location with name
-													(<code>&lt;location-?&gt;&lt;name&gt;</code>)<br />-
-													<code>%nid</code>: Node ID
-													<br />- <code>%n</code>:
-													Node Name <br />-
-													<code>%loc</code>: Node
-													Location <br />-
-													<code>%p</code>: valueId
-													property (fallback to device
-													type) <br />-
-													<code>%pk</code>: valueId
-													property key (fallback to
-													device type) <br />-
-													<code>%pn</code>: valueId
-													property name (fallback to
-													device type) <br />-
-													<code>%o</code>: HASS
-													object_id <br />-
-													<code>%l</code>: valueId
-													label (fallback to
-													object_id)
-												</div>
-											</v-col>
-										</v-row>
-									</v-card-text>
-								</v-card>
-							</v-expansion-panel-content>
-						</v-expansion-panel>
-					</v-expansion-panels>
+							</v-card-text>
+						</v-card>
+					</v-expansion-panel-content>
+				</v-expansion-panel>
+			</v-expansion-panels>
 
-					<DialogGatewayValue
-						@save="saveValue"
-						@close="closeDialog"
-						v-model="dialogValue"
-						:gw_type="newGateway.type"
-						:title="dialogTitle"
-						:editedValue="editedValue"
-						:devices="devices"
-					/>
-				</v-form>
-			</v-card-text>
-			<v-card-actions>
-				<v-spacer></v-spacer>
-				<v-btn color="red darken-1" text @click="resetConfig">
-					Reset
-					<v-icon right dark>clear</v-icon>
-				</v-btn>
-				<v-btn color="purple darken-1" text @click="importSettings">
-					Import
-					<v-icon right dark>file_upload</v-icon>
-				</v-btn>
-				<v-btn color="green darken-1" text @click="exportSettings">
-					Export
-					<v-icon right dark>file_download</v-icon>
-				</v-btn>
-				<v-btn
-					color="blue darken-1"
-					text
-					type="submit"
-					form="form_settings"
-				>
-					Save
-					<v-icon right dark>save</v-icon>
-				</v-btn>
-			</v-card-actions>
-		</v-card>
+			<DialogGatewayValue
+				@save="saveValue"
+				@close="closeDialog"
+				v-model="dialogValue"
+				:gw_type="newGateway.type"
+				:title="dialogTitle"
+				:editedValue="editedValue"
+				:devices="devices"
+			/>
+		</v-form>
+		<v-toolbar elevation="0" class="mt-2">
+			<v-spacer></v-spacer>
+			<v-btn color="red darken-1" text @click="resetConfig">
+				Reset
+				<v-icon right dark>clear</v-icon>
+			</v-btn>
+			<v-btn color="purple darken-1" text @click="importSettings">
+				Import
+				<v-icon right dark>file_upload</v-icon>
+			</v-btn>
+			<v-btn color="green darken-1" text @click="exportSettings">
+				Export
+				<v-icon right dark>file_download</v-icon>
+			</v-btn>
+			<v-btn
+				color="blue darken-1"
+				text
+				type="submit"
+				form="form_settings"
+			>
+				Save
+				<v-icon right dark>save</v-icon>
+			</v-btn>
+		</v-toolbar>
 	</v-container>
 </template>
 
@@ -1466,3 +1372,9 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+.expansion-panels-outlined {
+	border: 1px solid rgba(0, 0, 0, 0.12);
+}
+</style>
diff --git a/src/components/SmartStart.vue b/src/components/SmartStart.vue
index 1466eb79c57..1ba79c621b3 100644
--- a/src/components/SmartStart.vue
+++ b/src/components/SmartStart.vue
@@ -1,59 +1,55 @@
 <template>
-	<v-container fluid>
-		<v-card>
-			<v-card-title>
-				Provisioning Entities
-				<v-spacer></v-spacer>
-			</v-card-title>
-			<v-data-table :headers="headers" :items="items" class="elevation-1">
-				<template
-					v-slot:[`item.securityClasses.s2AccessControl`]="{ item }"
-				>
-					<v-checkbox
-						v-model="item.securityClasses.s2AccessControl"
-						@change="onChange(item)"
-						hide-details
-						dense
-					></v-checkbox>
-				</template>
-				<template
-					v-slot:[`item.securityClasses.s2Authenticated`]="{ item }"
+	<v-container fluid class="pa-4">
+		<h1 class="display-1 my-4">Provisioning Entities</h1>
+
+		<v-data-table :headers="headers" :items="items" class="elevation-1">
+			<template
+				v-slot:[`item.securityClasses.s2AccessControl`]="{ item }"
+			>
+				<v-checkbox
+					v-model="item.securityClasses.s2AccessControl"
+					@change="onChange(item)"
+					hide-details
+					dense
+				></v-checkbox>
+			</template>
+			<template
+				v-slot:[`item.securityClasses.s2Authenticated`]="{ item }"
+			>
+				<v-checkbox
+					v-model="item.securityClasses.s2Authenticated"
+					@change="onChange(item)"
+					hide-details
+					dense
+				></v-checkbox>
+			</template>
+			<template
+				v-slot:[`item.securityClasses.s2Unauthenticated`]="{ item }"
+			>
+				<v-checkbox
+					v-model="item.securityClasses.s2Unauthenticated"
+					@change="onChange(item)"
+					hide-details
+					dense
+				></v-checkbox>
+			</template>
+			<template v-slot:[`item.securityClasses.s0Legacy`]="{ item }">
+				<v-checkbox
+					v-model="item.securityClasses.s0Legacy"
+					@change="onChange(item)"
+					hide-details
+					dense
+				></v-checkbox>
+			</template>
+			<template v-slot:[`item.actions`]="{ item }">
+				<v-icon small color="red" @click="removeItem(item)"
+					>delete</v-icon
 				>
-					<v-checkbox
-						v-model="item.securityClasses.s2Authenticated"
-						@change="onChange(item)"
-						hide-details
-						dense
-					></v-checkbox>
-				</template>
-				<template
-					v-slot:[`item.securityClasses.s2Unauthenticated`]="{ item }"
+				<v-icon small color="success" @click="editItem(item)"
+					>edit</v-icon
 				>
-					<v-checkbox
-						v-model="item.securityClasses.s2Unauthenticated"
-						@change="onChange(item)"
-						hide-details
-						dense
-					></v-checkbox>
-				</template>
-				<template v-slot:[`item.securityClasses.s0Legacy`]="{ item }">
-					<v-checkbox
-						v-model="item.securityClasses.s0Legacy"
-						@change="onChange(item)"
-						hide-details
-						dense
-					></v-checkbox>
-				</template>
-				<template v-slot:[`item.actions`]="{ item }">
-					<v-icon small color="red" @click="removeItem(item)"
-						>delete</v-icon
-					>
-					<v-icon small color="success" @click="editItem(item)"
-						>edit</v-icon
-					>
-				</template>
-			</v-data-table>
-		</v-card>
+			</template>
+		</v-data-table>
 		<v-speed-dial
 			v-model="fab"
 			fixed
diff --git a/src/components/custom/StatisticsCard.vue b/src/components/custom/StatisticsCard.vue
index 922703da152..c63eec4af47 100644
--- a/src/components/custom/StatisticsCard.vue
+++ b/src/components/custom/StatisticsCard.vue
@@ -1,36 +1,40 @@
 <template>
-	<v-expansion-panels style="justify-content: start">
-		<v-expansion-panel class="ma-3" style="max-width: 600px">
-			<v-expansion-panel-header>{{ title }}</v-expansion-panel-header>
-			<v-expansion-panel-content>
-				<v-card flat>
-					<v-card-text>
-						<v-row>
-							<v-col
-								v-for="prop in statProps"
-								:key="prop"
-								cols="4"
-							>
-								<div
-									class="caption font-weight-bold"
-									:style="{
-										color:
-											props[prop].color ||
-											$vuetify.theme.themes.light.primary,
-									}"
-								>
-									{{ props[prop].title || prop }}
-								</div>
-								<div class="caption font-weight-bold">
-									{{ getStat(prop) }}
-								</div>
-							</v-col>
-						</v-row>
-					</v-card-text>
-				</v-card>
-			</v-expansion-panel-content>
-		</v-expansion-panel>
-	</v-expansion-panels>
+	<v-row class="pa-4">
+		<template v-for="(section, name) in props">
+			<v-col
+				cols="12"
+				:md="section.cols"
+				:key="`section-content-${name}`"
+			>
+				<div>
+					<h1 class="text-caption text-uppercase grey--text mb-4">
+						{{ name }}
+					</h1>
+					<v-row>
+						<v-col
+							v-for="(stat, index) in section.stats"
+							:key="`controller-stat-${index}`"
+							:cols="section.statCols"
+							:style="{ color: getColor(stat) }"
+						>
+							<h2 class="text-caption">
+								{{ stat.title }}
+							</h2>
+							<div class="text-caption font-weight-bold">
+								{{ getStat(stat) || '-' }}
+							</div>
+						</v-col>
+					</v-row>
+				</div>
+			</v-col>
+			<v-divider
+				:key="`section-divider-${name}`"
+				:vertical="$vuetify.breakpoint.mdAndUp"
+				v-if="name !== 'communication'"
+				class="my-4"
+			/>
+		</template>
+	</v-row>
 </template>
 
 <script>
@@ -43,59 +47,74 @@ export default {
 			type: [String],
 		},
 	},
-	computed: {
-		statProps() {
-			return Object.keys(this.props)
-				.filter((p) => this.hasStat(p))
-				.sort()
-		},
-	},
 	data() {
 		return {
+			hideNoDataStats: false,
 			props: {
-				messagesTX: {
-					title: 'Messages TX',
-				},
-				messagesRX: {
-					title: 'Messages RX',
-				},
-				messagesDroppedRX: {
-					title: 'Messages Dropped RX',
-					color: 'red',
-				},
-				NAK: {
-					color: 'red',
-				},
-				CAN: {},
-				timeoutACK: {
-					title: 'Timeout ACK',
-					color: 'red',
-				},
-				timeoutResponse: {
-					title: 'Timeout Response',
-					color: 'red',
+				messages: {
+					stats: {
+						messagesTX: {
+							title: 'TX',
+						},
+						messagesRX: {
+							title: 'RX',
+						},
+						messagesDroppedTX: {
+							title: 'Dropped TX',
+							color: 'red',
+						},
+						messagesDroppedRX: {
+							title: 'Dropped RX',
+							color: 'red',
+						},
+					},
+					cols: 3,
+					statCols: 6,
 				},
-				timeoutCallback: {
-					title: 'Timeout Callback',
-					color: 'red',
+				commands: {
+					stats: {
+						commandsTX: {
+							title: 'TX',
+						},
+						commandsRX: {
+							title: 'RX',
+						},
+						commandsDroppedTX: {
+							title: 'Dropped TX',
+							color: 'red',
+						},
+						commandsDroppedRX: {
+							title: 'Dropped RX',
+							color: 'red',
+						},
+					},
+					cols: 3,
+					statCols: 6,
 				},
-				messagesDroppedTX: {
-					title: 'Messages Dropped TX',
-					color: 'red',
-				},
-				commandsTX: {
-					title: 'Commands TX',
-				},
-				commandsRX: {
-					title: 'Commands RX',
-				},
-				commandsDroppedRX: {
-					title: 'Commands dropped RX',
-					color: 'red',
-				},
-				commandsDroppedTX: {
-					title: 'Commands Dropped TX',
-					color: 'red',
+				communication: {
+					stats: {
+						CAN: {
+							title: 'CAN',
+						},
+						NAK: {
+							title: 'NAK',
+							color: 'red',
+						},
+						timeoutACK: {
+							title: 'Timeout ACK',
+							color: 'red',
+						},
+						timeoutResponse: {
+							title: 'Timeout Response',
+							color: 'red',
+						},
+						timeoutCallback: {
+							title: 'Timeout Callback',
+							color: 'red',
+						},
+					},
+					cols: 6,
+					statCols: 4,
 				},
 			},
 		}
@@ -118,6 +137,12 @@ export default {
 				return null
 			}
 		},
+		getColor(prop) {
+			if (!this.hasStat(prop)) {
+				return 'grey'
+			}
+			return prop.color || this.$vuetify.theme.themes.light.primary
+		},
 	},
 }
 </script>
diff --git a/src/components/dialogs/DialogAddRemove.vue b/src/components/dialogs/DialogAddRemove.vue
index 997c394f109..96ea65c49ea 100644
--- a/src/components/dialogs/DialogAddRemove.vue
+++ b/src/components/dialogs/DialogAddRemove.vue
@@ -14,8 +14,14 @@
 				>
 			</v-card-title>
 
-			<v-card-text>
-				<v-stepper v-model="currentStep" @change="changeStep">
+			<v-divider />
+
+			<v-card-text class="pa-0">
+				<v-stepper
+					v-model="currentStep"
+					@change="changeStep"
+					elevation="0"
+				>
 					<v-stepper-header>
 						<template v-for="s in steps">
 							<v-stepper-step
@@ -559,7 +565,7 @@
 				</v-stepper>
 
 				<v-alert
-					class="mt-3"
+					class="mt-3 mb-0"
 					v-if="alert"
 					dense
 					text
diff --git a/src/components/nodes-table/index.vue b/src/components/nodes-table/index.vue
index 2841312364c..4a55553159f 100644
--- a/src/components/nodes-table/index.vue
+++ b/src/components/nodes-table/index.vue
@@ -30,8 +30,8 @@
 						"
 					>
 						<template v-slot:activator="{ on }">
-							<v-btn v-on="on">
-								<v-icon>menu</v-icon>
+							<v-btn color="primary" outlined v-on="on">
+								<v-icon left small>table_chart</v-icon>
 								Columns
 							</v-btn>
 						</template>

From 2d58cf3796884b5559f69f80fc8234500644d2f3 Mon Sep 17 00:00:00 2001
From: floutchito <floutchito@gmail.com>
Date: Sat, 19 Mar 2022 20:38:43 +0100
Subject: [PATCH 03/11] feat(ui): StatisticsCard.vue use computed structure to
 hold statistics

---
 src/components/custom/StatisticsCard.vue | 129 ++++++++++-------------
 1 file changed, 55 insertions(+), 74 deletions(-)

diff --git a/src/components/custom/StatisticsCard.vue b/src/components/custom/StatisticsCard.vue
index c63eec4af47..22beab734dc 100644
--- a/src/components/custom/StatisticsCard.vue
+++ b/src/components/custom/StatisticsCard.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-row class="pa-4">
+	<v-row v-if="node" class="pa-4">
 		<template v-for="(section, name) in props">
 			<v-col
 				cols="12"
@@ -15,13 +15,13 @@
 							v-for="(stat, index) in section.stats"
 							:key="`controller-stat-${index}`"
 							:cols="section.statCols"
-							:style="{ color: getColor(stat) }"
+							:style="{ color: stat.color }"
 						>
 							<h2 class="text-caption">
 								{{ stat.title }}
 							</h2>
 							<div class="text-caption font-weight-bold">
-								{{ getStat(stat) || '-' }}
+								{{ stat.value || '-' }}
 							</div>
 						</v-col>
 					</v-row>
@@ -50,98 +50,79 @@ export default {
 	data() {
 		return {
 			hideNoDataStats: false,
-			props: {
+			defaultColor: this.$vuetify.theme.themes.light.primary,
+		}
+	},
+	computed: {
+		props() {
+			return {
 				messages: {
 					stats: {
-						messagesTX: {
-							title: 'TX',
-						},
-						messagesRX: {
-							title: 'RX',
-						},
-						messagesDroppedTX: {
-							title: 'Dropped TX',
-							color: 'red',
-						},
-						messagesDroppedRX: {
-							title: 'Dropped RX',
-							color: 'red',
-						},
+						...this.createStat('messagesTX', 'TX'),
+						...this.createStat('messagesRX', 'RX'),
+						...this.createStat(
+							'messagesDroppedTX',
+							'Dropped TX',
+							'red'
+						),
+						...this.createStat(
+							'messagesDroppedRX',
+							'Dropped RX',
+							'red'
+						),
 					},
 					cols: 3,
 					statCols: 6,
 				},
 				commands: {
 					stats: {
-						commandsTX: {
-							title: 'TX',
-						},
-						commandsRX: {
-							title: 'RX',
-						},
-						commandsDroppedTX: {
-							title: 'Dropped TX',
-							color: 'red',
-						},
-						commandsDroppedRX: {
-							title: 'Dropped RX',
-							color: 'red',
-						},
+						...this.createStat('commandsTX', 'TX'),
+						...this.createStat('commandsRX', 'RX'),
+						...this.createStat(
+							'commandsDroppedTX',
+							'Dropped TX',
+							'red'
+						),
+						...this.createStat(
+							'commandsDroppedRX',
+							'Dropped RX',
+							'red'
+						),
 					},
 					cols: 3,
 					statCols: 6,
 				},
 				communication: {
 					stats: {
-						CAN: {
-							title: 'CAN',
-						},
-						NAK: {
-							title: 'NAK',
-							color: 'red',
-						},
-						timeoutACK: {
-							title: 'Timeout ACK',
-							color: 'red',
-						},
-						timeoutResponse: {
-							title: 'Timeout Response',
-							color: 'red',
-						},
-						timeoutCallback: {
-							title: 'Timeout Callback',
-							color: 'red',
-						},
+						...this.createStat('CAN', 'CAN'),
+						...this.createStat('NAK', 'NAK', 'red'),
+						...this.createStat('timeoutACK', 'Timeout ACK', 'red'),
+						...this.createStat(
+							'timeoutResponse',
+							'Timeout Response',
+							'red'
+						),
+						...this.createStat(
+							'timeoutCallback',
+							'Timeout Callback',
+							'red'
+						),
 					},
 					cols: 6,
 					statCols: 4,
 				},
-			},
-		}
-	},
-	methods: {
-		hasStat(prop) {
-			if (this.node && this.node.statistics) {
-				return Object.prototype.hasOwnProperty.call(
-					this.node.statistics,
-					prop
-				)
-			} else {
-				return false
 			}
 		},
-		getStat(prop) {
-			if (this.node && this.node.statistics) {
-				return this.node.statistics[prop]
-			} else {
-				return null
-			}
-		},
-		getColor(prop) {
-			if (!this.hasStat(prop)) {
-				return 'grey'
+	},
+	methods: {
+		createStat(slug, title, color = this.defaultColor) {
+			return {
+				[`${slug}`]: {
+					title: title,
+					value: this.node.statistics[slug],
+					color: this.node.statistics[slug] ? color : 'grey',
+				},
 			}
-			return prop.color || this.$vuetify.theme.themes.light.primary
 		},
 	},
 }

From eaea6d3c2c1589317bfaed1a843b8c07333bb2c9 Mon Sep 17 00:00:00 2001
From: floutchito <floutchito@gmail.com>
Date: Sat, 19 Mar 2022 20:46:05 +0100
Subject: [PATCH 04/11] feat(ui): HA mode navigation tabs small fixes

---
 src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ca1f57d1604..786cbc9298e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -67,7 +67,7 @@
 							class="smaller-min-width-tabs"
 						>
 							<v-icon
-								left
+								:left="item.path === $router.currentRoute.path"
 								:small="item.path === $router.currentRoute.path"
 							>
 								{{ item.icon }}
@@ -862,7 +862,7 @@ export default {
 </script>
 
 <style scoped>
-.smaller-min-width-tabs {
+.v-tabs >>> .smaller-min-width-tabs {
 	min-width: 60px;
 }
 </style>

From e85b34308f41b1cedab3d8b794a5a8fb16c9fbfc Mon Sep 17 00:00:00 2001
From: floutchito <floutchito@gmail.com>
Date: Sat, 19 Mar 2022 21:04:06 +0100
Subject: [PATCH 05/11] feat(ui): Outline StatisticsCard in Node detailed view

---
 src/components/nodes-table/NodeDetails.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/nodes-table/NodeDetails.vue b/src/components/nodes-table/NodeDetails.vue
index 7c8ba8c3288..4e8dc978785 100644
--- a/src/components/nodes-table/NodeDetails.vue
+++ b/src/components/nodes-table/NodeDetails.vue
@@ -32,7 +32,9 @@
 		</v-row>
 
 		<v-row justify="start">
-			<statistics-card title="Statistics" :node="node" />
+			<v-sheet outlined rounded>
+				<statistics-card title="Statistics" :node="node" />
+			</v-sheet>
 		</v-row>
 
 		<v-row>

From b0480f8bb812561744e94ea26b57424f1959b4b5 Mon Sep 17 00:00:00 2001
From: floutchito <floutchito@gmail.com>
Date: Sun, 20 Mar 2022 11:22:28 +0100
Subject: [PATCH 06/11] feat(ui): Reworked Store view, two-panes layout using
 full available space

Removed wrapping VCard
Positioned file browser sticky to the top of the view
Moved file selection VSpeedDial to file browser view

Positioned file content actions sticky to the bottom of the file content view

Vertically centered placeholder text and progress
Small typographic styling
---
 src/components/Store.vue | 308 +++++++++++++++++++++------------------
 1 file changed, 167 insertions(+), 141 deletions(-)

diff --git a/src/components/Store.vue b/src/components/Store.vue
index 1bc85f15502..e6c50c81abd 100644
--- a/src/components/Store.vue
+++ b/src/components/Store.vue
@@ -1,114 +1,146 @@
 <template>
-	<v-container fluid>
-		<v-card height="800" style="margin-top: 30px; overflow: hidden">
-			<v-row class="pa-4 full-height" justify="space-between">
-				<v-col class="scroll" cols="5">
-					<v-treeview
-						v-if="!loadingStore"
-						:active.sync="active"
-						v-model="selectedFiles"
-						:items="items"
-						activatable
-						open-all
-						selectable
-						item-key="path"
-						open-on-click
-						return-object
-					>
-						<template v-slot:prepend="{ item, open }">
-							<v-icon color="#FFC107" v-if="!item.ext">
-								{{ open ? 'folder_open' : 'folder' }}
-							</v-icon>
-							<v-icon color="blue" v-else> text_snippet </v-icon>
-						</template>
-						<template v-slot:label="{ item }">
-							<span>{{ item.name }} </span>
-							<div class="caption grey--text">
-								{{ item.size !== 'n/a' ? item.size : '' }}
-							</div>
-						</template>
-						<template v-slot:append="{ item }">
-							<v-row justify-end class="ma-1">
-								<v-icon
-									v-if="item.children"
-									@click.stop="writeFile(item.path, true)"
-									color="yellow"
-									>create_new_folder</v-icon
-								>
-								<v-icon
-									v-if="item.children"
-									@click.stop="writeFile(item.path, false)"
-									color="primary"
-									>post_add</v-icon
-								>
-								<v-icon
-									v-if="!item.isRoot"
-									@click.stop="deleteFile(item)"
-									color="red"
-									>delete</v-icon
-								>
-							</v-row>
-						</template>
-					</v-treeview>
-					<div v-else>
-						<v-progress-circular
-							indeterminate
-							color="primary"
-							style="align-self: center"
-						></v-progress-circular>
-					</div>
-				</v-col>
+	<v-container class="full-height pa-0" fluid>
+		<v-row no-gutters>
+			<v-col
+				class="sticky-top fill-remaining-space overflow-y-auto"
+				cols="6"
+				md="5"
+				lg="4"
+				xl="3"
+			>
+				<v-treeview
+					v-if="!loadingStore"
+					:active.sync="active"
+					v-model="selectedFiles"
+					:items="items"
+					activatable
+					open-all
+					selectable
+					item-key="path"
+					open-on-click
+					return-object
+				>
+					<template v-slot:prepend="{ item, open }">
+						<v-icon color="#FFC107" v-if="!item.ext">
+							{{ open ? 'folder_open' : 'folder' }}
+						</v-icon>
+						<v-icon color="blue" v-else> text_snippet </v-icon>
+					</template>
+					<template v-slot:label="{ item }">
+						<span class="subtitle-2">{{ item.name }}</span>
+						<div class="caption grey--text">
+							{{ item.size !== 'n/a' ? item.size : '' }}
+						</div>
+					</template>
+					<template v-slot:append="{ item }">
+						<v-row justify-end class="ma-1">
+							<v-icon
+								v-if="item.children"
+								@click.stop="writeFile(item.path, true)"
+								color="yellow"
+								>create_new_folder</v-icon
+							>
+							<v-icon
+								v-if="item.children"
+								@click.stop="writeFile(item.path, false)"
+								color="primary"
+								>post_add</v-icon
+							>
+							<v-icon
+								v-if="!item.isRoot"
+								@click.stop="deleteFile(item)"
+								color="red"
+								>delete</v-icon
+							>
+						</v-row>
+					</template>
+				</v-treeview>
+				<div v-else>
+					<v-progress-circular
+						indeterminate
+						color="primary"
+						style="align-self: center"
+					></v-progress-circular>
+				</div>
+				<v-speed-dial
+					v-if="selectedFiles.length > 0"
+					bottom
+					fab
+					right
+					absolute
+					v-model="fab"
+				>
+					<template v-slot:activator>
+						<v-btn
+							color="blue darken-2"
+							dark
+							fab
+							hover
+							v-model="fab"
+						>
+							<v-icon v-if="fab">close</v-icon>
+							<v-icon v-else>settings</v-icon>
+						</v-btn>
+					</template>
+					<v-btn fab dark small color="green" @click="downloadZip">
+						<v-icon>file_download</v-icon>
+					</v-btn>
+					<v-btn fab dark small color="red" @click="deleteSelected">
+						<v-icon>delete</v-icon>
+					</v-btn>
+				</v-speed-dial>
+			</v-col>
 
-				<v-divider vertical></v-divider>
+			<v-divider class="mx-0" vertical></v-divider>
 
-				<v-col class="text-center no-scroll full-height">
-					<div
-						v-if="!selected || !selected.ext"
-						class="
-							title
-							grey--text
-							text--lighten-1
-							font-weight-light
-						"
-						style="align-self: center"
-					>
-						Select a file
+			<v-col class="text-center overflow-y-auto d-flex justify-center">
+				<div
+					v-if="!selected || !selected.ext"
+					class="
+						title
+						grey--text
+						text--lighten-1
+						font-weight-light
+						align-self-center
+					"
+				>
+					<v-icon color="grey lighten-4" x-large>
+						text_snippet
+					</v-icon>
+					<br />
+					Please select a file
+				</div>
+				<div
+					v-else-if="loadingFile"
+					class="
+						title
+						grey--text
+						text--lighten-1
+						font-weight-light
+						align-self-center
+					"
+				>
+					<v-progress-circular
+						indeterminate
+						color="primary"
+					></v-progress-circular>
+				</div>
+				<div
+					class="fill-remaining-space flex-grow-1"
+					v-else
+					:key="selected.path"
+				>
+					<div class="file-content pa-4 pb-8">
+						<prism-editor
+							v-if="!notSupported"
+							class="custom-font"
+							lineNumbers
+							v-model="fileContent"
+							:highlight="highlighter"
+						></prism-editor>
 					</div>
-					<div
-						v-else-if="loadingFile"
-						class="
-							title
-							grey--text
-							text--lighten-1
-							font-weight-light
-						"
-						style="align-self: center"
-					>
-						<v-progress-circular
-							indeterminate
-							color="primary"
-							style="align-self: center"
-						></v-progress-circular>
-					</div>
-					<v-card
-						class="no-scroll full-height"
-						v-else
-						:key="selected.path"
-						flat
-					>
-						<v-card-text
-							class="no-scroll"
-							style="height: calc(100% - 50px)"
-						>
-							<prism-editor
-								v-if="!notSupported"
-								class="custom-font"
-								lineNumbers
-								v-model="fileContent"
-								:highlight="highlighter"
-							></prism-editor>
-						</v-card-text>
-						<v-card-actions v-if="!notSupported">
+					<div class="sticky-bottom pa-0" v-if="!notSupported">
+						<v-toolbar>
 							<v-spacer></v-spacer>
 							<v-btn
 								color="purple darken-1"
@@ -126,37 +158,16 @@
 								DOWNLOAD
 								<v-icon right dark>file_download</v-icon>
 							</v-btn>
-						</v-card-actions>
-					</v-card>
-				</v-col>
-			</v-row>
-		</v-card>
-		<v-speed-dial
-			v-if="selectedFiles.length > 0"
-			bottom
-			fab
-			right
-			fixed
-			v-model="fab"
-		>
-			<template v-slot:activator>
-				<v-btn color="blue darken-2" dark fab hover v-model="fab">
-					<v-icon v-if="fab">close</v-icon>
-					<v-icon v-else>settings</v-icon>
-				</v-btn>
-			</template>
-			<v-btn fab dark small color="green" @click="downloadZip">
-				<v-icon>file_download</v-icon>
-			</v-btn>
-			<v-btn fab dark small color="red" @click="deleteSelected">
-				<v-icon>delete</v-icon>
-			</v-btn>
-		</v-speed-dial>
+						</v-toolbar>
+					</div>
+				</div>
+			</v-col>
+		</v-row>
 	</v-container>
 </template>
-<style>
+<style scoped>
 /* optional class for removing the outline */
-.prism-editor-wrapper .prism-editor__textarea:focus {
+.prism-editor-wrapper >>> .prism-editor__textarea:focus {
 	outline: none !important;
 }
 
@@ -164,19 +175,34 @@
 	font-family: 'Fira Code', monospace;
 }
 
-.scroll {
-	overflow-y: scroll;
+.full-height {
 	height: 100%;
 }
 
-.no-scroll {
-	overflow: hidden;
+.file-content {
+	font-size: 0.875rem;
+	width: 100%;
+	min-height: calc(100% - 64px);
 }
 
-.full-height {
-	height: 100%;
+.fill-remaining-space {
+	height: calc(100vh - 64px);
+	max-width: 100%;
+}
+
+.sticky-top {
+	position: sticky;
+	align-self: flex-start;
+	top: 64px; /** Top app bar height */
+}
+
+.sticky-bottom {
+	position: sticky;
+	align-self: flex-start;
+	bottom: 0;
 }
 </style>
+
 <script>
 import ConfigApis from '@/apis/ConfigApis'
 

From 671791c4f8ec77e540c7dd50a58a644b59fe3d4a Mon Sep 17 00:00:00 2001
From: floutchito <floutchito@gmail.com>
Date: Sun, 20 Mar 2022 15:06:44 +0100
Subject: [PATCH 07/11] feat(ui): Reworked Node views

Pulled Ping / Advanced node actions out of NodeDetails
Using vertical tabs
Unwrapped manual instructions from tabs
Flattened values expansion panels
---
 src/components/nodes-table/ExpandedNode.vue | 315 +++++++++++++----
 src/components/nodes-table/NodeDetails.vue  | 371 ++++++--------------
 2 files changed, 354 insertions(+), 332 deletions(-)

diff --git a/src/components/nodes-table/ExpandedNode.vue b/src/components/nodes-table/ExpandedNode.vue
index c9d208521c7..6ee136443c0 100644
--- a/src/components/nodes-table/ExpandedNode.vue
+++ b/src/components/nodes-table/ExpandedNode.vue
@@ -1,24 +1,60 @@
 <template>
 	<td :colspan="isMobile ? 1 : headers.length">
-		<v-tabs
-			style="margin-top: 10px"
-			v-model="currentTab"
-			center-active
-			fixed-tabs
-			show-arrows
-			icons-and-text
-		>
-			<v-tab key="node">Node <v-icon>widgets</v-icon></v-tab>
-			<v-tab v-if="nodeMetadata" key="manual"
-				>Help <v-icon>help</v-icon></v-tab
-			>
-			<v-tab v-if="showHass" key="homeassistant"
-				>Home Assistant <v-icon>home</v-icon></v-tab
-			>
-			<v-tab key="groups">Groups <v-icon>device_hub</v-icon></v-tab>
-			<v-tab v-if="$vuetify.breakpoint.mdAndUp" key="debug"
-				>Debug Info <v-icon>bug_report</v-icon></v-tab
+		<v-row class="d-flex mt-2" align="center">
+			<v-col class="flex-grow-1 flex-shrink-0 ml-4">
+				<span class="title grey--text">Device ID </span>
+				<br />
+				<span class="subtitle font-weight-bold font-monospace">
+					{{ `${node.deviceId} (${node.hexId})` }}
+				</span>
+				<v-icon @click="openLink(node.dbLink)" class="ml-2" small>
+					ios_share
+				</v-icon>
+			</v-col>
+			<v-col class="text-end flex-shrink-1">
+				<v-item-group class="v-btn-toggle">
+					<v-btn
+						dark
+						color="primary"
+						@click.stop="forwardApiRequest('pingNode', [node.id])"
+						depressed
+					>
+						Ping
+					</v-btn>
+					<v-btn
+						dark
+						color="green"
+						depressed
+						@click="advancedShowDialog = true"
+					>
+						Advanced
+					</v-btn>
+				</v-item-group>
+			</v-col>
+		</v-row>
+
+		<v-divider class="my-4" />
+
+		<v-tabs v-model="currentTab" class="transparent mb-4" vertical>
+			<v-tab class="justify-start" key="node">
+				<v-icon small left>widgets</v-icon> Node
+			</v-tab>
+			<v-tab v-if="nodeMetadata" class="justify-start" key="manual">
+				<v-icon small left>help</v-icon> Help
+			</v-tab>
+			<v-tab v-if="showHass" class="justify-start" key="homeassistant">
+				<v-icon small left>home</v-icon> Home Assistant
+			</v-tab>
+			<v-tab key="groups" class="justify-start">
+				<v-icon small left>device_hub</v-icon> Groups
+			</v-tab>
+			<v-tab
+				v-if="$vuetify.breakpoint.mdAndUp"
+				class="justify-start"
+				key="debug"
 			>
+				<v-icon small left>bug_report</v-icon> Debug Info
+			</v-tab>
 
 			<!-- TABS -->
 			<v-tabs-items
@@ -27,8 +63,9 @@
 				v-model="currentTab"
 			>
 				<!-- TAB NODE -->
-				<v-tab-item key="node">
+				<v-tab-item key="node" transition="slide-y-transition">
 					<node-details
+						ref="nodeDetails"
 						:headers="headers"
 						:node="node"
 						:actions="actions"
@@ -38,47 +75,38 @@
 				</v-tab-item>
 
 				<!-- TAB NODE -->
-				<v-tab-item v-if="nodeMetadata" key="manual">
-					<v-row class="mt-2" justify="center">
-						<v-card class="ma-5" style="max-width: 600px">
-							<v-tabs vertical>
-								<v-tab
-									v-for="meta in Object.keys(nodeMetadata)"
-									:key="`tab-${meta}`"
-								>
-									{{ meta }}
-								</v-tab>
-
-								<v-tab-item
-									v-for="meta in Object.keys(nodeMetadata)"
-									:key="`content-${meta}`"
-								>
-									<v-card flat>
-										<v-card-text>
-											<v-col
-												style="width: 600px"
-												class="text-center"
-												v-if="meta === 'manual'"
-											>
-												<v-btn
-													:href="nodeMetadata[meta]"
-													color="primary"
-													>DOWNLOAD</v-btn
-												>
-											</v-col>
-											<p v-else>
-												{{ nodeMetadata[meta] }}
-											</p>
-										</v-card-text>
-									</v-card>
-								</v-tab-item>
-							</v-tabs>
-						</v-card>
-					</v-row>
+				<v-tab-item
+					v-if="nodeMetadata"
+					key="manual"
+					transition="slide-y-transition"
+				>
+					<section
+						v-for="meta in Object.keys(nodeMetadata)"
+						:key="`tab-${meta}`"
+						class="px-8 py-4"
+					>
+						<h1 class="capitalize">{{ meta }}</h1>
+						<p class="caption">
+							<v-btn
+								v-if="meta === 'manual'"
+								:href="nodeMetadata[meta]"
+								color="primary"
+							>
+								DOWNLOAD
+							</v-btn>
+							<span v-else>
+								{{ nodeMetadata[meta] }}
+							</span>
+						</p>
+					</section>
 				</v-tab-item>
 
 				<!-- TAB HOMEASSISTANT -->
-				<v-tab-item v-if="showHass" key="homeassistant">
+				<v-tab-item
+					v-if="showHass"
+					key="homeassistant"
+					transition="slide-y-transition"
+				>
 					<home-assistant
 						:node="node"
 						:socket="socket"
@@ -87,15 +115,19 @@
 				</v-tab-item>
 
 				<!-- TAB GROUPS -->
-				<v-tab-item key="groups">
+				<v-tab-item key="groups" transition="slide-y-transition">
 					<association-groups :node="node" :socket="socket" />
 				</v-tab-item>
 
 				<!-- TAB DEBUG INFO -->
-				<v-tab-item v-if="$vuetify.breakpoint.mdAndUp" key="debug">
+				<v-tab-item
+					v-if="$vuetify.breakpoint.mdAndUp"
+					key="debug"
+					transition="slide-y-transition"
+				>
 					<v-textarea
-						class="mx-2"
-						rows="10"
+						class="debug-content font-monospace mx-2"
+						rows="15"
 						append-icon="content_copy"
 						v-model="nodeJson"
 						readonly
@@ -105,6 +137,13 @@
 				</v-tab-item>
 			</v-tabs-items>
 		</v-tabs>
+
+		<DialogAdvanced
+			v-model="advancedShowDialog"
+			@close="advancedShowDialog = false"
+			:actions="advancedActions"
+			@action="nodeAction"
+		/>
 	</td>
 </template>
 
@@ -112,6 +151,7 @@
 import AssociationGroups from '@/components/nodes-table/AssociationGroups'
 import HomeAssistant from '@/components/nodes-table/HomeAssistant'
 import NodeDetails from '@/components/nodes-table/NodeDetails'
+import DialogAdvanced from '@/components/dialogs/DialogAdvanced'
 
 import { mapGetters } from 'vuex'
 
@@ -127,6 +167,7 @@ export default {
 		AssociationGroups,
 		HomeAssistant,
 		NodeDetails,
+		DialogAdvanced,
 	},
 	computed: {
 		...mapGetters(['gateway', 'mqtt']),
@@ -148,6 +189,129 @@ export default {
 	data() {
 		return {
 			currentTab: 0,
+			advancedShowDialog: false,
+			advancedActions: [
+				{
+					text: 'Export json',
+					options: [{ name: 'Export', action: 'exportNode' }],
+					icon: 'get_app',
+					desc: 'Export this node in a json file',
+				},
+				{
+					text: 'Clear Retained',
+					options: [
+						{
+							name: 'Clear',
+							action: 'removeNodeRetained',
+							args: {
+								mqtt: true,
+								confirm:
+									'Are you sure you want to remove all retained messages?',
+							},
+						},
+					],
+					icon: 'clear',
+					desc: 'All retained messages of this node will be removed from broker',
+				},
+				{
+					text: 'Update topics',
+					options: [
+						{
+							name: 'Update',
+							action: 'updateNodeTopics',
+							args: {
+								mqtt: true,
+								confirm:
+									'Are you sure you want to update all topics?',
+							},
+						},
+					],
+					icon: 'update',
+					desc: 'Update all node topics. Useful when name/location has changed',
+				},
+				{
+					text: 'Firmware update',
+					options: [
+						{ name: 'Begin', action: 'beginFirmwareUpdate' },
+						{ name: 'Abort', action: 'abortFirmwareUpdate' },
+					],
+					icon: 'update',
+					desc: 'Start/Stop a firmware update',
+				},
+				{
+					text: 'Heal Node',
+					options: [
+						{
+							name: 'Heal',
+							action: 'healNode',
+							args: {
+								confirm:
+									'Healing a node causes a lot of traffic, can take minutes up to hours and you can expect degraded performance while it is going on',
+							},
+						},
+					],
+					icon: 'healing',
+					desc: 'Force nodes to establish better connections to the controller',
+				},
+				{
+					text: 'Refresh Values',
+					options: [
+						{
+							name: 'Refresh',
+							action: 'refreshValues',
+							args: {
+								confirm:
+									'Are you sure you want to refresh values of this node? This action increases network traffic',
+							},
+						},
+					],
+					icon: 'cached',
+					desc: 'Update all CC values and metadata. Use only when many values seems stale',
+				},
+				{
+					text: 'Re-interview Node',
+					options: [
+						{
+							name: 'Interview',
+							action: 'refreshInfo',
+						},
+					],
+					icon: 'history',
+					desc: 'Clear all info about this node and make a new full interview. Use when the node has wrong or missing capabilities',
+				},
+				{
+					text: 'Failed Nodes',
+					options: [
+						{ name: 'Check', action: 'isFailedNode' },
+						{ name: 'Remove', action: 'removeFailedNode' },
+					],
+					icon: 'dangerous',
+					desc: 'Manage nodes that are dead and/or marked as failed with the controller',
+				},
+				{
+					text: 'Associations',
+					options: [
+						{
+							name: 'Clear',
+							action: 'removeAllAssociations',
+							args: {
+								confirm:
+									"This action will remove all associations of this node. This will also clear lifeline association with controller node, the node won't report state changes until that is set up again",
+							},
+						},
+						{
+							name: 'Remove',
+							action: 'removeNodeFromAllAssociations',
+							args: {
+								confirm:
+									'All direct associations to this node will be removed. Battery-powered nodes need to be woken up to edit their associations.',
+							},
+						},
+					],
+					icon: 'link_off',
+					desc: 'Clear all node associations / Remove node from all associations',
+				},
+			],
 		}
 	},
 	methods: {
@@ -157,8 +321,35 @@ export default {
 			textToCopy.select()
 			document.execCommand('copy')
 		},
+		nodeAction(action, args = {}) {
+			if (action === 'exportNode') {
+				this.exportNode()
+			} else if (args.mqtt) {
+				this.sendMqttAction(action, args.confirm)
+			} else {
+				this.$emit('action', action, { ...args, nodeId: this.node.id })
+			}
+		},
+		openLink(link) {
+			window.open(link, '_blank')
+		},
+		forwardApiRequest(apiName, args) {
+			this.$refs.nodeDetails.apiRequest(apiName, args)
+		},
 	},
 }
 </script>
 
-<style></style>
+<style>
+.debug-content textarea {
+	font-size: 0.75rem;
+	line-height: 1.25 !important;
+}
+.font-monospace {
+	font-family: 'Fira Code', monospace;
+}
+
+.capitalize {
+	text-transform: capitalize;
+}
+</style>
diff --git a/src/components/nodes-table/NodeDetails.vue b/src/components/nodes-table/NodeDetails.vue
index 4e8dc978785..6c88210e52b 100644
--- a/src/components/nodes-table/NodeDetails.vue
+++ b/src/components/nodes-table/NodeDetails.vue
@@ -1,37 +1,6 @@
 <template>
-	<v-container grid-list-md>
-		<v-row class="mt-5" align="center">
-			<v-subheader class="title">Device ID </v-subheader>
-			<span class="subtitle font-weight-bold">{{
-				`${node.deviceId} (${node.hexId})`
-			}}</span>
-			<v-icon @click="openLink(node.dbLink)" class="ml-2"
-				>ios_share</v-icon
-			>
-		</v-row>
-
-		<v-row>
-			<v-col cols="8" style="max-width: 300px">
-				<v-btn
-					dark
-					color="primary"
-					@click.stop="apiRequest('pingNode', [node.id])"
-					depressed
-				>
-					Ping
-				</v-btn>
-				<v-btn
-					dark
-					color="green"
-					depressed
-					@click="advancedShowDialog = true"
-				>
-					Advanced
-				</v-btn>
-			</v-col>
-		</v-row>
-
-		<v-row justify="start">
+	<v-container fluid>
+		<v-row no-gutters>
 			<v-sheet outlined rounded>
 				<statistics-card title="Statistics" :node="node" />
 			</v-sheet>
@@ -92,7 +61,12 @@
 		<v-row>
 			<v-subheader class="title">Values</v-subheader>
 
-			<v-expansion-panels accordion multiple>
+			<v-expansion-panels
+				class="expansion-panels-outlined"
+				accordion
+				multiple
+				flat
+			>
 				<v-expansion-panel
 					v-for="(group, className) in commandGroups"
 					:key="className"
@@ -111,126 +85,115 @@
 											group[0].commandClass,
 										])
 									"
+									color="primary"
+									outlined
 									x-small
 								>
 									Refresh
+									<v-icon x-small right>refresh</v-icon>
 								</v-btn>
 							</v-col>
 						</v-row>
 					</v-expansion-panel-header>
 					<v-expansion-panel-content>
-						<v-card flat>
-							<v-card-text>
+						<v-row>
+							<v-col
+								cols="12"
+								v-for="(v, index) in group"
+								:key="index"
+								sm="6"
+								md="4"
+							>
+								<ValueID
+									@updateValue="updateValue"
+									v-model="group[index]"
+								></ValueID>
+							</v-col>
+						</v-row>
+						<v-row>
+							<v-col
+								v-if="className.startsWith('Configuration')"
+								cols="12"
+								sm="6"
+								md="4"
+								style="padding-left: 0"
+							>
+								<v-subheader class="valueid-label"
+									>Custom Configuration
+								</v-subheader>
 								<v-row>
-									<v-col
-										cols="12"
-										v-for="(v, index) in group"
-										:key="index"
-										sm="6"
-										md="4"
-									>
-										<ValueID
-											@updateValue="updateValue"
-											v-model="group[index]"
-										></ValueID>
+									<v-col cols="3">
+										<v-text-field
+											label="Parameter"
+											v-model.number="configCC.parameter"
+										/>
+									</v-col>
+									<v-col cols="3">
+										<v-select
+											label="Size"
+											:items="[1, 2, 3, 4]"
+											v-model.number="configCC.valueSize"
+										/>
+									</v-col>
+									<v-col cols="3">
+										<v-text-field
+											label="Value"
+											v-model.number="configCC.value"
+										/>
+									</v-col>
+									<v-col cols="3">
+										<v-btn
+											width="60px"
+											@click.stop="
+												apiRequest('sendCommand', [
+													{
+														nodeId: node.id,
+														commandClass: 112,
+													},
+													'get',
+													[configCC.parameter],
+												])
+											"
+											color="green"
+											x-small
+										>
+											GET
+										</v-btn>
+										<v-btn
+											width="60px"
+											@click.stop="
+												apiRequest('sendCommand', [
+													{
+														nodeId: node.id,
+														commandClass: 112,
+													},
+													'set',
+													[
+														configCC.parameter,
+														configCC.value,
+														configCC.valueSize,
+													],
+												])
+											"
+											color="primary"
+											x-small
+										>
+											SET
+										</v-btn>
 									</v-col>
 								</v-row>
-								<v-col
-									v-if="className.startsWith('Configuration')"
-									cols="12"
-									sm="6"
-									md="4"
-									style="padding-left: 0"
-								>
-									<v-subheader class="valueid-label"
-										>Custom Configuration
-									</v-subheader>
-									<v-row>
-										<v-col cols="3">
-											<v-text-field
-												label="Parameter"
-												v-model.number="
-													configCC.parameter
-												"
-											/>
-										</v-col>
-										<v-col cols="3">
-											<v-select
-												label="Size"
-												:items="[1, 2, 3, 4]"
-												v-model.number="
-													configCC.valueSize
-												"
-											/>
-										</v-col>
-										<v-col cols="3">
-											<v-text-field
-												label="Value"
-												v-model.number="configCC.value"
-											/>
-										</v-col>
-										<v-col cols="3">
-											<v-btn
-												width="60px"
-												@click.stop="
-													apiRequest('sendCommand', [
-														{
-															nodeId: node.id,
-															commandClass: 112,
-														},
-														'get',
-														[configCC.parameter],
-													])
-												"
-												color="green"
-												x-small
-											>
-												GET
-											</v-btn>
-											<v-btn
-												width="60px"
-												@click.stop="
-													apiRequest('sendCommand', [
-														{
-															nodeId: node.id,
-															commandClass: 112,
-														},
-														'set',
-														[
-															configCC.parameter,
-															configCC.value,
-															configCC.valueSize,
-														],
-													])
-												"
-												color="primary"
-												x-small
-											>
-												SET
-											</v-btn>
-										</v-col>
-									</v-row>
-								</v-col>
-							</v-card-text>
-						</v-card>
+							</v-col>
+						</v-row>
 					</v-expansion-panel-content>
 					<v-divider></v-divider>
 				</v-expansion-panel>
 			</v-expansion-panels>
 		</v-row>
-
-		<DialogAdvanced
-			v-model="advancedShowDialog"
-			@close="advancedShowDialog = false"
-			:actions="actions"
-			@action="nodeAction"
-		/>
 	</v-container>
 </template>
 
 <script>
 import ValueID from '@/components/ValueId'
-import DialogAdvanced from '@/components/dialogs/DialogAdvanced'
 
 import { inboundEvents as socketActions } from '@/plugins/socket'
 import { mapMutations, mapGetters } from 'vuex'
@@ -245,7 +208,6 @@ export default {
 	},
 	components: {
 		ValueID,
-		DialogAdvanced,
 		StatisticsCard,
 	},
 	data() {
@@ -255,134 +217,11 @@ export default {
 			options: {},
 			newName: this.node.name,
 			newLoc: this.node.loc,
-			advancedShowDialog: false,
 			configCC: {
 				value: 0,
 				valueSize: 1,
 				parameter: 1,
 			},
-			actions: [
-				{
-					text: 'Export json',
-					options: [{ name: 'Export', action: 'exportNode' }],
-					icon: 'get_app',
-					desc: 'Export this node in a json file',
-				},
-				{
-					text: 'Clear Retained',
-					options: [
-						{
-							name: 'Clear',
-							action: 'removeNodeRetained',
-							args: {
-								mqtt: true,
-								confirm:
-									'Are you sure you want to remove all retained messages?',
-							},
-						},
-					],
-					icon: 'clear',
-					desc: 'All retained messages of this node will be removed from broker',
-				},
-				{
-					text: 'Update topics',
-					options: [
-						{
-							name: 'Update',
-							action: 'updateNodeTopics',
-							args: {
-								mqtt: true,
-								confirm:
-									'Are you sure you want to update all topics?',
-							},
-						},
-					],
-					icon: 'update',
-					desc: 'Update all node topics. Useful when name/location has changed',
-				},
-				{
-					text: 'Firmware update',
-					options: [
-						{ name: 'Begin', action: 'beginFirmwareUpdate' },
-						{ name: 'Abort', action: 'abortFirmwareUpdate' },
-					],
-					icon: 'update',
-					desc: 'Start/Stop a firmware update',
-				},
-				{
-					text: 'Heal Node',
-					options: [
-						{
-							name: 'Heal',
-							action: 'healNode',
-							args: {
-								confirm:
-									'Healing a node causes a lot of traffic, can take minutes up to hours and you can expect degraded performance while it is going on',
-							},
-						},
-					],
-					icon: 'healing',
-					desc: 'Force nodes to establish better connections to the controller',
-				},
-				{
-					text: 'Refresh Values',
-					options: [
-						{
-							name: 'Refresh',
-							action: 'refreshValues',
-							args: {
-								confirm:
-									'Are you sure you want to refresh values of this node? This action increases network traffic',
-							},
-						},
-					],
-					icon: 'cached',
-					desc: 'Update all CC values and metadata. Use only when many values seems stale',
-				},
-				{
-					text: 'Re-interview Node',
-					options: [
-						{
-							name: 'Interview',
-							action: 'refreshInfo',
-						},
-					],
-					icon: 'history',
-					desc: 'Clear all info about this node and make a new full interview. Use when the node has wrong or missing capabilities',
-				},
-				{
-					text: 'Failed Nodes',
-					options: [
-						{ name: 'Check', action: 'isFailedNode' },
-						{ name: 'Remove', action: 'removeFailedNode' },
-					],
-					icon: 'dangerous',
-					desc: 'Manage nodes that are dead and/or marked as failed with the controller',
-				},
-				{
-					text: 'Associations',
-					options: [
-						{
-							name: 'Clear',
-							action: 'removeAllAssociations',
-							args: {
-								confirm:
-									"This action will remove all associations of this node. This will also clear lifeline association with controller node, the node won't report state changes until that is set up again",
-							},
-						},
-						{
-							name: 'Remove',
-							action: 'removeNodeFromAllAssociations',
-							args: {
-								confirm:
-									'All direct associations to this node will be removed. Battery-powered nodes need to be woken up to edit their associations.',
-							},
-						},
-					],
-					icon: 'link_off',
-					desc: 'Clear all node associations / Remove node from all associations',
-				},
-			],
 		}
 	},
 	computed: {
@@ -429,18 +268,6 @@ export default {
 	},
 	methods: {
 		...mapMutations(['showSnackbar']),
-		nodeAction(action, args = {}) {
-			if (action === 'exportNode') {
-				this.exportNode()
-			} else if (args.mqtt) {
-				this.sendMqttAction(action, args.confirm)
-			} else {
-				this.$emit('action', action, { ...args, nodeId: this.node.id })
-			}
-		},
-		openLink(link) {
-			window.open(link, '_blank')
-		},
 		apiRequest(apiName, args) {
 			if (this.socket.connected) {
 				const data = {
@@ -551,4 +378,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+.expansion-panels-outlined {
+	border: 1px solid rgba(0, 0, 0, 0.12);
+}
+</style>

From 60bb4b1925b4511dc66a06381472824181e71d86 Mon Sep 17 00:00:00 2001
From: floutchito <floutchito@gmail.com>
Date: Sun, 20 Mar 2022 16:07:34 +0100
Subject: [PATCH 08/11] fix(ui): Prevent auth buttons wrapping in AppBar

---
 src/App.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 786cbc9298e..f0d40d8c646 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -176,7 +176,7 @@
 					</template>
 				</v-tooltip>
 
-				<div v-if="auth">
+				<span v-if="auth">
 					<v-menu v-if="$vuetify.breakpoint.xsOnly" bottom left>
 						<template v-slot:activator="{ on }">
 							<v-btn small v-on="on" icon>
@@ -200,7 +200,7 @@
 						</v-list>
 					</v-menu>
 
-					<div v-else>
+					<span v-else class="text-no-wrap">
 						<v-menu
 							v-for="item in menu"
 							:key="item.text"
@@ -241,8 +241,8 @@
 								</v-list-item>
 							</v-list>
 						</v-menu>
-					</div>
-				</div>
+					</span>
+				</span>
 			</v-app-bar>
 		</div>
 		<main style="height: 100%">

From 8b12ae08c093dc9343185ed369db2475924bd9d9 Mon Sep 17 00:00:00 2001
From: Florent Limandas <florent@izypay.fr>
Date: Tue, 22 Mar 2022 23:41:30 +0100
Subject: [PATCH 09/11] feat(ui): Controller statistics toggle is now 'primary'

---
 src/components/ControlPanel.vue | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
index 368f938c0a2..8cce3fab1db 100644
--- a/src/components/ControlPanel.vue
+++ b/src/components/ControlPanel.vue
@@ -7,24 +7,15 @@
 						<template #activator="{ on }">
 							<v-item-group class="v-btn-toggle">
 								<v-btn
-									:color="
-										showControllerStatistics
-											? 'green'
-											: 'grey'
-									"
+									color="primary"
 									outlined
 									@click="toggleControllerStatistics"
 								>
+									<v-icon left>
+										{{ statisticsOpeningIndicator }}
+									</v-icon>
 									Controller statistics
-									<v-icon
-										:color="
-											showControllerStatistics
-												? 'green'
-												: 'grey'
-										"
-										right
-										v-on="on"
-									>
+									<v-icon color="primary" right>
 										multiline_chart
 									</v-icon>
 								</v-btn>
@@ -155,6 +146,11 @@ export default {
 		controllerNode() {
 			return this.nodes.find((n) => n.isControllerNode)
 		},
+		statisticsOpeningIndicator() {
+			return this.showControllerStatistics
+				? 'arrow_drop_up'
+				: 'arrow_drop_down'
+		},
 	},
 	watch: {},
 	data() {

From d645069940297f3018950ceb19105ee4519c90d2 Mon Sep 17 00:00:00 2001
From: Florent Limandas <florent@izypay.fr>
Date: Tue, 22 Mar 2022 23:42:22 +0100
Subject: [PATCH 10/11] feat(ui): Statistics toggle for each node

---
 src/components/nodes-table/ExpandedNode.vue | 22 +++++++++++++++++++++
 src/components/nodes-table/NodeDetails.vue  |  8 --------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/nodes-table/ExpandedNode.vue b/src/components/nodes-table/ExpandedNode.vue
index 6ee136443c0..33c7029dc4b 100644
--- a/src/components/nodes-table/ExpandedNode.vue
+++ b/src/components/nodes-table/ExpandedNode.vue
@@ -13,6 +13,13 @@
 			</v-col>
 			<v-col class="text-end flex-shrink-1">
 				<v-item-group class="v-btn-toggle">
+					<v-btn color="primary" outlined @click="toggleStatistics">
+						<v-icon left>
+							{{ statisticsOpeningIndicator }}
+						</v-icon>
+						Statistics
+						<v-icon color="primary" right> multiline_chart </v-icon>
+					</v-btn>
 					<v-btn
 						dark
 						color="primary"
@@ -33,6 +40,12 @@
 			</v-col>
 		</v-row>
 
+		<v-row no-gutters>
+			<v-sheet v-if="showStatistics" class="my-4" outlined rounded>
+				<statistics-card title="Statistics" :node="node" />
+			</v-sheet>
+		</v-row>
+
 		<v-divider class="my-4" />
 
 		<v-tabs v-model="currentTab" class="transparent mb-4" vertical>
@@ -152,6 +165,7 @@ import AssociationGroups from '@/components/nodes-table/AssociationGroups'
 import HomeAssistant from '@/components/nodes-table/HomeAssistant'
 import NodeDetails from '@/components/nodes-table/NodeDetails'
 import DialogAdvanced from '@/components/dialogs/DialogAdvanced'
+import StatisticsCard from '@/components/custom/StatisticsCard.vue'
 
 import { mapGetters } from 'vuex'
 
@@ -168,6 +182,7 @@ export default {
 		HomeAssistant,
 		NodeDetails,
 		DialogAdvanced,
+		StatisticsCard,
 	},
 	computed: {
 		...mapGetters(['gateway', 'mqtt']),
@@ -185,11 +200,15 @@ export default {
 				Object.keys(this.node.hassDevices).length > 0
 			)
 		},
+		statisticsOpeningIndicator() {
+			return this.showStatistics ? 'arrow_drop_up' : 'arrow_drop_down'
+		},
 	},
 	data() {
 		return {
 			currentTab: 0,
 			advancedShowDialog: false,
+			showStatistics: false,
 			advancedActions: [
 				{
 					text: 'Export json',
@@ -330,6 +349,9 @@ export default {
 				this.$emit('action', action, { ...args, nodeId: this.node.id })
 			}
 		},
+		toggleStatistics() {
+			this.showStatistics = !this.showStatistics
+		},
 		openLink(link) {
 			window.open(link, '_blank')
 		},
diff --git a/src/components/nodes-table/NodeDetails.vue b/src/components/nodes-table/NodeDetails.vue
index 6c88210e52b..511b974be76 100644
--- a/src/components/nodes-table/NodeDetails.vue
+++ b/src/components/nodes-table/NodeDetails.vue
@@ -1,11 +1,5 @@
 <template>
 	<v-container fluid>
-		<v-row no-gutters>
-			<v-sheet outlined rounded>
-				<statistics-card title="Statistics" :node="node" />
-			</v-sheet>
-		</v-row>
-
 		<v-row>
 			<v-col cols="12" sm="6" style="max-width: 300px">
 				<v-text-field
@@ -198,7 +192,6 @@ import ValueID from '@/components/ValueId'
 import { inboundEvents as socketActions } from '@/plugins/socket'
 import { mapMutations, mapGetters } from 'vuex'
 import { validTopic } from '@/lib/utils'
-import StatisticsCard from '@/components/custom/StatisticsCard.vue'
 
 export default {
 	props: {
@@ -208,7 +201,6 @@ export default {
 	},
 	components: {
 		ValueID,
-		StatisticsCard,
 	},
 	data() {
 		return {

From 4590e4ea3f8422c261ed3029e54a6059ff013f1b Mon Sep 17 00:00:00 2001
From: Florent Limandas <florent@izypay.fr>
Date: Wed, 23 Mar 2022 00:02:52 +0100
Subject: [PATCH 11/11] feat(ui): Node detailed view Tabs are horizontal on
 smaller screens

---
 src/components/custom/StatisticsCard.vue         | 2 +-
 src/components/nodes-table/AssociationGroups.vue | 2 +-
 src/components/nodes-table/ExpandedNode.vue      | 9 ++++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/custom/StatisticsCard.vue b/src/components/custom/StatisticsCard.vue
index 22beab734dc..1ede34d3022 100644
--- a/src/components/custom/StatisticsCard.vue
+++ b/src/components/custom/StatisticsCard.vue
@@ -3,7 +3,7 @@
 		<template v-for="(section, name) in props">
 			<v-col
 				cols="12"
-				:md="section.cols"
+				:sm="section.cols"
 				:key="`section-content-${name}`"
 			>
 				<div>
diff --git a/src/components/nodes-table/AssociationGroups.vue b/src/components/nodes-table/AssociationGroups.vue
index 8d44113afd7..ed7e98b223b 100644
--- a/src/components/nodes-table/AssociationGroups.vue
+++ b/src/components/nodes-table/AssociationGroups.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-container grid-list-md>
-		<v-row class="pa-5" align-content="center" justify="center">
+		<v-row class="pa-5">
 			<v-data-table
 				:headers="headers"
 				:items="associations"
diff --git a/src/components/nodes-table/ExpandedNode.vue b/src/components/nodes-table/ExpandedNode.vue
index 33c7029dc4b..f91af7b27b0 100644
--- a/src/components/nodes-table/ExpandedNode.vue
+++ b/src/components/nodes-table/ExpandedNode.vue
@@ -48,7 +48,11 @@
 
 		<v-divider class="my-4" />
 
-		<v-tabs v-model="currentTab" class="transparent mb-4" vertical>
+		<v-tabs
+			v-model="currentTab"
+			class="transparent mb-4"
+			:vertical="$vuetify.breakpoint.mdAndUp"
+		>
 			<v-tab class="justify-start" key="node">
 				<v-icon small left>widgets</v-icon> Node
 			</v-tab>
@@ -203,6 +207,9 @@ export default {
 		statisticsOpeningIndicator() {
 			return this.showStatistics ? 'arrow_drop_up' : 'arrow_drop_down'
 		},
+		statsBorderColor() {
+			return this.showStatistics ? 'border-primary' : ''
+		},
 	},
 	data() {
 		return {