new card layout

firsttris · Dec 27, 2023 · ec277b2 · ec277b2
1 parent 72058ad
commit ec277b2
Show file tree

Hide file tree

Showing 7 changed files with 232 additions and 158 deletions.
diff --git a/src/app/BlindsControl.tsx b/src/app/BlindsControl.tsx
@@ -1,11 +1,4 @@
-import {
-  Box,
-  CircularProgress,
-  CircularProgressProps,
-  IconButton,
-  ListItemText,
-  Typography,
-} from '@mui/material';
+import { Box, IconButton, ListItemText } from '@mui/material';
 import {
   BlindVirtualReceiverChannel,
   useSetValueMutation,
@@ -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={{
@@ -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={() =>
@@ -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>

diff --git a/src/app/LightControl.tsx b/src/app/LightControl.tsx
@@ -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,
@@ -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"
@@ -55,7 +65,7 @@ export const LightControl = ({ channel, refetch }: ControlProps) => {
           }}
           checked={checked}
         />
-      </Box>
+      </CardContent>
     </Box>
   );
 };
diff --git a/src/app/RainDetectionTransmitter.tsx b/src/app/RainDetectionTransmitter.tsx