[frontend]: Add Luas pop-up

Getting blocked by CORS though 🙄

frontend/src/App.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Sidebar from "./components/Sidebar";
 import MapComponent from "./components/MapComponent";
 import LoadingOverlay from "./components/LoadingOverlay";
+import LuasPopup from "./components/LuasPopup";
 
 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";
@@ -143,6 +144,26 @@ function App() {
                             );
                             break;
 
+                        case "LuasStop":
+                            objectTitle = item.luasStopName + " Luas Stop";
+                            let luasLine;
+
+                            switch (item.luasStopLineID) {
+                                case "1":
+                                    luasLine = "Green Line";
+                                    break;
+                                case "2":
+                                    luasLine = "Red Line";
+                                    break;
+                                default:
+                                    luasLine = "N/A";
+                            }
+
+                            popupContent = (
+                                <LuasPopup item={item} objectTitle={objectTitle} luasLine={luasLine} />
+                            );
+                            break;
+
                         default:
                             popupContent = (
                                 <div>

frontend/src/components/LuasPopup.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+
+const LuasPopup = ({ item, objectTitle, luasLine }) => {
+    const [luasInfo, setLuasInfo] = useState("");
+
+    const fetchLuasData = async () => {
+        try {
+            const response = await fetch(`http://luasforecasts.rpa.ie/xml/get.ashx?action=forecast&stop=${item.luasStopCode}&encrypt=false`);
+            const text = await response.text();
+            const parser = new DOMParser();
+            const xml = parser.parseFromString(text, "text/xml");
+            const trams = Array.from(xml.getElementsByTagName("tram"));
+
+            if (trams.length === 0) {
+                setLuasInfo("No trams available");
+                return;
+            }
+
+            const tramInfo = trams.map(tram => `Destination: ${tram.getAttribute("destination")}, Arrival: ${tram.getAttribute("dueMins")} mins`).join("<br>");
+            setLuasInfo(tramInfo);
+        } catch (error) {
+            setLuasInfo("Failed to fetch Luas data");
+        }
+    };
+
+    return (
+        <div>
+            <h3>{objectTitle}</h3>
+            <ul>
+                <li><b>Luas Stop Name:</b> {item.luasStopName} / {item.luasStopIrishName}</li>
+                <li><b>Line:</b> {luasLine}</li>
+                <li><b>Stop ID:</b> {item.luasStopID}</li>
+                <li><b>Park & ride?:</b> {(item.luasStopIsParkAndRide === "1") ? "Yes" : "No"}</li>
+                <li><b>Cycle & ride?:</b> {(item.luasStopIsCycleAndRide === "1") ? "Yes" : "No"}</li>
+                <li><b>Operational?:</b> {(item.luasStopIsEnabled === "1") ? "Yes" : "No"}</li>
+            </ul>
+            <button onClick={fetchLuasData} style={{ padding: "5px", marginTop: "5px", cursor: "pointer" }}>
+                Load Luas Schedule
+            </button>
+            <div dangerouslySetInnerHTML={{ __html: luasInfo }} style={{ marginTop: "10px" }}></div>
+        </div>
+    );
+};
+
+export default LuasPopup;