Display trip title

web/datastore.js

@@ -69,11 +69,14 @@ export class LegsDataStore {
 		DataStore.set("legs", this.data);
 	}
 
-	remember(trip_id, origin_id, destination_id) {
+	remember(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.data.push({
 			trip_id: trip_id,
-			origin_location_id: origin_id,
-			destination_location_id: destination_id,
+			origin_location_id: origin_location_id,
+			destination_location_id: destination_location_id,
 		});
 
 		this.write();

web/drafting-board.js

@@ -5,14 +5,18 @@ import { fetchTrip } from './api.js';
 let element_board = document.querySelector("#drafting-board-content");
 
 export function addJourneyToDraftingBoard(journey) {
+	let awaiting_promises = [];
 	for (let leg of journey.legs.filter(item => !("walking" in item))) {
 		window.dataStore.legs.remember(leg.tripId, leg.origin.id, leg.destination.id);
-		fetchTrip(leg.tripId).then(result => {
+		awaiting_promises.push(fetchTrip(leg.tripId).then(result => {
 			window.dataStore.trips.remember(result.trip);
-		});
+		}));
 	}
 
-	drawDraftingBoard();
+	Promise.all(awaiting_promises)
+		.then(results => {
+			drawDraftingBoard();
+		});
 }
 
 export function drawDraftingBoard() {

web/style.css

@@ -30,6 +30,8 @@ body {
 	color: white;
 
 	display: none;
+
+	overflow: scroll;
 }
 
 #journeys-search {
@@ -54,6 +56,10 @@ body {
 	margin-bottom: 20px;
 }
 
+.popup h1 {
+	margin-bottom: 30px;
+}
+
 .popup input {
 	color: white;
 }

web/trip-details.js

@@ -11,6 +11,10 @@ export function displayTripDetails(trip_id) {
 	fetchTrip(trip_id).then(result => {
 		element_response.innerText = "";
 
+		let el_headline = EL("h1", {});
+		el_headline.innerText = result.trip.line.name + ": " + result.trip.destination.name;
+		element_response.appendChild(el_headline);
+
 		for (let stopover of result.trip.stopovers) {
 			let el = EL("div", {});
 			el.innerText = stopover.stop.name;