Display searched journey on drafting board

2025-06-18 19:42:23 +02:00
parent 597884f5dd
commit 8e3c440d70
3 changed files with 135 additions and 0 deletions
--- a/web/drafting-board.js
+++ b/web/drafting-board.js
@@ -0,0 +1,115 @@
+import { EL } from "./dom.js";
+
+let element_board = document.querySelector("#drafting-board-content");
+
+export function addJourneyToDraftingBoard(journey) {
+	element_board.innerText = "";
+
+	let station_offset = 0;
+	let trip_offset = 1;
+
+	let first_station = true;
+
+	for (let leg of journey.legs) {
+		if (first_station) {
+			let el_origin_name = EL("div", {
+				class: [ "station-name" ],
+				style: {
+					"grid-column-start": 1,
+					"grid-column-end": 4,
+					"grid-row-start": 1,
+					"grid-row-end": 1,
+
+				},
+			});
+			el_origin_name.innerText = leg.origin.name;
+			element_board.appendChild(el_origin_name);
+
+			let el_origin_column = EL("div", {
+				class: [ "station-column" ],
+				style: {
+					"grid-column-start": 2,
+					"grid-column-end": 3,
+					"grid-row-start": 2,
+					"grid-row-end": journey.legs.length + 2,
+
+				},
+			});
+			element_board.appendChild(el_origin_column);
+
+			first_station = false;
+		}
+
+		let el_destination_name = EL("div", {
+			class: [ "station-name" ],
+			style: {
+				"grid-column-start": (station_offset * 3) + 4,
+				"grid-column-end": (station_offset * 3) + 7,
+				"grid-row-start": 1,
+				"grid-row-end": 1,
+
+			},
+		});
+		el_destination_name.innerText = leg.destination.name;
+		element_board.appendChild(el_destination_name);
+
+		let el_destination_column = EL("div", {
+			class: [ "station-column" ],
+			style: {
+				"grid-column-start": (station_offset * 3) + 5,
+				"grid-column-end": (station_offset * 3) + 6,
+				"grid-row-start": 2,
+				"grid-row-end": journey.legs.length + 2,
+
+			},
+		});
+		element_board.appendChild(el_destination_column);
+
+		let el_trip_left = EL("div", {
+			class: [ "trip-left" ],
+			style: {
+				"grid-column-start": (station_offset * 3) + 1,
+				"grid-column-end": (station_offset * 3) + 2,
+				"grid-row-start": (trip_offset) + 1,
+				"grid-row-end": (trip_offset) + 1,
+
+			},
+		});
+		el_trip_left.appendChild(document.createTextNode(new Date(leg.departure).toLocaleTimeString()));
+		el_trip_left.appendChild(EL("br", {}));
+		el_trip_left.appendChild(document.createTextNode("Gleis " + leg.departurePlatform));
+		element_board.appendChild(el_trip_left);
+
+		let el_trip = EL("div", {
+			class: [ "trip" ],
+			style: {
+				"grid-column-start": (station_offset * 3) + 3,
+				"grid-column-end": (station_offset * 3) + 5,
+				"grid-row-start": (trip_offset) + 1,
+				"grid-row-end": (trip_offset) + 1,
+
+			},
+		});
+		el_trip.innerText = leg?.line?.name;
+		element_board.appendChild(el_trip);
+
+		let el_trip_right = EL("div", {
+			class: [ "trip-right" ],
+			style: {
+				"grid-column-start": (station_offset * 3) + 6,
+				"grid-column-end": (station_offset * 3) + 7,
+				"grid-row-start": (trip_offset) + 1,
+				"grid-row-end": (trip_offset) + 1,
+
+			},
+		});
+		el_trip_right.appendChild(document.createTextNode(new Date(leg.arrival).toLocaleTimeString()));
+		el_trip_right.appendChild(EL("br", {}));
+		el_trip_right.appendChild(document.createTextNode("Gleis " + leg.arrivalPlatform));
+
+		element_board.appendChild(el_trip_right);
+
+		station_offset += 1;
+		trip_offset += 1;
+	}
+}