Skip to content

Commit

Permalink
Restructured OverviewPanel.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nico4899
Nico4899 committed Dec 5, 2023
1 parent 579cefe commit 5af4405
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 90 deletions.
56 changes: 56 additions & 0 deletions src/components/ControlGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import ControlTable from '../components/PodTemperatures';

Check failure on line 1 in src/components/ControlGrid.tsx

View workflow job for this annotation

GitHub Actions / test-tauri (macos-latest) 

'ControlTable' is declared but its value is never read.

Check failure on line 1 in src/components/ControlGrid.tsx

View workflow job for this annotation

GitHub Actions / test-tauri (ubuntu-latest) 

'ControlTable' is declared but its value is never read.

Check failure on line 1 in src/components/ControlGrid.tsx

View workflow job for this annotation

GitHub Actions / test-tauri (windows-latest) 

'ControlTable' is declared but its value is never read.
import { Grid, Paper, Box, Skeleton, styled } from '@mui/material';

Check failure on line 2 in src/components/ControlGrid.tsx

View workflow job for this annotation

GitHub Actions / test-tauri (macos-latest) 

'Box' is declared but its value is never read.

Check failure on line 2 in src/components/ControlGrid.tsx

View workflow job for this annotation

GitHub Actions / test-tauri (macos-latest) 

'Skeleton' is declared but its value is never read.

Check failure on line 2 in src/components/ControlGrid.tsx

View workflow job for this annotation

GitHub Actions / test-tauri (ubuntu-latest) 

'Box' is declared but its value is never read.

Check failure on line 2 in src/components/ControlGrid.tsx

View workflow job for this annotation

GitHub Actions / test-tauri (ubuntu-latest) 

'Skeleton' is declared but its value is never read.

Check failure on line 2 in src/components/ControlGrid.tsx

View workflow job for this annotation

GitHub Actions / test-tauri (windows-latest) 

'Box' is declared but its value is never read.

Check failure on line 2 in src/components/ControlGrid.tsx

View workflow job for this annotation

GitHub Actions / test-tauri (windows-latest) 

'Skeleton' is declared but its value is never read.

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;
70 changes: 37 additions & 33 deletions src/components/EstablishConnection.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 = {
Expand All @@ -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>)
)
}
0 src/components/ControlTable.tsx → src/components/PodTemperatures.tsx
View file
File renamed without changes.
63 changes: 6 additions & 57 deletions src/pages/OverviewPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down Expand Up @@ -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>
</>*/}
export default OverviewPanel;

0 comments on commit 5af4405

Please sign in to comment.