FE Sidebar, create & move requests, BE create controller

1 files changed, 88 insertions, 2 deletions

diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 6b43bf8..b8dd2c4 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -4,6 +4,7 @@ import { FadeLoader } from "react-spinners";
 import { io } from "socket.io-client";
 import CityMap from "../components/CityMap";
 import Header from "../components/Header";
+import Sidebar from "../components/Sidebar";
 import API_URL from "../config";
 import "../styles/dashboard.css";
 import type { ErrorResponse } from "../types/error";
@@ -11,7 +12,9 @@ import type { AuthorizedUser } from "../types/login";
 import type { Robot, RobotsResponse } from "../types/robot";
 
 function Dashboard() {
+    const [errorMessage, setErrorMessage] = useState<string>("");
     const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [isSimulationActive, setIsSimulationActive] = useState(false);
     const [robots, setRobots] = useState<Robot[]>([]);
 
     const navigate = useNavigate();
@@ -26,6 +29,73 @@ function Dashboard() {
         navigate("/login", { replace: true });
     }
 
+    async function handleStartAllRobots() {
+        setIsSimulationActive(true);
+
+        try {
+            const response = await fetch(`${API_URL}/robots/move`, {
+                method: "POST",
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    "Content-Type": "application/json",
+                },
+            });
+
+            if (!response.ok) {
+                const errorData: ErrorResponse = await response.json();
+                throw new Error(
+                    errorData.message || "Failed to set all robots moving."
+                );
+            }
+
+            console.log("All robots set moving.");
+        } catch (error) {
+            console.error("Error starting robots:", error);
+
+            if (error instanceof Error) {
+                setErrorMessage(error.message);
+            } else {
+                setErrorMessage("An unexpected error occurred.");
+            }
+
+            setIsSimulationActive(false);
+        }
+    }
+
+    async function handleStopAllRobots() {
+        setIsSimulationActive(false);
+
+        try {
+            const response = await fetch(`${API_URL}/robots/stop`, {
+                method: "POST",
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    "Content-Type": "application/json",
+                },
+            });
+
+            if (!response.ok) {
+                const errorData: ErrorResponse = await response.json();
+                throw new Error(
+                    errorData.message || "Failed to set all robots idle."
+                );
+            }
+
+            console.log("All robots set idle.");
+        } catch (error) {
+            console.error("Error stopping robots:", error);
+
+            if (error instanceof Error) {
+                setErrorMessage(error.message);
+            } else {
+                setErrorMessage("An unexpected error occurred.");
+            }
+
+            setIsSimulationActive(true);
+        }
+    }
+
+    // Request robot data from backend on component mount
     useEffect(() => {
 	// Additional safety check to protect this page from unauthorized access
         if (!token || token === "undefined" || token === "null") {
@@ -33,7 +103,6 @@ function Dashboard() {
             return;
         }
 
-        // Request robot data from backend
         async function fetchRobots() {
             try {
                 setIsLoading(true);
@@ -58,6 +127,13 @@ function Dashboard() {
                 setRobots(data.data);
             } catch (error) {
                 console.error("Failed to load the robots:", error);
+
+                if (error instanceof Error) {
+                    setErrorMessage(error.message);
+                } else {
+                    setErrorMessage("An unexpected error occurred.");
+                }
+
             } finally {
                 setIsLoading(false);
             }
@@ -83,10 +159,20 @@ function Dashboard() {
         <FadeLoader />
     ) : (
         <div className="dashboard-page">
-            <CityMap robots={robots} />
             <Header user={user} logout={handleLogout} />
+            <CityMap robots={robots} />
+            <Sidebar
+                activeSimulation={isSimulationActive}
+                errorMessage={errorMessage}
+                setErrorMessage={setErrorMessage}
+                token={token}
+                robots={robots}
+                onStartAllRobots={handleStartAllRobots}
+                onStopAllRobots={handleStopAllRobots}
+            />
         </div>
     );
 }
 
 export default Dashboard;
+