Try to sort unrelated legs too

web/datastore.js

@@ -81,6 +81,14 @@ export class LegsDataStore {
 
 		this.write();
 	}
+
+	forget(trip_id, origin_location_id, destination_location_id) {
+		this.data = this.data.filter((leg) => {
+			return !(leg.trip_id == trip_id && leg.origin_location_id == origin_location_id && leg.destination_location_id == destination_location_id);
+		});
+
+		this.write();
+	}
 }
 
 export class TripsDataStore {

web/dom.js

@@ -11,5 +11,7 @@ export function EL(type, properties) {
 		Object.assign(el.style, properties.style);
 	}
 
+	el.on = (event_name, callback) => el.addEventListener(event_name, callback);
+
 	return el;
 }

web/drafting-board.js

@@ -1,5 +1,5 @@
 import { EL } from "./dom.js";
-import { displayTripDetails } from "./trip-details.js";
+import { displayLegDetails } from "./leg-details.js";
 import { fetchTrip } from './api.js';
 
 let element_board = document.querySelector("#drafting-board-content");
@@ -63,8 +63,45 @@ export function drawDraftingBoard() {
 		return leg;
 	});
 
+	display_legs = display_legs.toSorted((leg_a, leg_b) => {
+		if (leg_a.origin_location_id == leg_b.origin_location_id) {
+			if (leg_a.origin_location.departure > leg_b.origin_location.departure) {
+				return 1;
+			} else {
+				return -1;
+			}
+		} else if (leg_a.destination_location_id == leg_b.destination_location_id) {
+			if (leg_a.destination_location.arrival > leg_b.destination_location.arrival) {
+				return 1;
+			} else {
+				return -1;
+			}
+		} else if (leg_a.destination_location_id == leg_b.origin_location_id) {
+			if (leg_a.destination_location.arrival > leg_b.origin_location.departure) {
+				return 1;
+			} else {
+				return -1;
+			}
+		} else if (leg_a.origin_location_id == leg_b.destination_location_id) {
+			if (leg_a.origin_location.departure > leg_b.destination_location.arrival) {
+				return 1;
+			} else {
+				return -1;
+			}
+		} else {
+			if (leg_a.origin_location.departure > leg_b.origin_location.departure) {
+				return 1;
+			} else {
+				return -1;
+			}
+		}
+	});
+
 	let rows = display_legs.length;
 
