show line types in stop search

6 files changed, 133 insertions, 8 deletions

diff --git a/bin/nvm b/bin/nvm
index 53cfb74..81289b8 100755
--- a/bin/nvm
+++ b/bin/nvm
@@ -86,7 +86,9 @@ class Line:
         self.__dict__.update(obj)
         self.css_class = str()
 
-        if self.product == "tram":
+        if self.product.startswith("national"):
+            self.css_class = "longdistance"
+        elif self.product == "tram":
             self.name = self.name.removeprefix("STR ")
             self.css_class = "tram"
         elif self.product == "suburban":
diff --git a/sass/app.scss b/sass/app.scss
index 40e98dc..4b01bf5 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -14,6 +14,7 @@ html {
 	margin-right: auto;
 }
 
+
 ul.stops {
 	position:relative;
 	width:100%;
@@ -31,11 +32,12 @@ ul.stops {
 
 	> li {
 		display: block;
-		height: 3em;
+		height: 4em;
 		width: 100%;
 		position: relative;
 		border-bottom: 1px solid grey;
 		background-color: white;
+		cursor: pointer;
 
 		.name {
 			position: absolute;
@@ -58,6 +60,52 @@ ul.stops {
 			opacity: 50%;
 		}
 
+		.lines {
+			position: absolute;
+			bottom: 0.1em;
+			right: 5px;
+			background-color: transparent;
+			font-weight: bold;
+			font-size: 120%;
+
+			span {
+				padding-left: 0.1em;
+				padding-right: 0.1em;
+				margin-left: 0.2em;
+			}
+
+			.longdistance {
+				border: 0.1em solid #ffcccc;
+			}
+
+			.regional {
+				background-color: #eeeeee;
+			}
+
+			.tram {
+				background-color:#ffcccc;
+			}
+
+			.taxi {
+				background-color:#eeaaee;
+				font-weight: normal;
+			}
+
+			.suburban {
+				background-color:#aaffba;
+				border-radius: 30px;
+			}
+
+			.subway {
+				background-color:#aac0ff;
+			}
+
+			.bus {
+				background-color:#eeaaee;
+				border-radius: 10px;
+			}
+		}
+
 	}
 }
 
@@ -94,13 +142,17 @@ ul.departures {
 		max-height: 3ex;
 		max-width: 5em;
 		overflow: hidden;
-		font-size: 140%;
+		font-size: 120%;
 		background-color: #eeeeee;
 		font-weight: bold;
 		padding-left: 0.1em;
 		padding-right: 0.1em;
 	}
 
+	.longdistance {
+		border: 0.1em solid #ffcccc;
+	}
+
 	.tram {
 		background-color:#ffcccc;
 	}
@@ -122,7 +174,7 @@ ul.departures {
 	.dest {
 		position: absolute;
 		bottom: 0;
-		left: 5em;
+		left: 4em;
 		width: 70%;
 		overflow: hidden;
 		background-color: transparent;
@@ -133,7 +185,7 @@ ul.departures {
 	.destsuffix {
 		position: absolute;
 		top: 1px;
-		left: 7.6em;
+		left: 6.1em;
 		width: 70%;
 		height: 1.2em;
 		overflow: hidden;
diff --git a/static/v0/css/dark.min.css b/static/v0/css/dark.min.css
index fc43d5e..abc810b 100644
--- a/static/v0/css/dark.min.css
+++ b/static/v0/css/dark.min.css
@@ -1 +1 @@
-body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.stops{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.stops a{text-decoration:none}ul.stops>li{display:block;height:3em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white}ul.stops>li .name{position:absolute;bottom:0;left:0;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.stops>li .note{position:absolute;top:1px;left:0;width:70%;height:1.2em;overflow:hidden;opacity:50%}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:140%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:5em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:7.6em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li,ul.stops>li{font-size:85%}}
+body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.stops{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.stops a{text-decoration:none}ul.stops>li{display:block;height:4em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white;cursor:pointer}ul.stops>li .name{position:absolute;bottom:0;left:0;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.stops>li .note{position:absolute;top:1px;left:0;width:70%;height:1.2em;overflow:hidden;opacity:50%}ul.stops>li .lines{position:absolute;bottom:0.1em;right:5px;background-color:transparent;font-weight:bold;font-size:120%}ul.stops>li .lines span{padding-left:0.1em;padding-right:0.1em;margin-left:0.2em}ul.stops>li .lines .longdistance{border:0.1em solid #ffcccc}ul.stops>li .lines .regional{background-color:#eeeeee}ul.stops>li .lines .tram{background-color:#ffcccc}ul.stops>li .lines .taxi{background-color:#eeaaee;font-weight:normal}ul.stops>li .lines .suburban{background-color:#aaffba;border-radius:30px}ul.stops>li .lines .subway{background-color:#aac0ff}ul.stops>li .lines .bus{background-color:#eeaaee;border-radius:10px}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:120%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .longdistance{border:0.1em solid #ffcccc}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:4em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:6.1em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li,ul.stops>li{font-size:85%}}
diff --git a/static/v0/css/light.min.css b/static/v0/css/light.min.css
index fc43d5e..abc810b 100644
--- a/static/v0/css/light.min.css
+++ b/static/v0/css/light.min.css
@@ -1 +1 @@
-body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.stops{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.stops a{text-decoration:none}ul.stops>li{display:block;height:3em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white}ul.stops>li .name{position:absolute;bottom:0;left:0;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.stops>li .note{position:absolute;top:1px;left:0;width:70%;height:1.2em;overflow:hidden;opacity:50%}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:140%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:5em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:7.6em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li,ul.stops>li{font-size:85%}}
+body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.stops{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.stops a{text-decoration:none}ul.stops>li{display:block;height:4em;width:100%;position:relative;border-bottom:1px solid grey;background-color:white;cursor:pointer}ul.stops>li .name{position:absolute;bottom:0;left:0;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.stops>li .note{position:absolute;top:1px;left:0;width:70%;height:1.2em;overflow:hidden;opacity:50%}ul.stops>li .lines{position:absolute;bottom:0.1em;right:5px;background-color:transparent;font-weight:bold;font-size:120%}ul.stops>li .lines span{padding-left:0.1em;padding-right:0.1em;margin-left:0.2em}ul.stops>li .lines .longdistance{border:0.1em solid #ffcccc}ul.stops>li .lines .regional{background-color:#eeeeee}ul.stops>li .lines .tram{background-color:#ffcccc}ul.stops>li .lines .taxi{background-color:#eeaaee;font-weight:normal}ul.stops>li .lines .suburban{background-color:#aaffba;border-radius:30px}ul.stops>li .lines .subway{background-color:#aac0ff}ul.stops>li .lines .bus{background-color:#eeaaee;border-radius:10px}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:120%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .longdistance{border:0.1em solid #ffcccc}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:4em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:6.1em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li,ul.stops>li{font-size:85%}}
diff --git a/static/v0/js/geolocation.js b/static/v0/js/geolocation.js
index 2f93db7..4e868b0 100644
--- a/static/v0/js/geolocation.js
+++ b/static/v0/js/geolocation.js
@@ -1,6 +1,13 @@
 document.addEventListener("DOMContentLoaded", function() {
 	const geoLocationButton = document.getElementById('geolocationsearch');
 
+	const mkTextNode = function(className, textContent) {
+		const node = document.createElement("span");
+		node.className = className;
+		node.textContent = textContent;
+		return node
+	}
+
 	const processResult = function(results) {
 		const list = document.createElement("ul");
 		list.className = "stops";
@@ -9,6 +16,7 @@ document.addEventListener("DOMContentLoaded", function() {
 			const listentry = document.createElement("li");
 			const link = document.createElement("a");
 			const note = document.createElement("span");
+			const lines = document.createElement("span");
 
 			link.className = "name";
 			link.textContent = result.name;
@@ -21,8 +29,39 @@ document.addEventListener("DOMContentLoaded", function() {
 				note.textContent = result.distance + " m"
 			}
 
+			lines.className = "lines";
+
+			if (result.products.nationalExpress) {
+				lines.appendChild(mkTextNode("longdistance", "ICE"));
+			}
+			if (result.products.national) {
+				lines.appendChild(mkTextNode("longdistance", "IC"));
+			}
+			if (result.products.regionalExp) {
+				lines.appendChild(mkTextNode("longdistance", "RE"));
+			}
+			if (result.products.regional) {
+				lines.appendChild(mkTextNode("longdistance", "R"));
+			}
+			if (result.products.suburban) {
+				lines.appendChild(mkTextNode("suburban", "S"));
+			}
+			if (result.products.tram) {
+				lines.appendChild(mkTextNode("tram", "T"));
+			}
+			if (result.products.bus) {
+				lines.appendChild(mkTextNode("bus", "Bus"));
+			}
+			if (result.products.ferry) {
+				lines.appendChild(mkTextNode("bus", "Fähre"));
+			}
+			if (result.products.taxi) {
+				lines.appendChild(mkTextNode("taxi", "AST"));
+			}
+
 			listentry.appendChild(link);
 			listentry.appendChild(note);
+			listentry.appendChild(lines);
 			list.appendChild(listentry);
 		}
 		geoLocationButton.replaceWith(list);
diff --git a/templates/stops.html b/templates/stops.html
index 3889b7e..affac69 100644
--- a/templates/stops.html
+++ b/templates/stops.html
@@ -9,8 +9,40 @@
 	<div class="content">
 		<ul class="stops">
 			{% for stop in stops %}
-				<li>
+				<li onclick="location.href='/board/{{ stop['id'] }} ';">
 					<a class="name" href="/board/{{ stop['id'] }}">{{ stop['name'] }}</a>
+					<span class="lines">
+						{% if stop["products"]["nationalExpress"] %}
+							<span class="longdistance">ICE</span>
+						{% endif %}
+						{% if stop["products"]["national"] %}
+							<span class="longdistance">IC</span>
+						{% endif %}
+						{% if stop["products"]["regionalExp"] %}
+							<span class="regional">RE</span>
+						{% endif %}
+						{% if stop["products"]["regional"] %}
+							<span class="regional">R</span>
+						{% endif %}
+						{% if stop["products"]["suburban"] %}
+							<span class="suburban">S</span>
+						{% endif %}
+						{% if stop["products"]["subway"] %}
+							<span class="subway">U</span>
+						{% endif %}
+						{% if stop["products"]["tram"] %}
+							<span class="tram">T</span>
+						{% endif %}
+						{% if stop["products"]["bus"] %}
+							<span class="bus">Bus</span>
+						{% endif %}
+						{% if stop["products"]["ferry"] %}
+							<span class="bus">Fähre</span>
+						{% endif %}
+						{% if stop["products"]["taxi"] %}
+							<span class="taxi">AST</span>
+						{% endif %}
+					</span>
 				</li>
 			{% endfor %}
 		</ul>