From 785c745248b2db40b9264c7eea89eee703fe3f2d Mon Sep 17 00:00:00 2001
From: Tristan Teufel <tristanteufel@googlemail.com>
Date: Thu, 28 Dec 2023 17:02:11 +0100
Subject: [PATCH] updates

---
 src/app/ChannelsForType.tsx          |  13 ++-
 src/app/FloorControl.tsx             |   1 -
 src/app/ThermostatControl.tsx        | 151 ++++++++++++++-------------
 src/app/components/ChannelHeader.tsx |   3 +
 4 files changed, 89 insertions(+), 79 deletions(-)

diff --git a/src/app/ChannelsForType.tsx b/src/app/ChannelsForType.tsx
index 90dadc8..f1dd30c 100644
--- a/src/app/ChannelsForType.tsx
+++ b/src/app/ChannelsForType.tsx
@@ -19,12 +19,11 @@ import { Icon } from '@iconify/react';
 
 
 interface ExpandMoreProps {
-  expand: boolean;
+  expanded: boolean;
 }
 
-
-const ExpandMore = styled(Icon)(({ expand }: ExpandMoreProps) => ({
-  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+const ExpandMore = styled(Icon)<ExpandMoreProps>(({ expanded }) => ({
+  transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
   marginLeft: 'auto',
   transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
   padding: '5px',
@@ -76,7 +75,7 @@ export const ChannelsForType: React.FC<ChannelTypeProps> = ({
 
   const [hasTransitionExited, setHasTransitionExited] = useState<
   boolean
-  >(false);
+  >(true);
   const [expanded, setExpanded] = useState<boolean>(false);
 
   const handleExpandClick = () => setExpanded(!expanded);
@@ -85,7 +84,7 @@ export const ChannelsForType: React.FC<ChannelTypeProps> = ({
     <Box key={index}>
       <ListItem disablePadding={true}>
         <ListItemButton
-          sx={{ '&:hover': { backgroundColor: 'transparent' }, paddingLeft: 0 }}
+          sx={{ '&:hover': { backgroundColor: 'transparent' }, px: 0 }}
           onClick={() => handleExpandClick()}
           disableRipple={true}
         >
@@ -101,7 +100,7 @@ export const ChannelsForType: React.FC<ChannelTypeProps> = ({
           >
             {t(channelType)}
           </Typography>
-          <ExpandMore icon="uiw:down" expand={expanded}/>
+          <ExpandMore icon="uiw:down" expanded={expanded}/>
         </ListItemButton>
       </ListItem>
       {hasTransitionExited ? <Divider /> : null}
diff --git a/src/app/FloorControl.tsx b/src/app/FloorControl.tsx
index f6c6862..53bcdc6 100644
--- a/src/app/FloorControl.tsx
+++ b/src/app/FloorControl.tsx
@@ -35,7 +35,6 @@ export const FloorControl = (props: FloorControlProps) => {
   return (
     <Box>
       <ChannelHeader icon="mdi:radiator-coil" name={props.channel.name}/>
-
       <CardContent sx={{ pt: '0px'}}>
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         <StyledHeaderIcon icon="mdi:pipe-valve" style={{ marginRight: '5px'}} color={getColor(value)}/>
diff --git a/src/app/ThermostatControl.tsx b/src/app/ThermostatControl.tsx
index 264d407..cc0db95 100644
--- a/src/app/ThermostatControl.tsx
+++ b/src/app/ThermostatControl.tsx
@@ -1,11 +1,4 @@
-import {
-  Box,
-  Button,
-  CardContent,
-  CardHeader,
-  Slider,
-  Typography,
-} from '@mui/material';
+import { Box, Button, CardContent, Slider, Typography } from '@mui/material';
 
 import {
   HeatingClimateControlTransceiverChannel,
@@ -13,7 +6,6 @@ import {
 } from '../hooks/useApi';
 import { useEffect, useState } from 'react';
 import { CircularProgressWithLabel } from './components/CircularProgressWithLabel';
-import { TypographyWithEllipsis } from './components/TypographyWithEllipsis';
 import { StyledHeaderIcon, StyledIconButton } from './components/StyledIcons';
 import { ChannelHeader } from './components/ChannelHeader';
 
@@ -85,6 +77,81 @@ export const ThermostatControl = ({ channel }: ControlProps) => {
     }
   };
 
+  const getHumidity = () => {
+    return datapoints?.HUMIDITY ? (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <StyledHeaderIcon icon="material-symbols-light:humidity-indoor-outline" />
+        <Typography variant="caption" ml="3px">
+          {Number(datapoints?.HUMIDITY)}%
+        </Typography>
+      </Box>
+    ) : null;
+  };
+
+  const getValveLevel = () => {
+    return (datapoints?.LEVEL ? (
+      <Box>
+        <StyledHeaderIcon
+          icon="mdi:pipe-valve"
+          style={{ marginRight: '5px' }}
+        />
+        <CircularProgressWithLabel
+          value={Number(datapoints?.LEVEL)}
+        />
+      </Box>
+    ) : null)
+  }
+
+  const getActualTemperature = () => {
+    return (<Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <StyledHeaderIcon
+      icon={pointMode ? 'mdi:thermostat' : 'mdi:thermostat-auto'}
+      color={getColor(Number(datapoints?.ACTUAL_TEMPERATURE))}
+      onClick={() => {
+        setPointMode(Number(pointMode ? '0' : '1'));
+        setValueMutation.mutateAsync({
+          interface: interfaceName,
+          address,
+          valueKey: 'CONTROL_MODE',
+          type: 'double',
+          value: pointMode ? 0 : 1,
+        });
+      }}
+    />
+    <Typography variant="caption" ml="3px">
+      {datapoints?.ACTUAL_TEMPERATURE
+        ? Number(datapoints?.ACTUAL_TEMPERATURE).toLocaleString(
+            'de-DE',
+            {
+              maximumFractionDigits: 2,
+              minimumFractionDigits: 2,
+            }
+          )
+        : null}
+      °C
+    </Typography>
+  </Box>)
+  }
+
+
+  const getTargetTemperature = () => {
+    return (<Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <StyledHeaderIcon icon="mdi:target" />
+    <Typography variant="caption" ml="2px">
+      {pointTemp.toLocaleString('de-DE', {
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 2,
+      })}
+      °C
+    </Typography>
+  </Box>)
+  }
+
   return (
     <Box
       sx={{
@@ -109,31 +176,9 @@ export const ThermostatControl = ({ channel }: ControlProps) => {
             }}
           >
             <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-              {datapoints?.HUMIDITY ? (
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                  }}
-                >
-                  <StyledHeaderIcon icon="material-symbols-light:humidity-indoor-outline" />
-                  <Typography variant="caption" mt="4px" ml="3px">
-                    {Number(datapoints?.HUMIDITY)}%
-                  </Typography>
-                </Box>
-              ) : null}
+              {getHumidity()}
 
-              {datapoints?.LEVEL ? (
-                <Box>
-                  <StyledHeaderIcon
-                    icon="mdi:pipe-valve"
-                    style={{ marginRight: '5px' }}
-                  />
-                  <CircularProgressWithLabel
-                    value={Number(datapoints?.LEVEL)}
-                  />
-                </Box>
-              ) : null}
+              {getValveLevel()}
             </Box>
 
             <Box
@@ -143,45 +188,9 @@ export const ThermostatControl = ({ channel }: ControlProps) => {
                 mt: '5px',
               }}
             >
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                <StyledHeaderIcon
-                  icon={pointMode ? 'mdi:thermostat' : 'mdi:thermostat-auto'}
-                  color={getColor(Number(datapoints?.ACTUAL_TEMPERATURE))}
-                  onClick={() => {
-                    setPointMode(Number(pointMode ? '0' : '1'));
-                    setValueMutation.mutateAsync({
-                      interface: interfaceName,
-                      address,
-                      valueKey: 'CONTROL_MODE',
-                      type: 'double',
-                      value: pointMode ? 0 : 1,
-                    });
-                  }}
-                />
-                <Typography variant="caption" mt="4px" ml="3px">
-                  {datapoints?.ACTUAL_TEMPERATURE
-                    ? Number(datapoints?.ACTUAL_TEMPERATURE).toLocaleString(
-                        'de-DE',
-                        {
-                          maximumFractionDigits: 2,
-                          minimumFractionDigits: 2,
-                        }
-                      )
-                    : null}
-                  °C
-                </Typography>
-              </Box>
+              {getActualTemperature()}
 
-              <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                <StyledHeaderIcon icon="mdi:target" />
-                <Typography variant="caption" mt="4px" ml="2px">
-                  {pointTemp.toLocaleString('de-DE', {
-                    maximumFractionDigits: 2,
-                    minimumFractionDigits: 2,
-                  })}
-                  °C
-                </Typography>
-              </Box>
+              {getTargetTemperature()}
             </Box>
           </Box>
 
diff --git a/src/app/components/ChannelHeader.tsx b/src/app/components/ChannelHeader.tsx
index ebbb98c..7b52ec1 100644
--- a/src/app/components/ChannelHeader.tsx
+++ b/src/app/components/ChannelHeader.tsx
@@ -19,6 +19,9 @@ export const ChannelHeader = ({
   return (
     <CardHeader
       onClick={onClick}
+      sx={{
+        '& .MuiCardHeader-content': { width: '100%' },
+      }}
       title={
         <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
           <StyledHeaderIcon icon={icon} color={color} />