feat(ui): improved control panel (#900)

* style(ui): refactor control panel actions * feat(ui): advanced dialog * fix: devices db link * fix: add confirm text to some actions * fix: lint issues * fix: remove some broadcast actions and make hard reset harder * fix: restore hard reset * fix: add some more info in confirm dialogs * fix: typo * fix: some nits in confirm texts * fix: some other nits in confirm texts
zwave-js · Mar 18, 2021 · 3b3785e · 3b3785e
1 parent 9e7cb9a
commit 3b3785e
Show file tree

Hide file tree

Showing 7 changed files with 431 additions and 304 deletions.
diff --git a/lib/ZwaveClient.js b/lib/ZwaveClient.js
@@ -875,7 +875,9 @@ function initNode (zwaveNode) {
     utils.num2hex(zwaveNode.productType)
   ]
   node.hexId = `${hexIds[0]}-${hexIds[2]}-${hexIds[1]}`
-  node.dbLink = `https://devices.zwave-js.io/?jumpTo=${hexIds[0]}:${hexIds[2]}:${hexIds[1]}:${node.firmwareVersion}`
+  node.dbLink = `https://devices.zwave-js.io/?jumpTo=${hexIds[0]}:${
+    hexIds[2]
+  }:${hexIds[1]}:${node.firmwareVersion || '0.0'}`
 
   const deviceConfig = zwaveNode.deviceConfig || {
     label: `Unknown product ${hexIds[1]}`,

diff --git a/src/App.vue b/src/App.vue
@@ -48,17 +48,52 @@
 
       <v-app-bar app>
         <v-app-bar-nav-icon @click.stop="toggleDrawer" />
-        <v-toolbar-title>{{ title }}</v-toolbar-title>
+        <v-toolbar-title v-if="$vuetify.breakpoint.smAndUp">{{
+          title
+        }}</v-toolbar-title>
 
         <v-spacer></v-spacer>
 
+        <div class="controller-status">{{ appInfo.controllerStatus }}</div>
+
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on }">
+            <v-icon
+              dark
+              medium
+              style="cursor:default;margin:0 1rem"
+              color="primary"
+              v-on="on"
+              >info</v-icon
+            >
+          </template>
+          <div class="info-box">
+            <div>
+              <small>zwavejs2mqtt</small>
+              <strong>{{ appInfo.appVersion }}</strong>
+            </div>
+            <div>
+              <small>zwave-js</small>
+              <strong>{{ appInfo.zwaveVersion }}</strong>
+            </div>
+            <div>
+              <small>Home ID</small>
+              <strong>{{ appInfo.homeid }}</strong>
+            </div>
+            <div>
+              <small>Home Hex</small>
+              <strong>{{ appInfo.homeHex }}</strong>
+            </div>
+          </div>
+        </v-tooltip>
+
         <v-tooltip bottom>
           <template v-slot:activator="{ on }">
             <v-icon
               dark
               medium
               style="cursor:default;"
-              :color="statusColor || 'primary'"
+              :color="statusColor || 'orange'"
               v-on="on"
               >swap_horizontal_circle</v-icon
             >
@@ -166,6 +201,22 @@
 </template>
 
 <style>
+.controller-status {
+  color: #555;
+  background: #e0e0e0;
+  border-radius: 4px;
+  padding: 0.3rem 0;
+  font-size: 0.8rem;
+  min-width: 220px;
+  text-align: center;
+}
+.info-box > div {
+  display: flex;
+  justify-content: space-between;
+}
+.info-box > div > strong {
+  padding-left: 1.2rem;
+}
 /* Fix Vuetify code style after update to 2.4.0 */
 code {
   color: #c62828 !important;
@@ -193,7 +244,7 @@ export default {
   },
   name: 'app',
   computed: {
-    ...mapGetters(['user', 'auth'])
+    ...mapGetters(['user', 'auth', 'appInfo'])
   },
   watch: {
     $route: function (value) {
@@ -289,7 +340,7 @@ export default {
         alert: 'red'
       }
 
-      options.color = levelMap[level] || 'primary'
+      options.color = options.color || levelMap[level] || 'primary'
 
       return this.$refs.confirm.open(title, text, options)
     },