diff --git a/src/pages/ConnectedRobots/ConnectedRobots.tsx b/src/pages/ConnectedRobots/ConnectedRobots.tsx index 45559dd..abce238 100644 --- a/src/pages/ConnectedRobots/ConnectedRobots.tsx +++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx @@ -1,4 +1,5 @@ import { useEffect } from 'react' +import Logging from '../Logging/Logging'; // Define the robot type type Robot = { @@ -14,20 +15,21 @@ type ConnectedRobotsProps = { }; export default function ConnectedRobots({ - connectedRobots, setConnectedRobots}: ConnectedRobotsProps) { - + connectedRobots, setConnectedRobots }: ConnectedRobotsProps) { + 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.") + console.log(`Missing robot id in connection request. + Use format: 'data: {event = 'robot_connected', id = , (optional) name = , (optional) port = }'.`) return () => eventSource.close(); } @@ -46,13 +48,23 @@ export default function ConnectedRobots({ if (data.event === "robot_disconnected") { // Safeguard id in request. if (data.id === null || data.id === undefined) { - console.log("Missing robot id in connection request.") + console.log("Missing robot id in connection request. Use format: 'data: {event = 'robot_disconnected', id = }'."); return () => eventSource.close(); } // Filter out same ids (should only be one) setConnectedRobots(robots => robots.filter(robot => robot.id !== data.id)); } + if (data.event === "robot_list") { + if (data.list === null || data.list === undefined) { + console.log("Missing list in robot_list request. Use format: 'data: {event = 'robot_list', list = }'."); + return () => eventSource.close(); + } + + // Set the robot list to the one found in CB + setConnectedRobots(data.list); + } + } catch { console.log("Unparsable SSE message:", event.data); } @@ -77,8 +89,52 @@ export default function ConnectedRobots({
+ // Let's test the reload function. + const example_list = [{ id: "pepper_robot1", name: "Pepper1", port: 1234 }, + { id: "pepper_robot2", name: "Pepper2", port: 1235 }, + { id: "pepper_robot3", name: "Pepper3", port: 1236 }, + { id: "pepper_robot4", name: "Pepper4", port: 1237 }] + + const example_event = `{ + "event": "robot_list", "list": + [{ "id": "pepper_robot1", + "name": "Pepper1", + "port": 1234 },{ + + "id": "pepper_robot2", + "name": "Pepper2", + "port": 1235 },{ + + "id": "pepper_robot3", + "name": "Pepper3", + "port": 1236 }, { + + "id": "pepper_robot4", + "name": "Pepper4", + "port": 1237 }]}` + + // Now let's put it through the same steps as the event would do. :) + try { + const data = JSON.parse(example_event); + if (data.event === "robot_list") { + if (data.list === null || data.list === undefined) { + console.log("Missing list in robot_list request. Use format: 'data: {event = 'robot_list', list = }'."); + return; + } + // Check if it is as expected. + if (JSON.stringify(data.list) !== JSON.stringify(example_list)) { + console.log("Dummy reload failed: list don't match.") + } + else { + console.log("Dummy reload succes!!") + } + } else { + console.log("Dummy reload failed, didn't parse to 'data.event === 'robot_list'.'") + } + } catch { + console.log("Dummy reload failed: didnt parse correctly.") + } + }}>Dummy Reload from CB