add masks to customize screen

interface/src/project/SettingsCustomization.tsx

@@ -12,7 +12,9 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle
+  DialogTitle,
+  ToggleButton,
+  ToggleButtonGroup
 } from '@mui/material';
 
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
@@ -22,8 +24,12 @@ import { styled } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 
 import SaveIcon from '@mui/icons-material/Save';
-import CloseIcon from '@mui/icons-material/Close';
 import CancelIcon from '@mui/icons-material/Cancel';
+import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
+import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined';
+import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
+import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
+
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 
 import { ButtonRow, FormLoader, ValidatedTextField, SectionContent } from '../components';
@@ -53,6 +59,7 @@ const SettingsCustomization: FC = () => {
   const [errorMessage, setErrorMessage] = useState<string>();
   const [selectedDevice, setSelectedDevice] = useState<number>(0);
   const [confirmReset, setConfirmReset] = useState<boolean>(false);
+  const [masks, setMasks] = useState(() => ['fav', 'readonly', 'exclude_mqtt', 'exclude_web']);
 
   const fetchDevices = useCallback(async () => {
     try {
@@ -162,48 +169,86 @@ const SettingsCustomization: FC = () => {
       return;
     }
 
-    const toggleDeviceEntity = (id: number, mask: number) => {
+    const setMask = (de: DeviceEntity, newMask: string[]) => {
-      setDeviceEntities(
+      var new_mask = 0;
-        deviceEntities.map((o) => {
+      if (newMask.includes('exclude_web')) {
-          if (o.i === id) {
+        new_mask |= 1;
-            return { ...o, m: mask ^ o.m };
+      }
-          }
+      if (newMask.includes('exclude_mqtt')) {
-          return o;
+        new_mask |= 2;
-        })
+      }
-      );
+      if (newMask.includes('readonly')) {
+        new_mask |= 4;
+      }
+      if (newMask.includes('fav')) {
+        new_mask |= 8;
+      }
+
+      de.m = new_mask;
+      setMasks(newMask);
+    };
+
+    const getValue = (de: DeviceEntity) => {
+      var new_masks = [];
+      if ((de.m & 1) === 1) {
+        new_masks.push('exclude_web');
+      }
+      if ((de.m & 2) === 2) {
+        new_masks.push('exclude_mqtt');
+      }
+      if ((de.m & 4) === 4) {
+        new_masks.push('readonly');
+      }
+      if ((de.m & 8) === 8) {
+        new_masks.push('fav');
+      }
+
+      return new_masks;
     };
 
     return (
-      <>
+      <Table size="small">
-        <Table size="small">
+        <TableHead>
-          <TableHead>
+          <TableRow>
-            <TableRow>
+            <StyledTableCell align="center">OPTIONS</StyledTableCell>
-              <StyledTableCell>
+            <StyledTableCell align="left">ENTITY NAME (CODE)</StyledTableCell>
-                ({deviceEntities.reduce((a, de) => (de.m === 7 ? a + 1 : a), 0)}/{deviceEntities.length})
+            <StyledTableCell align="right">VALUE</StyledTableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {deviceEntities.map((de) => (
+            <TableRow key={de.i}>
+              <StyledTableCell padding="checkbox">
+                <ToggleButtonGroup
+                  size="small"
+                  color="error"
+                  value={getValue(de)}
+                  onChange={(event, mask) => {
+                    setMask(de, mask);
+                  }}
+                >
+                  <ToggleButton value="fav" color="success">
+                    <FavoriteBorderOutlinedIcon fontSize="small" />
+                  </ToggleButton>
+                  <ToggleButton value="readonly">
+                    <EditOffOutlinedIcon fontSize="small" />
+                  </ToggleButton>
+                  <ToggleButton value="exclude_mqtt">
+                    <CommentsDisabledOutlinedIcon fontSize="small" />
+                  </ToggleButton>
+                  <ToggleButton value="exclude_web">
+                    <VisibilityOffOutlinedIcon fontSize="small" />
+                  </ToggleButton>
+                </ToggleButtonGroup>
               </StyledTableCell>
-              <StyledTableCell align="left">ENTITY NAME</StyledTableCell>
+              <StyledTableCell>
-              <StyledTableCell>CODE</StyledTableCell>
+                {de.n}&nbsp;({de.s})
-              <StyledTableCell align="right">VALUE</StyledTableCell>
+              </StyledTableCell>
+              <StyledTableCell align="right">{formatValue(de.v)}</StyledTableCell>
             </TableRow>
-          </TableHead>
+          ))}
-          <TableBody>
+        </TableBody>
-            {deviceEntities.map((de) => (
+      </Table>
-              <TableRow
-                key={de.i}
-                onClick={() => toggleDeviceEntity(de.i, 7)}
-                sx={de.m === 7 ? { backgroundColor: '#f8696b' } : { backgroundColor: 'black' }}
-              >
-                <StyledTableCell padding="checkbox">{de.m === 7 && <CloseIcon fontSize="small" />}</StyledTableCell>
-                <StyledTableCell component="th" scope="row">
-                  {de.n}
-                </StyledTableCell>
-                <StyledTableCell>{de.s}</StyledTableCell>
-                <StyledTableCell align="right">{formatValue(de.v)}</StyledTableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </>
     );
   };
 

mock-api/server.js

@@ -574,21 +574,18 @@ const emsesp_devicedata_4 = {
       u: 1,
       n: 'hc2 selected room temperature',
       c: 'hc2/seltemp',
-      m: 0,
     },
     {
       v: 18.6,
       u: 1,
       n: 'hc2 current room temperature',
       c: '',
-      m: 7,
     },
     {
       v: 'off',
       u: 0,
       n: 'hc2 mode',
       c: 'hc2/mode',
-      m: 7,
     },
   ],
 }
@@ -637,14 +634,14 @@ const emsesp_deviceentities_2 = [
   { v: 5, n: 'selected flow temperature', s: 'selflowtemp', m: 0, i: 3 },
   { v: 0, n: 'burner selected max power', s: 'selburnpow', m: 0, i: 4 },
   { v: 0, n: 'heating pump modulation', s: 'heatingpumpmod', m: 0, i: 5 },
-  { n: 'heating pump 2 modulation', s: 'heatingpump2mod', m: 7, i: 6 },
+  { n: 'heating pump 2 modulation', s: 'heatingpump2mod', m: 2, i: 6 },
-  { n: 'outside temperature', s: 'outdoortemp', m: 7, i: 7 },
+  { n: 'outside temperature', s: 'outdoortemp', m: 2, i: 7 },
   { v: 53, n: 'current flow temperature', s: 'curflowtemp', m: 0, i: 8 },
   { v: 51.8, n: 'return temperature', s: 'rettemp', m: 0, i: 9 },
-  { n: 'mixing switch temperature', s: 'switchtemp', m: 7, i: 10 },
+  { n: 'mixing switch temperature', s: 'switchtemp', m: 2, i: 10 },
   { v: 1.3, n: 'system pressure', s: 'syspress', m: 0, i: 11 },
   { v: 54.6, n: 'actual boiler temperature', s: 'boiltemp', m: 0, i: 12 },
-  { n: 'exhaust temperature', s: 'exhausttemp', m: 7, i: 13 },
+  { n: 'exhaust temperature', s: 'exhausttemp', m: 2, i: 13 },
   { v: false, n: 'gas', s: 'burngas', m: 0, i: 14 },
   { v: false, n: 'gas stage 2', s: 'burngas2', m: 0, i: 15 },
   { v: 0, n: 'flame current', s: 'flamecurr', m: 0, i: 16 },
@@ -679,9 +676,9 @@ const emsesp_deviceentities_2 = [
   { v: true, n: 'dhw turn on/off', s: 'wwtapactivated', m: 0, i: 45 },
   { v: 62, n: 'dhw set temperature', s: 'wwsettemp', m: 0, i: 46 },
   { v: 60, n: 'dhw selected temperature', s: 'wwseltemp', m: 0, i: 47 },
-  { n: 'dhw selected lower temperature', s: 'wwseltemplow', m: 7, i: 48 },
+  { n: 'dhw selected lower temperature', s: 'wwseltemplow', m: 2, i: 48 },
-  { n: 'dhw selected temperature for off', s: 'wwseltempoff', m: 7, i: 49 },
+  { n: 'dhw selected temperature for off', s: 'wwseltempoff', m: 2, i: 49 },
-  { n: 'dhw single charge temperature', s: 'wwseltempsingle', m: 7, i: 50 },
+  { n: 'dhw single charge temperature', s: 'wwseltempsingle', m: 2, i: 50 },
   { v: 'flow', n: 'dhw type', s: 'wwtype', m: 0, i: 51 },
   { v: 'hot', n: 'dhw comfort', s: 'wwcomfort', m: 0, i: 52 },
   { v: 40, n: 'dhw flow temperature offset', s: 'wwflowtempoffset', m: 0, i: 53 },
@@ -694,10 +691,10 @@ const emsesp_deviceentities_2 = [
   { v: 'off', n: 'dhw circulation pump mode', s: 'wwcircmode', m: 0, i: 60 },
   { v: false, n: 'dhw circulation active', s: 'wwcirc', m: 0, i: 61 },
   { v: 46.4, n: 'dhw current intern temperature', s: 'wwcurtemp', m: 0, i: 62 },
-  { n: 'dhw current extern temperature', s: 'wwcurtemp2', m: 7, i: 63 },
+  { n: 'dhw current extern temperature', s: 'wwcurtemp2', m: 2, i: 63 },
   { v: 0, n: 'dhw current tap water flow', s: 'wwcurflow', m: 0, i: 64 },
   { v: 46.3, n: 'dhw storage intern temperature', s: 'wwstoragetemp1', m: 0, i: 65 },
-  { n: 'dhw storage extern temperature', s: 'wwstoragetemp2', m: 7, i: 66 },
+  { n: 'dhw storage extern temperature', s: 'wwstoragetemp2', m: 2, i: 66 },
   { v: true, n: 'dhw activated', s: 'wwactivated', m: 0, i: 67 },
   { v: false, n: 'dhw one time charging', s: 'wwonetime', m: 0, i: 68 },
   { v: false, n: 'dhw disinfecting', s: 'wwdisinfecting', m: 0, i: 69 },
@@ -707,8 +704,8 @@ const emsesp_deviceentities_2 = [
   { v: false, n: 'dhw active', s: 'wwactive', m: 0, i: 73 },
   { v: true, n: 'dhw 3way valve active', s: 'ww3wayvalve', m: 0, i: 74 },
   { v: 0, n: 'dhw set pump power', s: 'wwsetpumppower', m: 0, i: 75 },
-  { n: 'dhw mixer temperature', s: 'wwmixertemp', m: 7, i: 76 },
+  { n: 'dhw mixer temperature', s: 'wwmixertemp', m: 2, i: 76 },
-  { n: 'dhw cylinder middle temperature (TS3)', s: 'wwcylmiddletemp', m: 7, i: 77 },
+  { n: 'dhw cylinder middle temperature (TS3)', s: 'wwcylmiddletemp', m: 2, i: 77 },
   { v: 288768, n: 'dhw starts', s: 'wwstarts', m: 0, i: 78 },
   { v: 102151, n: 'dhw active time', s: 'wwworkm', m: 0, i: 79 },
 ]
@@ -724,14 +721,14 @@ const emsesp_deviceentities_4 = [
   {
     n: 'hc2 current room temperature',
     s: 'hc2/curtemp',
-    m: 7,
+    m: 3,
     i: 2,
   },
   {
     v: 'off',
     n: 'hc2 mode',
     s: 'hc2/mode',
-    m: 7,
+    m: 3,
     i: 3,
   },
 ]