feat: Remote-access changes

Created a new component to connect to
a new device when already connected.
If you are already connected and trying to disconnect,
you end up trying to connect way before the state has
updated itselfs with a new ID and for that reason we
had a blocking sequence.

Author: BKristenssonAlfsson

Diff for: src/components/AppFrame.vue

@@ -224,6 +224,7 @@ export default {
       //  ]
       // },
       { icon: 'mdi-video-input-antenna', text: 'Connect', link: '/choose-edge-connection' },
+      { icon: 'mdi-video-input-antenna', text: 'Connect Remote', link: '/remote-edge-connection' },
       // { icon: 'settings', text: 'Settings', link: '/settings' },
       { icon: 'chat_bubble', text: 'Send feedback', link: '/feedback' },
       { icon: 'help', text: 'Help', link: '/help' },

Diff for: src/router/index.js

@@ -88,6 +88,14 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "choose-edge-connection" */ '../views/ChooseEdgeConnection.vue')
+  },
+  {
+    path: '/remote-edge-connection',
+    name: 'remote-edge-connection',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "remote-edge-connection" */ '../views/RemoteEdgeConnection.vue')
   }
 ]
 

Diff for: src/store/pnp.js

@@ -79,7 +79,7 @@ const state = {
   /**
     Edgeroom ID when connecting to remote network
    */
-  edgeRoom: String
+  edgeRoom: undefined
 }
 
 const mutations = {

Diff for: src/views/ChooseEdgeConnection.vue

@@ -16,7 +16,6 @@
           <v-card-actions>
             <v-row justify="center">
               <v-btn
-                :to="'edge-connect'"
                 color="primary"
                 :small="$vuetify.breakpoint.mdAndUp"
               >
@@ -67,7 +66,6 @@
         <v-card-actions>
           <v-btn
             :disabled="!correctEdgeAddress"
-            :to="'edge-connect'"
             @click="sendEdgeAddress"
             color="primary"
           >
@@ -119,7 +117,9 @@ export default {
       }
     },
     sendEdgeAddress () {
+      console.log(this.edgeAddress)
       this.$store.state.pnp.edgeRoom = this.edgeAddress
+      console.log(this.$store.state.pnp.edgeRoom)
       this.$store.dispatch(REMOVE_REMOTE_PEER_ID)
     }
   },

Diff for: src/views/EdgeConnect.vue

@@ -240,7 +240,6 @@ export default {
   },
   methods: {
     disconnectEdge () {
-      this.$store.state.pnp.remotePeerId = false
       this.$store.state.pnp.edgeRoom = undefined
       this.$store.dispatch(REMOVE_REMOTE_PEER_ID)
     }

Diff for: src/views/RemoteEdgeConnection.vue

@@ -0,0 +1,105 @@
+<template>
+  <app-frame>
+    <v-card
+        max-width="500"
+        class="text-center"
+      >
+        <v-card-text>
+          <p class="text">
+            Connect to remote network
+          </p>
+          <v-subheader>
+            (must enter Peer ID to Ambianic network)
+          </v-subheader>
+          <v-text-field
+            v-model="edgeAddress"
+            type="text"
+            label="Peer ID to Ambianic Network*"
+            placeholder="Enter Peer ID"
+            outlined
+            dense
+            class="mt-4"
+          />
+        </v-card-text>
+
+        <v-card-actions>
+          <v-btn
+            :disabled="!correctEdgeAddress"
+            @click="sendEdgeAddress"
+            color="primary"
+          >
+            REMOTE NETWORK
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+  </app-frame>
+</template>
+<script>
+import AppFrame from '@/components/AppFrame.vue'
+import {
+  REMOVE_REMOTE_PEER_ID
+} from '../store/action-types.js'
+import { mapState } from 'vuex'
+import {
+  PEER_CONNECTED
+} from '@/store/mutation-types'
+
+export default {
+  data: () => {
+    return {
+      edgeAddress: '',
+      correctEdgeAddress: false
+      // connectionStatus: '',
+      // connectionTip: '',
+      // testInProgress: false,
+      // testDone: true,
+      // statusColor: 'info',
+      // resetEdgeDialog: false
+    }
+  },
+  methods: {
+    // Validate the user input so the ID has the correct format before showing the connect button
+    validateIP (value) {
+      if (/^([a-zA-Z0-9]{8})-([a-zA-Z0-9]{4})-([a-zA-Z0-9]{4})-([a-zA-Z0-9]{4})-([a-zA-Z0-9]{12})$/.test(value)) {
+        this.correctEdgeAddress = true
+        return this.correctEdgeAddress
+      } else {
+        // if value is not matching regex, remove button
+        this.correctEdgeAddress = false
+        return this.correctEdgeAddress
+      }
+    },
+    sendEdgeAddress () {
+      this.$store.state.pnp.edgeRoom = this.edgeAddress
+      this.$store.dispatch(REMOVE_REMOTE_PEER_ID)
+    }
+  },
+  computed: {
+    ...mapState({
+      isEdgeConnected: state =>
+        state.pnp.peerConnectionStatus === PEER_CONNECTED
+    })
+  },
+  components: {
+    AppFrame
+  },
+  watch: {
+    edgeAddress (value) {
+      this.edgeAddress = value
+      this.validateIP(value)
+    }
+  }
+}
+</script>
+<style scoped>
+#ambianicEdgeAddress {
+  border: 2px ridge lightgray;
+  padding: 6px;
+  border-radius: 5px;
+  width: 81%;
+}
+
+.text {
+  font-size: 18px;
+}
+</style>