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

[frontend]: Add pop-ups for all object types except Luas Stop

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-02 16:34:41 +00:00
parent 5a5a3a89fc
commit 8fcd883bb7
2 changed files with 153 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
frontend/src/App.jsx
View File

@ -27,11 +27,136 @@ function App() {
dataSources
.filter(({ id }) => selectedSources.includes(id))
.map(({ url }) => fetch(url).then((res) => res.json()))
)).flat().map(({ latitude, longitude, objectType }) => ({
coords: [latitude, longitude],
popup: objectType,
icon: objectType,
}));
))
.flat()
.map((item) => {
let icon = item.objectType;
let popupContent;
let objectTitle;
switch (item.objectType) {
case "IrishRailTrain":
objectTitle = "Irish Rail Train: " + item.trainCode;
let trainType;
switch (item.trainType) {
case "M":
trainType = "Mainline";
icon = "mainline";
break;
case "S":
trainType = "Suburban";
icon = "suburban";
break;
case "D":
trainType = "DART";
icon = "dart";
break;
default:
trainType = "Unknown";
}
let trainStatus;
switch (item.trainStatus) {
case "R":
trainStatus = "Running";
break;
default:
trainStatus = "Not running"
}
const splitMessage = item.trainPublicMessage.split("\\n");
const match = splitMessage[1].match(/\((.*?)\)/);
const punctuality = match ? match[1] : "N/A";
// set icon depending on lateness of train and type of train
if (trainStatus == "Not running") {
icon += "NotRunning";
}
else if (punctuality.charAt(0) === "-" || punctuality.charAt(0) === "0") {
icon += "OnTime";
}
else {
icon += "Late"
}
popupContent = (
<div>
<h3>{objectTitle}</h3>
<ul>
<li><b>Train Details:</b> {splitMessage[1].split("(")[0]}</li>
<li><b>Train Type:</b> {trainType}</li>
<li><b>Status:</b> {trainStatus}</li>
<li><b>Direction:</b> {item.trainDirection}</li>
<li><b>Update:</b> {splitMessage[2]}</li>
<li><b>Punctuality:</b> {punctuality}</li>
</ul>
</div>
);
break;
case "IrishRailStation":
objectTitle = item.trainStationDesc + " Train Station";
popupContent = (
<div>
<h3>{objectTitle}</h3>
<ul>
<li><b>Train Station Name:</b> {item.trainStationDesc}</li>
<li><b>Train Station ID:</b> {item.trainStationID}</li>
<li><b>Train Station Code:</b> {item.trainStationCode}</li>
</ul>
</div>
);
break;
case "Bus":
objectTitle = item.busRouteAgencyName + ": " + item.busRouteShortName;
popupContent = (
<div>
<h3>{objectTitle}</h3>
<ul>
<li><b>Bus ID:</b> {item.busID}</li>
<li><b>Bus Route ID:</b> {item.busRoute}</li>
<li><b>Bus Route Short Name:</b> {item.busRouteShortName}</li>
<li><b>Bus Route Long Name:</b> {item.busRouteLongName}</li>
<li><b>Agency: </b> {item.busRouteAgencyName}</li>
</ul>
</div>
);
break;
case "BusStop":
objectTitle = item.busStopName + " Bus Stop";
popupContent = (
<div>
<h3>{objectTitle}</h3>
<ul>
<li><b>Bus Stop ID:</b> {item.busStopID}</li>
<li><b>Bus Stop Name:</b> {item.busStopName}</li>
<li><b>Bus Stop Code:</b> {item.busStopCode || "N/A"}</li>
</ul>
</div>
);
break;
default:
popupContent = (
<div>
<h3>{item.objectType}</h3>
</div>
);
}
return {
coords: [item.latitude, item.longitude],
popup: popupContent,
icon: icon,
};
});
setMarkers(newMarkers);
} catch (error) {
console.error("Error fetching data:", error);