Skip to content

Commit 1a89b66

Browse files
BKristenssonAlfssonBKristenssonAlfsson
committed
feat: Remote connection
We can now connect remotely to a Edge, and also reconnect to the local network once the user wants.
1 parent d67c34d commit 1a89b66

10 files changed

+344
-206
lines changed

Diff for: ‎src/components/AppFrame.vue

+9-9
Original file line numberDiff line numberDiff line change
@@ -73,14 +73,14 @@ export default {
7373
{ icon: 'help', text: 'Help', link: '/help' },
7474
{ icon: 'info', text: 'About Ambianic', link: '/about' }
7575
]
76-
}),
77-
computed: {
78-
...mapState({
79-
isEdgeConnected: function (state) {
80-
console.debug(`app frame: state.pnp.peerConnectionStatus: ${state.pnp.peerConnectionStatus}`)
81-
return state.pnp.peerConnectionStatus === PEER_CONNECTED
82-
}
83-
})
84-
}
76+
})
77+
// computed: {
78+
// ...mapState({
79+
// isEdgeConnected: function (state) {
80+
// console.debug(`app frame: state.pnp.peerConnectionStatus: ${state.pnp.peerConnectionStatus}`)
81+
// return state.pnp.peerConnectionStatus === PEER_CONNECTED
82+
// }
83+
// })
84+
// }
8585
}
8686
</script>

