src/App.tsx

@@ -3,6 +3,7 @@ import './App.css'
 import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
 import ServerComms from './pages/ServerComms/ServerComms.tsx'
+import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
 import Logging from './pages/Logging/Logging.tsx'
 import VisProg from "./pages/VisProgPage/VisProg.tsx";
 
@@ -18,6 +19,7 @@ function App(){
         <Route path="/ServerComms" element = {<ServerComms />} />
         <Route path="/visprog" element={<VisProg />} />
         <Route path="/logging" element = {<Logging />} />
+        <Route path="/ConnectedRobots" element = {<ConnectedRobots />} />
       </Routes>
     </div>
   )

src/pages/ConnectedRobots/ConnectedRobots.tsx

@@ -0,0 +1,116 @@
+import { mergeAriaLabelConfig } from '@xyflow/system';
+import { useState, useEffect } from 'react'
+
+// Define the robot type
+type Robot = {
+  id: string;
+  name: string;
+  port: number;
+};
+
+export default function ConnectedRobots() {
+  const [connectedRobots, setConnectedRobots] = useState<Robot[]>([]);
+
+  useEffect(() => {
+    const eventSource = new EventSource("http://localhost:8000/sse");
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+
+        // Example: data = { event: "robot_connected", id: "pepper_robot1", name: "Pepper", port: 1234 }
+        if (data.event === "robot_connected") {
+
+          // Safeguard id in request.
+          if (data.id === null || data.id === undefined) {
+            console.log("Missing robot id in connection request.")
+            return () => eventSource.close();
+          }
+
+          // Safeguard duplicates
+          if (connectedRobots.some(robot => robot.id === data.id))
+            console.log("connection request was sent for id: ", data.id,
+              " however this id was already present at current time");
+
+          // Add to connected robots while checking name and port for undefineds.
+          else {
+            const name = data.name ?? "no given name";
+            const port = typeof data.port === "number" ? data.port : -1;
+            setConnectedRobots(robots => [...robots, { id: data.id, name: name, port: port }]);
+          }
+        }
+        if (data.event === "robot_disconnected") {
+          // Safeguard id in request.
+          if (data.id === null || data.id === undefined) {
+            console.log("Missing robot id in connection request.")
+            return () => eventSource.close();
+          }
+
+          // Filter out same ids (should only be one)
+          setConnectedRobots(robots => robots.filter(robot => robot.id !== data.id));
+        }
+      } catch {
+        console.log("Unparsable SSE message:", event.data);
+      }
+    };
+    return () => eventSource.close();
+  }, [connectedRobots]);
+
+  return (
+    <div>
+      <h1>Robots Connected</h1>
+      <div>
+        <h2>Connected Robots</h2>
+        <ul>
+          {connectedRobots.map(robot =>
+            <li key={robot.id}>
+              <strong>{robot.name}</strong> (ID: {robot.id}, Port: {robot.port === -1 ? "No given port" : robot.port})
+            </li>
+          )}
+        </ul>
+      </div>
+      <div className={"flex-col gap-lg"}>
+        <div className={"flex-row gap-md justify-center"}>
+          <button onClick={() => {
+            // Reload from CB database (other ticket)
+          }}>Reload from CB</button>
+          <button onClick={() => {
+            // Example dummy robots
+            const connection_dummies: Robot[] = [
+              { id: "pepper_robot1", name: "Pepper One", port: 8001 },
+              { id: "pepper_robot2", name: "Pepper Two", port: 8002 },
+              { id: "naoqi_robot1", name: "Naoqi One", port: 9001 },
+              { id: "naoqi_robot2", name: "Naoqi Two", port: 9002 },
+              { id: "noport1", name: "I dont have a port in my request >:)", port: -1},
+              { id: "noname1", name: "no given name", port: 2001}
+            ];
+            const randomIndex = Math.floor(Math.random() * connection_dummies.length);
+            const randomConnectionDummy = connection_dummies[randomIndex];
+
+            if (connectedRobots.some(robot => robot.id === randomConnectionDummy.id))
+              console.log("connection request was sent for id: ", randomConnectionDummy.id,
+                " however this id was already present at current time");
+            else
+              setConnectedRobots(robots => [...robots, randomConnectionDummy]);
+          }}>'Sent connected event'</button>
+          <button onClick={() => {
+            const disconnection_dummies = [
+              { id: "pepper_robot1" },
+              { id: "pepper_robot2" },
+              { id: "naoqi_robot1" },
+              { id: "naoqi_robot2" },
+              { id: "noport1", name: "I dont have a port in my request >:)", port: -1},
+              { id: "noname1", name: "no given name", port: 2001}
+            ];
+            const randomIndex = Math.floor(Math.random() * disconnection_dummies.length);
+            const randomDisconnectionDummy = disconnection_dummies[randomIndex];
+
+            setConnectedRobots(robots => robots.filter(robot => robot.id !== randomDisconnectionDummy.id));
+          }}>'Sent disconnected event'</button>
+          <button onClick={() => {
+            setConnectedRobots([]);
+          }}>Reset</button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Home/Home.tsx

@@ -14,6 +14,7 @@ function Home() {
         <Link to={"/ServerComms"}>Robot interaction →</Link>
         <Link to={"/visprog"}>Node editor →</Link>
         <Link to={"/logging"}>Logs →</Link>
+        <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
       </div>
     </>
   )