Joren/DRMDTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Delete src/templates/stats

Browse Source
This commit is contained in:
Joren
2024-09-15 05:02:02 +02:00
parent 4b03c7c59b
commit 5b6e1e6b01
1 changed files with 0 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/templates/stats
View File

@@ -1,114 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Network Stats</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: #1e1e1e;
color: #d4d4d4;
line-height: 1.6;
padding: 20px;
max-width: 800px;
margin: 0 auto;
box-sizing: border-box;
}
h1 {
border-bottom: 1px solid #333;
padding-bottom: 10px;
}
.stats-container {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.stat-box {
background-color: #2d2d2d;
border-radius: 4px;
padding: 10px;
width: 48%;
}
canvas {
background-color: #2d2d2d;
border-radius: 4px;
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Network Stats</h1>
<div class="stats-container">
<div class="stat-box">
<h2>Upload Speed</h2>
<p id="upload-speed">0 MB/s</p>
<h2>Total Upload</h2>
<p id="total-upload">0 MB</p>
</div>
<div class="stat-box">
<h2>Download Speed</h2>
<p id="download-speed">0 MB/s</p>
<h2>Total Download</h2>
<p id="total-download">0 MB</p>
</div>
</div>
<canvas id="speed-chart"></canvas>
<script>
const ctx = document.getElementById('speed-chart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Upload Speed (MB/s)',
borderColor: 'rgb(75, 192, 192)',
data: []
}, {
label: 'Download Speed (MB/s)',
borderColor: 'rgb(255, 99, 132)',
data: []
}]
},
options: {
responsive: true,
scales: {
x: {
type: 'time',
time: {
unit: 'second'
}
},
y: {
beginAtZero: true
}
}
}
});
const ws = new WebSocket('ws://' + window.location.host + '/ws');
ws.onmessage = function(event) {
const data = JSON.parse(event.data);
document.getElementById('upload-speed').textContent = data.UploadSpeed.toFixed(2) + ' MB/s';
document.getElementById('download-speed').textContent = data.DownloadSpeed.toFixed(2) + ' MB/s';
document.getElementById('total-upload').textContent = (data.TotalUpload / (1024 * 1024)).toFixed(2) + ' MB';
document.getElementById('total-download').textContent = (data.TotalDownload / (1024 * 1024)).toFixed(2) + ' MB';
const now = new Date();
chart.data.labels.push(now);
chart.data.datasets[0].data.push(data.UploadSpeed);
chart.data.datasets[1].data.push(data.DownloadSpeed);
if (chart.data.labels.length > 60) {
chart.data.labels.shift();
chart.data.datasets[0].data.shift();
chart.data.datasets[1].data.shift();
}
chart.update();
};
</script>
</body>
</html>