Display searched journey on drafting board

web/dom.js

@@ -0,0 +1,15 @@
+export function EL(type, properties) {
+	let el = document.createElement(type);
+
+	if ("class" in properties) {
+		for (let c of properties["class"]) {
+			el.classList.add(c);
+		}
+	}
+
+	if ("style" in properties) {
+		Object.assign(el.style, properties.style);
+	}
+
+	return el;
+}

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

web/journeys-search.js

@@ -1,5 +1,6 @@
 import { fetchJourneys } from './api.js';
 import { attachLocationsSearch } from './locations-search.js';
+import { addJourneyToDraftingBoard } from './drafting-board.js';
 
 let element_journeys_search = document.querySelector("#journeys-search");
 let element_from = document.querySelector("#journey-search-from");
@@ -28,6 +29,10 @@ function createJourneyElement(journey) {
 		el.appendChild(createJourneyLegElement(leg));
 	}
 
+	el.addEventListener("click", event => {
+		addJourneyToDraftingBoard(journey);
+	});
+
 	return el;
 
 }