From ca83496e8a95d4b1f476401647be5d2e5703af30 Mon Sep 17 00:00:00 2001
From: Jasper Bok <hello@jasperbok.nl>
Date: Tue, 16 Apr 2024 18:36:47 +0200
Subject: [PATCH] Display 'live' status in overview

---
 bus.go                       | 12 ++++++++++++
 index.html                   |  6 +++++-
 static/css/busdepartures.css | 20 +++++++++++++++++++-
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/bus.go b/bus.go
index 7f13c8c..f76b9c0 100644
--- a/bus.go
+++ b/bus.go
@@ -21,6 +21,18 @@ type Departure struct {
 	RouteShortName        string
 }
 
+func (d Departure) HasRealtimeDepartureTime() bool {
+	return !d.RealtimeDepartureTime.IsZero()
+}
+
+func (d Departure) IsDelayed() bool {
+	if !d.HasRealtimeDepartureTime() {
+		return false
+	}
+
+	return d.RealtimeDepartureTime.After(d.DepartureTime)
+}
+
 type ResponseDeparture struct {
 	TripID                int    `json:"trip_id"`
 	RealtimeTripId        string `json:"realtime_trip_id"`
diff --git a/index.html b/index.html
index 2b80a1e..6ce4837 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,11 @@
       <tr>
         <td>{{ $val.RouteShortName }}</td>
         <td>{{ $val.StopHeadsign }}</td>
+        {{ if $val.HasRealtimeDepartureTime }}
+        <td><time class="{{ if $val.IsDelayed }}delayed{{ else }}on-time{{ end }}">{{ formatTime $val.RealtimeDepartureTime }}</time></td>
+        {{ else }}
         <td><time>{{ formatTime $val.DepartureTime }}</time></td>
+        {{ end }}
       </tr>
       {{ end }}
       {{ end }}
@@ -40,4 +44,4 @@
   {{ end }}
 </main>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/static/css/busdepartures.css b/static/css/busdepartures.css
index bd310cf..c09081c 100644
--- a/static/css/busdepartures.css
+++ b/static/css/busdepartures.css
@@ -43,4 +43,22 @@ td:first-child {
 
 td:last-child {
     padding-right: 0;
-}
\ No newline at end of file
+}
+
+time {
+    background: black;
+    color: white;
+    display: inline-block;
+    font-size: .8rem;
+    padding: .2em .2em .1em;
+}
+
+.on-time {
+    background: green;
+    color: white;
+}
+
+.delayed {
+    background: red;
+    color: white;
+}