hello-robot · hello-binit · Oct 3, 2024 · Oct 3, 2024 · Oct 3, 2024 · Oct 21, 2024
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
     "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",
-        "@mui/icons-material": "^5.16.6",
-        "@mui/material": "^5.16.6",
+        "@mui/icons-material": "^6.1.2",
+        "@mui/material": "^6.1.2",
         "@types/createjs": "^0.0.29",
         "@types/react": "^18.0.34",
         "@types/react-dom": "^18.0.11",
@@ -43,7 +43,8 @@
     "scripts": {
         "firebase": "webpack --mode development --progress --env storage='firebase'",
         "localstorage": "webpack --mode development --progress --env storage='localstorage'",
-        "styleguide": "styleguidist server"
+        "styleguide": "styleguidist server",
+        "build": "webpack --mode production --progress --env storage='firebase'"
     },
     "eslintConfig": {
         "extends": [

diff --git a/server.js b/server.js
@@ -54,6 +54,18 @@ io.on("connect_error", (err) => {
     console.log(`connect_error due to ${err.message}`);
 });
 
+let protocol = undefined; // TODO(binit): ensure robot/operator protocol match
+let status = "offline"; // ["online", "offline", "occupied"]
+function updateRooms() {
+    io.emit("update_rooms", {
+        robot_id: {
+            name: process.env.HELLO_FLEET_ID,
+            protocol: protocol,
+            status: status,
+        },
+    });
+}
+
 io.on("connection", function (socket) {
     console.log("new socket.io connection");
     // console.log('socket.handshake = ');
@@ -68,10 +80,23 @@ io.on("connection", function (socket) {
         ) {
             socket.join(room);
             socket.emit("join", room, socket.id);
+            status = "online";
         } else {
             console.log("room full");
             socket.emit("full", room);
+            status = "occupied";
+        }
+        updateRooms();
+    });
+
+    socket.on("list_rooms", () => {
+        if (
+            io.sockets.adapter.rooms.get("robot") &&
+            io.sockets.adapter.rooms.get("robot").size >= 2
+        ) {
+            status = "occupied";
         }
+        updateRooms();
     });
 
     socket.on("add operator to robot room", (callback) => {
@@ -85,10 +110,13 @@ io.on("connection", function (socket) {
                 console.log("could not connect because robot room is full");
                 callback({ success: false });
             }
+            status = "occupied";
         } else {
             console.log("could not connect because robot is not available");
             callback({ success: false });
+            status = "offline";
         }
+        updateRooms();
     });
 
     socket.on("signalling", function (message) {

diff --git a/src/pages/home/css/CallRobotSelector.css b/src/pages/home/css/CallRobotSelector.css
@@ -0,0 +1,3 @@
+.rs-container {
+    overflow: auto;
+}
diff --git a/src/pages/home/css/Changelog.css b/src/pages/home/css/Changelog.css
@@ -0,0 +1,3 @@
+.cv-container {
+    overflow: auto;
+}
diff --git a/src/pages/home/css/LoginView.css b/src/pages/home/css/LoginView.css
@@ -0,0 +1,3 @@
+.lv-container {
+    padding: 20px;
+}
diff --git a/src/pages/home/css/SideBySideView.css b/src/pages/home/css/SideBySideView.css
@@ -0,0 +1,3 @@
+.sbs-container {
+    padding: 20px;
+}
diff --git a/src/pages/home/css/index.css b/src/pages/home/css/index.css
@@ -0,0 +1,24 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: rgb(245, 245, 245);
+}
+
+html,
+body {
+    height: 100%;
+    margin: 0;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+        monospace;
+}
+
+#root {
+    margin: 0;
+    height: 100%;
+}
diff --git a/src/pages/home/html/index.html b/src/pages/home/html/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Home - Stretch Web Teleop</title>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
diff --git a/src/pages/home/tsx/components/CallRobotSelector.tsx b/src/pages/home/tsx/components/CallRobotSelector.tsx
@@ -0,0 +1,168 @@
+import "home/css/CallRobotSelector.css";
+import React, { useEffect, useState } from "react";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import CardActions from "@mui/material/CardActions";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import CircleIcon from "@mui/icons-material/Circle";
+import { green, red, yellow, grey } from "@mui/material/colors";
+import { loginHandler } from "../index";
+
+function get_indicator_text(status_str) {
+    switch (status_str) {
+        case "online":
+            return "Online";
+        case "offline":
+            return "Offline";
+        case "occupied":
+            return "Occupied";
+        default:
+            return "Unknown";
+    }
+}
+
+function get_indicator(status_str) {
+    let statusui;
+    switch (status_str) {
+        case "online":
+            statusui = {
+                color_name: "green",
+                color: green,
+            };
+            break;
+        case "offline":
+            statusui = {
+                color_name: "red",
+                color: red,
+            };
+            break;
+        case "occupied":
+            statusui = {
+                color_name: "yellow",
+                color: yellow,
+            };
+            break;
+        default:
+            statusui = {
+                color_name: "grey",
+                color: grey,
+            };
+    }
+    let indicator_css = {
+        fontSize: 12,
+        color: statusui["color"]["A400"],
+        animation: `glowing_${statusui["color_name"]} 3s linear infinite`,
+    };
+    indicator_css[`@keyframes glowing_${statusui["color_name"]}`] = {
+        "0%": {
+            color: statusui["color"]["A400"],
+        },
+        "50%": {
+            color: statusui["color"]["A200"],
+        },
+        "100%": {
+            color: statusui["color"]["A400"],
+        },
+    };
+    return <CircleIcon sx={indicator_css} />;
+}
+
+function get_action(status_str, robot_name) {
+    switch (status_str) {
+        case "online":
+            return (
+                <Button
+                    href={`/operator/${robot_name}`}
+                    variant="contained"
+                    size="small"
+                >
+                    Call Robot
+                </Button>
+            );
+        case "offline":
+            return (
+                <Button
+                    href={`/operator/${robot_name}`}
+                    variant="contained"
+                    size="small"
+                    disabled
+                >
+                    Call Robot
+                </Button>
+            );
+        case "occupied":
+            return (
+                <Button
+                    href={`/operator/${robot_name}`}
+                    variant="contained"
+                    size="small"
+                    disabled
+                >
+                    Call Robot
+                </Button>
+            );
+        default:
+            return (
+                <Button
+                    href={`/operator/${robot_name}`}
+                    variant="contained"
+                    size="small"
+                    disabled
+                >
+                    Call Robot
+                </Button>
+            );
+    }
+}
+
+const CallRobotItem = (props: { name: String; status: String }) => {
+    return (
+        <Card sx={{ minWidth: 275 }}>
+            <CardContent>
+                <Typography variant="h5" component="div">
+                    {props.name}
+                </Typography>
+                <Typography sx={{ color: "text.secondary", mb: 1.5 }}>
+                    {get_indicator(props.status)}{" "}
+                    {get_indicator_text(props.status)}
+                </Typography>
+            </CardContent>
+            <CardActions>{get_action(props.status, props.name)}</CardActions>
+        </Card>
+    );
+};
+
+export const CallRobotSelector = (props: { style?: React.CSSProperties }) => {
+    const [callableRobots, setCallableRobots] = useState({});
+
+    useEffect(() => {
+        loginHandler.listRooms(setCallableRobots);
+    }, [props]);
+
+    return (
+        <Box sx={{ flexGrow: 1 }}>
+            <h2>Robots:</h2>
+            <Grid
+                container
+                spacing={2}
+                className="rs-container"
+                style={props.style}
+            >
+                {Object.entries(callableRobots).map(([key, value], idx) => {
+                    return (
+                        <Grid key={idx} size={{ md: 12, lg: 6 }}>
+                            <CallRobotItem
+                                key={idx}
+                                name={value["name"]}
+                                status={value["status"]}
+                            />
+                        </Grid>
+                    );
+                })}
+            </Grid>
+        </Box>
+    );
+};