Add menu for editing legs

This commit is contained in:
2025-07-06 21:42:06 +02:00
parent 098addc4e8
commit 3b14fa6c51
5 changed files with 58 additions and 3 deletions

View File

@@ -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 {

View File

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

View File

@@ -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);

View File

@@ -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">

37
web/leg-details.js Normal file
View File

@@ -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();
}