Initial version of the timetable/countdown

Signed-off-by: Alban Bedel <albeu@free.fr>

static/countdown.js

@@ -0,0 +1,153 @@
+var urlParams = new URLSearchParams(window.location.search);
+var path = window.location.pathname.split("/");
+var loc = path[path.length - 1];
+var url = "/timetable/" + loc;
+var timetable = {};
+var timeOffset = Number.parseInt(urlParams.get("timeOffset"));
+var flashDelay = urlParams.has("flashDelay") ? Number.parseInt(urlParams.get("flashDelay")) : 500;
+var flashStart = urlParams.has("flashStart") ? Number.parseInt(urlParams.get("flashStart")) : 5*60;
+var flashElement = "counter";
+var lastFlash = null;
+var locale =  "de-DE";
+
+var shortTime = new Intl.DateTimeFormat(locale, { timeStyle: "short" })
+
+function setTimetable(tt) {
+    timetable = tt;
+    updateCounter();
+}
+
+function getShow(tt, when) {
+    if (tt.shows == null) {
+	return null;
+    }
+
+    for (let i = 0; i < timetable.shows.length; i++) {
+	let show = tt.shows[i];
+	let start = new Date(show.start);
+
+	// Show has not yet started
+	if (when < start.getTime())
+	    return null;
+
+	// No end
+	if (show.end == null) {
+	    return show;
+	}
+
+	// Has it ended?
+	let end = new Date(show.end);
+	if (when < end.getTime())
+	    return show;
+    }
+
+    return null;
+}
+
+function getNextShow(tt, when) {
+    if (tt.shows == null) {
+	return null;
+    }
+
+    for (let i = 0; i < timetable.shows.length; i++) {
+	let show = tt.shows[i];
+	let start = new Date(show.start);
+
+	// Return the first show that has not yet started
+	if (when < start.getTime())
+	    return show;
+    }
+
+    return null;
+}
+
+function stopFlash() {
+    let elem = document.getElementById(flashElement);
+    if (elem === null)
+	return;
+
+    elem.classList.remove("flash");
+    lastFlash = null;
+}
+
+function doFlash(now) {
+    let elem = document.getElementById(flashElement);
+    if (elem === null)
+	return;
+
+    if (lastFlash === null) {
+	lastFlash = now;
+    }
+
+    if (now - lastFlash >= flashDelay) {
+	elem.classList.toggle("flash");
+	lastFlash = now;
+    }
+}
+
+function updateCounter() {
+    let artistSpan = document.getElementById("artist");
+    let valueSpan = document.getElementById("counter-value");
+    let unitSpan = document.getElementById("counter-unit");
+
+    if (artistSpan === null || valueSpan === null || unitSpan === null)
+	return;
+
+    let now = new Date();
+    if (timeOffset > 0) {
+	now = new Date(now.getTime() + timeOffset*60000);
+    }
+
+    let show = getShow(timetable, now.getTime());
+    if (show == null) {
+	show = getNextShow(timetable, now.getTime());
+	if (show != null) {
+	    let start = new Date(show.start);
+
+	    artistSpan.textContent = "Next: " + show.name;
+	    valueSpan.textContent = shortTime.format(start);
+	} else {
+	    artistSpan.textContent = "";
+	}
+	unitSpan.textContent = "";
+	stopFlash();
+	return;
+    }
+
+    let value = "";
+    let unit = ""
+    if (show.end != null) {
+	let end = new Date(show.end);
+	let sec = Math.round((end - now) / 1000);
+	if (sec >= 60) {
+	    value = Math.ceil(sec / 60).toString();
+	    unit = "m";
+	} else {
+	    value = sec.toString();
+	    unit = "s";
+	}
+
+	if (sec < flashStart)
+	    doFlash(now);
+	else
+	    stopFlash();
+    } else {
+	stopFlash();
+    }
+
+    artistSpan.textContent = show.name;
+    valueSpan.textContent = value;
+    unitSpan.textContent = unit;
+}
+setInterval(updateCounter, 100);
+
+function updateTimetable() {
+    console.log("Updating timetable");
+    fetch(url, { signal: AbortSignal.timeout(5000) })
+	.then(res => res.json())
+	.then(tt => setTimetable(tt))
+	.catch(err => console.log(err));
+}
+setInterval(updateTimetable, 2*60*1000);
+
+updateTimetable();