Add delays to route results page

base.css

@@ -351,6 +351,14 @@ pre {
 	border-bottom-right-radius: 5%;
 }
 
+.early {
+	color: green;
+}
+
+.late {
+	color: red;
+}
+
 .suggestion {
 	display: flex;
 	flex-direction: row;
@@ -372,16 +380,6 @@ pre {
 	filter: invert(90%) sepia(49%) saturate(704%) hue-rotate(359deg) brightness(94%) contrast(99%);
 }
 
-@media (prefers-color-scheme: dark) {
-	.suggestion .star {
-		filter: invert(100%);
-	}
-
-	.suggestion .star.checked {
-		filter: invert(86%) sepia(79%) saturate(2126%) hue-rotate(357deg) brightness(108%) contrast(104%);
-	}
-}
-
 .product-suburban {
 	color: green !important;
 }

base.dark.css

@@ -35,6 +35,22 @@
         filter: invert(1);
     }
 
+    .early {
+        color: lightgreen;
+    }
+
+    .late {
+        color: #ff3333;
+    }
+
+    .suggestion .star {
+        filter: invert(100%);
+    }
+
+    .suggestion .star.checked {
+        filter: invert(86%) sepia(79%) saturate(2126%) hue-rotate(357deg) brightness(108%) contrast(104%);
+    }
+
     .product-suburban {
         color: #33ff33 !important;
     }

route.css

@@ -73,6 +73,20 @@
     align-self: center;
 }
 
+.itinerary-train .time .original {
+    color: #a0a0a0;
+    text-decoration: line-through;
+}
+
+.itinerary-train .time .delay {
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.itinerary-train .time .original, .itinerary-train .time .delay {
+    font-size: 0.8em;
+}
+
 .itinerary-train .platform {
     margin: 2px;
     padding: 2px;

route.dark.css

@@ -8,4 +8,8 @@
         border-color: #ff3333;
     }
 
+    .itinerary-train .time .original {
+        color: #afafaf;
+    }
+
 }

route.js

@@ -81,6 +81,19 @@ function onItineraries(data) {
                 departureTimeP.appendChild(departureTimePre)
                 var departure = new Date(train.plannedDeparture)
                 departureTimePre.textContent = departure.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
+                if (train.departureDelay) {
+                    departureTimePre.classList.add('original')
+
+                    var departureDelayPre = document.createElement('pre')
+                    departureTimeP.append(departureDelayPre)
+                    departureDelayPre.append(train.departureDelay > 0 ? '+' : '-', Math.floor(Math.abs(train.departureDelay) / 60).toString())
+                    departureDelayPre.classList.add('delay', train.departureDelay > 0 ? 'late' : 'early')
+
+                    var actualDeparturePre = document.createElement('pre')
+                    departureTimeP.append(actualDeparturePre)
+                    actualDeparturePre.textContent = new Date(train.departure).toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
+                    actualDeparturePre.classList.add('actual-time', train.departureDelay > 0 ? 'late' : 'early')
+                }
 
                 var departureHeading = document.createElement('h3')
                 trainDiv.appendChild(departureHeading)
@@ -167,6 +180,19 @@ function onItineraries(data) {
             arrivalTimeP.appendChild(arrivalTimePre)
             var arrival = new Date(train.plannedArrival)
             arrivalTimePre.textContent = arrival.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
+            if (train.arrivalDelay) {
+                arrivalTimePre.classList.add('original')
+
+                var arrivalDelayPre = document.createElement('pre')
+                arrivalTimeP.append(arrivalDelayPre)
+                arrivalDelayPre.append(train.arrivalDelay > 0 ? '+' : '-', Math.floor(Math.abs(train.arrivalDelay) / 60).toString())
+                arrivalDelayPre.classList.add('delay', train.arrivalDelay > 0 ? 'late' : 'early')
+
+                var actualArrivalPre = document.createElement('pre')
+                arrivalTimeP.append(actualArrivalPre)
+                actualArrivalPre.textContent = new Date(train.arrival).toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
+                actualArrivalPre.classList.add('actual-time', train.arrivalDelay > 0 ? 'late' : 'early')
+            }
 
             var arrivalHeading = document.createElement('h3')
             trainDiv.appendChild(arrivalHeading)

sw.js

@@ -1,4 +1,4 @@
-const VERSION = 'v16'
+const VERSION = 'v17'
 
 const CACHE_FIRST = [
 	// Root

view-train.css

@@ -1,11 +1,3 @@
-.early {
-	color: green;
-}
-
-.late {
-	color: red;
-}
-
 .station {
 	color: black;
 }

view-train.dark.css

@@ -1,13 +1,4 @@
 @media(prefers-color-scheme: dark) {
-
-    .early {
-        color: lightgreen;
-    }
-
-    .late {
-        color: #ff3333;
-    }
-
     .station {
         color: white;
     }