Add custom colors for some networks

- Stuttgart Stadtbahn
- Stuttgart S-Bahn
- Köln S-Bahn
- Bonn S23
- Karlsruhe Trams
- Karlsruhe S-Bahn

base.css

@@ -222,7 +222,7 @@ p.thi {
 	
 	margin: 0 8px;
 
-	color: gray;
+	color: grey;
 }
 
 p, ul {
@@ -381,3 +381,236 @@ pre {
 		display: none !important;
 	}
 }
+
+/* Specific train styles */
+
+/* Stuttgart Stadtbahn */
+.product-subway.product-adminCode-vvs020 {
+	padding: 1px 4px;
+}
+.product-subway.product-id-8-vvs020-u1 {
+	background-color: #d39e70;
+	color: black !important;
+}
+.product-subway.product-id-8-vvs020-u2 {
+	background-color: #ff6a2f;
+	color: white !important;
+}
+.product-subway.product-id-8-vvs020-u3 {
+	background-color: #925d39;
+	color: white !important;
+}
+.product-subway.product-id-8-vvs020-u4 {
+	background-color: #6866b5;
+	color: white !important;
+}
+.product-subway.product-id-8-vvs020-u5 {
+	background-color: #19c5f4;
+	color: black !important;
+}
+.product-subway.product-id-8-vvs020-u6 {
+	background-color: #fb3199;
+	color: white !important;
+}
+.product-subway.product-id-8-vvs020-u7 {
+	background-color: #2cbc8e;
+	color: white !important;
+}
+.product-subway.product-id-8-vvs020-u8 {
+	background-color: #c7ba7b;
+	color: black !important;
+}
+.product-subway.product-id-8-vvs020-u9 {
+	background-color: #fed035;
+	color: black !important;
+}
+.product-subway.product-id-8-vvs020-u11 {
+	background-color: #9b9c9f;
+	color: white !important;
+}
+.product-subway.product-id-8-vvs020-u12 {
+	background-color: #80c6ea;
+	color: black !important;
+}
+.product-subway.product-id-8-vvs020-u13 {
+	background-color: #fea1bb;
+	color: black !important;
+}
+.product-subway.product-id-8-vvs020-u14 {
+	background-color: #63c254;
+	color: black !important;
+}
+.product-subway.product-id-8-vvs020-u15 {
+	background-color: #0454ae;
+	color: white !important;
+}
+.product-subway.product-id-8-vvs020-u15 {
+	background-color: #c6c03c;
+	color: black !important;
+}
+.product-subway.product-id-8-vvs020-u16 {
+	background-color: #c6c03c;
+	color: black !important;
+}
+.product-subway.product-id-8-vvs020-u19 {
+	background-color: #ffb531;
+	color: black !important;
+}
+
+/* Stuttgart S-Bahn */
+.product-suburban.product-adminCode-800643 {
+	padding: 1px 4px;
+}
+.product-suburban.product-id-4-800643-1 {
+	background-color: #59b244;
+	color: white !important;
+}
+.product-suburban.product-id-4-800643-2 {
+	background-color: #fe2e1e;
+	color: white !important;
+}
+.product-suburban.product-id-4-800643-3 {
+	background-color: #ff6a30;
+	color: white !important;
+}
+.product-suburban.product-id-4-800643-4 {
+	background-color: #0066b7;
+	color: white !important;
+}
+.product-suburban.product-id-4-800643-5 {
+	background-color: #02b7e1;
+	color: white !important;
+}
+.product-suburban.product-id-4-800643-6 {
+	background-color: #874a09;
+	color: white !important;
+}
+.product-suburban.product-id-4-800643-11 {
+	background-color: #58b243;
+	color: white !important;
+}
+.product-suburban.product-id-4-800643-60 {
+	background-color: #928d1d;
+	color: white !important;
+}
+.product-suburban.product-id-4-800643-62 {
+	background-color: #cc7628;
+	color: white !important;
+}
+
+/* Köln S-Bahn */
+.product-suburban.product-adminCode-8003S_, .product-suburban.product-adminCode-8003RL, .product-suburban.product-adminCode-800352, .product-regional.product-adminCode-800352 {
+	padding: 1px 4px;
+	border-radius: 5px;
+}
+.product-suburban.product-id-4-8003rl-6 {
+	background-color: #e6007d;
+	color: white !important;
+}
+.product-suburban.product-id-4-8003s-11 {
+	background-color: #f39200;
+	color: white !important;
+}
+.product-suburban.product-id-4-8003s-12 {
+	background-color: #009642;
+	color: white !important;
+}
+.product-suburban.product-id-4-8003s-19 {
+	background-color: #0281c9;
+	color: white !important;
+}
+.product-suburban.product-id-4-800352-23 {
+	background-color: #787fbd;
+	color: white !important;
+}
+.product-regional.product-id-rb-25 {
+	background-color: #c793c2;
+	color: white !important;
+}
+
+/* Karlsruhe Tram */
+.product-tram.product-adminCode-kvv021 {
+	aspect-ratio: 1 / 1;
+	display: inline-block;
+	min-width: 20px;
+	text-align: center;
+	padding: 1px;
+}
+.product-tram.product-id-8-kvv021-1 {
+	background-color: #ed1c23;
+	color: white !important;
+}
+.product-tram.product-id-8-kvv021-2 {
+	background-color: #0171bc;
+	color: white !important;
+}
+.product-tram.product-id-8-kvv021-3 {
+	background-color: #957139;
+	color: white !important;
+}
+.product-tram.product-id-8-kvv021-4 {
+	background-color: #ffcb0a;
+	color: black !important;
+}
+.product-tram.product-id-8-kvv021-5 {
+	background-color: #00bced;
+	color: white !important;
+}
+.product-tram.product-id-8-kvv021-17 {
+	background-color: #660000;
+	color: white !important;
+}
+.product-tram.product-id-8-kvv021-18 {
+	background-color: #1a7247;
+	color: white !important;
+}
+
+/* Karlsruhe S-Bahn */
+.product-suburban.product-adminCode-801539, .product-suburban.product-operator-albtal-verkehrs-gesellschaft-mbh {
+	padding: 1px 4px;
+	border-radius: 5px;
+}
+.product-suburban.product-id-4-801539-1, .product-suburban.product-id-4-a6s1-1, .product-suburban.product-id-4-a6s11-11, .product-suburban.product-id-4-a6s12-12 {
+	background-color: #01a76d;
+	color: white !important;
+}
+.product-suburban.product-id-4-801539-2, .product-suburban.product-id-4-a6s2-2 {
+	background-color: #a066aa;
+	color: white !important;
+}
+.product-suburban.product-id-4-801539-3, .product-suburban.product-id-4-a6s3-3 {
+	background-color: #ffdd04;
+	color: black !important;
+}
+.product-suburban.product-id-4-801539-4, .product-suburban.product-id-4-a6s4-4 {
+	background-color: #9e184c;
+	color: white !important;
+}
+.product-suburban.product-id-4-a6s5-5, .product-suburban.product-id-4-a6s51-51, .product-suburban.product-id-4-a6s52-52 {
+	background-color: #f69894;
+	color: black !important;
+}
+.product-suburban.product-id-4-a6s6-6 {
+	background-color: #282268;
+	color: white !important;
+}
+.product-suburban.product-id-4-a6s7-7, .product-suburban.product-id-4-a6s71-71 {
+	background-color: #fff302;
+	color: black !important;
+}
+.product-suburban.product-id-4-a6s8-8, .product-suburban.product-id-4-a6s81-81 {
+	background-color: #6d6929;
+	color: white !important;
+}
+.product-suburban.product-id-4-a6s9-9 {
+	background-color: #a6ce41;
+	color: white !important;
+}
+.product-suburban.product-id-4-a6s31-31, .product-suburban.product-id-4-a6s32-32 {
+	background-color: #01a99d;
+	color: white !important;
+}
+.product-suburban.product-id-4-a6s33-33 {
+	background-color: #8b5ba3;
+	color: white !important;
+}

