Display trip details

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], {});
+}

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", {

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>

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);
+		}
+	});
+}