From 4a7a60f5d20968ddefbe6ee709d6961bb3afe444 Mon Sep 17 00:00:00 2001
From: Wim Brand <fornax@fornaxian.com>
Date: Mon, 8 Jun 2020 16:17:25 +0200
Subject: [PATCH] live updating admin graph

---
 res/include/script/admin.js | 13 ++++++++++---
 res/template/admin.html     | 17 +++++++++--------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/res/include/script/admin.js b/res/include/script/admin.js
index 339a3ef..3109fe5 100644
--- a/res/include/script/admin.js
+++ b/res/include/script/admin.js
@@ -83,10 +83,16 @@ var graph = new Chart(
 	}
 );
 
-function setData(days, interval){
+let graphTimeout = null;
+function loadGraph(minutes, interval, live){
+	if (graphTimeout !== null) { clearTimeout(graphTimeout) }
+	if (live) {
+		graphTimeout = setTimeout(() => {loadGraph(60, 1, true)}, 3000)
+	}
+
 	let today = new Date()
 	let start = new Date()
-	start.setDate(start.getDate()-days)
+	start.setMinutes(start.getMinutes()-minutes)
 
 	fetch(
 		apiEndpoint+"/admin/files/timeseries" +
@@ -107,7 +113,8 @@ function setData(days, interval){
 		alert("Error requesting time series: "+e);
 	})
 }
-setData(7, 60);
+
+loadGraph(60, 1, true);
 
 // Load performance statistics
 
diff --git a/res/template/admin.html b/res/template/admin.html
index d28139e..8976aed 100644
--- a/res/template/admin.html
+++ b/res/template/admin.html
@@ -12,14 +12,15 @@
 			{{if $isAdmin}}
 				<h3>Bandwidth and views</h3>
 				<div class="highlight_dark">
-					<button onclick="setData(7, 60);">Week</button>
-					<button onclick="setData(14, 60);">Two Weeks</button>
-					<button onclick="setData(21, 60);">Three Weeks</button>
-					<button onclick="setData(30, 1440);">Month</button>
-					<button onclick="setData(60, 1440);">Two Months</button>
-					<button onclick="setData(91, 1440);">Quarter</button>
-					<button onclick="setData(182, 1440);">Half-year</button>
-					<button onclick="setData(356, 1440);">Year</button>
+					<button onclick="loadGraph(60, 1, true);">Live</button>
+					<button onclick="loadGraph(420, 60, false);">Week</button>
+					<button onclick="loadGraph(840, 60, false);">Two Weeks</button>
+					<button onclick="loadGraph(1260, 60, false);">Three Weeks</button>
+					<button onclick="loadGraph(1800, 1440, false);">Month</button>
+					<button onclick="loadGraph(3600, 1440, false);">Two Months</button>
+					<button onclick="loadGraph(5460, 1440, false);">Quarter</button>
+					<button onclick="loadGraph(10920, 1440, false);">Half-year</button>
+					<button onclick="loadGraph(21900, 1440, false);">Year</button>
 				</div>
 				<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: 400px;">
 					<canvas id="bandwidth_chart"></canvas>