diff --git a/package-lock.json b/package-lock.json index 1ae7596..f16f476 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "electron-prompt": "^1.7.0", + "mitt": "^3.0.1", "vue-router": "^4.4.2" }, "devDependencies": { @@ -3651,6 +3652,11 @@ "node": ">=8" } }, + "node_modules/mitt": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", + "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==" + }, "node_modules/mkdirp": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", diff --git a/package.json b/package.json index 5311369..13b70a5 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ }, "dependencies": { "electron-prompt": "^1.7.0", + "mitt": "^3.0.1", "vue-router": "^4.4.2" } } diff --git a/src/frontend/components/App.vue b/src/frontend/components/App.vue index f044020..c4fc8a1 100644 --- a/src/frontend/components/App.vue +++ b/src/frontend/components/App.vue @@ -54,14 +54,14 @@
  • -
    • @@ -241,135 +241,31 @@ - - + - - + + + + + + + + - -
    + + - + + + + + + + + + - - - - - - -
    + @@ -379,24 +275,21 @@ diff --git a/src/frontend/components/settings/SettingsPage.vue b/src/frontend/components/settings/SettingsPage.vue index 8419178..dcb5897 100644 --- a/src/frontend/components/settings/SettingsPage.vue +++ b/src/frontend/components/settings/SettingsPage.vue @@ -1,52 +1,54 @@ diff --git a/src/frontend/js/Utils.js b/src/frontend/js/Utils.js index 71c9889..e847904 100644 --- a/src/frontend/js/Utils.js +++ b/src/frontend/js/Utils.js @@ -124,6 +124,13 @@ class Utils { } + static decodeBase64ToUtf8String(base64) { + // support for decoding base64 as a utf8 string to support emojis and cyrillic characters etc + return decodeURIComponent(atob(base64).split('').map(function(c) { + return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); + }).join('')); + } + } export default Utils; diff --git a/src/frontend/js/WebSocketConnection.js b/src/frontend/js/WebSocketConnection.js new file mode 100644 index 0000000..d4622b8 --- /dev/null +++ b/src/frontend/js/WebSocketConnection.js @@ -0,0 +1,52 @@ +import mitt from 'mitt'; + +class WebSocketConnection { + + constructor() { + this.emitter = mitt(); + this.reconnect(); + } + + // add event listener + on(event, handler) { + this.emitter.on(event, handler); + } + + // remove event listener + off(event, handler) { + this.emitter.off(event, handler); + } + + // emit event + emit(type, event) { + this.emitter.emit(type, event); + } + + reconnect() { + + // connect to websocket + this.ws = new WebSocket(location.origin.replace(/^http/, 'ws') + "/ws"); + + // auto reconnect when websocket closes + this.ws.addEventListener('close', () => { + setTimeout(() => { + this.reconnect(); + }, 1000); + }); + + // emit data received from websocket + this.ws.onmessage = (message) => { + this.emit("message", message); + }; + + } + + send(message) { + if(this.ws != null && this.ws.readyState === WebSocket.OPEN){ + this.ws.send(message); + } + } + +} + +export default new WebSocketConnection(); diff --git a/src/frontend/main.js b/src/frontend/main.js index a2dbfa7..9b22d20 100644 --- a/src/frontend/main.js +++ b/src/frontend/main.js @@ -6,12 +6,14 @@ import AboutPage from "./components/about/AboutPage.vue"; import SettingsPage from "./components/settings/SettingsPage.vue"; import NetworkVisualiserPage from "./components/network/NetworkVisualiserPage.vue"; import InterfacesPage from "./components/interfaces/InterfacesPage.vue"; +import NomadNetworkPage from "./components/nomadnetwork/NomadNetworkPage.vue"; const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/' }, { path: '/about', name: "about", component: AboutPage }, + { path: '/nomadnetwork', name: "nomadnetwork", component: NomadNetworkPage }, { path: '/settings', name: "settings", component: SettingsPage }, { path: '/interfaces', name: "interfaces", component: InterfacesPage }, { path: '/network-visualiser', name: "network-visualiser", component: NetworkVisualiserPage },