config-route.js

@@ -83,76 +83,74 @@ function rebuildSuggestions() {
 
     suggestions.forEach(function (suggestion, index) {
         var suggestionDiv = document.createElement('div')
-        suggestionsArea.appendChild(suggestionDiv)
         suggestionDiv.classList.add('suggestion')
 
         var suggestionLi = document.createElement('li')
         suggestionDiv.appendChild(suggestionLi)
 
-        setTimeout(function () {
+        suggestionLi.classList.add('items')
-            suggestionLi.classList.add('items')
+        suggestionLi.tabIndex = index + 1
-            suggestionLi.tabIndex = index + 1
+        suggestionLi.style.padding = '2px 0'
-            suggestionLi.style.padding = '2px 0'
 
-            function onAction(e) {
+        function onAction(e) {
-                goToStation(JSON.stringify(suggestion))
+            goToStation(JSON.stringify(suggestion))
+        }
+        suggestionLi.addEventListener('click', onAction)
+        suggestionLi.addEventListener('keypress', function (e) {
+            if (e.key == 'Enter') {
+                onAction(e)
             }
-            suggestionLi.addEventListener('click', onAction)
+        })
-            suggestionLi.addEventListener('keypress', function (e) {
+        suggestionLi.addEventListener('focus', function (e) {
-                if (e.key == 'Enter') {
+            focusedElement = suggestionLi
-                    onAction(e)
+        })
+
+        var stationNameP = document.createElement('p')
+        suggestionLi.appendChild(stationNameP)
+
+        stationNameP.textContent = suggestion.name || suggestion.address
+        stationNameP.classList.add('pri', 'stationName')
+
+        if (window.localStorage) {
+            var suggestionLink = document.createElement('a')
+            suggestionDiv.appendChild(suggestionLink)
+            suggestionLink.classList.add('no-custom-a')
+
+            var suggestionStar = document.createElement('object')
+            suggestionLink.appendChild(suggestionStar)
+            suggestionStar.classList.add('star')
+            suggestionStar.type = 'image/svg+xml'
+            function setStar() {
+                if (starred.includes(JSON.stringify(suggestion))) {
+                    suggestionStar.data = '/icons/star_full.svg'
+                    suggestionStar.classList.add('checked')
                 }
-            })
+                else {
-            suggestionLi.addEventListener('focus', function (e) {
+                    suggestionStar.data = '/icons/star_empty.svg'
-                focusedElement = suggestionLi
+                    suggestionStar.classList.remove('checked')
-            })
+                }
-
+            }
-            var stationNameP = document.createElement('p')
+            suggestionLink.addEventListener('click', function (event) {
-            suggestionLi.appendChild(stationNameP)
+                event.preventDefault()
-
+                if (starred.includes(JSON.stringify(suggestion))) {
-            stationNameP.textContent = suggestion.name || suggestion.address
+                    starred = starred.filter(function (s) {
-            stationNameP.classList.add('pri', 'stationName')
+                        return s !== suggestion
-
+                    })
-            if (window.localStorage) {
+                } else {
-                var suggestionLink = document.createElement('a')
+                    starred.push(JSON.stringify(suggestion))
-                suggestionDiv.appendChild(suggestionLink)
-                suggestionLink.classList.add('no-custom-a')
-
-                var suggestionStar = document.createElement('object')
-                suggestionLink.appendChild(suggestionStar)
-                suggestionStar.classList.add('star')
-                suggestionStar.type = 'image/svg+xml'
-                function setStar() {
-                    if (starred.includes(JSON.stringify(suggestion))) {
-                        suggestionStar.data = '/icons/star_full.svg'
-                        suggestionStar.classList.add('checked')
-                    }
-                    else {
-                        suggestionStar.data = '/icons/star_empty.svg'
-                        suggestionStar.classList.remove('checked')
-                    }
                 }
-                suggestionLink.addEventListener('click', function (event) {
-                    event.preventDefault()
-                    if (starred.includes(JSON.stringify(suggestion))) {
-                        starred = starred.filter(function (s) {
-                            return s !== suggestion
-                        })
-                    } else {
-                        starred.push(JSON.stringify(suggestion))
-                    }
-                    setStar()
-                    localStorage.setItem('stations/starred', JSON.stringify(starred))
-                })
                 setStar()
-            }
+                localStorage.setItem('stations/starred', JSON.stringify(starred))
+            })
+            setStar()
+        }
 
-            // var trainCompanyP = document.createElement('p')
+        // var trainCompanyP = document.createElement('p')
-            // suggestionLi.appendChild(trainCompanyP)
+        // suggestionLi.appendChild(trainCompanyP)
 
-            // trainCompanyP.textContent = suggestion.company
+        // trainCompanyP.textContent = suggestion.company
-            // trainCompanyP.classList.add('thi')
+        // trainCompanyP.classList.add('thi')
-        }, 0)
+        suggestionsArea.appendChild(suggestionDiv)
     })
 
     setTimeout(function () {

route.js

@@ -241,7 +241,22 @@ function onItineraries(data) {
                     if (train.line.productName === 'STB' && train.line.name.startsWith('STB U')) {
                         train.line.product = 'subway'
                     }
+                    if (train.line.adminCode === 'vvs020') {
+                        // Stuttgart Stadtbahn
+                        trainLink.innerText = train.line.name.slice(4)
+                    } else if (train.line.adminCode === '800643') {
+                        // Stuttgart S-Bahn
+                        trainLink.innerText = 'S' + train.line.name.slice(2)
+                    } else if (train.line.adminCode === 'kvv021') {
+                        // Karlsruhe Tram
+                        trainLink.innerText = train.line.name.slice(4)
+                    }
                     trainLink.classList.add('product-' + train.line.product)
+                    trainLink.classList.add('product-id-' + train.line.id)
+                    trainLink.classList.add('product-adminCode-' + train.line.adminCode)
+                    if (train.line.operator) {
+                        trainLink.classList.add('product-operator-' + train.line.operator.id)
+                    }
                 }
                 var trainUrl = new URL('/view-train.html', window.location.origin)
                 trainUrl.searchParams.set('tripId', train.tripId)

sw.js

@@ -1,4 +1,4 @@
-const VERSION = 'v14'
+const VERSION = 'v15'
 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

@@ -59,7 +59,18 @@ function onTrainData(data, fetchDate) {
 	}
 	var title = document.getElementById('title')
 	title.textContent = ''
-	title.appendChild(document.createTextNode('Train '))
+	var titleCategory = ''
+	switch (data.line.product) {
+		case 'bus':
+			titleCategory = ''
+			break
+		case 'ferry':
+			titleCategory = 'Ferry'
+			break
+		default:
+			titleCategory = 'Train'
+	}
+	title.appendChild(document.createTextNode(titleCategory + ' '))
 	var lineNameSpan = document.createElement('span')
 	title.appendChild(lineNameSpan)
 	lineNameSpan.textContent = data.line.name
@@ -67,7 +78,22 @@ function onTrainData(data, fetchDate) {
 		if (data.line.productName === 'STB' && data.line.name.startsWith('STB U')) {
 			data.line.product = 'subway'
 		}
+		if (data.line.adminCode === 'vvs020') {
+			// Stuttgart Stadtbahn
+			lineNameSpan.innerText = data.line.name.slice(4)
+		} else if (data.line.adminCode === '800643') {
+			// Stuttgart S-Bahn
+			lineNameSpan.innerText = 'S' + data.line.name.slice(2)
+		} else if (data.line.adminCode === 'kvv021') {
+			// Karlsruhe Tram
+			lineNameSpan.innerText = data.line.name.slice(4)
+		}
 		lineNameSpan.classList.add('product-' + data.line.product)
+		lineNameSpan.classList.add('product-id-' + data.line.id)
+		lineNameSpan.classList.add('product-adminCode-' + data.line.adminCode)
+		if (data.line.operator) {
+			lineNameSpan.classList.add('product-operator-' + data.line.operator.id)
+		}
 	}
 	// trainIdSpan(data.line.productName, data.line.fahrtNr, title)
 	// title.append(' ')