[frontend]: Add pop-ups for all object types except Luas Stop
This commit is contained in:
@ -27,11 +27,136 @@ function App() {
|
|||||||
dataSources
|
dataSources
|
||||||
.filter(({ id }) => selectedSources.includes(id))
|
.filter(({ id }) => selectedSources.includes(id))
|
||||||
.map(({ url }) => fetch(url).then((res) => res.json()))
|
.map(({ url }) => fetch(url).then((res) => res.json()))
|
||||||
)).flat().map(({ latitude, longitude, objectType }) => ({
|
))
|
||||||
coords: [latitude, longitude],
|
.flat()
|
||||||
popup: objectType,
|
.map((item) => {
|
||||||
icon: objectType,
|
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);
|
setMarkers(newMarkers);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching data:", error);
|
console.error("Error fetching data:", error);
|
||||||
|
|||||||
@ -8,7 +8,17 @@ import "leaflet.markercluster/dist/MarkerCluster.Default.css";
|
|||||||
|
|
||||||
import trainStationIconURL from "../assets/icons/train-station.png";
|
import trainStationIconURL from "../assets/icons/train-station.png";
|
||||||
import trainIconURL from "../assets/icons/train.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 luasIconURL from "../assets/icons/tram-station.png";
|
||||||
|
|
||||||
import busStopIconURL from "../assets/icons/bus-station.png";
|
import busStopIconURL from "../assets/icons/bus-station.png";
|
||||||
import busIconURL from "../assets/icons/bus.png";
|
import busIconURL from "../assets/icons/bus.png";
|
||||||
|
|
||||||
@ -23,6 +33,19 @@ L.Icon.Default.mergeOptions({
|
|||||||
const icons = new Map([
|
const icons = new Map([
|
||||||
["IrishRailStation", new Icon({ iconUrl: trainStationIconURL, iconSize: [24, 24] })],
|
["IrishRailStation", new Icon({ iconUrl: trainStationIconURL, iconSize: [24, 24] })],
|
||||||
["IrishRailTrain", new Icon({ iconUrl: trainIconURL, iconSize: [38, 38] })],
|
["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] })],
|
["LuasStop", new Icon({ iconUrl: luasIconURL, iconSize: [38, 38] })],
|
||||||
["BusStop", new Icon({ iconUrl: busStopIconURL, iconSize: [24, 24] })],
|
["BusStop", new Icon({ iconUrl: busStopIconURL, iconSize: [24, 24] })],
|
||||||
["Bus", new Icon({ iconUrl: busIconURL, iconSize: [38, 38] })],
|
["Bus", new Icon({ iconUrl: busIconURL, iconSize: [38, 38] })],
|
||||||
|
|||||||
Reference in New Issue
Block a user