+	element_board.style.setProperty("--drafting-board-number-locations", display_locations.length);
+	element_board.style.setProperty("--drafting-board-number-legs", rows);
+
 	for (let display_location of display_locations) {
 		let el_location_name = EL("div", {
 			class: [ "station-name" ],
@@ -85,7 +122,7 @@ export function drawDraftingBoard() {
 				"grid-column-start": grid_location_indexes[display_location.id]["column-start"],
 				"grid-column-end": grid_location_indexes[display_location.id]["column-end"],
 				"grid-row-start": 2,
-				"grid-row-end": rows + 2,
+				"grid-row-end": rows + 3,
 
 			},
 		});
@@ -124,8 +161,7 @@ export function drawDraftingBoard() {
 		el_leg.innerText = display_leg.trip?.line?.name;
 
 		el_leg.addEventListener("click", event => {
-			console.log(display_leg.trip_id);
+			displayLegDetails(display_leg.trip_id, display_leg.origin_location_id, display_leg.destination_location_id);
-			displayTripDetails(display_leg.trip_id);
 		});
 
 		element_board.appendChild(el_leg);
@@ -159,6 +195,9 @@ export function getLocationWithLeastInboundTrips(locations, legs) {
 		let n_a = numberOfInboundLegs(location_a);
 		let n_b = numberOfInboundLegs(location_b);
 
+		// 1: b vor a
+		// -1: a vor b
+
 		if (n_a == n_b) {
 			return 0;
 		} else if (n_a > n_b) {
@@ -179,7 +218,7 @@ export function sortLocations(sorted_locations, unsorted_locations, legs) {
 	let selected_location_id = getLocationWithLeastInboundTrips(unsorted_locations, legs);
 
 	unsorted_locations = unsorted_locations.filter(location_id => location_id != selected_location_id);
-	legs = legs.filter(leg => leg.destination_id != selected_location_id && leg.origin_id != selected_location_id);
+	legs = legs.filter(leg => leg.destination_location_id != selected_location_id && leg.origin_location_id != selected_location_id);
 
 	return sortLocations(sorted_locations.concat([ selected_location_id ]), unsorted_locations, legs);
 }

web/index.html

@@ -9,14 +9,19 @@
 	</head>
 	<body>
 		<div id="menu">
-			<div id="journeys-search-button">Search journeys</div>
+			<div class="menu-item">
+				<h1>Traveldrafter</h1>
+			</div>
+			<div id="journeys-search-button" class="menu-item menu-button">
+				<div>Search journeys</div>
+			</div>
 		</div>
 
 		<div id="drafting-board">
 			<div id="drafting-board-content"></div>
 		</div>
 
-		<div id="journeys-search" class="popup">
+		<div id="journeys-search" class="popup popup-hidden">
 			<div class="popup-close">&times;</div>
 			<div id="journeys-search-content" class="popup-content">
 				<div class="container">
@@ -28,7 +33,7 @@
 			</div>
 		</div>
 
-		<div id="locations-search" class="popup">
+		<div id="locations-search" class="popup popup-hidden">
 			<div class="popup-close">&times;</div>
 			<div id="locations-search-content" class="popup-content">
 				<div class="container">
@@ -38,7 +43,16 @@
 			</div>
 		</div>
 
-		<div id="trip-details" class="popup">
+		<div id="leg-details" class="popup popup-hidden">
+			<div class="popup-close">&times;</div>
+			<div id="leg-details-content" class="popup-content">
+				<div class="container">
+					<div id="leg-details-response"></div>
+				</div>
+			</div>
+		</div>
+
+		<div id="trip-details" class="popup popup-hidden">
 			<div class="popup-close">&times;</div>
 			<div id="trip-details-content" class="popup-content">
 				<div class="container">

web/journeys-search.js

@@ -51,6 +51,6 @@ export function attachJourneysSearch(search_element) {
 		element_from.value = "";
 		element_to.value = "";
 		element_result.innerText = "";
-		element_journeys_search.style.display = "block";
+		element_journeys_search.popupShow();
 	});
 }

web/leg-details.js

@@ -0,0 +1,37 @@
+import { EL } from "./dom.js";
+import { displayTripDetails } from "./trip-details.js";
+import { drawDraftingBoard } from './drafting-board.js';
+
+let element_leg_details = document.querySelector("#leg-details");
+let element_response = document.querySelector("#leg-details-response");
+
+export function displayLegDetails(trip_id, origin_location_id, destination_location_id) {
+
+	let trip = window.dataStore.trips.data[trip_id];
+	let origin_location = window.dataStore.locations.data[origin_location_id];
+	let destination_location = window.dataStore.locations.data[destination_location_id];
+
+	element_response.innerText = "";
+
+	let el_headline = EL("h1", {});
+	el_headline.innerText = trip.line.name + ": " + origin_location.name + " -> " + destination_location.name;
+	element_response.appendChild(el_headline);
+
+	let el_display_trip = EL("div", {});
+	el_display_trip.innerText = "Display full trip";
+	el_display_trip.on("click", event => {
+		displayTripDetails(trip_id);
+	});
+	element_response.appendChild(el_display_trip);
+
+	let el_remove_leg = EL("div", {});
+	el_remove_leg.innerText = "Remove leg";
+	el_remove_leg.on("click", event => {
+		window.dataStore.legs.forget(trip_id, origin_location_id, destination_location_id);
+		drawDraftingBoard();
+		element_leg_details.popupHide();
+	});
+	element_response.appendChild(el_remove_leg);
+
+	element_leg_details.popupShow();
+}

web/locations-search.js

@@ -26,7 +26,7 @@ function createLocationElement(location) {
 	location_element.addEventListener("click", event => {
 		window.dataStore.recent_locations.remember(event.target.dataset.locationId);
 		element_locations_search.locationSelectedCallback(event.target.innerText, event.target.dataset.locationId);
-		element_locations_search.style.display = "none";
+		element_locations_search.popupHide();
 	});
 
 	return location_element;
@@ -46,6 +46,6 @@ export function attachLocationsSearch(search_element) {
 			let el = createLocationElement(location);
 			element_response.appendChild(el);
 		}
-		element_locations_search.style.display = "block";
+		element_locations_search.popupShow();
 	});
 }

