From 5af44053479648f33540a8acdb22589c5909a9b0 Mon Sep 17 00:00:00 2001
From: Nico <ubncr@student.kit.edu>
Date: Tue, 5 Dec 2023 14:56:05 +0100
Subject: [PATCH] Restructured OverviewPanel.tsx

---
 src/components/ControlGrid.tsx                | 56 +++++++++++++++
 src/components/EstablishConnection.tsx        | 70 ++++++++++---------
 .../{ControlTable.tsx => PodTemperatures.tsx} |  0
 src/pages/OverviewPanel.tsx                   | 63 ++---------------
 4 files changed, 99 insertions(+), 90 deletions(-)
 create mode 100644 src/components/ControlGrid.tsx
 rename src/components/{ControlTable.tsx => PodTemperatures.tsx} (100%)

diff --git a/src/components/ControlGrid.tsx b/src/components/ControlGrid.tsx
new file mode 100644
index 0000000..929436b
--- /dev/null
+++ b/src/components/ControlGrid.tsx
@@ -0,0 +1,56 @@
+import ControlTable from '../components/PodTemperatures';
+import { Grid, Paper, Box, Skeleton, styled } from '@mui/material';
+
+const Item = styled(Paper)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
+    ...theme.typography.body2,
+    padding: theme.spacing(1),
+    textAlign: 'center',
+    color: theme.palette.text.secondary,
+  }));
+
+
+function ControlGrid() {
+
+
+    return (
+        <div>
+            <Grid container rowSpacing={1} columnSpacing={{ xs: 1, md: 2 }} sx={{ margin: "1%"}}>
+                <Grid item xs={12} md={12}>
+                </Grid>
+                <Grid item xs={6} md={8}>
+                    <Item sx={{ width: "100%", height: "300px"}}>
+                        xs=6 md=8
+                    </Item>
+                </Grid>
+                <Grid item xs={6} md={4}>
+                    <Item sx={{ width: "100%", height: "300px"}}>
+                        xs=6 md=8
+                    </Item>
+                </Grid>
+                <Grid item xs={6} md={4}>
+                <Item sx={{ width: "100%", height: "300px"}}>
+                        xs=6 md=8
+                    </Item>
+                </Grid>
+                <Grid item xs={6} md={8}>
+                <Item sx={{ width: "100%", height: "300px"}}>
+                        xs=6 md=8
+                    </Item>
+                </Grid>
+                <Grid item xs={6} md={4}>
+                <Item sx={{ width: "100%", height: "300px"}}>
+                        xs=6 md=8
+                    </Item>
+                </Grid>
+                <Grid item xs={12} md={12}>
+                <Item sx={{ width: "100%", height: "300px"}}>
+                        xs=6 md=8
+                    </Item>
+                </Grid>
+            </Grid>
+        </div>
+    );
+}
+
+export default ControlGrid;
\ No newline at end of file
diff --git a/src/components/EstablishConnection.tsx b/src/components/EstablishConnection.tsx
index 41e0657..92e4676 100644
--- a/src/components/EstablishConnection.tsx
+++ b/src/components/EstablishConnection.tsx
@@ -1,5 +1,5 @@
 import Box from "@mui/material/Box";
-import {CircularProgress, Fab} from "@mui/material";
+import {CircularProgress, Fab } from "@mui/material";
 import {useEffect, useState} from "react";
 import {invoke} from "@tauri-apps/api";
 import CheckIcon from '@mui/icons-material/Check';
@@ -13,15 +13,18 @@ export function EstablishConnection() {
     const [sucess, setSucess] = useState<boolean>(false)
 
     async function asyncConnect() {
-        await invoke("connect_pod");
-        setSucess(true)
-        setConnecting(false)
+        try {
+            await invoke("connect_pod");
+            setSucess(true)
+        } catch(error) {
+            // TODO: handle error
+        } finally {
+            setConnecting(false)
+        }
     }
 
     useEffect(() => {
-        asyncConnect().catch(() => {
-            setConnecting(false)
-        })
+        asyncConnect();
     }, []);
 
     const sx = {
@@ -38,31 +41,32 @@ export function EstablishConnection() {
         })),
     };
 
