feat(ui): Display dock state as text

Hypfer · Feb 19, 2025 · 4e5dd10 · 4e5dd10
1 parent 8589852
commit 4e5dd10
Showing 1 changed file with 64 additions and 59 deletions.
diff --git a/frontend/src/controls/Dock.tsx b/frontend/src/controls/Dock.tsx
@@ -85,65 +85,70 @@ const Dock = (): React.ReactElement => {
         const { value: robotState } = robotStatus;
 
         return (
-            <Grid container direction="row" alignItems="center" spacing={1} pt={1}>
-                {
-                    mopDockCleanTriggerSupported &&
-                    <Grid item xs>
-                        <Button
-                            disabled={feedbackPending || commandIsExecuting || !["idle", "cleaning", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
-                            variant="outlined"
-                            size="medium"
-                            color="inherit"
-                            onClick={() => {
-                                const command = dockState === "cleaning" ? "stop" : "start";
-
-                                triggerMopDockCleanCommand(command);
-                                setFeedbackPending(true);
-                            }}
-                            sx={{width: "100%"}}
-                        >
-                            <StyledIcon as={CleanMopIcon} /> { dockState === "cleaning" ? "Stop" : "Clean" }
-                        </Button>
-                    </Grid>
-                }
-                {
-                    mopDockDryTriggerSupported &&
-                    <Grid item xs>
-                        <Button
-                            disabled={feedbackPending || commandIsExecuting || !["idle", "drying", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
-                            variant="outlined"
-                            size="medium"
-                            color="inherit"
-                            onClick={() => {
-                                const command = dockState === "drying" ? "stop" : "start";
-
-                                triggerMopDockDryCommand(command);
-                                setFeedbackPending(true);
-                            }}
-                            sx={{width: "100%"}}
-                        >
-                            <StyledIcon as={DryMopIcon} /> { dockState === "drying" ? "Stop" : "Dry" }
-                        </Button>
-                    </Grid>
-                }
-                {
-                    triggerEmptySupported &&
-                    <Grid item xs>
-                        <Button
-                            disabled={commandIsExecuting || robotState !== "docked"}
-                            variant="outlined"
-                            size="medium"
-                            color="inherit"
-                            onClick={() => {
-                                triggerDockEmpty();
-                            }}
-                            sx={{width: "100%"}}
-                        >
-                            <StyledIcon as={EmptyIcon} /> Empty
-                        </Button>
-                    </Grid>
-                }
-            </Grid>
+            <>
+                <Typography variant="overline">
+                    {dockState}
+                </Typography>
+                <Grid container direction="row" alignItems="center" spacing={1} pt={1}>
+                    {
+                        mopDockCleanTriggerSupported &&
+                        <Grid item xs>
+                            <Button
+                                disabled={feedbackPending || commandIsExecuting || !["idle", "cleaning", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
+                                variant="outlined"
+                                size="medium"
+                                color="inherit"
+                                onClick={() => {
+                                    const command = dockState === "cleaning" ? "stop" : "start";
+
+                                    triggerMopDockCleanCommand(command);
+                                    setFeedbackPending(true);
+                                }}
+                                sx={{width: "100%"}}
+                            >
+                                <StyledIcon as={CleanMopIcon} /> { dockState === "cleaning" ? "Stop" : "Clean" }
+                            </Button>
+                        </Grid>
+                    }
+                    {
+                        mopDockDryTriggerSupported &&
+                        <Grid item xs>
+                            <Button
+                                disabled={feedbackPending || commandIsExecuting || !["idle", "drying", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
+                                variant="outlined"
+                                size="medium"
+                                color="inherit"
+                                onClick={() => {
+                                    const command = dockState === "drying" ? "stop" : "start";
+
+                                    triggerMopDockDryCommand(command);
+                                    setFeedbackPending(true);
+                                }}
+                                sx={{width: "100%"}}
+                            >
+                                <StyledIcon as={DryMopIcon} /> { dockState === "drying" ? "Stop" : "Dry" }
+                            </Button>
+                        </Grid>
+                    }
+                    {
+                        triggerEmptySupported &&
+                        <Grid item xs>
+                            <Button
+                                disabled={commandIsExecuting || robotState !== "docked"}
+                                variant="outlined"
+                                size="medium"
+                                color="inherit"
+                                onClick={() => {
+                                    triggerDockEmpty();
+                                }}
+                                sx={{width: "100%"}}
+                            >
+                                <StyledIcon as={EmptyIcon} /> Empty
+                            </Button>
+                        </Grid>
+                    }
+                </Grid>
+            </>
         );
     }, [
         StyledIcon,