web/popup.js

@@ -1,7 +1,15 @@
 export function setupPopups() {
+	document.querySelectorAll(".popup").forEach(element => {
+		element.popupShow = () => {
+			element.classList.remove("popup-hidden");
+		};
+		element.popupHide = () => {
+			element.classList.add("popup-hidden");
+		};
+	});
 	document.querySelectorAll(".popup-close").forEach(element => {
 		element.addEventListener("click", event => {
-			event.target.parentElement.style.display="none";
+			event.target.parentElement.popupHide();
 		});
 	});
 }

web/style.css

@@ -9,6 +9,38 @@ body {
 	background-color: #f5a4d1;
 }
 
+#menu {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+
+	height: 50px;
+
+	background-color: #ff85c9;
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+}
+
+#menu .menu-item {
+	float: left;
+	height: 100%;
+	padding: 10px;
+	padding-top: auto;
+	padding-bottom: auto;
+}
+
+#menu .menu-button:hover {
+	background-color: #ff4bb0;
+
+	border-left-style: solid;
+	border-left-width: 1px;
+	padding-left: 9px;
+	border-right-style: solid;
+	border-right-width: 1px;
+	padding-right: 9px;
+}
+
 .container {
 	margin-right: auto;
 	margin-left: auto;
@@ -29,11 +61,13 @@ body {
 	background-color: rgba(0, 0, 0, 0.9);
 	color: white;
 
-	display: none;
-
 	overflow: scroll;
 }
 
+.popup-hidden {
+	display: none;
+}
+
 #journeys-search {
 	z-index: 8000;
 }
@@ -76,22 +110,25 @@ input.form-control {
 
 #drafting-board {
 	width: 100%;
+	height: 100vh;
 
 	padding: 20px;
+	padding-top: 70px;
+
 	overflow: scroll;
 }
 
 #drafting-board-content {
 	display: grid;
 
-	min-width: 1000px;
+	min-width: 100%;
-	min-height: 300px;
+	min-height: 100%;
 
-	grid-template-columns: repeat(auto-fit, minmax(200px, auto) 2px minmax(200px, auto));
+	--drafting-board-number-locations: 0;
-}
+	--drafting-board-number-legs: 0;
 
-#drafting-board div {
+	grid-template-columns: repeat(var(--drafting-board-number-locations), minmax(200px, auto) 2px minmax(200px, auto));
-	min-height: 0px;
+	grid-template-rows: min-content repeat(var(--drafting-board-number-legs), minmax(0px, min-content)) auto;
 }
 
 #drafting-board .station-name {

web/trip-details.js

@@ -6,9 +6,10 @@ let element_response = document.querySelector("#trip-details-response");
 
 export function displayTripDetails(trip_id) {
 	element_response.innerHTML = "Loading…";
-	element_trip_details.style.display = "block";
+	element_trip_details.popupShow();
 
 	fetchTrip(trip_id).then(result => {
+		window.dataStore.trips.remember(result.trip);
 		element_response.innerText = "";
 
 		let el_headline = EL("h1", {});