swissmakers_gmbh/wireguard-manager
12
0
Fork 0
mirror of https://github.com/swissmakers/wireguard-manager.git synced 2026-03-26 13:03:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Change client connection-status query to API-callable

Browse Source
This commit is contained in:
Michael Reber
2025-03-04 11:11:57 +01:00
parent 1c370dcf54
commit 0eaccfbc85
3 changed files with 138 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
templates/status.html
View File

@@ -15,17 +15,68 @@ VPN Connected Users (Peers)
{{define "page_content"}}
<script>
function bytesToHumanReadable(temporal) {
const units = [" ", " K", " M", " G", " T", " P", " E", " Z", " Y"]
let pow = 0
while (temporal > 1024) {
temporal /= 1024
pow ++
if (pow == units.length-1) break
// Converts a number of bytes to a human-readable string.
function bytesToHumanReadable(bytes) {
const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
let i = 0;
while (bytes >= 1024 && i < units.length - 1) {
bytes /= 1024;
i++;
}
return bytes.toFixed(2) + " " + units[i];
}
return parseFloat(temporal.toFixed(2)) + units[pow]+"B"
// Fetch and update the VPN status table.
function updateStatusTable() {
$.ajax({
url: "{{.basePath}}/api/connection-status", // Make sure your APIStatus endpoint is registered.
method: "GET",
dataType: "json",
success: function(data) {
console.log("Received API status data:", data);
// Use a fallback if devices is undefined.
var devices = (data && data.devices && Array.isArray(data.devices)) ? data.devices : [];
let html = "";
devices.forEach(function(dev) {
html += '<div class="table-responsive">';
html += '<table class="table table-sm table-bordered table-striped">';
html += '<caption>List of connected peers for device ' + dev.name + '</caption>';
html += '<thead class="thead-dark"><tr>';
html += '<th scope="col">#</th>';
html += '<th scope="col">Name</th>';
html += '<th scope="col">Email</th>';
html += '<th scope="col">Allocated IPs</th>';
html += '<th scope="col">Endpoint</th>';
html += '<th scope="col">Public Key</th>';
html += '<th scope="col">Received</th>';
html += '<th scope="col">Transmitted</th>';
html += '<th scope="col">Connected</th>';
html += '<th scope="col">Last Handshake</th>';
html += '</tr></thead>';
html += '<tbody>';
// Use the lowercase property names as provided by the API.
dev.peers.forEach(function(peer, idx) {
html += '<tr' + (peer.connected ? ' class="table-success"' : '') + '>';
html += '<th scope="row">' + idx + '</th>';
html += '<td>' + peer.name + '</td>';
html += '<td>' + peer.email + '</td>';
html += '<td>' + peer.allocated_ip + '</td>';
html += '<td>' + peer.endpoint + '</td>';
html += '<td>' + peer.public_key + '</td>';
html += '<td title="' + peer.received_bytes + ' Bytes">' + bytesToHumanReadable(peer.received_bytes) + '</td>';
html += '<td title="' + peer.transmit_bytes + ' Bytes">' + bytesToHumanReadable(peer.transmit_bytes) + '</td>';
html += '<td>' + (peer.connected ? '✓' : '') + '</td>';
html += '<td>' + new Date(peer.last_handshake_time).toLocaleString() + '</td>';
html += '</tr>';
});
html += '</tbody></table></div>';
});
$("#status-table-container").html(html);
},
error: function(err) {
console.error("Error updating status:", err);
}
});
}
</script>
<section class="content">
@@ -33,43 +84,7 @@ VPN Connected Users (Peers)
{{ if .error }}
<div class="alert alert-warning" role="alert">{{.error}}</div>
{{ end }}
{{ range $dev := .devices }}
<div class="table-responsive">
<table class="table table-sm table-bordered table-striped">
<caption>List of connected peers for device with name {{ $dev.Name }} </caption>
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Allocated IPs</th>
<th scope="col">Endpoint</th>
<th scope="col">Public Key</th>
<th scope="col">Received</th>
<th scope="col">Transmitted</th>
<th scope="col">Connected (Approximation)</th>
<th scope="col">Last Handshake</th>
</tr>
</thead>
<tbody>
{{ range $idx, $peer := $dev.Peers }}
<tr {{ if $peer.Connected }} class="table-success" {{ end }}>
<th scope="row">{{ $idx }}</th>
<td>{{ $peer.Name }}</td>
<td>{{ $peer.Email }}</td>
<td>{{ $peer.AllocatedIP }}</td>
<td>{{ $peer.Endpoint }}</td>
<td>{{ $peer.PublicKey }}</td>
<td title="{{ $peer.ReceivedBytes }} Bytes"><script>document.write(bytesToHumanReadable({{ $peer.ReceivedBytes }}))</script></td>
<td title="{{ $peer.TransmitBytes }} Bytes"><script>document.write(bytesToHumanReadable({{ $peer.TransmitBytes }}))</script></td>
<td>{{ if $peer.Connected }}✓{{end}}</td>
<td>{{ $peer.LastHandshakeTime.Format "2006-01-02 15:04:05 MST" }}</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
{{ end }}
<div id="status-table-container">
</div>
</section>
{{end}}