Mirrors/wg-portal
1
0
Fork 0
mirror of https://github.com/h44z/wg-portal.git synced 2025-09-15 15:21:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Added peers sorting on views (#302)

Browse Source 
* Added peers sorting for Interface and Profile views

* Use ip-address package to sort with IPv6 addresses only

* Add RX/TX column and fix add-peer button title
This commit is contained in:
Dmytro Bondar
2024-09-23 21:44:43 +02:00
committed by GitHub
parent 6ffe1a90ae
commit 3196010a58
8 changed files with 186 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/stores/peers.js
View File

@@ -4,6 +4,7 @@ import {notify} from "@kyvg/vue3-notification";
import {interfaceStore} from "./interfaces";
import {freshPeer, freshStats} from '@/helpers/models';
import { base64_url_encode } from '@/helpers/encoding';
import { ipToBigInt } from '@/helpers/utils';
const baseUrl = `/peer`
@@ -21,6 +22,8 @@ export const peerStore = defineStore({
pageOffset: 0,
pages: [],
fetching: false,
sortKey: 'IsConnected', // Default sort key
sortOrder: -1, // 1 for ascending, -1 for descending
}),
getters: {
Find: (state) => {
@@ -39,8 +42,30 @@ export const peerStore = defineStore({
return p.DisplayName.includes(state.filter) || p.Identifier.includes(state.filter)
})
},
Sorted: (state) => {
return state.Filtered.slice().sort((a, b) => {
let aValue = a[state.sortKey];
let bValue = b[state.sortKey];
if (state.sortKey === 'Addresses') {
aValue = aValue.length > 0 ? ipToBigInt(aValue[0]) : 0;
bValue = bValue.length > 0 ? ipToBigInt(bValue[0]) : 0;
}
if (state.sortKey === 'IsConnected') {
aValue = state.statsEnabled && state.stats[a.Identifier]?.IsConnected ? 1 : 0;
bValue = state.statsEnabled && state.stats[b.Identifier]?.IsConnected ? 1 : 0;
}
if (state.sortKey === 'Traffic') {
aValue = state.statsEnabled ? (state.stats[a.Identifier].BytesReceived + state.stats[a.Identifier].BytesTransmitted) : 0;
bValue = state.statsEnabled ? (state.stats[b.Identifier].BytesReceived + state.stats[b.Identifier].BytesTransmitted) : 0;
}
let result = 0;
if (aValue > bValue) result = 1;
if (aValue < bValue) result = -1;
return state.sortOrder === 1 ? result : -result;
});
},
FilteredAndPaged: (state) => {
return state.Filtered.slice(state.pageOffset, state.pageOffset + state.pageSize)
return state.Sorted.slice(state.pageOffset, state.pageOffset + state.pageSize);
},
ConfigQrUrl: (state) => {
return (id) => state.peers.find((p) => p.Identifier === id) ? apiWrapper.url(`${baseUrl}/config-qr/${base64_url_encode(id)}`) : ''

27
frontend/src/stores/profile.js
View File

@@ -4,6 +4,7 @@ import {notify} from "@kyvg/vue3-notification";
import {authStore} from "@/stores/auth";
import { base64_url_encode } from '@/helpers/encoding';
import {freshStats} from "@/helpers/models";
import { ipToBigInt } from '@/helpers/utils';
const baseUrl = `/user`
@@ -19,6 +20,8 @@ export const profileStore = defineStore({
pageOffset: 0,
pages: [],
fetching: false,
sortKey: 'IsConnected', // Default sort key
sortOrder: -1, // 1 for ascending, -1 for descending
}),
getters: {
FindPeers: (state) => {
@@ -35,8 +38,30 @@ export const profileStore = defineStore({
return p.DisplayName.includes(state.filter) || p.Identifier.includes(state.filter)
})
},
Sorted: (state) => {
return state.FilteredPeers.slice().sort((a, b) => {
let aValue = a[state.sortKey];
let bValue = b[state.sortKey];
if (state.sortKey === 'Addresses') {
aValue = aValue.length > 0 ? ipToBigInt(aValue[0]) : 0;
bValue = bValue.length > 0 ? ipToBigInt(bValue[0]) : 0;
}
if (state.sortKey === 'IsConnected') {
aValue = state.statsEnabled && state.stats[a.Identifier]?.IsConnected ? 1 : 0;
bValue = state.statsEnabled && state.stats[b.Identifier]?.IsConnected ? 1 : 0;
}
if (state.sortKey === 'Traffic') {
aValue = state.statsEnabled ? (state.stats[a.Identifier].BytesReceived + state.stats[a.Identifier].BytesTransmitted) : 0;
bValue = state.statsEnabled ? (state.stats[b.Identifier].BytesReceived + state.stats[b.Identifier].BytesTransmitted) : 0;
}
let result = 0;
if (aValue > bValue) result = 1;
if (aValue < bValue) result = -1;
return state.sortOrder === 1 ? result : -result;
});
},
FilteredAndPagedPeers: (state) => {
return state.FilteredPeers.slice(state.pageOffset, state.pageOffset + state.pageSize)
return state.Sorted.slice(state.pageOffset, state.pageOffset + state.pageSize);
},
isFetching: (state) => state.fetching,
hasNextPage: (state) => state.pageOffset < (state.FilteredPeerCount - state.pageSize),