cato447/speed-logger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated speed logger

Browse Source
This commit is contained in:
Simon Bußmann
2025-05-13 02:27:03 +02:00
parent 88b3439822
commit 5081df993f
10 changed files with 233 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
templates/index.html
View File

@@ -1,40 +1,42 @@
{% extends 'layout.html' %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internet Speed Dashboard</title>
{% block content %}
<h2>Graph: Download vs. Upload Speeds</h2>
<canvas id="speedChart"></canvas>
<!-- DataTables CSS -->
<link
rel="stylesheet"
href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
/>
<h2>Test Results</h2>
<!-- jQuery + DataTables JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<table border="1">
<thead>
<tr>
<th>Timestamp</th>
<th>ISP</th>
<th>Latency</th>
<th>Jitter</th>
<th>Download (90th Percentile)</th>
<th>Upload (90th Percentile)</th>
</tr>
</thead>
<tbody>
{% for row in data %}
<tr>
<td>{{ row.timestamp }}</td>
<td>{{ row.isp }}</td>
<td>{{ row.latency }}</td>
<td>{{ row.jitter }}</td>
<td>{{ row.down_90th }}</td>
<td>{{ row.up_90th }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- Chart.js core (umd build) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
<script>
Chart.register(window['chartjs-plugin-annotation']);
<!-- date adapter (Moment.js + Chart.js adapter) -->
<script src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment/dist/chartjs-adapter-moment.min.js"></script>
<!-- zoom & pan plugin -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.min.js"></script>
<style>
body { font-family: sans-serif; margin: 2rem; }
#speedChart { max-width: 100%; margin-bottom: 2rem; }
table.dataTable { width: 100% !important; }
</style>
</head>
<body>
<h1>90th-Percentile Speeds (Aggregated every {{ aggregation }})</h1>
<!-- Chart -->
<canvas id="speedChart" width="800" height="300"></canvas>
<script>
var chartData = {{ chart_data | tojson }};
const acceptableDownloadRange = {
@@ -181,5 +183,36 @@
}
});
</script>
{% endblock %}
<!-- Data table -->
<h2>Raw Data</h2>
<table id="speedTable" class="display">
<thead>
<tr>
<th>Recorded At</th>
<th>Download (90th)</th>
<th>Upload (90th)</th>
</tr>
</thead>
<tbody>
{% for row in data %}
<tr>
<td>{{ row.datetime }}</td>
<td>{{ row.down_90th }}</td>
<td>{{ row.up_90th }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function() {
$('#speedTable').DataTable({
pageLength: 50,
order: [[0, 'desc']]
});
});
</script>
</body>
</html>

22
templates/layout.html
View File

@@ -1,22 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speed Test Results</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
</head>
<body>
<header>
<h1>Network Speed Test Results</h1>
</header>
<main>
{% block content %}
{% endblock %}
</main>
</body>
</html>

34
templates/local.html Normal file
View File

@@ -0,0 +1,34 @@
{% extends 'layout.html' %}
{% block content %}
<h2>Graph: Download vs. Upload Speeds</h2>
<canvas id="speedChart"></canvas>
<h2>Test Results</h2>
<table border="1">
<thead>
<tr>
<th>Timestamp</th>
<th>ISP</th>
<th>Latency</th>
<th>Jitter</th>
<th>Download (90th Percentile)</th>
<th>Upload (90th Percentile)</th>
</tr>
</thead>
<tbody>
{% for row in data|reverse %}
<tr>
<td>{{ row.timestamp }}</td>
<td>{{ row.isp }}</td>
<td>{{ row.latency }}</td>
<td>{{ row.jitter }}</td>
<td>{{ row.down_90th }}</td>
<td>{{ row.up_90th }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}