Skip to content

Commit

Permalink
new card layout
Browse files Browse the repository at this point in the history
  • Loading branch information
firsttris committed Dec 27, 2023
1 parent 72058ad commit ec277b2
Show file tree
Hide file tree
Showing 7 changed files with 232 additions and 158 deletions.
89 changes: 41 additions & 48 deletions src/app/BlindsControl.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
import {
Box,
CircularProgress,
CircularProgressProps,
IconButton,
ListItemText,
Typography,
} from '@mui/material';
import { Box, IconButton, ListItemText } from '@mui/material';
import {
BlindVirtualReceiverChannel,
useSetValueMutation,
Expand All @@ -15,45 +8,31 @@ import BlindsClosedIcon from '@mui/icons-material/BlindsClosed';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import StopIcon from '@mui/icons-material/Stop';
import { CircularProgressWithLabel } from './components/CircularProgressWithLabel';

interface ControlProps {
channel: BlindVirtualReceiverChannel;
}

const CircularProgressWithLabel = (
props: CircularProgressProps & { value: number }
) => {
return (
<Box sx={{ position: 'relative', display: 'inline-flex' }}>
<CircularProgress variant="determinate" {...props} size="45px" />
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Typography
variant="caption"
>{`${Math.round(props.value)}%`}</Typography>
</Box>
</Box>
);
};

export const BlindsControl = ({ channel }: ControlProps) => {
const setValueMutation = useSetValueMutation();
const { datapoints, name, address, interfaceName } = channel;
const blindValue = Number(datapoints.LEVEL) * 100;
return (
<Box sx={{ display: 'flex', flexDirection: 'column', width: '100%', mb: '-10px' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
width: '100%',
mb: '-10px',
}}
>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
{blindValue === 0 ? <BlindsClosedIcon /> : <BlindsOutlinedIcon />}
{blindValue === 0 ? (
<BlindsClosedIcon sx={{ fontSize: '40px', ml: '5px' }} />
) : (
<BlindsOutlinedIcon sx={{ fontSize: '40px', ml: '5px' }} />
)}
<ListItemText
primary={name}
sx={{
Expand All @@ -65,35 +44,49 @@ export const BlindsControl = ({ channel }: ControlProps) => {
},
}}
/>

</Box>
<Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', mt: '-5px'}}>
<Box
sx={{
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
mt: '-5px',
}}
>
<Box sx={{ display: 'flex', gap: '5px', alignItems: 'center' }}>
<IconButton
sx={{
backgroundColor: 'grey',
borderRadius: '10px',
'&:hover': {
backgroundColor: 'darkgrey',
},
}}
onClick={() =>
setValueMutation.mutateAsync({
interface: interfaceName,
address,
valueKey: 'STOP',
type: 'boolean',
value: true,
valueKey: 'LEVEL',
type: 'double',
value: 0,
})
}
>
<StopIcon sx={{ fontSize: '45px'}}/>
<ArrowDownwardIcon sx={{ fontSize: '45px' }} />
</IconButton>
<IconButton
onClick={() =>
setValueMutation.mutateAsync({
interface: interfaceName,
address,
valueKey: 'LEVEL',
type: 'double',
value: 0,
valueKey: 'STOP',
type: 'boolean',
value: true,
})
}
>
<ArrowDownwardIcon sx={{ fontSize: '45px'}} />
<StopIcon sx={{ fontSize: '45px' }} />
</IconButton>
<IconButton
onClick={() =>
Expand All @@ -106,10 +99,10 @@ export const BlindsControl = ({ channel }: ControlProps) => {
})
}
>
<ArrowUpwardIcon sx={{ fontSize: '45px'}} />
<ArrowUpwardIcon sx={{ fontSize: '45px' }} />
</IconButton>
<Box>
<CircularProgressWithLabel value={blindValue} />
<CircularProgressWithLabel value={blindValue} />
</Box>
</Box>
</Box>
Expand Down
54 changes: 32 additions & 22 deletions src/app/LightControl.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, ListItemText, Switch, styled } from '@mui/material';
import { Box, CardContent, CardHeader, ListItemText, Switch, styled } from '@mui/material';
import {
SwitchVirtualReceiverChannel,
useSetValueMutation,
Expand All @@ -20,26 +20,36 @@ export const LightControl = ({ channel, refetch }: ControlProps) => {
const checked = datapoints.STATE === 'true';

return (
<Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
{checked ? (
<LightbulbIcon sx={{ color: 'orange', fontSize: '40px', ml: "5px" }} />
) : (
<LightbulbOutlinedIcon sx={{ fontSize: '40px', ml: "5px" }}/>
)}
<ListItemText
primary={name}
sx={{
marginLeft: '10px',
minWidth: '200px',
'& .MuiListItemText-primary': {
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}}
/>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column', width: "70px" }}>
<Box
sx={{ display: 'flex', flexDirection: 'column' }}
>
<CardHeader
title={
<Box sx={{ display: 'flex', alignItems: 'center' }}>
{checked ? (
<LightbulbIcon
sx={{ color: 'orange', fontSize: '40px', ml: '5px' }}
/>
) : (
<LightbulbOutlinedIcon sx={{ fontSize: '40px', ml: '5px' }} />
)}
<ListItemText
primary={name}
sx={{
marginLeft: '10px',
minWidth: '200px',
'& .MuiListItemText-primary': {
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}}
/>
</Box>
}
/>

<CardContent
>
<BiggerSwitch
edge="end"
size="medium"
Expand All @@ -55,7 +65,7 @@ export const LightControl = ({ channel, refetch }: ControlProps) => {
}}
checked={checked}
/>
</Box>
</CardContent>
</Box>
);
};
Empty file.
Loading

0 comments on commit ec277b2

Please sign in to comment.