speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-10 18:38:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix editing and name column of wireguard peers

Browse source
This commit is contained in:
Samuel Lorch 2024-07-27 19:07:12 +02:00
parent 2c050ae61d
commit 32e209b996
1 changed files with 64 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
client/src/pages/vpn/wireguard.peers.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { apiCall } from '../../api';
import getPlugins from '../../plugins';
import { apiCall } from "../../api";
import getPlugins from "../../plugins";
const p = getPlugins();
let peers = $ref({});
@ -8,65 +8,81 @@ let loading = $ref(false);
let selection = $ref([] as number[]);
const columns = [
{heading: 'Name', path: 'name'},
{heading: 'Allowed IPs', path: 'allowed_ips'},
{heading: 'Endpoint', path: 'endpoint'},
{heading: 'Persistent Keepalive', path: 'persistent_keepalive'},
{heading: 'Comment', path: 'comment'},
{ heading: "Name", path: "name" },
{ heading: "Allowed IPs", path: "allowed_ips" },
{ heading: "Endpoint", path: "endpoint" },
{ heading: "Persistent Keepalive", path: "persistent_keepalive" },
{ heading: "Comment", path: "comment" },
];
const displayData = $computed(() => {
let data: any;
data = [];
for (const name in peers) {
data.push({
name,
allowed_ips: peers[name].allowed_ips,
endpoint: peers[name].endpoint,
persistent_keepalive: peers[name].persistent_keepalive,
comment: peers[name].comment,
});
}
return data;
let data: any;
data = [];
for (const index in peers) {
data.push({
name: peers[index].name,
allowed_ips: peers[index].allowed_ips,
endpoint: peers[index].endpoint,
persistent_keepalive: peers[index].persistent_keepalive,
comment: peers[index].comment,
});
}
return data;
});
async function load(){
loading = true;
let res = await apiCall('vpn.wireguard.peers.list', {});
if (res.Error === null) {
console.debug('peers', res.Data);
peers = res.Data;
} else {
console.debug('error', res);
}
loading = false;
async function load() {
loading = true;
let res = await apiCall("vpn.wireguard.peers.list", {});
if (res.Error === null) {
console.debug("peers", res.Data);
peers = res.Data;
} else {
console.debug("error", res);
}
loading = false;
}
async function deletePeer(){
let res = await apiCall('vpn.wireguard.peers.delete', {name: displayData[selection[0]].name});
if (res.Error === null) {
console.debug('deleted peer');
} else {
console.debug('error', res);
}
load();
async function deletePeer() {
let res = await apiCall("vpn.wireguard.peers.delete", {
name: displayData[selection[0]].name,
});
if (res.Error === null) {
console.debug("deleted peer");
} else {
console.debug("error", res);
}
load();
}
async function editPeer() {
p.router.push(`/vpn/wireguard.peers/edit/${ displayData[selection[0]].name}`);
p.router.push(
`/vpn/wireguard.peers/edit/${displayData[selection[0]].name}`,
);
}
onMounted(async() => {
load();
onMounted(async () => {
load();
});
</script>
<template>
<TableView v-model:selection="selection" v-model:data="displayData" title="Peers" :columns="columns" :loading="loading" :table-props="{sort:true, sortSelf: true}">
<button @click="load">Refresh</button>
<router-link class="button" to="/vpn/wireguard.peers/edit">Create</router-link>
<button :disabled="selection.length != 1" @click="editPeer">Edit</button>
<button :disabled="selection.length != 1" @click="deletePeer">Delete</button>
</TableView>
<TableView
v-model:selection="selection"
v-model:data="displayData"
title="Peers"
:columns="columns"
:loading="loading"
:table-props="{ sort: true, sortSelf: true }"
>
<button @click="load">Refresh</button>
<router-link class="button" to="/vpn/wireguard.peers/edit"
>Create</router-link
>
<button :disabled="selection.length != 1" @click="editPeer">
Edit
</button>
<button :disabled="selection.length != 1" @click="deletePeer">
Delete
</button>
</TableView>
</template>