Add delay information next to time at view train

When a train has a 2 minute delay, currently the scheduled time is
displayed with strikethrough and the actual time is displayed below.
This change adds a +2 after the original time to also have the relative
delay, not just the absolute one.

sw.js

@@ -1,4 +1,4 @@
-const VERSION = 'v13'
+const VERSION = 'v14'
 const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
 const API_TRAINS = `${API_ORIGIN}v3/trains`
 const API_STATIONS = `${API_ORIGIN}v3/stations`

view-train.js

@@ -9,14 +9,52 @@ var trainData = null
 var lastSuccessfulFetch = null
 
 /**
- * @typedef group
+ * @typedef ArrDep
+ * @property {string} scheduleTime
+ * @property {?{delay: number, real: boolean}} status
+ *
+ * @typedef Note
+ * @property {string} kind
+ *
+ * @typedef DepartsAsNote
+ * @type {Note}
+ * @property {"departsAs"} kind
+ * @property {string} rank
+ * @property {string} number
+ *
+ * @typedef TrainNumberChangeNote
+ * @type {Note}
+ * @property {"trainNumberChange"} kind
+ * @property {string} rank
+ * @property {string} number
+ *
+ * @typedef DetachingWagonsNote
+ * @type {Note}
+ * @property {"detachingWagons"} kind
+ * @property {string} station
+ *
+ * @typedef ReceivingWagonsNote
+ * @type {Note}
+ * @property {"receivingWagons"} kind
+ * @property {string} station
+ *
+ * @typedef TrainStop
+ * @property {string} name
+ * @property {number} km
+ * @property {?number} stoppingTime
+ * @property {?string} platform
+ * @property {ArrDep} arrival
+ * @property {ArrDep} departure
+ * @property {Note[]} notes
+ *
+ * @typedef Group
  * @property {{from: string; to: string}} route
  * @property {{delay: number; station: string; state: "passing" | "arrival" | "departure"} | undefined} status
- * @property {any[]} stations
+ * @property {TrainStop[]} stations
  */
 
 /**
- * @param {{ rank: string; number: string; operator: string; date: string; groups: group[]; }} data
+ * @param {{ rank: string; number: string; operator: string; date: string; groups: Group[]; }} data
  */
 function onTrainData(data) {
 	var title = document.getElementById('title')
@@ -51,7 +89,7 @@ function onTrainData(data) {
 	document.getElementById('loading').classList.add('hidden')
 
 	/**
-	 * @type {group | null}
+	 * @type {Group | null}
 	 */
 	var group = null;
 	if (data.groups.length > 1 && groupIndex == null) {
@@ -240,12 +278,20 @@ function onTrainData(data) {
 
 			var originalArr = document.createElement('p')
 			stationArrival.appendChild(originalArr)
+			var originalArrSpan = document.createElement('span')
+			originalArr.appendChild(originalArrSpan)
 			var arrDate = new Date(station.arrival.scheduleTime)
-			originalArr.textContent = arrDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
+			originalArrSpan.textContent = arrDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
 			originalArr.classList.add('pri')
 			if (station.arrival.status && station.arrival.status.delay != 0) {
 				originalArr.classList.remove('pri')
-				originalArr.classList.add('thi', 'original')
+				originalArr.classList.add('thi')
+				originalArrSpan.classList.add('original')
+				var delaySpanArr = document.createElement('span')
+				originalArr.appendChild(delaySpanArr)
+				delaySpanArr.textContent = `${station.arrival.status.delay > 0 ? '+' : ''}${station.arrival.status.delay}`;
+				delaySpanArr.classList.add(station.arrival.status.delay > 0 ? 'late' : 'early')
+				delaySpanArr.style.marginLeft = '4px'
 
 				var actualArr = document.createElement('p')
 				stationArrival.appendChild(actualArr)
@@ -266,11 +312,19 @@ function onTrainData(data) {
 			var originalDep = document.createElement('p')
 			stationDeparture.appendChild(originalDep)
 			var depDate = new Date(station.departure.scheduleTime)
-			originalDep.textContent = depDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
+			var originalDepSpan = document.createElement('span')
+			originalDep.appendChild(originalDepSpan)
+			originalDepSpan.textContent = depDate.toLocaleTimeString([], { 'hour': '2-digit', 'minute': '2-digit' })
 			originalDep.classList.add('pri')
 			if (station.departure.status && station.departure.status.delay != 0) {
 				originalDep.classList.remove('pri')
-				originalDep.classList.add('thi', 'original')
+				originalDep.classList.add('thi')
+				originalDepSpan.classList.add('original')
+				var delaySpanDep = document.createElement('span')
+				originalDep.appendChild(delaySpanDep)
+				delaySpanDep.textContent = `${station.departure.status.delay > 0 ? '+' : ''}${station.departure.status.delay}`;
+				delaySpanDep.classList.add(station.departure.status.delay > 0 ? 'late' : 'early')
+				delaySpanDep.style.marginLeft = '4px'
 
 				var actualDep = document.createElement('p')
 				stationDeparture.appendChild(actualDep)