From 3b14fa6c51e0d2cb7b7d7a4aee5a1b31e744667b Mon Sep 17 00:00:00 2001
From: clerie <git@clerie.de>
Date: Sun, 6 Jul 2025 21:42:06 +0200
Subject: [PATCH] Add menu for editing legs

---
 web/datastore.js      |  8 ++++++++
 web/dom.js            |  2 ++
 web/drafting-board.js |  5 ++---
 web/index.html        |  9 +++++++++
 web/leg-details.js    | 37 +++++++++++++++++++++++++++++++++++++
 5 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 web/leg-details.js

diff --git a/web/datastore.js b/web/datastore.js
index 4bee840..bdf3768 100644
--- a/web/datastore.js
+++ b/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 {
diff --git a/web/dom.js b/web/dom.js
index cd786cb..1db4281 100644
--- a/web/dom.js
+++ b/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;
 }
diff --git a/web/drafting-board.js b/web/drafting-board.js
index d027e77..2b212e1 100644
--- a/web/drafting-board.js
+++ b/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");
@@ -127,8 +127,7 @@ export function drawDraftingBoard() {
 		el_leg.innerText = display_leg.trip?.line?.name;
 
 		el_leg.addEventListener("click", event => {
-			console.log(display_leg.trip_id);
-			displayTripDetails(display_leg.trip_id);
+			displayLegDetails(display_leg.trip_id, display_leg.origin_location_id, display_leg.destination_location_id);
 		});
 
 		element_board.appendChild(el_leg);
diff --git a/web/index.html b/web/index.html
index a323903..9afcadd 100644
--- a/web/index.html
+++ b/web/index.html
@@ -43,6 +43,15 @@
 			</div>
 		</div>
 
+		<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">
diff --git a/web/leg-details.js b/web/leg-details.js
new file mode 100644
index 0000000..26030dd
--- /dev/null
+++ b/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();
+}