Initial commit
This commit is contained in:
Eneko Nieto
7
www/cgi-bin/limitator.json
Normal file
7
www/cgi-bin/limitator.json
Normal file
@@ -0,0 +1,7 @@
|
||||
#!/bin/sh
|
||||
|
||||
echo "Access-Control-Allow-Origin: *"
|
||||
echo "Content-type: application/json"
|
||||
echo ""
|
||||
|
||||
/etc/init.d/limitator json
|
||||
53
www/index.html
Normal file
53
www/index.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body style="background-color: white">
|
||||
<h1>Cuota restante: <span id="remaining"></span></h1>
|
||||
|
||||
<br><br>
|
||||
|
||||
<h3>Velocidad actual: <span id="speed">calculando...</span></h3>
|
||||
<canvas id="speed_chart" width="800" height="400"></canvas>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>Usado: <span id="used_bytes"></span></p>
|
||||
<p>Cuota asignada hasta hoy: <span id="current_quota"></span></p>
|
||||
<p>Cuota mensual total: <span id="total_quota"></span></p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<h3>Descripción</h3>
|
||||
<p>El periodo de facturación de internet comienza el día 13. La cuota mensual se divide entre la cantidad de días
|
||||
del periodo de facturación y se va asignando según transcurren los días. Si se sobrepasa la cuota asignada se
|
||||
corta la conexión a internet y hay que esperar a que transcurra el día para que se asigne la cuota del próximo
|
||||
día.</p>
|
||||
<p>Entre las 23h y 7h es la franja gratuita, la conexión a Internet siempre está disponible y el consumo no cuenta
|
||||
para la cuota.</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<h3>Leyenda</h3>
|
||||
<p>Cuota restante: megas restantes antes de cortarse la conexión a Internet.</p>
|
||||
<p>Velocidad actual: velocidad de transferencia en este mismo instante, en Kilobytes por segundo. Solo cuenta la cuota
|
||||
consumida, por lo que de 23h a 7h marca 0 KB/s.</p>
|
||||
<p>Usado: megas usados en el periodo de facturación actual.</p>
|
||||
<p>Cuota asignada hasta hoy: megas totales asignados hasta el día de hoy. El último día será igual a la cuota
|
||||
mensual total.</p>
|
||||
<p>Cuota mensual total: megas totales disponibles para todo el mes.</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<a style="color: black; font-family: arial, helvetica, sans-serif;" href="/cgi-bin/luci/">LuCI - Lua Configuration
|
||||
Interface</a>
|
||||
|
||||
<script src="js/Chart.min.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
7
www/js/Chart.min.js
vendored
Normal file
7
www/js/Chart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
86
www/js/main.js
Normal file
86
www/js/main.js
Normal file
@@ -0,0 +1,86 @@
|
||||
/*
|
||||
* Obtiene los datos de la cuota de cgi-bin/limitator.json y los muestra.
|
||||
*/
|
||||
|
||||
getCounters(parseCounters);
|
||||
setInterval(() => getCounters(parseCounters), 5000);
|
||||
|
||||
var ctx = document.getElementById('speed_chart');
|
||||
var chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['', '', '', '', '', '', '', '', '', ''],
|
||||
datasets: [{
|
||||
label: 'Velocidad (KB/s)',
|
||||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
min: 0
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function getCounters(funcToParse) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
funcToParse(this.responseText);
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", "cgi-bin/limitator.json", true);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
function parseCounters(data) {
|
||||
let counters = JSON.parse(data);
|
||||
document.getElementById("remaining").innerHTML = bytesToMegas(counters.remaining);
|
||||
document.getElementById("used_bytes").innerHTML = bytesToMegas(counters.used_bytes);
|
||||
document.getElementById("current_quota").innerHTML = bytesToMegas(counters.current_quota);
|
||||
document.getElementById("total_quota").innerHTML = bytesToMegas(counters.total_quota);
|
||||
|
||||
updateSpeed(counters.used_bytes);
|
||||
}
|
||||
|
||||
var used_bytes_array = new Array();
|
||||
function updateSpeed(used_bytes) {
|
||||
used_bytes_array.push({ used_bytes: used_bytes, date: new Date() });
|
||||
|
||||
if (used_bytes_array.length <= 1)
|
||||
return;
|
||||
else if (used_bytes_array.length > 10)
|
||||
used_bytes_array.shift();
|
||||
|
||||
let previous_used_bytes = used_bytes_array[used_bytes_array.length - 2];
|
||||
let byte_transferred = used_bytes - previous_used_bytes.used_bytes;
|
||||
let time_elapsed = (new Date() - previous_used_bytes.date) / 1000;
|
||||
document.getElementById("speed").innerHTML = bytesToKbps(byte_transferred / time_elapsed);
|
||||
|
||||
chart.data.datasets[0].data.shift();
|
||||
chart.data.datasets[0].data.push(byte_transferred / time_elapsed / 1024);
|
||||
chart.update();
|
||||
}
|
||||
|
||||
function bytesToMegas(number) {
|
||||
return (number / 1024 / 1024).toFixed(1) + ' MB';
|
||||
}
|
||||
|
||||
function bytesToKbps(number) {
|
||||
return (number / 1024).toFixed(1) + ' KB/s';
|
||||
}
|
||||
Reference in New Issue
Block a user