-    return (<Box sx={{display: 'flex', alignItems: 'center', width: 180}}>
-        <Box sx={{m: 1, position: 'relative'}}>
-            {(connecting && <>Connecting...</>) || (!connecting && sucess && <>Connected</>) || (!connecting && !sucess && <>Failed!</>)}
-        </Box>
-        <Box sx={{m: 1, position: 'relative'}}>
-            <Fab
-                aria-label="save"
-                color="secondary"
-                sx={sx}
-                size="medium"
-            >
-                {(connecting && <SyncIcon/>) || (!connecting && sucess && <CheckIcon/>) || (!connecting && !sucess && <ErrorIcon/>)}
-            </Fab>
-            {connecting && (
-                <CircularProgress
-                    size={57}
-                    sx={{
-                        color: yellow[500],
-                        position: 'absolute',
-                        top: -4.5,
-                        left: -4.5,
-                        zIndex: 1,
-                    }}
-                />
-            )}
+    return (
+        <Box sx={{display: 'flex', alignItems: 'center', width: 180}}>
+            <Box sx={{m: 1, position: 'relative'}}>
+                {(connecting && <>Connecting...</>) || (!connecting && sucess && <>Connected</>) || (!connecting && !sucess && <>Failed!</>)}
+            </Box>
+            <Box sx={{m: 1, position: 'relative'}}>
+                <Fab
+                    aria-label="save"
+                    color="secondary"
+                    sx={sx}
+                    size="medium" >
+                    {(connecting && <SyncIcon/>) || (!connecting && sucess && <CheckIcon/>) || (!connecting && !sucess && <ErrorIcon/>)}
+                </Fab>
+                {connecting && (
+                    <CircularProgress
+                        size={57}
+                        sx={{
+                            color: yellow[500],
+                            position: 'absolute',
+                            top: -4.5,
+                            left: -4.5,
+                            zIndex: 1,
+                        }}
+                    />
+                )}
+            </Box>
         </Box>
-    </Box>)
+    )
 }
\ No newline at end of file
diff --git a/src/components/ControlTable.tsx b/src/components/PodTemperatures.tsx
similarity index 100%
rename from src/components/ControlTable.tsx
rename to src/components/PodTemperatures.tsx
diff --git a/src/pages/OverviewPanel.tsx b/src/pages/OverviewPanel.tsx
index f2b858a..f554ad4 100644
--- a/src/pages/OverviewPanel.tsx
+++ b/src/pages/OverviewPanel.tsx
@@ -1,18 +1,7 @@
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
 import {invoke} from '@tauri-apps/api';
-import ControlTable from '../components/ControlTable';
-import {Container} from '@mui/material';
+import {Container, Button, Stack} from '@mui/material';
 import {useEffect} from "react";
-import { Grid, Paper, Box, styled } from '@mui/material';
-
-const Item = styled(Paper)(({ theme }) => ({
-    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
-    ...theme.typography.body2,
-    padding: theme.spacing(1),
-    textAlign: 'center',
-    color: theme.palette.text.secondary,
-  }));
+import ControlGrid from '../components/ControlGrid';
 
 function ControllButtons() {
     return (
@@ -64,52 +53,12 @@ function OverviewPanel() {
             <Container maxWidth="lg" sx={{mt: 1, mb: 1}}>
                 <ControllButtons/>
             </Container>
-            <Grid container rowSpacing={1} columnSpacing={{ xs: 1, md: 2 }} sx={{ margin: "1%"}}>
-                <Grid item xs={12} md={12}>
-                </Grid>
-                <Grid item xs={6} md={8}>
-                    <Item sx={{ width: "100%", height: "300px"}}>
-                        xs=6 md=8
-                    </Item>
-                </Grid>
-                <Grid item xs={6} md={4}>
-                    <Item sx={{ width: "100%", height: "300px"}}>
-                        xs=6 md=8
-                    </Item>
-                </Grid>
-                <Grid item xs={6} md={4}>
-                <Item sx={{ width: "100%", height: "300px"}}>
-                        xs=6 md=8
-                    </Item>
-                </Grid>
-                <Grid item xs={6} md={8}>
-                <Item sx={{ width: "100%", height: "300px"}}>
-                        xs=6 md=8
-                    </Item>
-                </Grid>
-                <Grid item xs={6} md={4}>
-                <Item sx={{ width: "100%", height: "300px"}}>
-                        xs=6 md=8
-                    </Item>
-                </Grid>
-                <Grid item xs={12} md={12}>
-                <Item sx={{ width: "100%", height: "300px"}}>
-                        xs=6 md=8
-                    </Item>
-                </Grid>
-            </Grid>
+            <Container maxWidth="lg" sx={{mt: 1, mb: 1}}>
+                <ControlGrid />
+            </Container>
         </div>
 
     );
 }
 
-export default OverviewPanel;
-
-{/*<>
-<Container maxWidth="lg" sx={{mt: 1, mb: 1}}>
-    <ControllButtons/>
-</Container>
-<Container maxWidth="lg" sx={{mt: 1, mb: 1}}>
-    <ControlTable/>
-</Container>
-</>*/}
\ No newline at end of file
+export default OverviewPanel;
\ No newline at end of file