From ec277b27aed2d09dffa7b1caf2e075f9a6f3bdae Mon Sep 17 00:00:00 2001
From: Tristan Teufel <tristanteufel@googlemail.com>
Date: Wed, 27 Dec 2023 19:44:05 +0100
Subject: [PATCH] new card layout

---
 src/app/BlindsControl.tsx                     |  89 +++++-----
 src/app/LightControl.tsx                      |  54 +++---
 src/app/RainDetectionTransmitter.tsx          |   0
 src/app/Room.tsx                              | 160 +++++++++++-------
 src/app/ThermostatControl.tsx                 |  58 +++----
 .../components/CircularProgressWithLabel.tsx  |  27 +++
 src/hooks/useApi.ts                           |   2 +
 7 files changed, 232 insertions(+), 158 deletions(-)
 create mode 100644 src/app/RainDetectionTransmitter.tsx
 create mode 100644 src/app/components/CircularProgressWithLabel.tsx

diff --git a/src/app/BlindsControl.tsx b/src/app/BlindsControl.tsx
index bd7886d..d6d721a 100644
--- 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
index 8073419..d6a7675 100644
--- 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
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/Room.tsx b/src/app/Room.tsx
index 51ca7d8..7ffb7d1 100644
--- a/src/app/Room.tsx
+++ b/src/app/Room.tsx
@@ -1,10 +1,13 @@
 import {
   Box,
+  Card,
+  CardContent,
+  CardHeader,
+  Collapse,
   Container,
-  Divider,
+  IconButton,
+  IconButtonProps,
   LinearProgress,
-  List,
-  ListItem,
   Typography,
 } from '@mui/material';
 import { useParams } from 'react-router-dom';
@@ -13,32 +16,60 @@ import { BlindsControl } from './BlindsControl';
 import { LightControl } from './LightControl';
 import { ThermostatControl } from './ThermostatControl';
 import { FloorControl } from './FloorControl';
