more updates to tables

interface/package-lock.json

@@ -21,7 +21,7 @@
         "@types/react-router-dom": "^5.3.3",
         "async-validator": "^4.0.7",
         "axios": "^0.26.1",
-        "http-proxy-middleware": "^2.0.4",
+        "http-proxy-middleware": "^2.0.6",
         "jwt-decode": "^3.1.2",
         "lodash": "^4.17.21",
         "notistack": "^2.0.4",
@@ -8879,9 +8879,9 @@
       }
     },
     "node_modules/http-proxy-middleware": {
-      "version": "2.0.4",
+      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
-      "integrity": "sha512-m/4FxX17SUvz4lJ5WPXOHDUuCwIqXLfLHs1s0uZ3oYjhoXlx9csYxaOa0ElDEJ+h8Q4iJ1s+lTMbiCa4EXIJqg==",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
       "dependencies": {
         "@types/http-proxy": "^1.17.8",
         "http-proxy": "^1.18.1",
@@ -23917,9 +23917,9 @@
       }
     },
     "http-proxy-middleware": {
-      "version": "2.0.4",
+      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
-      "integrity": "sha512-m/4FxX17SUvz4lJ5WPXOHDUuCwIqXLfLHs1s0uZ3oYjhoXlx9csYxaOa0ElDEJ+h8Q4iJ1s+lTMbiCa4EXIJqg==",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
       "requires": {
         "@types/http-proxy": "^1.17.8",
         "http-proxy": "^1.18.1",

interface/package.json

@@ -17,7 +17,7 @@
     "@types/react-router-dom": "^5.3.3",
     "async-validator": "^4.0.7",
     "axios": "^0.26.1",
-    "http-proxy-middleware": "^2.0.4",
+    "http-proxy-middleware": "^2.0.6",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "notistack": "^2.0.4",

interface/src/project/DashboardData.tsx

@@ -102,7 +102,9 @@ const DashboardData: FC = () => {
     HeaderRow: `
       text-transform: uppercase;
       background-color: black;
+      color: #90CAF9;
       border-bottom: 1px solid #e0e0e0;
+      font-weight: 500;
     `,
     Row: `
       background-color: #1e1e1e;
@@ -171,6 +173,7 @@ const DashboardData: FC = () => {
       background-color: black;
       color: #90CAF9;
       border-bottom: 1px solid #e0e0e0;
+      font-weight: 500;
     `,
     Row: `
       &:nth-of-type(odd) {
@@ -237,8 +240,7 @@ const DashboardData: FC = () => {
       sortFns: {
         GPIO: (array) => array.sort((a, b) => a.g - b.g),
         NAME: (array) => array.sort((a, b) => a.n.localeCompare(b.n)),
-        TYPE: (array) => array.sort((a, b) => a.t - b.t),
+        TYPE: (array) => array.sort((a, b) => a.t - b.t)
-        VALUE: (array) => array.sort((a, b) => a.v.toString().localeCompare(b.v.toString()))
       }
     }
   );
@@ -269,8 +271,7 @@ const DashboardData: FC = () => {
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },
       sortFns: {
-        NAME: (array) => array.sort((a, b) => a.id.slice(2).localeCompare(b.id.slice(2))),
+        NAME: (array) => array.sort((a, b) => a.id.slice(2).localeCompare(b.id.slice(2)))
-        VALUE: (array) => array.sort((a, b) => a.v.toString().localeCompare(b.v.toString()))
       }
     }
   );
@@ -337,8 +338,7 @@ const DashboardData: FC = () => {
     );
   };
 
-  const refreshData = () => {
+  const refreshDataIndex = (selectedDevice: string) => {
-    const selectedDevice = device_select.state.id;
     if (selectedDevice === 'sensor') {
       fetchSensorData();
       return;
@@ -352,6 +352,10 @@ const DashboardData: FC = () => {
     }
   };
 
+  const refreshData = () => {
+    refreshDataIndex(device_select.state.id);
+  };
+
   const fetchCoreData = useCallback(async () => {
     try {
       setCoreData((await EMSESP.readCoreData()).data);
@@ -641,7 +645,6 @@ const DashboardData: FC = () => {
   const renderCoreData = () => (
     <IconContext.Provider value={{ color: 'lightblue', size: '24', style: { verticalAlign: 'middle' } }}>
       {coreData.devices.length === 0 && <MessageBox my={2} level="warning" message="Scanning for EMS devices..." />}
-
       <Table data={{ nodes: coreData.devices }} select={device_select} theme={device_theme} layout={{ custom: true }}>
         {(tableList: any) => (
           <>
@@ -658,7 +661,9 @@ const DashboardData: FC = () => {
               {tableList.map((device: Device, index: number) => (
                 <Row key={device.id} item={device}>
                   <Cell>
+                    {/* <IconButton onClick={() => refreshDataIndex(device.id)}> */}
                     <DeviceIcon type={device.t} />
+                    {/* </IconButton> */}
                   </Cell>
                   <Cell>{device.t}</Cell>
                   <Cell>{device.n}</Cell>
@@ -673,7 +678,9 @@ const DashboardData: FC = () => {
               {(coreData.active_sensors > 0 || coreData.analog_enabled) && (
                 <Row key="sensor" item={{ id: 'sensor' }}>
                   <Cell>
+                    {/* <IconButton onClick={() => refreshDataIndex('sensor')}> */}
                     <DeviceIcon type="Sensor" />
+                    {/* </IconButton> */}
                   </Cell>
                   <Cell>Sensors</Cell>
                   <Cell>Attached EMS-ESP Sensors</Cell>
@@ -722,7 +729,7 @@ const DashboardData: FC = () => {
 
         <FormControlLabel
           control={<Checkbox size="small" name="onlyFav" checked={onlyFav} onChange={() => setOnlyFav(!onlyFav)} />}
-          label={<span style={{ fontSize: '12px' }}>favorites only</span>}
+          label={<span style={{ fontSize: '12px' }}>show only favorites</span>}
         />
 
         <Table
@@ -748,16 +755,7 @@ const DashboardData: FC = () => {
                       ENTITY NAME
                     </Button>
                   </HeaderCell>
-                  <HeaderCell resize>
+                  <HeaderCell resize>VALUE</HeaderCell>
-                    <Button
-                      fullWidth
-                      style={{ fontSize: '14px', justifyContent: 'flex-start' }}
-                      endIcon={getSortIcon(dv_sort.state, 'VALUE')}
-                      onClick={() => dv_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
-                    >
-                      VALUE
-                    </Button>
-                  </HeaderCell>
                   <HeaderCell />
                 </HeaderRow>
               </Header>
@@ -895,16 +893,7 @@ const DashboardData: FC = () => {
                     TYPE
                   </Button>
                 </HeaderCell>
-                <HeaderCell resize>
+                <HeaderCell resize>VALUE</HeaderCell>
-                  <Button
-                    fullWidth
-                    style={{ fontSize: '14px', justifyContent: 'flex-start' }}
-                    endIcon={getSortIcon(analog_sort.state, 'VALUE')}
-                    onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
-                  >
-                    VALUE
-                  </Button>
-                </HeaderCell>
                 <HeaderCell />
               </HeaderRow>
             </Header>

interface/src/project/DashboardStatus.tsx

@@ -209,7 +209,7 @@ const DashboardStatus: FC = () => {
                   </HeaderRow>
                 </Header>
                 <Body>
-                  {tableList.map((stat: Stat, index: number) => (
+                  {tableList.map((stat: Stat) => (
                     <Row key={stat.id} item={stat}>
                       <Cell>{stat.id}</Cell>
                       <Cell>{Intl.NumberFormat().format(stat.s)}</Cell>

interface/src/project/SettingsCustomization.tsx

@@ -34,6 +34,7 @@ import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutl
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
 import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
 import SearchIcon from '@mui/icons-material/Search';
+import FilterListIcon from '@mui/icons-material/FilterList';
 
 import { ButtonRow, FormLoader, ValidatedTextField, SectionContent } from '../components';
 
@@ -68,6 +69,7 @@ const SettingsCustomization: FC = () => {
       background-color: black;
       border-bottom: 1px solid #e0e0e0;
       color: #90CAF9;
+      font-weight: 500;
     `,
     Row: `
       background-color: #1e1e1e;
@@ -97,6 +99,7 @@ const SettingsCustomization: FC = () => {
       }
     `,
     BaseCell: `
+      padding-left: 8px;
       border-top: 1px solid transparent;
       border-right: 1px solid transparent;
       border-bottom: 1px solid transparent;
@@ -104,6 +107,8 @@ const SettingsCustomization: FC = () => {
         left: 0px;
         min-width: 124px;
         width: 124px;
+        padding-left: 0px;
+
       }
       &:nth-of-type(2) {
         min-width: 70%;
@@ -112,6 +117,9 @@ const SettingsCustomization: FC = () => {
     `,
     HeaderCell: `
       padding-left: 0px;
+      &:nth-of-type(1) {
+        padding-left: 24px;
+      }
       &:nth-of-type(2) {
         border-right: 1px solid #565656;
       }
@@ -288,34 +296,53 @@ const SettingsCustomization: FC = () => {
 
     const maskDisabled = (set: boolean) => {
       setDeviceEntities(
-        deviceEntities
+        deviceEntities.map(function (de) {
-          .filter((de) => de.m & selectedFilters || !selectedFilters)
+          if ((de.m & selectedFilters || !selectedFilters) && de.id.toLowerCase().includes(search.toLowerCase())) {
-          .map(({ m, ...entities }) => ({
+            return {
-            ...entities,
+              ...de,
               m: set
-              ? m | (DeviceEntityMask.DV_API_MQTT_EXCLUDE | DeviceEntityMask.DV_WEB_EXCLUDE)
+                ? de.m | (DeviceEntityMask.DV_API_MQTT_EXCLUDE | DeviceEntityMask.DV_WEB_EXCLUDE)
-              : m & ~(DeviceEntityMask.DV_API_MQTT_EXCLUDE | DeviceEntityMask.DV_WEB_EXCLUDE)
+                : de.m & ~(DeviceEntityMask.DV_API_MQTT_EXCLUDE | DeviceEntityMask.DV_WEB_EXCLUDE)
-          }))
+            };
+          } else {
+            return de;
+          }
+        })
       );
     };
 
+    const shown_data = deviceEntities.filter(
+      (de) => (de.m & selectedFilters || !selectedFilters) && de.id.toLowerCase().includes(search.toLowerCase())
+    );
+
     return (
       <>
-        <Grid
+        <Grid container mb={1} mt={0} spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
-          container
-          ml={1}
-          mb={1}
-          mt={1}
-          spacing={1}
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="center"
-        >
           <Grid item>
-            <Typography align="right" variant="subtitle2" color="primary">
+            <Typography variant="subtitle2" color="primary">
-              Filter:&nbsp;
+              #:
             </Typography>
           </Grid>
+          <Grid item>
+            <Typography variant="subtitle2">
+              {shown_data.length}/{deviceEntities.length}
+            </Typography>
+          </Grid>
+          <Grid item>
+            <SearchIcon color="primary" sx={{ fontSize: 16, verticalAlign: 'middle' }} />:
+          </Grid>
+          <Grid item xs={2}>
+            <TextField
+              size="small"
+              variant="outlined"
+              onChange={(event) => {
+                setSearch(event.target.value);
+              }}
+            />
+          </Grid>
+          <Grid item>
+            <FilterListIcon color="primary" sx={{ fontSize: 14, verticalAlign: 'middle' }} />:
+          </Grid>
           <Grid item>
             <ToggleButtonGroup
               size="small"
@@ -347,34 +374,36 @@ const SettingsCustomization: FC = () => {
               </ToggleButton>
             </ToggleButtonGroup>
           </Grid>
+
           <Grid item>
-            <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
+            <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 14, verticalAlign: 'middle' }} />
-              <SearchIcon color="primary" sx={{ fontSize: 16, mr: 1, my: 0.5 }} />
+            <VisibilityOffOutlinedIcon color="primary" sx={{ fontSize: 14, verticalAlign: 'middle' }} />:
-              <TextField
-                variant="standard"
-                onChange={(event) => {
-                  setSearch(event.target.value);
-                }}
-              />
-            </Box>
           </Grid>
           <Grid item>
-            <Button size="small" variant="outlined" color="primary" onClick={() => maskDisabled(true)}>
+            <Button
-              disable MQTT+WEB
+              size="small"
+              sx={{ fontSize: 10 }}
+              variant="outlined"
+              color="inherit"
+              onClick={() => maskDisabled(false)}
+            >
+              enable
             </Button>
           </Grid>
           <Grid item>
-            <Button size="small" variant="outlined" color="primary" onClick={() => maskDisabled(false)}>
+            <Button
-              enable MQTT+WEB
+              size="small"
+              sx={{ fontSize: 10 }}
+              variant="outlined"
+              color="inherit"
+              onClick={() => maskDisabled(true)}
+            >
+              disable
             </Button>
           </Grid>
         </Grid>
         <Table
-          data={{
+          data={{ nodes: shown_data }}
-            nodes: deviceEntities.filter(
-              (de) => (de.m & selectedFilters || !selectedFilters) && de.id.toLowerCase().includes(search.toLowerCase())
-            )
-          }}
           theme={entities_theme}
           sort={entity_sort}
           layout={{ custom: true, horizontalScroll: true }}
@@ -414,7 +443,7 @@ const SettingsCustomization: FC = () => {
                         <ToggleButton value="8" disabled={(de.m & 1) !== 0 || de.id === ''}>
                           <StarIcon sx={{ fontSize: 14 }} />
                         </ToggleButton>
-                        <ToggleButton value="4" disabled={!de.w}>
+                        <ToggleButton value="4" disabled={!de.w || (de.m & 3) === 3}>
                           <EditOffOutlinedIcon sx={{ fontSize: 14 }} />
                         </ToggleButton>
                         <ToggleButton value="2">

src/version.h

@@ -1 +1 @@
-#define EMSESP_APP_VERSION "3.4.0b12t3"
+#define EMSESP_APP_VERSION "3.4.0b12t4"