pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: dummy reload from CB added.

Browse Source 
ref: N25B-153
This commit is contained in:
Björn Otgaar
2025-10-08 17:41:29 +02:00
parent 1a0fd92e0f
commit fa046e6b2a
1 changed files with 67 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/pages/ConnectedRobots/ConnectedRobots.tsx
View File

@@ -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 = <id>, (optional) name = <name>, (optional) port = <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 = <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 = <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({
<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>
// 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 = <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</button>
<button onClick={() => {
// Example dummy robots
const connection_dummies: Robot[] = [
@@ -86,8 +142,8 @@ export default function ConnectedRobots({
{ 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}
{ 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];
@@ -105,8 +161,8 @@ export default function ConnectedRobots({
{ 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}
{ 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];