Mirrors/wireguard_webadmin
1
0
Fork 0
mirror of https://github.com/eduardogsilva/wireguard_webadmin.git synced 2025-06-28 01:07:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add toggle for displaying extra peer information

Browse Source
This commit is contained in:
Eduardo Silva 2025-02-25 14:49:01 -03:00
parent ec65a5c0d2
commit f7917c478a
1 changed files with 62 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
templates/wireguard/wireguard_peer_list.html
View File

@ -1,4 +1,12 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block page_custom_head %}
<style>
.peer-extra-info {
display: none;
}
</style>
{% endblock %}
{% block content %} {% block content %}
{% if wireguard_instances %} {% if wireguard_instances %}
@ -46,12 +54,13 @@
</span> </span>
</div> </div>
<p> <p>
<b>Throughput: </b> <span id="peer-throughput-{{ peer.public_key }}"></span><br> <b class="peer-extra-info">Throughput: </b> <span id="peer-throughput-{{ peer.public_key }}"></span><br>
<b>Transfer:</b> <span id="peer-transfer-{{ peer.public_key }}"></span><br> <span class="peer-extra-info"><b>Transfer:</b> <span id="peer-transfer-{{ peer.public_key }}"></span><br></span>
<b>Latest Handshake:</b> <span id="peer-latest-handshake-{{ peer.public_key }}"></span> <span class="peer-extra-info"><b>Latest Handshake:</b> <span id="peer-latest-handshake-{{ peer.public_key }}"></span></span>
<span style="display: none;" id="peer-stored-latest-handshake-{{ peer.public_key }}">{% if peer.peerstatus.last_handshake %}{{ peer.peerstatus.last_handshake|date:"U" }}{% else %}0{% endif %}</span><br> <span class="peer-extra-info"><span style="display: none;" id="peer-stored-latest-handshake-{{ peer.public_key }}">{% if peer.peerstatus.last_handshake %}{{ peer.peerstatus.last_handshake|date:"U" }}{% else %}0{% endif %}</span><br></span>
<b>Endpoints:</b> <span id="peer-endpoints-{{ peer.public_key }}"></span><br> <span class="peer-extra-info"><b>Endpoints:</b> <span id="peer-endpoints-{{ peer.public_key }}"></span><br></span>
<span class="peer-extra-info" id="peer-extra-info-allowed-ips-{{ peer.public_key }}">
<b>Allowed IPs:</b> <b>Allowed IPs:</b>
<span id="peer-allowed-ips-{{ peer.public_key }}"> <span id="peer-allowed-ips-{{ peer.public_key }}">
{% for address in peer.peerallowedip_set.all %} {% for address in peer.peerallowedip_set.all %}
@ -65,6 +74,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</span> </span>
</span>
</p> </p>
</div> </div>
</div> </div>
@ -75,6 +85,7 @@
{% else %} {% else %}
<a class="btn btn-primary disabled" href="">Create Peer</a> <a class="btn btn-primary disabled" href="">Create Peer</a>
{% endif %} {% endif %}
<button id="toggleExtraInfo" class="btn btn-outline-primary">Show extras</button>
</div> </div>
</div> </div>
</div> </div>
@ -187,7 +198,7 @@
var peerTransfer = peerElem.querySelector('[id^="peer-transfer-"]').innerText; var peerTransfer = peerElem.querySelector('[id^="peer-transfer-"]').innerText;
var peerHandshake = peerElem.querySelector('[id^="peer-latest-handshake-"]').innerText; var peerHandshake = peerElem.querySelector('[id^="peer-latest-handshake-"]').innerText;
var peerEndpoints = peerElem.querySelector('[id^="peer-endpoints-"]').innerText; var peerEndpoints = peerElem.querySelector('[id^="peer-endpoints-"]').innerText;
var peerAllowedIPs = peerElem.querySelector('[id^="peer-allowed-ips-"]').innerText; var peerAllowedIPs = peerElem.querySelector('[id^="peer-allowed-ips-"]').innerHTML;
// Update the modal fields with the card values // Update the modal fields with the card values
$('#peerPreviewModalLabel').text(peerNameFromCard); $('#peerPreviewModalLabel').text(peerNameFromCard);
@ -195,7 +206,7 @@
$('#peerTransfer').text(peerTransfer); $('#peerTransfer').text(peerTransfer);
$('#peerHandshake').text(peerHandshake); $('#peerHandshake').text(peerHandshake);
$('#peerEndpoints').text(peerEndpoints); $('#peerEndpoints').text(peerEndpoints);
$('#peerAllowedIPs').text(peerAllowedIPs); $('#peerAllowedIPs').html(peerAllowedIPs);
$('#editPeerButton').attr('href', '/peer/manage/?peer=' + uuid); $('#editPeerButton').attr('href', '/peer/manage/?peer=' + uuid);
$('#downloadConfigButton').attr('href', '/tools/download_peer_config/?uuid=' + uuid); $('#downloadConfigButton').attr('href', '/tools/download_peer_config/?uuid=' + uuid);
$('#qrcodeButton').attr('href', '/tools/download_peer_config/?uuid=' + uuid + '&format=qrcode'); $('#qrcodeButton').attr('href', '/tools/download_peer_config/?uuid=' + uuid + '&format=qrcode');
@ -389,6 +400,8 @@
const htmlIpsArray = htmlIpsText.match(/\b(?:\d{1,3}\.){3}\d{1,3}\/\d{1,2}\b/g) || []; const htmlIpsArray = htmlIpsText.match(/\b(?:\d{1,3}\.){3}\d{1,3}\/\d{1,2}\b/g) || [];
allowedIpsElement.innerHTML = ''; allowedIpsElement.innerHTML = '';
let showExtraInfo = false;
htmlIpsArray.forEach((ip, index, array) => { htmlIpsArray.forEach((ip, index, array) => {
const ipSpan = document.createElement('span'); const ipSpan = document.createElement('span');
ipSpan.textContent = ip; ipSpan.textContent = ip;
@ -398,13 +411,23 @@
ipSpan.style.color = 'red'; ipSpan.style.color = 'red';
ipSpan.style.textDecoration = 'underline'; ipSpan.style.textDecoration = 'underline';
ipSpan.title = 'This address does not appear in the wg show command output, likely indicating that another peer has an IP overlapping this network or that the configuration file is outdated.'; ipSpan.title = 'This address does not appear in the wg show command output, likely indicating that another peer has an IP overlapping this network or that the configuration file is outdated.';
showExtraInfo = true;
} }
if (index < array.length - 1) { if (index < array.length - 1) {
allowedIpsElement.appendChild(document.createTextNode(', ')); allowedIpsElement.appendChild(document.createTextNode(', '));
} }
}); });
};
if (showExtraInfo) {
const extraInfoContainerId = allowedIpsElement.id.replace('peer-allowed-ips-', 'peer-extra-info-allowed-ips-');
const extraInfoContainer = document.getElementById(extraInfoContainerId);
if (extraInfoContainer) {
extraInfoContainer.style.display = 'block';
}
}
};
const updateCalloutClass = (peerDiv, latestHandshake) => { const updateCalloutClass = (peerDiv, latestHandshake) => {
const calloutDiv = peerDiv.querySelector('.callout'); const calloutDiv = peerDiv.querySelector('.callout');
@ -424,4 +447,18 @@
}; };
</script> </script>
<script>
$(document).ready(function(){
$("#toggleExtraInfo").click(function(){
$(".peer-extra-info").toggle();
if($(".peer-extra-info").is(":visible")){
$(this).text("Hide extras");
} else {
$(this).text("Show extras");
}
});
});
</script>
{% endblock %} {% endblock %}