From 433157278d730b6c3afa17f63f02cc878882a76e Mon Sep 17 00:00:00 2001
From: clerie <git@clerie.de>
Date: Thu, 19 Jun 2025 01:19:24 +0200
Subject: [PATCH] Display trip details

---
 web/api.js            |  8 +++++++-
 web/drafting-board.js |  7 +++++++
 web/index.html        |  9 +++++++++
 web/trip-details.js   | 20 ++++++++++++++++++++
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 web/trip-details.js

diff --git a/web/api.js b/web/api.js
index a5c2372..fc5131b 100644
--- a/web/api.js
+++ b/web/api.js
@@ -1,6 +1,8 @@
 export function fetchApi(pathcomponents, query) {
+	console.log(pathcomponents);
 	query.pretty = true;
-	let url = '/api/' + pathcomponents.join("/") + "?" + new URLSearchParams(query).toString();
+	let url = '/api/' + pathcomponents.map(component => encodeURIComponent(component)).join("/") + "?" + new URLSearchParams(query).toString();
+	console.log(url);
 	return fetch(url).then(response => {
 		if (!response.ok) {
 			throw new Error("Fetching api failed");
@@ -26,3 +28,7 @@ export function fetchJourneys(from_, to) {
 		to: to,
 	});
 }
+
+export function fetchTrip(trip_id) {
+	return fetchApi(["trips", trip_id], {});
+}
diff --git a/web/drafting-board.js b/web/drafting-board.js
index 6103a95..4d97703 100644
--- a/web/drafting-board.js
+++ b/web/drafting-board.js
@@ -1,4 +1,5 @@
 import { EL } from "./dom.js";
+import { displayTripDetails } from "./trip-details.js";
 
 let element_board = document.querySelector("#drafting-board-content");
 
@@ -91,6 +92,12 @@ export function addJourneyToDraftingBoard(journey) {
 			},
 		});
 		el_trip.innerText = leg?.line?.name;
+
+		el_trip.addEventListener("click", event => {
+			console.log(leg.tripId);
+			displayTripDetails(leg.tripId);
+		});
+
 		element_board.appendChild(el_trip);
 
 		let el_trip_right = EL("div", {
diff --git a/web/index.html b/web/index.html
index 7805225..1863cec 100644
--- a/web/index.html
+++ b/web/index.html
@@ -46,5 +46,14 @@
 				</div>
 			</div>
 		</div>
+
+		<div id="trip-details" class="popup">
+			<div class="popup-close">&times;</div>
+			<div id="trip-details-content" class="popup-content">
+				<div class="container">
+					<div id="trip-details-response"></div>
+				</div>
+			</div>
+		</div>
 	</body>
 </html>
diff --git a/web/trip-details.js b/web/trip-details.js
new file mode 100644
index 0000000..e7e24d7
--- /dev/null
+++ b/web/trip-details.js
@@ -0,0 +1,20 @@
+import { EL } from "./dom.js";
+import { fetchTrip } from './api.js';
+
+let element_trip_details = document.querySelector("#trip-details");
+let element_response = document.querySelector("#trip-details-response");
+
+export function displayTripDetails(trip_id) {
+	element_response.innerHTML = "Loading…";
+	element_trip_details.style.display = "block";
+
+	fetchTrip(trip_id).then(result => {
+		element_response.innerText = "";
+
+		for (let stopover of result.trip.stopovers) {
+			let el = EL("div", {});
+			el.innerText = stopover.stop.name;
+			element_response.appendChild(el);
+		}
+	});
+}