132 lines
3.5 KiB
JavaScript
132 lines
3.5 KiB
JavaScript
import { EL } from "./dom.js";
|
|
import { displayTripDetails } from "./trip-details.js";
|
|
import { fetchTrip } from './api.js';
|
|
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 => {
|
|
DataStore.trips.remember(result.trip);
|
|
});
|
|
}
|
|
|
|
let station_offset = 0;
|
|
let trip_offset = 1;
|
|
|
|
let first_station = true;
|
|
|
|
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,
|
|
|
|
},
|
|
});
|
|
el_origin_name.innerText = leg.origin.name;
|
|
element_board.appendChild(el_origin_name);
|
|
|
|
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,
|
|
|
|
},
|
|
});
|
|
element_board.appendChild(el_origin_column);
|
|
|
|
first_station = false;
|
|
}
|
|
|
|
let el_destination_name = EL("div", {
|
|
class: [ "station-name" ],
|
|
style: {
|
|
"grid-column-start": (station_offset * 3) + 4,
|
|
"grid-column-end": (station_offset * 3) + 7,
|
|
"grid-row-start": 1,
|
|
"grid-row-end": 1,
|
|
|
|
},
|
|
});
|
|
el_destination_name.innerText = leg.destination.name;
|
|
element_board.appendChild(el_destination_name);
|
|
|
|
let el_destination_column = EL("div", {
|
|
class: [ "station-column" ],
|
|
style: {
|
|
"grid-column-start": (station_offset * 3) + 5,
|
|
"grid-column-end": (station_offset * 3) + 6,
|
|
"grid-row-start": 2,
|
|
"grid-row-end": journey.legs.length + 2,
|
|
|
|
},
|
|
});
|
|
element_board.appendChild(el_destination_column);
|
|
|
|
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,
|
|
|
|
},
|
|
});
|
|
el_trip_left.appendChild(document.createTextNode(new Date(leg.departure).toLocaleTimeString()));
|
|
el_trip_left.appendChild(EL("br", {}));
|
|
el_trip_left.appendChild(document.createTextNode("Gleis " + leg.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,
|
|
|
|
},
|
|
});
|
|
el_trip.innerText = leg?.line?.name;
|
|
|
|
el_trip.addEventListener("click", event => {
|
|
console.log(leg.tripId);
|
|
displayTripDetails(leg.tripId);
|
|
});
|
|
|
|
element_board.appendChild(el_trip);
|
|
|
|
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,
|
|
|
|
},
|
|
});
|
|
el_trip_right.appendChild(document.createTextNode(new Date(leg.arrival).toLocaleTimeString()));
|
|
el_trip_right.appendChild(EL("br", {}));
|
|
el_trip_right.appendChild(document.createTextNode("Gleis " + leg.arrivalPlatform));
|
|
|
|
element_board.appendChild(el_trip_right);
|
|
|
|
station_offset += 1;
|
|
trip_offset += 1;
|
|
}
|
|
}
|