57 lines
2.1 KiB
JavaScript
57 lines
2.1 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useMap } from "react-leaflet";
|
|
|
|
const IrishRailTrainPopup = ({ item, objectTitle, toggleFavourite, favourites }) => {
|
|
const [isFavourite, setIsFavourite] = useState(favourites.IrishRailTrain?.includes(item.trainCode));
|
|
|
|
const handleToggleFavourite = () => {
|
|
toggleFavourite("IrishRailTrain", item.trainCode);
|
|
setIsFavourite((prev) => !prev);
|
|
};
|
|
|
|
const map = useMap(); // Access the Leaflet map instance
|
|
|
|
let averagePunctuality = "";
|
|
if (item.averagePunctuality > 1) {
|
|
averagePunctuality = item.averagePunctuality + " minutes late";
|
|
}
|
|
else if (item.averagePunctuality == 1) {
|
|
averagePunctuality = item.averagePunctuality + " minute late";
|
|
}
|
|
else if (item.averagePunctuality == 0) {
|
|
averagePunctuality = "On time";
|
|
}
|
|
else if (item.averagePunctuality < -1) {
|
|
averagePunctuality = - item.averagePunctuality + " minutes early";
|
|
}
|
|
else if (item.averagePunctuality == -1) {
|
|
averagePunctuality = - item.averagePunctuality + " minute late";
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
<h3>{objectTitle}</h3>
|
|
<button
|
|
onClick={handleToggleFavourite}
|
|
style={{background: "white", border: "none", fontSize: "1.1em", cursor: "pointer"}}
|
|
>
|
|
{isFavourite ? "⭐" : "☆"}
|
|
</button>
|
|
</div>
|
|
<ul>
|
|
<li><b>Train Details:</b> {item.trainDetails}</li>
|
|
<li><b>Train Type:</b> {item.trainTypeFull}</li>
|
|
<li><b>Status:</b> {item.trainStatusFull}</li>
|
|
<li><b>Direction:</b> {item.trainDirection}</li>
|
|
<li><b>Update:</b> {item.trainUpdate}</li>
|
|
<li><b>Punctuality:</b> {item.latenessMessage}</li>
|
|
<li><b>Average Punctuality:</b> {averagePunctuality}</li>
|
|
</ul>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default IrishRailTrainPopup;
|