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

peer modal completed

Browse Source
This commit is contained in:
Eduardo Silva 2025-02-24 11:49:22 -03:00
parent 2745606a20
commit 38c6bb06f9
1 changed files with 79 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
templates/wireguard/wireguard_peer_list.html
View File

@ -38,15 +38,11 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
<a href="javascript:void(0);" onclick="openImageLightbox('/tools/download_peer_config/?uuid={{ peer.uuid }}&format=qrcode');"> {% comment %}
<i class="fas fa-qrcode"></i>
</a>
<a href="/tools/download_peer_config/?uuid={{ peer.uuid }}">
<i class="fas fa-download"></i>
</a>
<a href="/peer/manage/?peer={{ peer.uuid }}"> <a href="/peer/manage/?peer={{ peer.uuid }}">
<i class="far fa-edit"></i> <i class="far fa-edit"></i>
</a> </a>
{% endcomment %}
</span> </span>
</div> </div>
<p> <p>
@ -94,9 +90,10 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<!-- Details copied from the peer card --> <!-- Info content section -->
<div class="info-content">
<p><b><i class="fas fa-dolly nav-icon"></i> Transfer:</b> <span id="peerTransfer">--</span></p> <p><b><i class="fas fa-dolly nav-icon"></i> Transfer:</b> <span id="peerTransfer">--</span></p>
<p><b><i class="far fa-handshake nav-icon"></i> Latest Handshake:</b> <span id="peerHandshake">--</span></p> <p><b><i class="far fa-clock nav-icon"></i></i> Latest Handshake:</b> <span id="peerHandshake">--</span></p>
<p><b><i class="far fa-address-card nav-icon"></i> Endpoints:</b> <span id="peerEndpoints">--</span></p> <p><b><i class="far fa-address-card nav-icon"></i> Endpoints:</b> <span id="peerEndpoints">--</span></p>
<p><b><i class="fas fa-network-wired nav-icon"></i> Allowed IPs:</b> <span id="peerAllowedIPs">--</span></p> <p><b><i class="fas fa-network-wired nav-icon"></i> Allowed IPs:</b> <span id="peerAllowedIPs">--</span></p>
@ -124,16 +121,25 @@
</center> </center>
</div> </div>
</div> </div>
<!-- QR Code content section (initially hidden) -->
<div class="qr-code-content" style="display:none; ">
<button class="btn btn-secondary" id="backButton"><i class="fas fa-times"></i> Close QR Code</button><br>
<div style="text-align: center;">
<img id="qrCodeImg" src="" alt="QR Code" class="img-fluid" style="max-width: 400px" />
</div>
</div>
</div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i> Close</button>
<!-- Action buttons --> <a href="#" class="btn btn-info" id="downloadConfigButton"><i class="fas fa-download"></i> Config</a>
<a href="#" class="btn btn-primary" id="editPeerButton">Edit</a> <a href="#" class="btn btn-info" id="qrcodeButton"><i class="fas fa-qrcode"></i> QR Code</a>
<a href="#" class="btn btn-info" id="downloadConfigButton">Download Config</a> <a href="#" class="btn btn-outline-primary" id="editPeerButton"><i class="far fa-edit"></i> Edit</a>
<a href="#" class="btn btn-info" id="qrcodeButton">QR Code</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="alert alert-warning" role="alert"> <div class="alert alert-warning" role="alert">
<h4 class="alert-heading">No WireGuard Instances Found</h4> <h4 class="alert-heading">No WireGuard Instances Found</h4>
@ -147,14 +153,33 @@
{% block custom_page_scripts %} {% block custom_page_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
$("#qrcodeButton").on("click", function(e) {
e.preventDefault();
var uuid = $("#peerPreviewModal").data("peer-uuid");
$("#qrCodeImg").attr("src", "/tools/download_peer_config/?uuid=" + uuid + "&format=qrcode");
$(".info-content").hide();
$(".qr-code-content").show();
});
$("#backButton").on("click", function(e) {
e.preventDefault();
$(".qr-code-content").hide();
$(".info-content").show();
});
});
</script>
<script> <script>
// Function to open the peer preview modal using data from the peer card
function openPeerModal(uuid) { function openPeerModal(uuid) {
$(".qr-code-content").hide();
$(".info-content").show();
$("#qrCodeImg").attr("src", "");
// Find the peer element by its data-uuid attribute // Find the peer element by its data-uuid attribute
var peerElem = document.querySelector('[data-uuid="' + uuid + '"]'); var peerElem = document.querySelector('[data-uuid="' + uuid + '"]');
if (peerElem) { if (peerElem) {
// Copy the details from the peer card (which is updated by your routine)
var peerNameFromCard = peerElem.querySelector('h5').innerText; var peerNameFromCard = peerElem.querySelector('h5').innerText;
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;
@ -205,15 +230,6 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
//const fetchWireguardStatus = async () => {
// try {
// const response = await fetch('/api/wireguard_status/');
// const data = await response.json();
// updateUI(data);
// } catch (error) {
// console.error('Error fetching Wireguard status:', error);
// }
//};
const fetchWireguardStatus = async () => { const fetchWireguardStatus = async () => {
try { try {
const response = await fetch('/api/wireguard_status/'); const response = await fetch('/api/wireguard_status/');
@ -315,10 +331,4 @@
}; };
</script> </script>
<script>
function openImageLightbox(url) {
window.open(url, 'Image', 'width=500,height=500,toolbar=0,location=0,menubar=0');
}
</script>
{% endblock %} {% endblock %}