Mirrors/wireguard_webadmin
1
0
Fork 0
mirror of https://github.com/eduardogsilva/wireguard_webadmin.git synced 2025-04-19 00:45:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chartjs better integration with peer list

Browse Source
This commit is contained in:
Eduardo Silva 2025-02-25 18:32:35 -03:00
parent 703a05b18c
commit 9fbdf6f116
1 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
templates/wireguard/wireguard_peer_list.html
View File

@ -1,9 +1,13 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block page_custom_head %} {% block page_custom_head %}
<style> <style>
.peer-extra-info { .peer-extra-info {
display: none; display: none;
} }
.callout.position-relative {
padding: 0 !important;
}
</style> </style>
{% endblock %} {% endblock %}
@ -26,14 +30,16 @@
<div class="row" style="padding-top: 15px"> <div class="row" style="padding-top: 15px">
{% for peer in peer_list %} {% for peer in peer_list %}
<div class="col-md-6" id="peer-{{ peer.public_key }}" data-uuid="{{ peer.uuid }}"> <div class="col-md-6" id="peer-{{ peer.public_key }}" data-uuid="{{ peer.uuid }}">
<div class="callout"> <div class="callout position-relative">
<div class="d-flex justify-content-between align-items-start"> {% comment %}background: linear-gradient(to right, white 50%, transparent 50%);{% endcomment %}
<h5> <div class="position-absolute p-3 div-peer-text-information" style="top: 0; left: 0; background: linear-gradient(to right, white, transparent); width: 100%; height: 100%; ">
<a href="#" onclick="openPeerModal('{{ peer.uuid }}');" style="text-decoration: none"> <div class="d-flex justify-content-between align-items-start">
{{ peer }} <h5>
</a> <a href="#" onclick="openPeerModal('{{ peer.uuid }}');" style="text-decoration: none">
</h5> {{ peer }}
<span> </a>
</h5>
<span>
{% if user_acl.user_level >= 30 %} {% if user_acl.user_level >= 30 %}
<div class="d-inline-flex flex-column"> <div class="d-inline-flex flex-column">
<a href="/peer/sort/?peer={{ peer.uuid }}&direction=up" style="line-height:0px"> <a href="/peer/sort/?peer={{ peer.uuid }}&direction=up" style="line-height:0px">
@ -46,14 +52,8 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
{% comment %}
<a href="/peer/manage/?peer={{ peer.uuid }}">
<i class="far fa-edit"></i>
</a>
{% endcomment %}
</span> </span>
</div> </div>
<p>
<b class="peer-extra-info">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>
<span class="peer-extra-info"><b>Transfer:</b> <span id="peer-transfer-{{ peer.public_key }}"></span><br></span> <span class="peer-extra-info"><b>Transfer:</b> <span id="peer-transfer-{{ peer.public_key }}"></span><br></span>
<span class="peer-extra-info"><b>Latest Handshake:</b> <span id="peer-latest-handshake-{{ peer.public_key }}"></span></span> <span class="peer-extra-info"><b>Latest Handshake:</b> <span id="peer-latest-handshake-{{ peer.public_key }}"></span></span>
@ -75,8 +75,8 @@
{% endfor %} {% endfor %}
</span> </span>
</span> </span>
</p> </div>
<canvas id="chart-{{ peer.public_key }}" width="400" height="100" style="margin-top:10px;"></canvas> <canvas class="" id="chart-{{ peer.public_key }}" width="800" height="130"></canvas>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
@ -190,7 +190,9 @@
borderColor: 'rgba(54, 162, 235, 1)', borderColor: 'rgba(54, 162, 235, 1)',
backgroundColor: 'rgba(54, 162, 235, 0.2)', backgroundColor: 'rgba(54, 162, 235, 0.2)',
fill: false, fill: false,
tension: 0.1 tension: 0.1,
lineTension: 0.4,
pointRadius: 0
}, },
{ {
label: 'Upload', label: 'Upload',
@ -198,7 +200,9 @@
borderColor: 'rgba(255, 99, 132, 1)', borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.2)', backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: false, fill: false,
tension: 0.1 tension: 0.1,
lineTension: 0.4,
pointRadius: 0
} }
] ]
}, },
@ -222,7 +226,7 @@
}, },
animation: { animation: {
duration: 1000 duration: 0
} }
} }
}); });
@ -361,11 +365,8 @@
formattedThroughput = `<i class="fas fa-arrow-down"></i> ${downloadDisplay}, <i class="fas fa-arrow-up"></i> ${uploadDisplay}`; formattedThroughput = `<i class="fas fa-arrow-down"></i> ${downloadDisplay}, <i class="fas fa-arrow-up"></i> ${uploadDisplay}`;
throughputElement.innerHTML = formattedThroughput; throughputElement.innerHTML = formattedThroughput;
// --- Update Chart.js instance for this peer (if available) ---
// Note: Ensure that the chart instance key uses the same identifier as used in the canvas (peer.public_key)
if (charts[peerId]) { if (charts[peerId]) {
var chart = charts[peerId]; var chart = charts[peerId];
// Add new values to the datasets and remove the oldest if more than 10 points.
chart.data.datasets[0].data.push(downloadThroughput); chart.data.datasets[0].data.push(downloadThroughput);
if (chart.data.datasets[0].data.length > 10) { if (chart.data.datasets[0].data.length > 10) {
chart.data.datasets[0].data.shift(); chart.data.datasets[0].data.shift();
@ -534,8 +535,10 @@
$(".peer-extra-info").toggle(); $(".peer-extra-info").toggle();
if($(".peer-extra-info").is(":visible")){ if($(".peer-extra-info").is(":visible")){
$(this).text("Hide extras"); $(this).text("Hide extras");
$(".div-peer-text-information").removeClass('position-absolute') //.removeClass('p-3');
} else { } else {
$(this).text("Show extras"); $(this).text("Show extras");
$(".div-peer-text-information").addClass('position-absolute') //.addClass('p-3');
} }
}); });
}); });