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

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

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