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

[frontend]: Create BusPopup

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-14 20:46:07 +00:00
parent ae61127e5a
commit 22159f4f88
2 changed files with 53 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/App.jsx
View File

@ -12,6 +12,7 @@ import LoadingOverlay from "./components/LoadingOverlay";
import LuasPopup from "./components/LuasPopup";
import TrainStationPopup from "./components/TrainStationPopup";
import IrishRailTrainPopup from "./components/IrishRailTrainPopup";
import BusPopup from "./components/BusPopup.jsx";
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";
@ -248,20 +249,6 @@ function App() {
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 = (
<IrishRailTrainPopup
item={item}
@ -307,16 +294,22 @@ function App() {
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>
<BusPopup
item={item}
objectTitle={objectTitle}
toggleFavourite={toggleFavourite}
favourites={favourites}
/>
// <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>
);
markerText = item.busRouteAgencyName + " " + item.busRouteShortName + " " + item.busRouteLongName;

36
frontend/src/components/BusPopup.jsx Normal file
View File

@ -0,0 +1,36 @@
import React, { useState } from "react";
import { useMap } from "react-leaflet";
const BusPopup = ({ item, objectTitle, toggleFavourite, favourites }) => {
const [isFavourite, setIsFavourite] = useState(favourites.Bus?.includes(item.busRoute));
const handleToggleFavourite = () => {
toggleFavourite("Bus", item.busRoute);
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>Bus ID:</b> {item.busID}</li>
<li><b>Route:</b> {item.busRoute}</li>
<li><b>Short Name:</b> {item.busRouteShortName}</li>
<li><b>Long Name:</b> {item.busRouteLongName}</li>
<li><b>Agency:</b> {item.busRouteAgencyName}</li>
</ul>
</div>
);
};
export default BusPopup;