-import { useMemo } from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useMemo, useState } from 'react';
+import styled from '@emotion/styled';
+
+interface ExpandMoreProps extends IconButtonProps {
+  expand: boolean;
+}
+
+const ExpandMore = styled((props: ExpandMoreProps) => {
+  const { expand, ...other } = props;
+  return <IconButton {...other} />;
+})(({ expand }) => ({
+  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+  marginLeft: 'auto',
+  transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+}));
 
 export const Room = () => {
+  const [expanded, setExpanded] = useState<Record<ChannelType, boolean>>(
+    Object.fromEntries(
+      Object.values(ChannelType).map((type) => [type, true])
+    ) as Record<ChannelType, boolean>
+  );
+
+  const handleExpandClick = (channelType: ChannelType) => {
+    setExpanded((prevExpanded) => ({
+      ...prevExpanded,
+      [channelType]: !prevExpanded[channelType],
+    }));
+  };
+
   const { roomId } = useParams<{ roomId: string }>();
 
-  const { data: channelsForRoom, refetch, isLoading } = useGetChannelsForRoom(Number(roomId));
+  const {
+    data: channelsForRoom,
+    refetch,
+    isLoading,
+  } = useGetChannelsForRoom(Number(roomId));
 
-  console.log('channelsForRoom', channelsForRoom)
+  console.log('channelsForRoom', channelsForRoom);
 
-  const sorted = useMemo(() => [...channelsForRoom].sort((a, b) => {
-    const order = [
-      ChannelType.SWITCH_VIRTUAL_RECEIVER,
-      ChannelType.BLIND_VIRTUAL_RECEIVER,
-      ChannelType.CLIMATECONTROL_FLOOR_TRANSCEIVER,
-      ChannelType.HEATING_CLIMATECONTROL_TRANSCEIVER,
-    ];
-  
-    const indexA = order.indexOf(a.type);
-    const indexB = order.indexOf(b.type);
-  
-    if (indexA === -1 || indexB === -1) {
-      return 0;
-    }
-  
-    return indexA - indexB;
-  }), [channelsForRoom]);
+  const channelsPerType = useMemo(() => {
+    return channelsForRoom?.reduce((acc, channel) => {
+      const channels = acc.get(channel.type);
+
+      if (channels) {
+        channels.push(channel);
+      } else {
+        acc.set(channel.type, [channel]);
+      }
+
+      return acc;
+    }, new Map<ChannelType, Channel[]>());
+  }, [channelsForRoom]);
 
   const getControlComponent = (channel: Channel, refetch: () => void) => {
     switch (channel.type) {
@@ -51,43 +82,56 @@ export const Room = () => {
       case ChannelType.BLIND_VIRTUAL_RECEIVER:
         return <BlindsControl channel={channel} />;
       default:
-        return <Box><Typography>{(channel as Channel).type} no implemented</Typography></Box>;
+        return (
+          <Box>
+            <Typography>{(channel as Channel).type} no implemented</Typography>
+          </Box>
+        );
     }
-  }
+  };
 
-  if(isLoading) {
-    return <LinearProgress />
+  if (isLoading) {
+    return <LinearProgress />;
   }
 
-    return (
-      <Container maxWidth="md">
-        <List>
-          {sorted.map((channel, index) => {
-            
-            return (
-              <Box key={index}>
-                <ListItem
-                  disablePadding
-                  key={channel.id}
-                  sx={{
-                    minHeight: '48px',
-                    display: 'flex',
-                    flexWrap: 'wrap',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Box sx={{ my: '5px', width: '100%'}}>
-                  {getControlComponent(channel, refetch)}
-                  </Box>
-                  
-                </ListItem>
-                {channelsForRoom?.length === index + 1 ? null : (
-                  <Divider />
-                )}
-              </Box>
-            );
-          })}
-        </List>
-      </Container>
-    );
+  return (
+    <Container maxWidth="xl" sx={{ display: 'flex', flexDirection: 'column', gap: '10px'}}>
+      {Array.from(channelsPerType).map(([channelType, channels]) => {
+        return channels.length ? (
+          <Card key={channelType}>
+            <CardHeader
+              title={
+                <Box sx={{ display: 'flex'}}>
+                  <Typography>
+                    {channelType}
+                  </Typography>
+                  <ExpandMore
+                    expand={expanded[channelType]}
+                    onClick={() => handleExpandClick(channelType)}
+                    aria-expanded={expanded[channelType]}
+                    aria-label="show more"
+                  >
+                    <ExpandMoreIcon />
+                  </ExpandMore>
+                </Box>
+              }
+            />
+            <Collapse in={expanded[channelType]} timeout="auto" unmountOnExit>
+              <CardContent
+                sx={{ display: 'flex', flexWrap: 'wrap', gap: '5px' }}
+              >
+                {channels.map((channel, index) => {
+                  return (
+                    <Card key={index} sx={{ maxWidth: 345 }}>
+                      {getControlComponent(channel, refetch)}
+                    </Card>
+                  );
+                })}
+              </CardContent>
+            </Collapse>
+          </Card>
+        ) : null;
+      })}
+    </Container>
+  );
 };
diff --git a/src/app/ThermostatControl.tsx b/src/app/ThermostatControl.tsx
index b350e08..39e228d 100644
--- a/src/app/ThermostatControl.tsx
+++ b/src/app/ThermostatControl.tsx
@@ -16,6 +16,7 @@ import ThermostatAutoIcon from '@mui/icons-material/ThermostatAuto';
 import WaterDamageOutlinedIcon from '@mui/icons-material/WaterDamageOutlined';
 import { useEffect, useState } from 'react';
 import { Icon } from '@iconify/react';
+import { CircularProgressWithLabel } from './components/CircularProgressWithLabel';
 
 interface ControlProps {
   channel: HeatingClimateControlTransceiverChannel;
@@ -139,13 +140,20 @@ export const ThermostatControl = ({ channel }: ControlProps) => {
                   alignItems: 'center',
                 }}
               >
-                <WaterDamageOutlinedIcon sx={{ fontSize: '30px'}}/>
+                <WaterDamageOutlinedIcon sx={{ fontSize: '30px' }} />
                 <Typography variant="caption" mt="4px" ml="3px">
                   {Number(datapoints?.HUMIDITY)}%
                 </Typography>
               </Box>
             ) : null}
 
+            {datapoints?.LEVEL ? (
+              <CircularProgressWithLabel
+                value={Number(datapoints?.LEVEL)}
+                size="30px"
+              />
+            ) : null}
+
             <Box sx={{ display: 'flex', alignItems: 'center' }}>
               <IconButton
                 sx={{ padding: 0, color: 'black' }}
@@ -161,37 +169,12 @@ export const ThermostatControl = ({ channel }: ControlProps) => {
                 }}
               >
                 {pointMode ? (
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'start',
-                      }}
-                    >
-                      <Button sx={{ padding: 0, fontSize: '10px' }}>
-                        Manuell
-                      </Button>
-                      <Button sx={{ padding: 0, fontSize: '10px' }}>
-                        Boost
-                      </Button>
-                    </Box>
-                    <ThermostatOutlinedIcon sx={{ fontSize: '30px'}} />
-                  </Box>
+                  <ThermostatOutlinedIcon sx={{ fontSize: '30px' }} />
                 ) : (
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'start',
-                    }}
-                  >
-                    <Button sx={{ padding: 0, fontSize: '10px' }}>Auto</Button>
-                    <Button sx={{ padding: 0, fontSize: '10px' }}>Boost</Button>
-                    <ThermostatAutoIcon sx={{ fontSize: '30px'}} />
-                  </Box>
+                  <ThermostatAutoIcon sx={{ fontSize: '30px' }} />
                 )}
               </IconButton>
