RNS-Things/reticulum-meshchatX
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

implement vue router

Browse Source
This commit is contained in:
liamcottle
2024-08-02 20:17:41 +12:00
parent 0f9f945a55
commit 75c1a20399
5 changed files with 93 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
package-lock.json generated
View File

@@ -9,7 +9,8 @@
"version": "1.8.0",
"license": "MIT",
"dependencies": {
"electron-prompt": "^1.7.0"
"electron-prompt": "^1.7.0",
"vue-router": "^4.4.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.2",
@@ -22,7 +23,6 @@
"version": "7.24.8",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
"integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
"dev": true,
"peer": true,
"engines": {
"node": ">=6.9.0"
@@ -32,7 +32,6 @@
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
"integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
"dev": true,
"peer": true,
"engines": {
"node": ">=6.9.0"
@@ -42,7 +41,6 @@
"version": "7.25.3",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
"integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
"dev": true,
"peer": true,
"dependencies": {
"@babel/types": "^7.25.2"
@@ -58,7 +56,6 @@
"version": "7.25.2",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
"integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
"dev": true,
"peer": true,
"dependencies": {
"@babel/helper-string-parser": "^7.24.8",
@@ -808,7 +805,6 @@
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
"dev": true,
"peer": true
},
"node_modules/@malept/cross-spawn-promise": {
@@ -1255,7 +1251,6 @@
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.35.tgz",
"integrity": "sha512-gKp0zGoLnMYtw4uS/SJRRO7rsVggLjvot3mcctlMXunYNsX+aRJDqqw/lV5/gHK91nvaAAlWFgdVl020AW1Prg==",
"dev": true,
"peer": true,
"dependencies": {
"@babel/parser": "^7.24.7",
@@ -1269,7 +1264,6 @@
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.35.tgz",
"integrity": "sha512-pWIZRL76/oE/VMhdv/ovZfmuooEni6JPG1BFe7oLk5DZRo/ImydXijoZl/4kh2406boRQ7lxTYzbZEEXEhj9NQ==",
"dev": true,
"peer": true,
"dependencies": {
"@vue/compiler-core": "3.4.35",
@@ -1280,7 +1274,6 @@
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.35.tgz",
"integrity": "sha512-xacnRS/h/FCsjsMfxBkzjoNxyxEyKyZfBch/P4vkLRvYJwe5ChXmZZrj8Dsed/752H2Q3JE8kYu9Uyha9J6PgA==",
"dev": true,
"peer": true,
"dependencies": {
"@babel/parser": "^7.24.7",
@@ -1298,18 +1291,21 @@
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.35.tgz",
"integrity": "sha512-7iynB+0KB1AAJKk/biENTV5cRGHRdbdaD7Mx3nWcm1W8bVD6QmnH3B4AHhQQ1qZHhqFwzEzMwiytXm3PX1e60A==",
"dev": true,
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.4.35",
"@vue/shared": "3.4.35"
}
},
"node_modules/@vue/devtools-api": {
"version": "6.6.3",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
"integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw=="
},
"node_modules/@vue/reactivity": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.35.tgz",
"integrity": "sha512-Ggtz7ZZHakriKioveJtPlStYardwQH6VCs9V13/4qjHSQb/teE30LVJNrbBVs4+aoYGtTQKJbTe4CWGxVZrvEw==",
"dev": true,
"peer": true,
"dependencies": {
"@vue/shared": "3.4.35"
@@ -1319,7 +1315,6 @@
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.35.tgz",
"integrity": "sha512-D+BAjFoWwT5wtITpSxwqfWZiBClhBbR+bm0VQlWYFOadUUXFo+5wbe9ErXhLvwguPiLZdEF13QAWi2vP3ZD5tA==",
"dev": true,
"peer": true,
"dependencies": {
"@vue/reactivity": "3.4.35",
@@ -1330,7 +1325,6 @@
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.35.tgz",
"integrity": "sha512-yGOlbos+MVhlS5NWBF2HDNgblG8e2MY3+GigHEyR/dREAluvI5tuUUgie3/9XeqhPE4LF0i2wjlduh5thnfOqw==",
"dev": true,
"peer": true,
"dependencies": {
"@vue/reactivity": "3.4.35",
@@ -1343,7 +1337,6 @@
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.35.tgz",
"integrity": "sha512-iZ0e/u9mRE4T8tNhlo0tbA+gzVkgv8r5BX6s1kRbOZqfpq14qoIvCZ5gIgraOmYkMYrSEZgkkojFPr+Nyq/Mnw==",
"dev": true,
"peer": true,
"dependencies": {
"@vue/compiler-ssr": "3.4.35",
@@ -1357,7 +1350,6 @@
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.35.tgz",
"integrity": "sha512-hvuhBYYDe+b1G8KHxsQ0diDqDMA8D9laxWZhNAjE83VZb5UDaXl9Xnz7cGdDSyiHM90qqI/CyGMcpBpiDy6VVQ==",
"dev": true,
"peer": true
},
"node_modules/@xmldom/xmldom": {
@@ -2156,7 +2148,6 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true,
"peer": true
},
"node_modules/debug": {
@@ -2614,7 +2605,6 @@
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"dev": true,
"peer": true,
"engines": {
"node": ">=0.12"
@@ -2732,7 +2722,6 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"dev": true,
"peer": true
},
"node_modules/extract-zip": {
@@ -3547,7 +3536,6 @@
"version": "0.30.11",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
"integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
"dev": true,
"peer": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0"
@@ -3685,7 +3673,6 @@
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
"dev": true,
"funding": [
{
"type": "github",
@@ -3808,8 +3795,7 @@
"node_modules/picocolors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
"dev": true
"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
},
"node_modules/plist": {
"version": "3.1.0",
@@ -3829,7 +3815,6 @@
"version": "8.4.40",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz",
"integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==",
"dev": true,
"funding": [
{
"type": "opencollective",
@@ -4214,7 +4199,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -4434,7 +4418,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
"dev": true,
"peer": true,
"engines": {
"node": ">=4"
@@ -4466,7 +4449,7 @@
"version": "5.4.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
"integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
"dev": true,
"devOptional": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -4586,7 +4569,6 @@
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.4.35.tgz",
"integrity": "sha512-+fl/GLmI4GPileHftVlCdB7fUL4aziPcqTudpTGXCT8s+iZWuOCeNEB5haX6Uz2IpRrbEXOgIFbe+XciCuGbNQ==",
"dev": true,
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.4.35",
@@ -4604,6 +4586,20 @@
}
}
},
"node_modules/vue-router": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.2.tgz",
"integrity": "sha512-1qNybkn2L7QsLzaXs8nvlQmRKp8XF8DCxZys/Jr1JpQcHsKUxTKzTxCVA1G7NfBfwRIBgCJPoujOG5lHCCNUxw==",
"dependencies": {
"@vue/devtools-api": "^6.6.3"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

3
package.json
View File

@@ -69,6 +69,7 @@
}
},
"dependencies": {
"electron-prompt": "^1.7.0"
"electron-prompt": "^1.7.0",
"vue-router": "^4.4.2"
}
}

34
src/frontend/components/App.vue
View File

@@ -94,39 +94,39 @@
<!-- network -->
<li>
<button @click="tab = 'network-visualiser'" type="button" :class="[ tab === 'network-visualiser' ? 'bg-blue-100 text-blue-800 group:text-blue-800 hover:bg-blue-100' : '']" class="w-full text-gray-800 hover:bg-gray-100 group flex gap-x-3 rounded-r-full p-2 mr-2 text-sm leading-6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
<span class="my-auto">
<SidebarLink :to="{ name: 'network-visualiser' }">
<template v-slot:icon>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="w-6 h-6">
<path d="M200,152a31.84,31.84,0,0,0-19.53,6.68l-23.11-18A31.65,31.65,0,0,0,160,128c0-.74,0-1.48-.08-2.21l13.23-4.41A32,32,0,1,0,168,104c0,.74,0,1.48.08,2.21l-13.23,4.41A32,32,0,0,0,128,96a32.59,32.59,0,0,0-5.27.44L115.89,81A32,32,0,1,0,96,88a32.59,32.59,0,0,0,5.27-.44l6.84,15.4a31.92,31.92,0,0,0-8.57,39.64L73.83,165.44a32.06,32.06,0,1,0,10.63,12l25.71-22.84a31.91,31.91,0,0,0,37.36-1.24l23.11,18A31.65,31.65,0,0,0,168,184a32,32,0,1,0,32-32Zm0-64a16,16,0,1,1-16,16A16,16,0,0,1,200,88ZM80,56A16,16,0,1,1,96,72,16,16,0,0,1,80,56ZM56,208a16,16,0,1,1,16-16A16,16,0,0,1,56,208Zm56-80a16,16,0,1,1,16,16A16,16,0,0,1,112,128Zm88,72a16,16,0,1,1,16-16A16,16,0,0,1,200,200Z"></path>
</svg>
</span>
<span class="my-auto">Network Visualiser</span>
</button>
</template>
<template v-slot:text>Network Visualiser</template>
</SidebarLink>
</li>
<!-- settings -->
<li>
<button @click="tab = 'settings'" type="button" :class="[ tab === 'settings' ? 'bg-blue-100 text-blue-800 group:text-blue-800 hover:bg-blue-100' : '']" class="w-full text-gray-800 hover:bg-gray-100 group flex gap-x-3 rounded-r-full p-2 mr-2 text-sm leading-6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
<span class="my-auto">
<SidebarLink :to="{ name: 'settings' }">
<template v-slot:icon>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
</span>
<span class="my-auto">Settings</span>
</button>
</template>
<template v-slot:text>Settings</template>
</SidebarLink>
</li>
<!-- info -->
<li>
<button @click="tab = 'about'" type="button" :class="[ tab === 'about' ? 'bg-blue-100 text-blue-800 group:text-blue-800 hover:bg-blue-100' : '']" class="w-full text-gray-800 hover:bg-gray-100 group flex gap-x-3 rounded-r-full p-2 mr-2 text-sm leading-6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
<span class="my-auto">
<SidebarLink :to="{ name: 'about' }">
<template v-slot:icon>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
</span>
<span class="my-auto">About</span>
</button>
</template>
<template v-slot:text>About</template>
</SidebarLink>
</li>
</ul>
@@ -447,6 +447,8 @@
<!-- main view -->
<div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px]">
<RouterView/>
<!-- messages tab -->
<template v-if="tab === 'messages'">
@@ -1236,10 +1238,12 @@
import SettingsPage from "./settings/SettingsPage.vue";
import AboutPage from "./about/AboutPage.vue";
import NetworkVisualiserPage from "./network/NetworkVisualiserPage.vue";
import SidebarLink from "./SidebarLink.vue";
export default {
name: 'App',
components: {
SidebarLink,
NetworkVisualiserPage,
AboutPage,
SettingsPage,

32
src/frontend/components/SidebarLink.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<RouterLink :to="to" v-slot="{ href, route, navigate, isActive, isExactActive }" custom>
<a :href="href" @click="handleNavigate($event, navigate)" type="button" :class="[ isExactActive ? 'bg-blue-100 text-blue-800 group:text-blue-800' : 'hover:bg-gray-100']" class="w-full text-gray-800 group flex gap-x-3 rounded-r-full p-2 mr-2 text-sm leading-6 font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
<span class="my-auto">
<slot name="icon"></slot>
</span>
<span class="my-auto">
<slot name="text"></slot>
</span>
</a>
</RouterLink>
</template>
<script>
export default {
name: 'SidebarLink',
props: {
to: Object,
},
methods: {
handleNavigate(event, navigate) {
// emit click event for SidebarLink element
this.$emit('click');
// handle navigation
navigate(event);
},
},
};
</script>

18
src/frontend/main.js
View File

@@ -1,5 +1,21 @@
import { createApp } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import App from './components/App.vue';
import AboutPage from "./components/about/AboutPage.vue";
import SettingsPage from "./components/settings/SettingsPage.vue";
import NetworkVisualiserPage from "./components/network/NetworkVisualiserPage.vue";
createApp(App).mount('#app');
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/' },
{ path: '/about', name: "about", component: AboutPage },
{ path: '/settings', name: "settings", component: SettingsPage },
{ path: '/network-visualiser', name: "network-visualiser", component: NetworkVisualiserPage },
],
})
createApp(App)
.use(router)
.mount('#app');