aindreas/fyp
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[frontend]: Fix TrainStationPopup from going offscreen on data fetch

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-12 22:12:56 +00:00
parent d8abc43c0f
commit 30eff0fb2d
1 changed files with 54 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/components/TrainStationPopup.jsx
View File

@ -1,20 +1,29 @@
import React, { useState } from "react";
import React, { useState, useRef } from "react";
import { useMap } from "react-leaflet";
const TrainStationPopup = ({ item, objectTitle }) => {
const [trainInfo, setTrainInfo] = useState("");
const map = useMap(); // Access the Leaflet map instance
const fetchTrainData = async () => {
let trainInfoHtml = "";
try {
const response = await fetch(`https://kkz92ft0ad.execute-api.us-east-1.amazonaws.com/return_station_data?stationCode=${item.trainStationCode}`);
const response = await fetch(
`https://kkz92ft0ad.execute-api.us-east-1.amazonaws.com/return_station_data?stationCode=${item.trainStationCode}`
);
const data = await response.json();
// Ensure objStationData is always an array
let trainDataArray = Array.isArray(data.ArrayOfObjStationData.objStationData)
? data.ArrayOfObjStationData.objStationData
: [data.ArrayOfObjStationData.objStationData];
trainDataArray = trainDataArray.slice(0, 3); // Only show the first 3 trains
if (trainDataArray.length === 0) {
throw new Error("No train data available");
}
const trainData = trainDataArray.map(train => ({
trainCode: train.Traincode,
origin: train.Origin,
@ -25,8 +34,10 @@ const TrainStationPopup = ({ item, objectTitle }) => {
lastLocation: train.Lastlocation,
}));
const trainInfoHtml = "<b>Trains due in next 90 minutes:</b><br>"
+ trainData.map(train => `
trainInfoHtml =
"<b>Trains due in next 90 minutes:</b><br>" +
trainData
.map(train => `
Train Code: ${train.trainCode}<br>
Origin: ${train.origin}<br>
Destination: ${train.destination}<br>
@ -34,12 +45,19 @@ const TrainStationPopup = ({ item, objectTitle }) => {
Punctuality: ${train.late > 0 ? `${train.late} minute${train.late === 1 ? "" : "s"} late` : train.late < 0 ? `${Math.abs(train.late)} minute${Math.abs(train.late) === 1 ? "" : "s"} early` : "On time"}<br>
Status: ${train.status}<br>
Last Location: ${train.lastLocation || "N/A"}<br><br>
`).join("");
`)
.join("");
} catch (error) {
trainInfoHtml = "No trains due in the next 90 minutes.";
}
setTrainInfo(trainInfoHtml);
} catch (error) {
setTrainInfo("No trains due in the next 90 minutes");
}
// Ensure the map pans to keep the popup in view even if an error occurs
setTimeout(() => {
map.panTo([item.latitude, item.longitude], { animate: true });
}, 300);
};
return (
@ -50,10 +68,28 @@ const TrainStationPopup = ({ item, objectTitle }) => {
<li><b>Train Station ID:</b> {item.trainStationID}</li>
<li><b>Train Station Code:</b> {item.trainStationCode}</li>
</ul>
<button onClick={fetchTrainData} style={{ padding: "5px", marginTop: "5px", cursor: "pointer", color: "white" }}>
<button
onClick={fetchTrainData}
style={{
padding: "5px",
marginTop: "5px",
cursor: "pointer",
color: "white",
background: "black",
border: "none",
borderRadius: "4px"
}}
>
Load incoming trains
</button>
<div dangerouslySetInnerHTML={{ __html: trainInfo }} style={{ marginTop: "10px" }}></div>
<div
dangerouslySetInnerHTML={{ __html: trainInfo }}
style={{
marginTop: "10px",
maxHeight: "200px", // limit popup height
overflowY: "auto" // enable scrolling
}}
></div>
</div>
);
};