UniqueSoft/wg-portal
2
0
Fork 0
mirror of https://github.com/h44z/wg-portal synced 2025-06-26 18:16:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added peers sorting for Interface and Profile views

Browse Source
This commit is contained in:
Dmytro Bondar 2024-09-19 17:21:36 +02:00
parent a46dabc1d3
commit 2936e15a5d
No known key found for this signature in database
GPG Key ID: C123CD37BBED8BB7
6 changed files with 119 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/assets/base.css
View File

@ -1,9 +1,17 @@
a.disabled {
pointer-events: none;
cursor: default;
color: #888888;
pointer-events: none;
cursor: default;
color: #888888;
}
.text-wrap {
overflow-break: anywhere;
overflow-break: anywhere;
}
.asc::after {
content: " ↑";
}
.desc::after {
content: " ↓";
}

3
frontend/src/helpers/utils.js Normal file
View File

@ -0,0 +1,3 @@
export function ipToLong(ip) {
return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0);
}

23
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 { ipToLong } 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,26 @@ 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 ? ipToLong(aValue[0]) : 0;
bValue = bValue.length > 0 ? ipToLong(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;
}
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)}`) : ''

23
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 { ipToLong } 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,26 @@ 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 ? ipToLong(aValue[0]) : 0;
bValue = bValue.length > 0 ? ipToLong(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;
}
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),

38
frontend/src/views/InterfaceView.vue
View File

@ -21,6 +21,20 @@ const multiCreatePeerId = ref("")
const editInterfaceId = ref("")
const viewedInterfaceId = ref("")
const sortKey = ref("");
const sortOrder = ref(1);
function sortBy(key) {
if (sortKey.value === key) {
sortOrder.value = sortOrder.value * -1; // Toggle sort order
} else {
sortKey.value = key;
sortOrder.value = 1; // Default to ascending
}
peers.sortKey = sortKey.value;
peers.sortOrder = sortOrder.value;
}
function calculateInterfaceName(id, name) {
let result = id
if (name) {
@ -314,11 +328,25 @@ onMounted(async () => {
<input id="flexCheckDefault" class="form-check-input" :title="$t('general.select-all')" type="checkbox" value="">
</th><!-- select -->
<th scope="col"></th><!-- status -->
<th scope="col">{{ $t('interfaces.table-heading.name') }}</th>
<th scope="col">{{ $t('interfaces.table-heading.user') }}</th>
<th scope="col">{{ $t('interfaces.table-heading.ip') }}</th>
<th v-if="interfaces.GetSelected.Mode==='client'" scope="col">{{ $t('interfaces.table-heading.endpoint') }}</th>
<th v-if="peers.hasStatistics" scope="col">{{ $t('interfaces.table-heading.status') }}</th>
<th scope="col" @click="sortBy('DisplayName')">
{{ $t("interfaces.table-heading.name") }}
<i v-if="sortKey === 'DisplayName'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th scope="col" @click="sortBy('UserIdentifier')">
{{ $t("interfaces.table-heading.user") }}
<i v-if="sortKey === 'UserIdentifier'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th scope="col" @click="sortBy('Addresses')">
{{ $t("interfaces.table-heading.ip") }}
<i v-if="sortKey === 'Addresses'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th v-if="interfaces.GetSelected.Mode === 'client'" scope="col">
{{ $t("interfaces.table-heading.endpoint") }}
</th>
<th v-if="peers.hasStatistics" scope="col" @click="sortBy('IsConnected')">
{{ $t("interfaces.table-heading.status") }}
<i v-if="sortKey === 'IsConnected'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th scope="col"></th><!-- Actions -->
</tr>
</thead>

30
frontend/src/views/ProfileView.vue
View File

@ -12,10 +12,25 @@ const profile = profileStore()
const viewedPeerId = ref("")
const editPeerId = ref("")
const sortKey = ref("");
const sortOrder = ref(1);
function sortBy(key) {
if (sortKey.value === key) {
sortOrder.value = sortOrder.value * -1; // Toggle sort order
} else {
sortKey.value = key;
sortOrder.value = 1; // Default to ascending
}
profile.sortKey = sortKey.value;
profile.sortOrder = sortOrder.value;
}
onMounted(async () => {
await profile.LoadUser()
await profile.LoadPeers()
await profile.LoadStats()
await profile.calculatePages(); // Forces to show initial page number
})
</script>
@ -58,9 +73,18 @@ onMounted(async () => {
value="">
</th><!-- select -->
<th scope="col"></th><!-- status -->
<th scope="col">{{ $t('profile.table-heading.name') }}</th>
<th scope="col">{{ $t('profile.table-heading.ip') }}</th>
<th v-if="profile.hasStatistics" scope="col">{{ $t('profile.table-heading.stats') }}</th>
<th scope="col" @click="sortBy('DisplayName')">
{{ $t("profile.table-heading.name") }}
<i v-if="sortKey === 'DisplayName'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th scope="col" @click="sortBy('Addresses')">
{{ $t("profile.table-heading.ip") }}
<i v-if="sortKey === 'Addresses'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th v-if="profile.hasStatistics" scope="col" @click="sortBy('IsConnected')">
{{ $t("profile.table-heading.stats") }}
<i v-if="sortKey === 'IsConnected'" :class="sortOrder === 1 ? 'asc' : 'desc'"></i>
</th>
<th scope="col">{{ $t('profile.table-heading.interface') }}</th>
<th scope="col"></th><!-- Actions -->
</tr>