clerie/traveldrafter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Display tracked trips on drafting board

Browse Source
This commit is contained in:
clerie
2025-07-06 14:02:41 +02:00
parent edee295fe1
commit ab9f192f6f
4 changed files with 85 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
web/drafting-board.js
View File

@@ -6,8 +6,6 @@ import { DataStore } from './datastore.js';
let element_board = document.querySelector("#drafting-board-content"); let element_board = document.querySelector("#drafting-board-content");
export function addJourneyToDraftingBoard(journey) { export function addJourneyToDraftingBoard(journey) {
element_board.innerText = "";
for (let leg of journey.legs.filter(item => !("walking" in item))) { for (let leg of journey.legs.filter(item => !("walking" in item))) {
DataStore.tracked_trips.remember(leg.tripId, leg.origin.id, leg.destination.id); DataStore.tracked_trips.remember(leg.tripId, leg.origin.id, leg.destination.id);
fetchTrip(leg.tripId).then(result => { fetchTrip(leg.tripId).then(result => {
@@ -15,98 +13,121 @@ export function addJourneyToDraftingBoard(journey) {
}); });
} }
trackedTripsLocationsSorted(); drawDraftingBoard();
}
let station_offset = 0; export function drawDraftingBoard() {
let trip_offset = 1; 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))) { let grid_location_indexes = {};
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 location_offset = 0;
});
el_origin_name.innerText = leg.origin.name;
element_board.appendChild(el_origin_name);
let el_origin_column = EL("div", { for (let sorted_location of sorted_locations) {
class: [ "station-column" ],
style: {
"grid-column-start": 2,
"grid-column-end": 3,
"grid-row-start": 2,
"grid-row-end": journey.legs.length + 2,
}, grid_location_indexes[sorted_location] = {
}); "name-start": (location_offset * 3) + 1,
element_board.appendChild(el_origin_column); "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" ], class: [ "station-name" ],
style: { style: {
"grid-column-start": (station_offset * 3) + 4, "grid-column-start": grid_location_indexes[display_location.id]["name-start"],
"grid-column-end": (station_offset * 3) + 7, "grid-column-end": grid_location_indexes[display_location.id]["name-end"],
"grid-row-start": 1, "grid-row-start": 1,
"grid-row-end": 1, "grid-row-end": 1,
}, },
}); });
el_destination_name.innerText = leg.destination.name; el_location_name.innerText = display_location?.name;
element_board.appendChild(el_destination_name); element_board.appendChild(el_location_name);
let el_destination_column = EL("div", { let el_location_column = EL("div", {
class: [ "station-column" ], class: [ "station-column" ],
style: { style: {
"grid-column-start": (station_offset * 3) + 5, "grid-column-start": grid_location_indexes[display_location.id]["column-start"],
"grid-column-end": (station_offset * 3) + 6, "grid-column-end": grid_location_indexes[display_location.id]["column-end"],
"grid-row-start": 2, "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", { let el_trip_left = EL("div", {
class: [ "trip-left" ], class: [ "trip-left" ],
style: { style: {
"grid-column-start": (station_offset * 3) + 1, "grid-column-start": grid_location_indexes[display_trip.origin]["name-start"],
"grid-column-end": (station_offset * 3) + 2, "grid-column-end": grid_location_indexes[display_trip.origin]["column-start"],
"grid-row-start": (trip_offset) + 1, "grid-row-start": trip_offset + 2,
"grid-row-end": (trip_offset) + 1, "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(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); element_board.appendChild(el_trip_left);
let el_trip = EL("div", { let el_trip = EL("div", {
class: [ "trip" ], class: [ "trip" ],
style: { style: {
"grid-column-start": (station_offset * 3) + 3, "grid-column-start": grid_location_indexes[display_trip.origin]["column-end"],
"grid-column-end": (station_offset * 3) + 5, "grid-column-end": grid_location_indexes[display_trip.destination]["column-start"],
"grid-row-start": (trip_offset) + 1, "grid-row-start": trip_offset + 2,
"grid-row-end": (trip_offset) + 1, "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 => { el_trip.addEventListener("click", event => {
console.log(leg.tripId); console.log(display_trip.tripId);
displayTripDetails(leg.tripId); displayTripDetails(display_trip.tripId);
}); });
element_board.appendChild(el_trip); element_board.appendChild(el_trip);
@@ -114,20 +135,19 @@ export function addJourneyToDraftingBoard(journey) {
let el_trip_right = EL("div", { let el_trip_right = EL("div", {
class: [ "trip-right" ], class: [ "trip-right" ],
style: { style: {
"grid-column-start": (station_offset * 3) + 6, "grid-column-start": grid_location_indexes[display_trip.destination]["column-end"],
"grid-column-end": (station_offset * 3) + 7, "grid-column-end": grid_location_indexes[display_trip.destination]["name-end"],
"grid-row-start": (trip_offset) + 1, "grid-row-start": trip_offset + 2,
"grid-row-end": (trip_offset) + 1, "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(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); element_board.appendChild(el_trip_right);
station_offset += 1;
trip_offset += 1; trip_offset += 1;
} }
} }
@@ -179,5 +199,5 @@ export function trackedTripsLocationsSorted() {
console.log(sorted_locations.map(item => DataStore.locations.get()[item]?.name)); console.log(sorted_locations.map(item => DataStore.locations.get()[item]?.name));
return sorted_locations;
} }

11
web/index.html
View File

@@ -13,16 +13,7 @@
</div> </div>
<div id="drafting-board"> <div id="drafting-board">
<div id="drafting-board-content"> <div id="drafting-board-content"></div>
<div class="station-name" style="grid-column: 1 / 4; grid-row: 1;">Göttingen</div>
<div class="station-column" style="grid-column: 2 / 3; grid-row: 2 / 5;"></div>
<div class="station-name" style="grid-column: 4 / 7; grid-row: 1;">Fulda</div>
<div class="station-column" style="grid-column: 5 / 6; grid-row: 2 / 5;"></div>
<div class="trip-left" style="grid-column: 1 / 2; grid-row: 2;">16:45 Uhr<br/>Gleis 7</div>
<div class="trip" style="grid-column: 3 / 5; grid-row: 2;">ICE 1337</div>
<div class="trip-right" style="grid-column: 6 / 7; grid-row: 2;">18:05 Uhr</br>Gleis 3</div>
</div>
</div> </div>
<div id="journeys-search" class="popup"> <div id="journeys-search" class="popup">

2
web/style.css
View File

@@ -81,7 +81,7 @@ input.form-control {
min-width: 1000px; min-width: 1000px;
min-height: 300px; min-height: 300px;
grid-template-columns: repeat(auto-fit, minmax(30px, auto) 2px minmax(30px, auto)); grid-template-columns: repeat(auto-fit, minmax(200px, auto) 2px minmax(200px, auto));
} }
#drafting-board div { #drafting-board div {

4
web/traveldrafter.js
View File

@@ -2,7 +2,7 @@ import * as Api from './api.js';
import { setupPopups } from "./popup.js"; import { setupPopups } from "./popup.js";
import { setupLocationsSearch } from './locations-search.js'; import { setupLocationsSearch } from './locations-search.js';
import { setupJourneysSearch, attachJourneysSearch } from './journeys-search.js'; import { setupJourneysSearch, attachJourneysSearch } from './journeys-search.js';
import { trackedTripsLocationsSorted } from './drafting-board.js'; import { drawDraftingBoard } from './drafting-board.js';
import { DataStore } from './datastore.js'; import { DataStore } from './datastore.js';
window.Api = Api; window.Api = Api;
@@ -14,4 +14,4 @@ setupJourneysSearch();
attachJourneysSearch(document.querySelector("#journeys-search-button")); attachJourneysSearch(document.querySelector("#journeys-search-button"));
trackedTripsLocationsSorted(); drawDraftingBoard();