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

[frontend]: Create IrishRailTrainPopup

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-14 20:42:19 +00:00
parent 92ee0aa2b2
commit bd09ebbc2d
2 changed files with 64 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/App.jsx
View File

@ -11,6 +11,7 @@ import LoadingOverlay from "./components/LoadingOverlay";
import LuasPopup from "./components/LuasPopup"; import LuasPopup from "./components/LuasPopup";
import TrainStationPopup from "./components/TrainStationPopup"; import TrainStationPopup from "./components/TrainStationPopup";
import IrishRailTrainPopup from "./components/IrishRailTrainPopup";
const TRANSIENT_DATA_API = "https://281bc6mcm5.execute-api.us-east-1.amazonaws.com/transient_data"; const TRANSIENT_DATA_API = "https://281bc6mcm5.execute-api.us-east-1.amazonaws.com/transient_data";
const PERMANENT_DATA_API = "https://a6y312dpuj.execute-api.us-east-1.amazonaws.com/permanent_data"; const PERMANENT_DATA_API = "https://a6y312dpuj.execute-api.us-east-1.amazonaws.com/permanent_data";
@ -247,18 +248,32 @@ function App() {
icon += "NotRunning"; icon += "NotRunning";
} }
// 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> {latenessMessage}</li>
// </ul>
// </div>
// );
popupContent = ( popupContent = (
<div> <IrishRailTrainPopup
<h3>{objectTitle}</h3> item={item}
<ul> objectTitle={objectTitle}
<li><b>Train Details:</b> {splitMessage[1].split("(")[0]}</li> splitMessage={splitMessage}
<li><b>Train Type:</b> {trainType}</li> trainType={trainType}
<li><b>Status:</b> {trainStatus}</li> trainStatus={trainStatus}
<li><b>Direction:</b> {item.trainDirection}</li> latenessMessage={latenessMessage}
<li><b>Update:</b> {splitMessage[2]}</li>
<li><b>Punctuality:</b> {latenessMessage}</li> toggleFavourite={toggleFavourite}
</ul> favourites={favourites}
</div> />
); );
markerText = item.trainPublicMessage + " " + item.trainDirection; markerText = item.trainPublicMessage + " " + item.trainDirection;

38
frontend/src/components/IrishRailTrainPopup.jsx Normal file
View File

@ -0,0 +1,38 @@
import React, { useState } from "react";
import { useMap } from "react-leaflet";
const IrishRailTrainPopup = ({ item, objectTitle, trainStatus, trainType, latenessMessage, splitMessage, 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
return (
<div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<h3>{objectTitle}</h3>
<button
onClick={handleToggleFavourite}
style={{ background: "white", border: "none", fontSize: "20px", cursor: "pointer" }}
>
{isFavourite ? "⭐" : "☆"}
</button>
</div>
<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> {latenessMessage}</li>
</ul>
</div>
);
};
export default IrishRailTrainPopup;