feat(ui): Wifi configuration (#1116)

Hypfer · Oct 1, 2021 · 3e71184 · 3e71184
1 parent 36a3bae
commit 3e71184
Show file tree

Hide file tree

Showing 8 changed files with 290 additions and 26 deletions.
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
@@ -29,6 +29,7 @@ import {
     ValetudoVersion,
     VoicePackManagementCommand,
     VoicePackManagementStatus,
+    WifiConfiguration,
     Zone,
     ZonePreset,
     ZoneProperties,
@@ -616,3 +617,21 @@ export const sendDoNotDisturbConfiguration = async (configuration: DoNotDisturbC
             }
         });
 };
+
+export const fetchWifiConfiguration = async (): Promise<WifiConfiguration> => {
+    return valetudoAPI
+        .get<WifiConfiguration>(`/robot/capabilities/${Capability.WifiConfiguration}`)
+        .then(({ data }) => {
+            return data;
+        });
+};
+
+export const sendWifiConfiguration = async (configuration: WifiConfiguration): Promise<void> => {
+    await valetudoAPI
+        .put(`/robot/capabilities/${Capability.WifiConfiguration}`, configuration)
+        .then(({ status }) => {
+            if (status !== 200) {
+                throw new Error("Could not set Wifi configuration");
+            }
+        });
+};
diff --git a/frontend/src/api/hooks.ts b/frontend/src/api/hooks.ts
@@ -39,6 +39,7 @@ import {
     fetchValetudoLog,
     fetchValetudoLogLevel,
     fetchVoicePackManagementState,
+    fetchWifiConfiguration,
     fetchZonePresets,
     fetchZoneProperties,
     sendAutoEmptyDockAutoEmptyControlEnable,
@@ -66,6 +67,7 @@ import {
     sendValetudoEventInteraction,
     sendValetudoLogLevel,
     sendVoicePackManagementCommand,
+    sendWifiConfiguration,
     subscribeToLogMessages,
     subscribeToMap,
     subscribeToStateAttributes,
@@ -89,6 +91,7 @@ import {
     Timer,
     ValetudoEventInteractionContext,
     VoicePackManagementCommand,
+    WifiConfiguration,
     Zone,
 } from "./types";
 import {MutationFunction} from "react-query/types/core/types";
@@ -124,6 +127,7 @@ enum CacheKey {
     ObstacleAvoidance = "obstacle_avoidance",
     AutoEmptyDockAutoEmpty = "auto_empty_dock_auto_empty",
     DoNotDisturb = "do_not_disturb",
+    Wifi = "wifi",
 }
 
 const useOnCommandError = (capability: Capability): ((error: unknown) => void) => {
@@ -769,3 +773,19 @@ export const useDoNotDisturbConfigurationMutation = () => {
         }
     );
 };
+
+export const useWifiConfigurationQuery = () => {
+    return useQuery(CacheKey.Wifi, fetchWifiConfiguration, {
+        staleTime: Infinity
+    });
+};
+
+export const useWifiConfigurationMutation = () => {
+    return useValetudoFetchingMutation(
+        useOnCommandError(Capability.WifiConfiguration),
+        CacheKey.Wifi,
+        (configuration: WifiConfiguration) => {
+            return sendWifiConfiguration(configuration).then(fetchWifiConfiguration);
+        }
+    );
+};
diff --git a/frontend/src/api/types.ts b/frontend/src/api/types.ts
@@ -295,3 +295,21 @@ export interface DoNotDisturbConfiguration {
     start: DoNotDisturbTime;
     end: DoNotDisturbTime;
 }
+
+export interface WifiConfiguration {
+    ssid?: string;
+    credentials?: {
+        type: "wpa2_psk";
+        typeSpecificSettings: {
+            password: string;
+        };
+    }
+    details?: {
+        state: "connected" | "not_connected" | "unknown";
+        downspeed?: number;
+        upspeed?: number;
+        signal?: number;
+        ips: string[];
+        frequency: "2.4ghz" | "5ghz";
+    };
+}
diff --git a/frontend/src/components/ConfirmationDialog.tsx b/frontend/src/components/ConfirmationDialog.tsx
@@ -3,8 +3,9 @@ import React, {FunctionComponent} from "react";
 
 interface YesNoDialogProps {
     title: string;
-    text: string;
+    text?: string;
     open: boolean;
+    children?: React.ReactNode;
     onClose: () => void;
     onAccept: () => void;
 }
@@ -13,6 +14,7 @@ const ConfirmationDialog: FunctionComponent<YesNoDialogProps> = ({
     title,
     text,
     open,
+    children,
     onClose,
     onAccept,
 }): JSX.Element => {
@@ -25,9 +27,12 @@ const ConfirmationDialog: FunctionComponent<YesNoDialogProps> = ({
                 {title}
             </DialogTitle>
             <DialogContent>
-                <DialogContentText>
-                    {text}
-                </DialogContentText>
+                {text && (
+                    <DialogContentText>
+                        {text}
+                    </DialogContentText>
+                )}
+                {children}
             </DialogContent>
             <DialogActions>
                 <Button onClick={() => {

diff --git a/frontend/src/components/ReloadableCard.tsx b/frontend/src/components/ReloadableCard.tsx
@@ -41,14 +41,14 @@ const ReloadableCard: FunctionComponent<ReloadableCardProps> = ({
                         </Typography>
                     </Grid>
                     <Grid item>
-                        {reloadButton || (
+                        {reloadButton || (onReload && (
                             <TopRightIconButton loading={loading} onClick={onReload}>
                                 <RefreshIcon/>
                             </TopRightIconButton>
-                        )}
+                        ))}
                     </Grid>
                 </Grid>
-                {divider && <Divider/>}
+                {divider && <Divider sx={{mb: 1}}/>}
                 {children}
             </CardContent>
         </Card>

diff --git a/frontend/src/robot/capabilities/Capabilities.tsx b/frontend/src/robot/capabilities/Capabilities.tsx
@@ -6,9 +6,10 @@ import Switches from "./Switches";
 import VoicePackManagement from "./VoicePackManagement";
 import DoNotDisturb from "./DoNotDisturb";
 import {CapabilityContainer} from "./CapabilityLayout";
+import Wifi from "./Wifi";
 
 const Capabilities = (): JSX.Element => {
-    const components = [Switches, Speaker, VoicePackManagement, DoNotDisturb, MapDataManagement];
+    const components = [Switches, Speaker, VoicePackManagement, DoNotDisturb, Wifi, MapDataManagement];
     return (
         <Container>
             <CapabilityContainer>

diff --git a/frontend/src/robot/capabilities/CapabilityLayout.tsx b/frontend/src/robot/capabilities/CapabilityLayout.tsx
@@ -1,15 +1,15 @@
 import React from "react";
-import {Card, CardContent, Divider, Grid, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
-import LoadingFade from "../../components/LoadingFade";
+import {Grid, useMediaQuery, useTheme} from "@mui/material";
 import MasonryItem from "@mui/lab/MasonryItem";
 import Masonry from "@mui/lab/Masonry";
+import ReloadableCard from "../../components/ReloadableCard";
 
 const useWideLayout = (): boolean => {
     const theme = useTheme();
     return useMediaQuery(theme.breakpoints.up("md"));
 };
 
-export const CapabilityContainer: React.FunctionComponent<{children: React.ReactNode}> = ({children}): JSX.Element => {
+export const CapabilityContainer: React.FunctionComponent<{ children: React.ReactNode }> = ({children}): JSX.Element => {
     const wideLayout = useWideLayout();
     if (wideLayout && children) {
         return (
@@ -26,26 +26,17 @@ export const CapabilityContainer: React.FunctionComponent<{children: React.React
     }
 };
 
-export const CapabilityItem: React.FunctionComponent<{ children: React.ReactNode, title: string, loading?: boolean }> = ({
+export const CapabilityItem: React.FunctionComponent<{ children: React.ReactNode, title: string, loading?: boolean, onReload?: () => void }> = ({
     children,
     title,
-    loading = false
+    onReload,
+    loading = false,
 }): JSX.Element => {
     const wideLayout = useWideLayout();
-
     const content = (
-        <Card>
-            <CardContent>
-                <Stack direction="row" spacing={2} alignItems="center">
-                    <Typography variant="h6" gutterBottom>
-                        {title}
-                    </Typography>
-                    <LoadingFade in={loading} size={20}/>
-                </Stack>
-                <Divider sx={{mb: 1}}/>
-                {children}
-            </CardContent>
-        </Card>
+        <ReloadableCard title={title} onReload={onReload} loading={loading}>
+            {children}
+        </ReloadableCard>
     );
 
     if (wideLayout) {