+
               <Typography variant="caption" mt="4px">
                 {datapoints?.ACTUAL_TEMPERATURE
                   ? Number(datapoints?.ACTUAL_TEMPERATURE).toLocaleString(
@@ -207,7 +190,22 @@ export const ThermostatControl = ({ channel }: ControlProps) => {
             </Box>
 
             <Box sx={{ display: 'flex', alignItems: 'center' }}>
-              <Icon icon="mdi:target" fontSize='30px' />
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'start',
+                }}
+              >
+                <Button sx={{ padding: 0, fontSize: '10px' }}>
+                  {pointMode ? 'Manuell' : 'Auto'}
+                </Button>
+                <Button sx={{ padding: 0, fontSize: '10px' }}>Boost</Button>
+              </Box>
+            </Box>
+
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Icon icon="mdi:target" fontSize="30px" />
               <Typography variant="caption" mt="4px" ml="3px">
                 {pointTemp.toLocaleString('de-DE', {
                   maximumFractionDigits: 2,
diff --git a/src/app/components/CircularProgressWithLabel.tsx b/src/app/components/CircularProgressWithLabel.tsx
new file mode 100644
index 0000000..e1e82e1
--- /dev/null
+++ b/src/app/components/CircularProgressWithLabel.tsx
@@ -0,0 +1,27 @@
+import { Box, CircularProgress, CircularProgressProps, Typography } from "@mui/material";
+
+export 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>
+    );
+  };
\ No newline at end of file
diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts
index 2ef1784..e4389ea 100644
--- a/src/hooks/useApi.ts
+++ b/src/hooks/useApi.ts
@@ -56,6 +56,8 @@ export type HeatingClimateControlTransceiverDatapoint = {
   SET_POINT_TEMPERATURE: string;
   SWITCH_POINT_OCCURED: string;
   WINDOW_STATE: string;
+  LEVEL?: string;
+  LEVEL_STATUS?: string;
 };
 
 export type FloorClimateControlTransceiverDatapoint = {