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" %}
{% block page_custom_head %}
<style>
.peer-extra-info {
display: none;
}
.callout.position-relative {
padding: 0 !important;
}
</style>
{% endblock %}
@ -26,14 +30,16 @@
<div class="row" style="padding-top: 15px">
{% for peer in peer_list %}
<div class="col-md-6" id="peer-{{ peer.public_key }}" data-uuid="{{ peer.uuid }}">
<div class="callout">
<div class="d-flex justify-content-between align-items-start">
<h5>
<a href="#" onclick="openPeerModal('{{ peer.uuid }}');" style="text-decoration: none">
{{ peer }}
</a>
</h5>
<span>
<div class="callout position-relative">
{% comment %}background: linear-gradient(to right, white 50%, transparent 50%);{% endcomment %}
<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%; ">
<div class="d-flex justify-content-between align-items-start">
<h5>
<a href="#" onclick="openPeerModal('{{ peer.uuid }}');" style="text-decoration: none">
{{ peer }}
</a>
</h5>
<span>
{% if user_acl.user_level >= 30 %}
<div class="d-inline-flex flex-column">
<a href="/peer/sort/?peer={{ peer.uuid }}&direction=up" style="line-height:0px">
@ -46,14 +52,8 @@
</div>
</div>
{% endif %}
{% comment %}
<a href="/peer/manage/?peer={{ peer.uuid }}">
<i class="far fa-edit"></i>
</a>
{% endcomment %}
</span>
</div>
<p>
</div>
<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>Latest Handshake:</b> <span id="peer-latest-handshake-{{ peer.public_key }}"></span></span>
@ -75,8 +75,8 @@
{% endfor %}
</span>
</span>
</p>
<canvas id="chart-{{ peer.public_key }}" width="400" height="100" style="margin-top:10px;"></canvas>
</div>
<canvas class="" id="chart-{{ peer.public_key }}" width="800" height="130"></canvas>
</div>
</div>
{% endfor %}
@ -190,7 +190,9 @@
borderColor: 'rgba(54, 162, 235, 1)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
fill: false,
tension: 0.1
tension: 0.1,
lineTension: 0.4,
pointRadius: 0
},
{
label: 'Upload',
@ -198,7 +200,9 @@
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
fill: false,
tension: 0.1
tension: 0.1,
lineTension: 0.4,
pointRadius: 0
}
]
},
@ -222,7 +226,7 @@
},
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}`;
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]) {
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);
if (chart.data.datasets[0].data.length > 10) {
chart.data.datasets[0].data.shift();
@ -534,8 +535,10 @@
$(".peer-extra-info").toggle();
if($(".peer-extra-info").is(":visible")){
$(this).text("Hide extras");
$(".div-peer-text-information").removeClass('position-absolute') //.removeClass('p-3');
} else {
$(this).text("Show extras");
$(".div-peer-text-information").addClass('position-absolute') //.addClass('p-3');
}
});
});