feat(ui): add node debug info tab (#462)

* feat: add node debug info tab

* refactor: use v-textarea, add copy, use mdi icons

* Update src/components/nodes-table/ExpandedNode.vue

refactor: use built-in icon

Co-authored-by: Daniel Lando <daniel.sorridi@gmail.com>

* refactor: revert inclusion of mdi icons

Co-authored-by: Andreas Hochsteger <andreas.hochsteger@oeamtc.at>
Co-authored-by: Daniel Lando <daniel.sorridi@gmail.com>

src/components/nodes-table/ExpandedNode.vue

@@ -4,6 +4,8 @@
       <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="debug">Debug Info</v-tab>
+
       <!-- TABS -->
       <v-tabs-items
         style="background: transparent; padding-bottom: 10px;"
@@ -29,6 +31,19 @@
         <v-tab-item key="groups">
           <association-groups :node="node" :nodes="nodes" :socket="socket" />
         </v-tab-item>
+
+        <!-- TAB DEBUG INFO -->
+        <v-tab-item key="debug">
+          <v-textarea
+            class="mx-2"
+            rows="10"
+            append-icon="content_copy"
+            v-model="nodeJson"
+            readonly
+            ref="nodeJsonContent"
+            @click:append="copyText"
+          ></v-textarea>
+        </v-tab-item>
       </v-tabs-items>
     </v-tabs>
   </td>
@@ -57,6 +72,9 @@ export default {
   },
   computed: {
     ...mapGetters(['gateway']),
+    nodeJson () {
+      return JSON.stringify(this.node, null, 2)
+    },
     showHass () {
       console.log(Object.keys(this.node.hassDevices))
       return (
@@ -70,6 +88,15 @@ export default {
     return {
       currentTab: 0
     }
+  },
+  methods: {
+    copyText () {
+      const textToCopy = this.$refs.nodeJsonContent.$el.querySelector(
+        'textarea'
+      )
+      textToCopy.select()
+      document.execCommand('copy')
+    }
   }
 }
 </script>