regularly update relative departure timestamps even when offline

2 files changed, 27 insertions, 1 deletions

diff --git a/static/js/reload.js b/static/js/reload.js
index 2a3fbf3..0f167f1 100644
--- a/static/js/reload.js
+++ b/static/js/reload.js
@@ -6,6 +6,31 @@ document.addEventListener("DOMContentLoaded", function() {
 		departureList.innerHTML = departureText;
 	};
 
+	const updateOfflineDepartures = () => {
+		const listEntries = departureList.children;
+		const now = Math.floor(Date.now() / 1000);
+
+		for (const listEntry of listEntries) {
+			const departureTimestamp = listEntry.dataset.timestamp;
+			if (departureTimestamp < now) {
+				departureList.removeChild(listEntry);
+			} else {
+				countdownNodes = listEntry.querySelectorAll(".time");
+				for (i = 0; i < countdownNodes.length; i++) {
+					for (const countdown of countdownNodes[i].childNodes) {
+						if ((countdown.nodeType == document.TEXT_NODE) && (countdown.textContent.includes("min"))) {
+							if (departureTimestamp - 60 < now) {
+								countdown.textContent = "sofort";
+							} else {
+								countdown.textContent = Math.floor((departureTimestamp - now) / 60) + " min";
+							}
+						}
+					}
+				}
+			}
+		}
+	};
+
 	const fetchDepartures = () => {
 		var fetchUrl = window.location.href;
 		if (fetchUrl.includes("?")) {
@@ -26,6 +51,7 @@ document.addEventListener("DOMContentLoaded", function() {
 			})
 			.catch(err => {
 				syncFailedMarker.style.display = "inline-block";
+				updateOfflineDepartures();
 			});
 	};
 
diff --git a/templates/departure_list.html b/templates/departure_list.html
index f3cd900..801e6d2 100644
--- a/templates/departure_list.html
+++ b/templates/departure_list.html
@@ -1,5 +1,5 @@
 {% for departure in departures %}
-	<li class="{{ departure.classes }}">
+	<li class="{{ departure.classes }}" data-timestamp="{{ departure.sort_by }}">
 		<a href="https://dbf.finalrewind.org/map/{{ departure.tripId }}/0?from={{ departure.quoted_stop_name }}">
 			<span class="line {{ departure.line.css_class }}">{{ departure.line.name }}</span>
 			{% if departure.suffix %}