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);

23
frontend/src/components/MapComponent.jsx
View File

@ -8,7 +8,17 @@ import "leaflet.markercluster/dist/MarkerCluster.Default.css";
import trainStationIconURL from "../assets/icons/train-station.png";
import trainIconURL from "../assets/icons/train.png";
import trainNotRunningIconURL from "../assets/icons/trainNotRunning.png";
import trainOnTimeIconURL from "../assets/icons/train_ontime.png";
import trainLateIconURL from "../assets/icons/train_late.png";
import dartNotRunningIconURL from "../assets/icons/DARTnotRunning.png";
import dartOnTimeIconURL from "../assets/icons/DARTOnTime.png";
import dartLateIconURL from "../assets/icons/DARTLate.png";
import luasIconURL from "../assets/icons/tram-station.png";
import busStopIconURL from "../assets/icons/bus-station.png";
import busIconURL from "../assets/icons/bus.png";
@ -23,6 +33,19 @@ L.Icon.Default.mergeOptions({
const icons = new Map([
["IrishRailStation", new Icon({ iconUrl: trainStationIconURL, iconSize: [24, 24] })],
["IrishRailTrain", new Icon({ iconUrl: trainIconURL, iconSize: [38, 38] })],
["mainlineNotRunning", new Icon({ iconUrl: trainNotRunningIconURL, iconSize: [38, 38] })],
["mainlineOnTime", new Icon({ iconUrl: trainOnTimeIconURL, iconSize: [38, 38] })],
["mainlineLate", new Icon({ iconUrl: trainLateIconURL, iconSize: [38, 38] })],
["suburbanNotRunning", new Icon({ iconUrl: trainNotRunningIconURL, iconSize: [38, 38] })],
["suburbanOnTime", new Icon({ iconUrl: trainOnTimeIconURL, iconSize: [38, 38] })],
["suburbanLate", new Icon({ iconUrl: trainLateIconURL, iconSize: [38, 38] })],
["dartNotRunning", new Icon({ iconUrl: dartNotRunningIconURL, iconSize: [38, 38] })],
["dartOnTime", new Icon({ iconUrl: dartOnTimeIconURL, iconSize: [38, 38] })],
["dartLate", new Icon({ iconUrl: dartLateIconURL, iconSize: [38, 38] })],
["LuasStop", new Icon({ iconUrl: luasIconURL, iconSize: [38, 38] })],
["BusStop", new Icon({ iconUrl: busStopIconURL, iconSize: [24, 24] })],
["Bus", new Icon({ iconUrl: busIconURL, iconSize: [38, 38] })],