proper departure list and css

3 files changed, 127 insertions, 11 deletions

diff --git a/bin/nvm b/bin/nvm
index 8e506dd..7fe000a 100755
--- a/bin/nvm
+++ b/bin/nvm
@@ -26,17 +26,68 @@ db_rest_api = os.getenv("NVM_DB_REST_API", "https://v5.db.transport.rest")
 
 env = Environment(loader=FileSystemLoader("templates"), autoescape=select_autoescape())
 
+
 class Departure:
     def __init__(self, obj):
         self.__dict__.update(obj)
+
+        if not "cancelled" in obj:
+            self.cancelled = False
+
+        self.classes = str()
+
+        if "," in self.direction:
+            self.direction, self.suffix = self.direction.split(",", maxsplit=1)
+        else:
+            self.suffix = None
+
         if "line" in obj:
             self.line = Line(self.line)
-        self.when = dateutil.parser.parse(self.when)
-        self.plannedWhen = dateutil.parser.parse(self.plannedWhen)
+        try:
+            self.when = dateutil.parser.parse(self.when)
+        except TypeError:
+            self.when = None
+        try:
+            self.plannedWhen = dateutil.parser.parse(self.plannedWhen)
+        except TypeError:
+            self.plannedWhen = None
+
+        if self.cancelled:
+            self.classes += " cancelled"
+
+        if self.when:
+            self.sort_by = self.when.timestamp()
+        elif self.plannedWhen:
+            self.sort_by = self.plannedWhen.timestamp()
+        else:
+            self.sort_by = 0
+
+    def set_relative(self, now):
+        minutes = (self.sort_by - now) // 60
+        if minutes < 1:
+            self.relativeWhen = "sofort"
+        elif minutes < 60:
+            self.relativeWhen = f"{minutes:.0f} min"
+        else:
+            self.relativeWhen = f"{minutes//60:.0f}h {minutes%60:.0f}min"
+
 
 class Line:
     def __init__(self, obj):
         self.__dict__.update(obj)
+        self.css_class = str()
+
+        if self.product == "tram":
+            self.name = self.name.removeprefix("STR ")
+            self.css_class = "tram"
+        elif self.product == "suburban":
+            self.css_class = "suburban"
+        elif self.product == "subway":
+            self.css_class = "subway"
+        elif self.product == "bus":
+            self.name = self.name.removeprefix("Bus ")
+            self.css_class = "bus"
+
 
 async def show_departure_board(request):
     try:
@@ -55,8 +106,17 @@ async def show_departure_board(request):
         return web.HTTPNotFound(body=json.dumps(departures), headers=headers)
 
     departures = list(map(Departure, departures))
+
+    now = datetime.now().timestamp()
+    for departure in departures:
+        departure.set_relative(now)
+
     departure_board = env.get_template("departure_list.html")
-    return web.Response(body=departure_board.render(title="Noot", departures=departures), headers=headers)
+    return web.Response(
+        body=departure_board.render(title="Noot", departures=departures),
+        headers=headers,
+    )
+
 
 if __name__ == "__main__":
 
diff --git a/static/v0/css/wip.css b/static/v0/css/wip.css
index e3efc2a..965f5ec 100644
--- a/static/v0/css/wip.css
+++ b/static/v0/css/wip.css
@@ -36,28 +36,63 @@ ul.departures > li {
 	background-color: white;
 }
 
+ul.departures > li.cancelled {
+	background-color: #ffe7d0;
+}
+
 ul.departures li .line {
 	position: absolute;
-	bottom: 5px;
+	bottom: 0;
 	left: 2px;
 	max-width: 6em;
 	max-height: 3ex;
+	max-width: 4em;
 	overflow: hidden;
 	font-size: 150%;
+	background-color: #eeeeee;
+	font-weight: bold;
+	padding-left: 0.1em;
+	padding-right: 0.1em;
+}
+
+ul.departures li .tram {
+	background-color:#ffcccc;
+}
+
+ul.departures li .suburban {
+	background-color:#aaffba;
+	border-radius: 30px;
+}
+
+ul.departures li .subway {
+	background-color:#aac0ff;
+}
+
+ul.departures li .bus {
+	background-color:#eeaaee;
+	border-radius: 10px;
 }
 
 ul.departures li .dest {
 	position: absolute;
-	top: 0.5ex;
+	bottom: 0;
 	left: 4em;
-	bottom: 0px;
 	width: 70%;
 	overflow: hidden;
 	background-color: transparent;
-	font-size: 200%;
+	font-size: 160%;
 	color: black;
 }
 
+ul.departures li .destsuffix {
+	position: absolute;
+	top: 1px;
+	left: 6.5em;
+	width: 70%;
+	height: 1.2em;
+	overflow: hidden;
+}
+
 ul.departures li .time {
 	position: absolute;
 	right: 5px;
@@ -68,6 +103,16 @@ ul.departures li .time {
 	color: black;
 }
 
+ul.departures li .platform {
+	position: absolute;
+	bottom: 0;
+	right: 5px;
+	overflow: hidden;
+	background-color: transparent;
+	font-size: 150%;
+	color: black;
+}
+
 @media only screen and (max-width: 600px) {
 	ul.departures > li {
 		font-size: 85%;
diff --git a/templates/departure_list.html b/templates/departure_list.html
index 464951b..37f259b 100644
--- a/templates/departure_list.html
+++ b/templates/departure_list.html
@@ -21,10 +21,21 @@
 	<div class="content">
 		<ul class="departures">
 			{% for departure in departures %}
-				<li onclick="location.href='https://dbf.finalrewind.org/map/{{ departure.tripId }}/0';">
-					<span class="line {{ departure.line.mode }}">{{ departure.line.name }}</span>
-					<span class="dest" aria-label="nach {{ departure.direction }}">{{ departure.direction }}</span>
-					<span class="time" aria-label="um {{ departure.when.strftime('%H:%M') }}">{{ departure.when.strftime('%H:%M') }}</span>
+				<li class="{{ departure.classes }}" onclick="location.href='https://dbf.finalrewind.org/map/{{ departure.tripId }}/0';">
+					<span class="line {{ departure.line.css_class }}">{{ departure.line.name }}</span>
+					{% if departure.suffix %}
+						<span class="destsuffix">{{ departure.suffix }}</span>
+					{% endif %}
+					<span class="dest" aria-label="nach {{ departure.direction }}">{{ departure.direction }}
+					</span>
+					{% if departure.cancelled and departure.plannedWhen %}
+						<span class="time" aria-label="um {{ departure.plannedWhen }}">{{ departure.plannedWhen.strftime("%H:%M") }}</span>
+					{% else %}
+						<span class="time" aria-label="in {{ departure.relativeWhen }}">{{ departure.relativeWhen }}</span>
+					{% endif %}
+					{% if departure.platform %}
+						<span class="platform" aria-label="Gleis/Bussteig {{ departure.platform }}">{{ departure.platform }}</span>
+					{% endif %}
 				</li>
 			{% endfor %}
 		</ul>