Initial commit

www/js/main.js

@@ -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';
+}