feat(ui): move inclusion information to separete tab (#2198)

zwave-js · Jan 19, 2022 · 3c34e42 · 3c34e42
1 parent db1571e
commit 3c34e42
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 42 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -18,5 +18,8 @@
   "standard.enable": false,
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/src/components/nodes-table/ExpandedNode.vue b/src/components/nodes-table/ExpandedNode.vue
@@ -6,12 +6,18 @@
 			center-active
 			fixed-tabs
 			show-arrows
+			icons-and-text
 		>
-			<v-tab key="node">Node</v-tab>
-			<v-tab v-if="showHass" key="homeassistant">Home Assistant</v-tab>
-			<v-tab key="groups">Groups</v-tab>
+			<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-tab
+				>Debug Info <v-icon>bug_report</v-icon></v-tab
 			>
 
 			<!-- TABS -->
@@ -31,6 +37,46 @@
 					></node-details>
 				</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>
+
 				<!-- TAB HOMEASSISTANT -->
 				<v-tab-item v-if="showHass" key="homeassistant">
 					<home-assistant
@@ -84,6 +130,9 @@ export default {
 	},
 	computed: {
 		...mapGetters(['gateway', 'mqtt']),
+		nodeMetadata() {
+			return this.node.deviceConfig?.metadata
+		},
 		nodeJson() {
 			return JSON.stringify(this.node, null, 2)
 		},

diff --git a/src/components/nodes-table/NodeDetails.vue b/src/components/nodes-table/NodeDetails.vue
@@ -35,41 +35,6 @@
 			<statistics-card title="Statistics" :node="node" />
 		</v-row>
 
-		<v-row v-if="nodeMetadata" justify="start">
-			<v-card class="ml-3" 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-row>
 			<v-col cols="12" sm="6" style="max-width: 300px">
 				<v-text-field
@@ -419,9 +384,6 @@ export default {
 	},
 	computed: {
 		...mapGetters(['mqtt']),
-		nodeMetadata() {
-			return this.node.deviceConfig?.metadata
-		},
 		commandGroups() {
 			if (this.node) {
 				const groups = {}