togglebutton

interface/src/project/SettingsCustomization.tsx

@@ -10,6 +10,7 @@ import {
   DialogContent,
   DialogTitle,
   ToggleButton,
+  IconButton,
   ToggleButtonGroup
 } from '@mui/material';
 
@@ -36,7 +37,7 @@ import * as EMSESP from './api';
 
 import { extractErrorMessage } from '../utils';
 
-import { DeviceShort, Devices, DeviceEntity } from './types';
+import { DeviceShort, Devices, DeviceEntity, DeviceEntityMask } from './types';
 
 const SettingsCustomization: FC = () => {
   const { enqueueSnackbar } = useSnackbar();
@@ -46,11 +47,15 @@ const SettingsCustomization: FC = () => {
   const [errorMessage, setErrorMessage] = useState<string>();
   const [selectedDevice, setSelectedDevice] = useState<number>(0);
   const [confirmReset, setConfirmReset] = useState<boolean>(false);
+  const [selectedFilters, setSelectedFilters] = useState<number>(DeviceEntityMask.DV_FAVORITE);
 
   // eslint-disable-next-line
   const [masks, setMasks] = useState(() => ['']);
 
   const entities_theme = useTheme({
+    Table: `
+      height: 100%;
+    `,
     BaseRow: `
       font-size: 14px;
       color: white;
@@ -94,8 +99,13 @@ const SettingsCustomization: FC = () => {
       border-right: 1px solid transparent;
       border-bottom: 1px solid transparent;
       &:nth-of-type(1) {
-        min-width: 128px;
-        width: 128px;
+        width: 130px;
+      }
+      &:nth-of-type(2) {
+        flex: 1;
+      }
+      &:last-of-type {
+        text-align: right;
       }
     `
   });
@@ -192,7 +202,7 @@ const SettingsCustomization: FC = () => {
         <Box color="warning.main">
           <Typography variant="body2">Select a device and customize each of its entities using the options:</Typography>
           <Typography mt={1} ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
-            <StarIcon color="warning" sx={{ fontSize: 13 }} />
+            <StarIcon color="secondary" sx={{ fontSize: 13 }} />
             &nbsp;mark it as favorite to be listed at the top of the Dashboard
           </Typography>
           <Typography ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
@@ -263,10 +273,15 @@ const SettingsCustomization: FC = () => {
   };
 
   const renderDeviceData = () => {
-    if (devices?.devices.length === 0 || !deviceEntities) {
+    if (devices?.devices.length === 0 || deviceEntities[0].id === '') {
       return;
     }
 
+    const hasMask = (de: DeviceEntity) => {
+      return de.m & selectedFilters;
+      return (de.m & DeviceEntityMask.DV_FAVORITE) === DeviceEntityMask.DV_FAVORITE;
+    };
+
     const setMask = (de: DeviceEntity, newMask: string[]) => {
       var new_mask = 0;
       for (let entry of newMask) {
@@ -295,7 +310,39 @@ const SettingsCustomization: FC = () => {
     };
 
     return (
-      <Table data={{ nodes: deviceEntities }} theme={entities_theme} sort={entity_sort} layout={{ custom: true }}>
+      <>
+        <IconButton size="small" onClick={() => setSelectedDevice(8)}>
+          <StarIcon color="info" sx={{ fontSize: 16, verticalAlign: 'middle' }} />
+        </IconButton>
+
+        <ToggleButtonGroup
+          size="small"
+          color="secondary"
+          // value={getMask(selectedFilters)}
+          onChange={(event, mask) => {
+            // setMask(de, mask);
+          }}
+        >
+          <ToggleButton value="8">
+            <StarIcon sx={{ fontSize: 14 }} />
+          </ToggleButton>
+          <ToggleButton value="4">
+            <EditOffOutlinedIcon sx={{ fontSize: 14 }} />
+          </ToggleButton>
+          <ToggleButton value="2">
+            <CommentsDisabledOutlinedIcon sx={{ fontSize: 14 }} />
+          </ToggleButton>
+          <ToggleButton value="1">
+            <VisibilityOffOutlinedIcon sx={{ fontSize: 14 }} />
+          </ToggleButton>
+        </ToggleButtonGroup>
+
+        <Table
+          data={{ nodes: deviceEntities.filter((de) => hasMask(de)) }}
+          theme={entities_theme}
+          sort={entity_sort}
+          layout={{ custom: true, horizontalScroll: true }}
+        >
           {(tableList: any) => (
             <>
               <Header>
@@ -311,7 +358,7 @@ const SettingsCustomization: FC = () => {
                       NAME
                     </Button>
                   </HeaderCell>
-                <HeaderCell>VALUE</HeaderCell>
+                  <HeaderCell pinRight={true}>VALUE</HeaderCell>
                   <HeaderCell />
                 </HeaderRow>
               </Header>
@@ -327,7 +374,7 @@ const SettingsCustomization: FC = () => {
                           setMask(de, mask);
                         }}
                       >
-                      <ToggleButton value="8" color="warning" disabled={(de.m & 1) !== 0 || de.id === ''}>
+                        <ToggleButton value="8" disabled={(de.m & 1) !== 0 || de.id === ''}>
                           <StarIcon sx={{ fontSize: 14 }} />
                         </ToggleButton>
                         <ToggleButton value="4" disabled={!de.w}>
@@ -351,6 +398,7 @@ const SettingsCustomization: FC = () => {
             </>
           )}
         </Table>
+      </>
     );
   };
 
@@ -390,12 +438,18 @@ const SettingsCustomization: FC = () => {
 
   const content = () => {
     return (
-      <>
+      <div style={{ height: '100vh' }}>
         <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
           Device Entities
         </Typography>
         {renderDeviceList()}
+        <div
+          style={{
+            height: '80%'
+          }}
+        >
           {renderDeviceData()}
+        </div>
         <Box display="flex" flexWrap="wrap">
           <Box flexGrow={1}>
             <ButtonRow>
@@ -416,7 +470,7 @@ const SettingsCustomization: FC = () => {
           </ButtonRow>
         </Box>
         {renderResetDialog()}
-      </>
+      </div>
     );
   };
 

mock-api/server.js

@@ -698,7 +698,7 @@ const emsesp_deviceentities_4 = [
     v: 16,
     id: 'hc2 selected room temperature',
     s: 'hc2/seltemp',
-    m: 0,
+    m: 8,
     w: true,
   },
   {
@@ -916,15 +916,15 @@ function updateMask(entity, de, dd) {
   objIndex = de.findIndex((obj) => obj.s == name)
   if (objIndex !== -1) {
     de[objIndex].m = new_mask
-    const fullname = de[objIndex].n
-    objIndex = dd.data.findIndex((obj) => obj.n.slice(2) == fullname)
+    const fullname = de[objIndex].id
+    objIndex = dd.data.findIndex((obj) => obj.id.slice(2) == fullname)
     if (objIndex !== -1) {
       // see if the mask has changed
-      const old_mask = parseInt(dd.data[objIndex].n.slice(0, 2), 16)
+      const old_mask = parseInt(dd.data[objIndex].id.slice(0, 2), 16)
       if (old_mask !== new_mask) {
         const mask_hex = entity.slice(0, 2)
-        console.log('Updating ' + dd.data[objIndex].n + ' -> ' + mask_hex + fullname)
-        dd.data[objIndex].n = mask_hex + fullname
+        console.log('Updating ' + dd.data[objIndex].id + ' -> ' + mask_hex + fullname)
+        dd.data[objIndex].id = mask_hex + fullname
       }
     }
   } else {
@@ -934,6 +934,7 @@ function updateMask(entity, de, dd) {
 
 rest_server.post(EMSESP_MASKED_ENTITIES_ENDPOINT, (req, res) => {
   const id = req.body.id
+  console.log('customization id = ' + id)
   console.log(req.body.entity_ids)
   for (const entity of req.body.entity_ids) {
     if (id === 1) {