hide web also deselects favourite

interface/src/project/SettingsCustomization.tsx

@@ -120,8 +120,8 @@ const SettingsCustomization: FC = () => {
       &:nth-of-type(1) {
         padding-left: 24px;
       }
-      &:nth-of-type(2) {
+      &:nth-of-type(3) {
-        border-right: 1px solid #565656;
+        border-left: 1px solid #565656;
       }
     `
   });
@@ -151,6 +151,11 @@ const SettingsCustomization: FC = () => {
     }
   );
 
+  const sort_name = () => {
+    console.log(entity_sort);
+    entity_sort.fns.onToggleSort({ sortKey: 'NAME' });
+  };
+
   const fetchDevices = useCallback(async () => {
     try {
       setDevices((await EMSESP.readDevices()).data);
@@ -187,88 +192,6 @@ const SettingsCustomization: FC = () => {
     return value;
   }
 
-  const renderDeviceList = () => {
-    if (!devices) {
-      return <FormLoader errorMessage={errorMessage} />;
-    }
-
-    function compareDevices(a: DeviceShort, b: DeviceShort) {
-      if (a.s < b.s) {
-        return -1;
-      }
-      if (a.s > b.s) {
-        return 1;
-      }
-      return 0;
-    }
-
-    const changeSelectedDevice = (event: React.ChangeEvent<HTMLInputElement>) => {
-      const selected_device = parseInt(event.target.value, 10);
-      setSelectedDevice(selected_device);
-      fetchDeviceEntities(selected_device);
-    };
-
-    return (
-      <>
-        <Box color="warning.main">
-          <Typography variant="body2">Select a device and customize each of its entities using the options.</Typography>
-        </Box>
-        <ValidatedTextField
-          name="device"
-          label="EMS Device"
-          variant="outlined"
-          fullWidth
-          value={selectedDevice}
-          onChange={changeSelectedDevice}
-          margin="normal"
-          select
-        >
-          <MenuItem disabled key={0} value={0}>
-            Select a device...
-          </MenuItem>
-          {devices.devices.sort(compareDevices).map((device: DeviceShort, index) => (
-            <MenuItem key={index} value={device.i}>
-              {device.s}
-            </MenuItem>
-          ))}
-        </ValidatedTextField>
-      </>
-    );
-  };
-
-  const saveCustomization = async () => {
-    if (deviceEntities && selectedDevice) {
-      const masked_entities = deviceEntities
-        .filter((de) => de.m !== de.om)
-        .map((new_de) => new_de.m.toString(16).padStart(2, '0') + new_de.s);
-
-      if (masked_entities.length > 60) {
-        enqueueSnackbar('Selected entities exceeded limit of 60. Please Save in batches', { variant: 'warning' });
-        return;
-      }
-
-      try {
-        const response = await EMSESP.writeMaskedEntities({
-          id: selectedDevice,
-          entity_ids: masked_entities
-        });
-        if (response.status === 200) {
-          enqueueSnackbar('Customization saved', { variant: 'success' });
-        } else {
-          enqueueSnackbar('Customization save failed', { variant: 'error' });
-        }
-      } catch (error: any) {
-        enqueueSnackbar(extractErrorMessage(error, 'Problem sending entity list'), { variant: 'error' });
-      }
-      setInitialMask(deviceEntities);
-    }
-  };
-
-  const renderDeviceData = () => {
-    if (devices?.devices.length === 0 || deviceEntities[0].id === '') {
-      return;
-    }
-
   const getMaskNumber = (newMask: string[]) => {
     var new_mask = 0;
     for (let entry of newMask) {
@@ -311,6 +234,99 @@ const SettingsCustomization: FC = () => {
     );
   };
 
+  function compareDevices(a: DeviceShort, b: DeviceShort) {
+    if (a.s < b.s) {
+      return -1;
+    }
+    if (a.s > b.s) {
+      return 1;
+    }
+    return 0;
+  }
+
+  const changeSelectedDevice = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selected_device = parseInt(event.target.value, 10);
+    setSelectedDevice(selected_device);
+    fetchDeviceEntities(selected_device);
+  };
+
+  const resetCustomization = async () => {
+    try {
+      await EMSESP.resetCustomizations();
+      enqueueSnackbar('All customizations have been removed. Restarting...', { variant: 'info' });
+    } catch (error: any) {
+      enqueueSnackbar(extractErrorMessage(error, 'Problem resetting customizations'), { variant: 'error' });
+    } finally {
+      setConfirmReset(false);
+    }
+  };
+
+  const saveCustomization = async () => {
+    if (deviceEntities && selectedDevice) {
+      const masked_entities = deviceEntities
+        .filter((de) => de.m !== de.om)
+        .map((new_de) => new_de.m.toString(16).padStart(2, '0') + new_de.s);
+
+      if (masked_entities.length > 60) {
+        enqueueSnackbar('Selected entities exceeded limit of 60. Please Save in batches', { variant: 'warning' });
+        return;
+      }
+
+      try {
+        const response = await EMSESP.writeMaskedEntities({
+          id: selectedDevice,
+          entity_ids: masked_entities
+        });
+        if (response.status === 200) {
+          enqueueSnackbar('Customization saved', { variant: 'success' });
+        } else {
+          enqueueSnackbar('Customization save failed', { variant: 'error' });
+        }
+      } catch (error: any) {
+        enqueueSnackbar(extractErrorMessage(error, 'Problem sending entity list'), { variant: 'error' });
+      }
+      setInitialMask(deviceEntities);
+    }
+  };
+
+  const renderDeviceList = () => {
+    if (!devices) {
+      return <FormLoader errorMessage={errorMessage} />;
+    }
+
+    return (
+      <>
+        <Box color="warning.main">
+          <Typography variant="body2">Select a device and customize each of its entities using the options.</Typography>
+        </Box>
+        <ValidatedTextField
+          name="device"
+          label="EMS Device"
+          variant="outlined"
+          fullWidth
+          value={selectedDevice}
+          onChange={changeSelectedDevice}
+          margin="normal"
+          select
+        >
+          <MenuItem disabled key={0} value={0}>
+            Select a device...
+          </MenuItem>
+          {devices.devices.sort(compareDevices).map((device: DeviceShort, index) => (
+            <MenuItem key={index} value={device.i}>
+              {device.s}
+            </MenuItem>
+          ))}
+        </ValidatedTextField>
+      </>
+    );
+  };
+
+  const renderDeviceData = () => {
+    if (devices?.devices.length === 0 || deviceEntities[0].id === '') {
+      return;
+    }
+
     const shown_data = deviceEntities.filter(
       (de) => (de.m & selectedFilters || !selectedFilters) && de.id.toLowerCase().includes(search.toLowerCase())
     );
@@ -418,7 +434,7 @@ const SettingsCustomization: FC = () => {
                       fullWidth
                       style={{ fontSize: '14px', justifyContent: 'flex-start' }}
                       endIcon={getSortIcon(entity_sort.state, 'NAME')}
-                      onClick={() => entity_sort.fns.onToggleSort({ sortKey: 'NAME' })}
+                      onClick={() => sort_name()}
                     >
                       NAME
                     </Button>
@@ -437,6 +453,9 @@ const SettingsCustomization: FC = () => {
                         value={getMaskString(de.m)}
                         onChange={(event, mask) => {
                           de.m = getMaskNumber(mask);
+                          if (de.m & DeviceEntityMask.DV_WEB_EXCLUDE) {
+                            de.m = de.m & ~DeviceEntityMask.DV_FAVORITE;
+                          }
                           setMasks(['']);
                         }}
                       >
@@ -468,17 +487,6 @@ const SettingsCustomization: FC = () => {
     );
   };
 
-  const resetCustomization = async () => {
-    try {
-      await EMSESP.resetCustomizations();
-      enqueueSnackbar('All customizations have been removed. Restarting...', { variant: 'info' });
-    } catch (error: any) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem resetting customizations'), { variant: 'error' });
-    } finally {
-      setConfirmReset(false);
-    }
-  };
-
   const renderResetDialog = () => (
     <Dialog open={confirmReset} onClose={() => setConfirmReset(false)}>
       <DialogTitle>Reset</DialogTitle>