diff --git a/src/static/app/package-lock.json b/src/static/app/package-lock.json index 4f97db8..b36fedd 100644 --- a/src/static/app/package-lock.json +++ b/src/static/app/package-lock.json @@ -8,10 +8,13 @@ "name": "app", "version": "0.0.0", "dependencies": { + "@vueuse/core": "^10.9.0", + "@vueuse/shared": "^10.9.0", "bootstrap": "^5.3.2", "bootstrap-icons": "^1.11.2", "cidr-tools": "^7.0.4", "dayjs": "^1.11.10", + "fuse.js": "^7.0.0", "pinia": "^2.1.7", "qrcode": "^1.5.3", "uuid": "^9.0.1", @@ -593,6 +596,11 @@ "win32" ] }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.20", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz", + "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==" + }, "node_modules/@vitejs/plugin-vue": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz", @@ -701,6 +709,89 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.3.tgz", "integrity": "sha512-rIwlkkP1n4uKrRzivAKPZIEkHiuwY5mmhMJ2nZKCBLz8lTUlE73rQh4n1OnnMurXt1vcUNyH4ZPfdh8QweTjpQ==" }, + "node_modules/@vueuse/core": { + "version": "10.9.0", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.9.0.tgz", + "integrity": "sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==", + "dependencies": { + "@types/web-bluetooth": "^0.0.20", + "@vueuse/metadata": "10.9.0", + "@vueuse/shared": "10.9.0", + "vue-demi": ">=0.14.7" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/core/node_modules/vue-demi": { + "version": "0.14.7", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz", + "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/@vueuse/metadata": { + "version": "10.9.0", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.9.0.tgz", + "integrity": "sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "10.9.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.9.0.tgz", + "integrity": "sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==", + "dependencies": { + "vue-demi": ">=0.14.7" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared/node_modules/vue-demi": { + "version": "0.14.7", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz", + "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -926,6 +1017,14 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/fuse.js": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz", + "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==", + "engines": { + "node": ">=10" + } + }, "node_modules/get-caller-file": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", diff --git a/src/static/app/package.json b/src/static/app/package.json index 443fc7f..99a94ac 100644 --- a/src/static/app/package.json +++ b/src/static/app/package.json @@ -9,10 +9,13 @@ "preview": "vite preview" }, "dependencies": { + "@vueuse/core": "^10.9.0", + "@vueuse/shared": "^10.9.0", "bootstrap": "^5.3.2", "bootstrap-icons": "^1.11.2", "cidr-tools": "^7.0.4", "dayjs": "^1.11.10", + "fuse.js": "^7.0.0", "pinia": "^2.1.7", "qrcode": "^1.5.3", "uuid": "^9.0.1", diff --git a/src/static/app/src/components/configurationComponents/peer.vue b/src/static/app/src/components/configurationComponents/peer.vue index 790a59f..6cad328 100644 --- a/src/static/app/src/components/configurationComponents/peer.vue +++ b/src/static/app/src/components/configurationComponents/peer.vue @@ -1,8 +1,26 @@ @@ -34,9 +52,24 @@ export default { Public Key

{{Peer.id}}

-
- Allowed IP -

{{Peer.allowed_ip}}

+
+
+ Allowed IP +

{{Peer.allowed_ip}}

+
+
+ +
+ + +
    +
  • +
    • +
+ +
@@ -44,4 +77,13 @@ export default { \ No newline at end of file diff --git a/src/static/app/src/components/configurationComponents/peerSearch.vue b/src/static/app/src/components/configurationComponents/peerSearch.vue new file mode 100644 index 0000000..50d71d0 --- /dev/null +++ b/src/static/app/src/components/configurationComponents/peerSearch.vue @@ -0,0 +1,98 @@ + + + + + \ No newline at end of file diff --git a/src/static/app/src/stores/WireguardConfigurationsStore.js b/src/static/app/src/stores/WireguardConfigurationsStore.js index a168ecc..961f623 100644 --- a/src/static/app/src/stores/WireguardConfigurationsStore.js +++ b/src/static/app/src/stores/WireguardConfigurationsStore.js @@ -3,7 +3,8 @@ import {fetchGet} from "@/utilities/fetch.js"; export const WireguardConfigurationsStore = defineStore('WireguardConfigurationsStore', { state: () => ({ - Configurations: undefined + Configurations: undefined, + searchString: "" }), actions: { async getConfigurations(){ diff --git a/src/static/app/src/views/configuration.vue b/src/static/app/src/views/configuration.vue index afce880..f5475ab 100644 --- a/src/static/app/src/views/configuration.vue +++ b/src/static/app/src/views/configuration.vue @@ -2,6 +2,7 @@ import {fetchGet} from "@/utilities/fetch.js"; import Peer from "@/components/configurationComponents/peer.vue"; import { Line, Bar } from 'vue-chartjs' +import Fuse from "fuse.js"; import { Chart, ArcElement, @@ -56,10 +57,19 @@ Chart.register( ); import dayjs from "dayjs"; +import PeerSearch from "@/components/configurationComponents/peerSearch.vue"; +import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js"; +import {ref} from "vue"; +import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js"; export default { name: "configuration", - components: {Peer, Line, Bar}, + setup(){ + const dashboardConfigurationStore = DashboardConfigurationStore(); + const wireguardConfigurationStore = WireguardConfigurationsStore(); + return {dashboardConfigurationStore, wireguardConfigurationStore} + }, + components: {PeerSearch, Peer, Line, Bar}, data(){ return { loading: false, @@ -69,6 +79,7 @@ export default { historyDataSentDifference: [], historyDataReceivedDifference: [], + historySentData: { labels: [], datasets: [ @@ -106,11 +117,13 @@ export default { this.configurationPeers = []; if (id){ this.getPeers(id) - // this.interval = setInterval(() => { - // this.getPeers(id) - // }, 2000) + this.setInterval(); } } + }, + 'dashboardConfigurationStore.Configuration.Server.dashboard_refresh_interval'(){ + clearInterval(this.interval); + this.setInterval(); } }, beforeRouteLeave(){ @@ -170,7 +183,13 @@ export default { } } }); - } + }, + setInterval(){ + console.log('Set Interval'); + this.interval = setInterval(() => { + this.getPeers(this.$route.params.id) + }, parseInt(this.dashboardConfigurationStore.Configuration.Server.dashboard_refresh_interval)) + } }, computed: { configurationSummary(){ @@ -275,6 +294,25 @@ export default { } } } + }, + searchPeers(){ + const fuse = new Fuse(this.configurationPeers, { + keys: ["name", "id", "allowed_ip"] + }); + + const result = this.wireguardConfigurationStore.searchString ? fuse.search(this.wireguardConfigurationStore.searchString).map(x => x.item) : this.configurationPeers; + + return result.slice().sort((a, b) => { + if ( a[this.dashboardConfigurationStore.Configuration.Server.dashboard_sort] + < b[this.dashboardConfigurationStore.Configuration.Server.dashboard_sort] ){ + return -1; + } + if ( a[this.dashboardConfigurationStore.Configuration.Server.dashboard_sort] + > b[this.dashboardConfigurationStore.Configuration.Server.dashboard_sort]){ + return 1; + } + return 0; + }); } } } @@ -398,29 +436,22 @@ export default { - -
- -
-
+
+

Peers

+ Peer Settings + Add Peer +
+ + + +
-
+
@@ -428,8 +459,31 @@ export default { \ No newline at end of file