Display tracked trips on drafting board
This commit is contained in:
@@ -6,8 +6,6 @@ import { DataStore } from './datastore.js';
|
||||
let element_board = document.querySelector("#drafting-board-content");
|
||||
|
||||
export function addJourneyToDraftingBoard(journey) {
|
||||
element_board.innerText = "";
|
||||
|
||||
for (let leg of journey.legs.filter(item => !("walking" in item))) {
|
||||
DataStore.tracked_trips.remember(leg.tripId, leg.origin.id, leg.destination.id);
|
||||
fetchTrip(leg.tripId).then(result => {
|
||||
@@ -15,98 +13,121 @@ export function addJourneyToDraftingBoard(journey) {
|
||||
});
|
||||
}
|
||||
|
||||
trackedTripsLocationsSorted();
|
||||
drawDraftingBoard();
|
||||
}
|
||||
|
||||
let station_offset = 0;
|
||||
let trip_offset = 1;
|
||||
export function drawDraftingBoard() {
|
||||
element_board.innerText = "";
|
||||
|
||||
let first_station = true;
|
||||
let sorted_locations = trackedTripsLocationsSorted();
|
||||
let display_locations = sorted_locations.map(item => DataStore.locations.get()[item]);
|
||||
|
||||
for (let leg of journey.legs.filter(item => !("walking" in item))) {
|
||||
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,
|
||||
let grid_location_indexes = {};
|
||||
|
||||
},
|
||||
});
|
||||
el_origin_name.innerText = leg.origin.name;
|
||||
element_board.appendChild(el_origin_name);
|
||||
let location_offset = 0;
|
||||
|
||||
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,
|
||||
for (let sorted_location of sorted_locations) {
|
||||
|
||||
},
|
||||
});
|
||||
element_board.appendChild(el_origin_column);
|
||||
grid_location_indexes[sorted_location] = {
|
||||
"name-start": (location_offset * 3) + 1,
|
||||
"name-end": (location_offset * 3) + 4,
|
||||
"column-start": (location_offset * 3) + 2,
|
||||
"column-end": (location_offset * 3) + 3,
|
||||
};
|
||||
|
||||
location_offset += 1;
|
||||
|
||||
}
|
||||
|
||||
let trip_data = DataStore.trips.get();
|
||||
console.log(trip_data);
|
||||
|
||||
function getStopFromTrip(tripId, location_id) {
|
||||
for (let stop of trip_data[tripId]?.stopovers || []) {
|
||||
if (stop.stop.id == location_id) {
|
||||
return stop;
|
||||
}
|
||||
|
||||
first_station = false;
|
||||
}
|
||||
|
||||
let el_destination_name = EL("div", {
|
||||
return undefined;
|
||||
|
||||
}
|
||||
|
||||
let display_trips = DataStore.tracked_trips.get().map(item => {
|
||||
item["trip_data"] = trip_data[item.trip];
|
||||
|
||||
item.originStop = getStopFromTrip(item.trip, item.origin);
|
||||
item.destinationStop = getStopFromTrip(item.trip, item.destination);
|
||||
|
||||
return item;
|
||||
});
|
||||
|
||||
console.log(display_trips);
|
||||
|
||||
let rows = display_trips.length;
|
||||
|
||||
for (let display_location of display_locations) {
|
||||
let el_location_name = EL("div", {
|
||||
class: [ "station-name" ],
|
||||
style: {
|
||||
"grid-column-start": (station_offset * 3) + 4,
|
||||
"grid-column-end": (station_offset * 3) + 7,
|
||||
"grid-column-start": grid_location_indexes[display_location.id]["name-start"],
|
||||
"grid-column-end": grid_location_indexes[display_location.id]["name-end"],
|
||||
"grid-row-start": 1,
|
||||
"grid-row-end": 1,
|
||||
|
||||
},
|
||||
});
|
||||
el_destination_name.innerText = leg.destination.name;
|
||||
element_board.appendChild(el_destination_name);
|
||||
el_location_name.innerText = display_location?.name;
|
||||
element_board.appendChild(el_location_name);
|
||||
|
||||
let el_destination_column = EL("div", {
|
||||
let el_location_column = EL("div", {
|
||||
class: [ "station-column" ],
|
||||
style: {
|
||||
"grid-column-start": (station_offset * 3) + 5,
|
||||
"grid-column-end": (station_offset * 3) + 6,
|
||||
"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": journey.legs.length + 2,
|
||||
"grid-row-end": rows + 2,
|
||||
|
||||
},
|
||||
});
|
||||
element_board.appendChild(el_destination_column);
|
||||
element_board.appendChild(el_location_column);
|
||||
}
|
||||
|
||||
let trip_offset = 0;
|
||||
|
||||
for (let display_trip of display_trips) {
|
||||
console.log(display_trip);
|
||||
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,
|
||||
"grid-column-start": grid_location_indexes[display_trip.origin]["name-start"],
|
||||
"grid-column-end": grid_location_indexes[display_trip.origin]["column-start"],
|
||||
"grid-row-start": trip_offset + 2,
|
||||
"grid-row-end": trip_offset + 2,
|
||||
|
||||
},
|
||||
});
|
||||
el_trip_left.appendChild(document.createTextNode(new Date(leg.departure).toLocaleTimeString()));
|
||||
el_trip_left.appendChild(document.createTextNode(new Date(display_trip.originStop.departure).toLocaleTimeString()));
|
||||
el_trip_left.appendChild(EL("br", {}));
|
||||
el_trip_left.appendChild(document.createTextNode("Gleis " + leg.departurePlatform));
|
||||
el_trip_left.appendChild(document.createTextNode("Gleis " + display_trip.originStop.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,
|
||||
"grid-column-start": grid_location_indexes[display_trip.origin]["column-end"],
|
||||
"grid-column-end": grid_location_indexes[display_trip.destination]["column-start"],
|
||||
"grid-row-start": trip_offset + 2,
|
||||
"grid-row-end": trip_offset + 2,
|
||||
|
||||
},
|
||||
});
|
||||
el_trip.innerText = leg?.line?.name;
|
||||
el_trip.innerText = display_trip.trip_data?.line?.name;
|
||||
|
||||
el_trip.addEventListener("click", event => {
|
||||
console.log(leg.tripId);
|
||||
displayTripDetails(leg.tripId);
|
||||
console.log(display_trip.tripId);
|
||||
displayTripDetails(display_trip.tripId);
|
||||
});
|
||||
|
||||
element_board.appendChild(el_trip);
|
||||
@@ -114,20 +135,19 @@ export function addJourneyToDraftingBoard(journey) {
|
||||
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,
|
||||
"grid-column-start": grid_location_indexes[display_trip.destination]["column-end"],
|
||||
"grid-column-end": grid_location_indexes[display_trip.destination]["name-end"],
|
||||
"grid-row-start": trip_offset + 2,
|
||||
"grid-row-end": trip_offset + 2,
|
||||
|
||||
},
|
||||
});
|
||||
el_trip_right.appendChild(document.createTextNode(new Date(leg.arrival).toLocaleTimeString()));
|
||||
el_trip_right.appendChild(document.createTextNode(new Date(display_trip.destinationStop.arrival).toLocaleTimeString()));
|
||||
el_trip_right.appendChild(EL("br", {}));
|
||||
el_trip_right.appendChild(document.createTextNode("Gleis " + leg.arrivalPlatform));
|
||||
el_trip_right.appendChild(document.createTextNode("Gleis " + display_trip.destinationStop.arrivalPlatform));
|
||||
|
||||
element_board.appendChild(el_trip_right);
|
||||
|
||||
station_offset += 1;
|
||||
trip_offset += 1;
|
||||
}
|
||||
}
|
||||
@@ -179,5 +199,5 @@ export function trackedTripsLocationsSorted() {
|
||||
|
||||
console.log(sorted_locations.map(item => DataStore.locations.get()[item]?.name));
|
||||
|
||||
|
||||
return sorted_locations;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user