Diff for: ‎src/components/NavBar.vue

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<v-container
3-
class="pa-0 ma-0"
4-
fluid
3+
class="pa-0 ma-0"
4+
fluid
55
>
66
<v-app-bar
77
:clipped-left="$vuetify.breakpoint.lgAndUp"
@@ -193,8 +193,9 @@ export default {
193193
// { text: 'Integrations' }
194194
// ]
195195
// },
196-
{ icon: 'mdi-video-input-antenna', text: 'Connect', link: '/edge-connect' },
197-
// { icon: 'settings', text: 'Settings', link: '/settings' },
196+
// { icon: 'mdi-video-input-antenna', text: 'Connect', link: '/edge-connect' },
197+
// { icon: 'mdi-video-input-antenna', text: 'Connect Remote', link: '/remote-edge-connection' },
198+
{ icon: 'settings', text: 'Settings', link: '/settings' },
198199
{ icon: 'chat_bubble', text: 'Send feedback', link: '/feedback' },
199200
{ icon: 'help', text: 'Help', link: '/help' },
200201
{ icon: 'info', text: 'About Ambianic', link: '/about' }

Diff for: ‎src/router/index.js

+29-26
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,23 @@ const routes = [
2424
// which is lazy-loaded when the route is visited.
2525
component: () => import(/* webpackChunkName: "timeline" */ '../views/Timeline.vue')
2626
},
27-
{
28-
path: '/edge-connect',
29-
name: 'edge-connect',
30-
props: true,
31-
// route level code-splitting
32-
// this generates a separate chunk (about.[hash].js) for this route
33-
// which is lazy-loaded when the route is visited.
34-
component: () => import(/* webpackChunkName: "edge-connect" */ '../views/EdgeConnect.vue')
35-
},
27+
// {
28+
// This might be connected again once we have better UX design
29+
// path: '/edge-connect',
30+
// name: 'edge-connect',
31+
// props: true,
32+
// route level code-splitting
33+
// this generates a separate chunk (about.[hash].js) for this route
34+
// which is lazy-loaded when the route is visited.
35+
// component: () => import(/* webpackChunkName: "edge-connect" */ '../views/EdgeConnect.vue')
36+
// },
3637
{
3738
path: '/settings',
3839
name: 'settings',
3940
// route level code-splitting
4041
// this generates a separate chunk (about.[hash].js) for this route
4142
// which is lazy-loaded when the route is visited.
42-
component: () => import(/* webpackChunkName: "edge-connect" */ '../views/EdgeConnect.vue') // '../views/Settings.vue')
43+
component: () => import(/* webpackChunkName: "settings" */ '../views/Settings.vue')
4344
},
4445
{
4546
path: '/feedback',
@@ -64,23 +65,25 @@ const routes = [
6465
// this generates a separate chunk (about.[hash].js) for this route
6566
// which is lazy-loaded when the route is visited.
6667
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
67-
},
68-
{
69-
path: '/choose-edge-connection',
70-
name: 'choose-edge-connection',
71-
// route level code-splitting
72-
// this generates a separate chunk (about.[hash].js) for this route
73-
// which is lazy-loaded when the route is visited.
74-
component: () => import(/* webpackChunkName: "choose-edge-connection" */ '../views/ChooseEdgeConnection.vue')
75-
},
76-
{
77-
path: '/remote-edge-connection',
78-
name: 'remote-edge-connection',
79-
// route level code-splitting
80-
// this generates a separate chunk (about.[hash].js) for this route
81-
// which is lazy-loaded when the route is visited.
82-
component: () => import(/* webpackChunkName: "remote-edge-connection" */ '../views/RemoteEdgeConnection.vue')
8368
}
69+
// {
70+
// Removed as all was moved into Settings
71+
// path: '/choose-edge-connection',
72+
// name: 'choose-edge-connection',
73+
// route level code-splitting
74+
// this generates a separate chunk (about.[hash].js) for this route
75+
// which is lazy-loaded when the route is visited.
76+
// component: () => import(/* webpackChunkName: "choose-edge-connection" */ '../views/ChooseEdgeConnection.vue')
77+
// },
78+
// {
79+
// Also removed as everything was moved into Settings
80+
// path: '/remote-edge-connection',
81+
// name: 'remote-edge-connection',
82+
// route level code-splitting
83+
// this generates a separate chunk (about.[hash].js) for this route
84+
// which is lazy-loaded when the route is visited.
85+
// component: () => import(/* webpackChunkName: "remote-edge-connection" */ '../views/RemoteEdgeConnection.vue')
86+
// }
8487
]
8588

8689
const router = new VueRouter({

Diff for: ‎src/store/action-types.js

+1
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ export const PEER_DISCOVER = 'peerDiscover'
99
export const PEER_CONNECT = 'peerConnect'
1010
export const PEER_AUTHENTICATE = 'peerAuthenticate'
1111
export const REMOVE_REMOTE_PEER_ID = 'removeRemotePeerId'
12+
export const CHANGE_REMOTE_PEER_ID = 'newRemotePeerId'

Diff for: ‎src/store/mutation-types.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@ export const NEW_PEER_ID = 'NEW_PEER_ID'
1717
export const NEW_REMOTE_PEER_ID = 'NEW_REMOTE_PEER_ID'
1818
export const REMOTE_PEER_ID_REMOVED = 'REMOTE_PEER_ID_REMOVED'
1919
export const PEER_FETCH = 'PEER_FETCH'
20-
20+
export const REMOTE_PEER_ID_CHANGED = 'REMOTE_PEER_ID_CHANGED'
2121
export const UPDATE_AVAILABLE = 'UPDATE_AVAILABLE'

Diff for: ‎src/store/pnp.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
NEW_PEER_ID,
1717
NEW_REMOTE_PEER_ID,
1818
REMOTE_PEER_ID_REMOVED,
19-
PEER_FETCH
19+
PEER_FETCH,
20+
REMOTE_PEER_ID_CHANGED
2021
} from './mutation-types.js'
2122
import {
2223
INITIALIZE_PNP,
@@ -25,7 +26,8 @@ import {
2526
PEER_DISCOVER,
2627
PEER_CONNECT,
2728
PEER_AUTHENTICATE,
28-
REMOVE_REMOTE_PEER_ID
29+
REMOVE_REMOTE_PEER_ID,
30+
CHANGE_REMOTE_PEER_ID
2931
} from './action-types.js'
3032
import { ambianicConf } from '@/config'
3133
import Peer from 'peerjs'
@@ -136,6 +138,10 @@ const mutations = {
136138
[PEER_FETCH] (state, peerFetch) {
137139
console.debug('Setting PeerFetch instance.')
138140
state.peerFetch = peerFetch
141+
},
142+
[REMOTE_PEER_ID_CHANGED] (state, newRemotePeerId) {
143+
state.edgeRoom = newRemotePeerId
144+
console.log(state)
139145
}
140146
}
141147

@@ -486,6 +492,11 @@ const actions = {
486492
// console.debug('peerFetch.get returned response', { request, response, text2 })
487493
// console.debug('peerFetch.get returned response', { request2, response2 })
488494
},
495+
async [CHANGE_REMOTE_PEER_ID] ({ state, commit, dispatch }, sendEdgeAddress) {
496+
console.log(sendEdgeAddress)
497+
commit(REMOTE_PEER_ID_CHANGED, sendEdgeAddress)
498+
dispatch(PEER_DISCOVER)
499+
},
489500
/**
490501
* Remove remote peer id from local store.
491502
* Maybe the edge device is damaged and its id cannot be recovered.

Diff for: ‎src/views/ChooseEdgeConnection.vue

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<!-- For the moment, this component is not used.
2+
All is moved into Settings.vue -->
13
<template>
24
<app-frame>
35
<v-row

Diff for: ‎src/views/EdgeConnect.vue

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<!-- For the moment, this component is not used.
2+
All is moved into Settings.vue -->
13
<template>
24
<v-row
35
align="start"
@@ -60,7 +62,6 @@
6062
</v-btn>
6163
<v-btn
6264
text
63-
@click.stop="resetEdgeDialog = true"
6465
>
6566
Reset
6667
</v-btn>
@@ -135,7 +136,6 @@
135136
</v-stepper>
136137
</v-col>
137138
<v-dialog
138-
v-model="resetEdgeDialog"
139139
max-width="500"
140140
>
141141
<v-card>
@@ -156,14 +156,12 @@
156156

157157
<v-btn
158158
text
159-
@click="resetEdgeDialog = false"
160159
>
161160
Cancel
162161
</v-btn>
163162

164163
<v-btn
165164
text
166-
@click="resetEdgeConnection()"
167165
>
168166
Yes, Reset
169167
</v-btn>
@@ -241,7 +239,6 @@ export default {
241239
}
242240
},
243241
mounted () {
244-
this.loadSettings()
245242
},
246243
beforeDestroy () {
247244
},

Diff for: ‎src/views/RemoteEdgeConnection.vue

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<!-- For the moment, this component is not used.
2+
All is moved into Settings.vue -->
13
<template>
24
<app-frame>
35
<v-card

0 commit comments

Comments
 (0)