more updates to tables

2025-12-06 15:59:52 +03:00 · 2022-04-20 18:06:35 -04:00
parent 56860da4af
commit 726b4fcc0b
6 changed files with 99 additions and 81 deletions
--- a/interface/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.4.tgz",
-      "integrity": "sha512-m/4FxX17SUvz4lJ5WPXOHDUuCwIqXLfLHs1s0uZ3oYjhoXlx9csYxaOa0ElDEJ+h8Q4iJ1s+lTMbiCa4EXIJqg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.4.tgz",
-      "integrity": "sha512-m/4FxX17SUvz4lJ5WPXOHDUuCwIqXLfLHs1s0uZ3oYjhoXlx9csYxaOa0ElDEJ+h8Q4iJ1s+lTMbiCa4EXIJqg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
      "requires": {
        "@types/http-proxy": "^1.17.8",
        "http-proxy": "^1.18.1",
--- a/interface/package.json
+++ b/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",
--- a/interface/src/project/DashboardData.tsx
+++ b/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),
-        VALUE: (array) => array.sort((a, b) => a.v.toString().localeCompare(b.v.toString()))
+        TYPE: (array) => array.sort((a, b) => a.t - b.t)
      }
    }
  );
@@ -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))),
-        VALUE: (array) => array.sort((a, b) => a.v.toString().localeCompare(b.v.toString()))
+        NAME: (array) => array.sort((a, b) => a.id.slice(2).localeCompare(b.id.slice(2)))
      }
    }
  );
@@ -337,8 +338,7 @@ const DashboardData: FC = () => {
    );
  };

-  const refreshData = () => {
-    const selectedDevice = device_select.state.id;
+  const refreshDataIndex = (selectedDevice: string) => {
    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>
-                    <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 resize>VALUE</HeaderCell>
                  <HeaderCell />
                </HeaderRow>
              </Header>
@@ -895,16 +893,7 @@ const DashboardData: FC = () => {
                    TYPE
                  </Button>
                </HeaderCell>
-                <HeaderCell resize>
-                  <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 resize>VALUE</HeaderCell>
                <HeaderCell />
              </HeaderRow>
            </Header>
--- a/interface/src/project/DashboardStatus.tsx
+++ b/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>
--- a/interface/src/project/SettingsCustomization.tsx
+++ b/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
-          .filter((de) => de.m & selectedFilters || !selectedFilters)
-          .map(({ m, ...entities }) => ({
-            ...entities,
+        deviceEntities.map(function (de) {
+          if ((de.m & selectedFilters || !selectedFilters) && de.id.toLowerCase().includes(search.toLowerCase())) {
+            return {
+              ...de,
              m: set
-              ? 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)
+                : 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
-          container
-          ml={1}
-          mb={1}
-          mt={1}
-          spacing={1}
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="center"
-        >
+        <Grid container mb={1} mt={0} spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
          <Grid item>
-            <Typography align="right" variant="subtitle2" color="primary">
-              Filter:&nbsp;
+            <Typography variant="subtitle2" color="primary">
+              #:
            </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' }}>
-              <SearchIcon color="primary" sx={{ fontSize: 16, mr: 1, my: 0.5 }} />
-              <TextField
-                variant="standard"
-                onChange={(event) => {
-                  setSearch(event.target.value);
-                }}
-              />
-            </Box>
+            <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 14, verticalAlign: 'middle' }} />
+            <VisibilityOffOutlinedIcon color="primary" sx={{ fontSize: 14, verticalAlign: 'middle' }} />:
          </Grid>
          <Grid item>
-            <Button size="small" variant="outlined" color="primary" onClick={() => maskDisabled(true)}>
-              disable MQTT+WEB
+            <Button
+              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)}>
-              enable MQTT+WEB
+            <Button
+              size="small"
+              sx={{ fontSize: 10 }}
+              variant="outlined"
+              color="inherit"
+              onClick={() => maskDisabled(true)}
+            >
+              disable
            </Button>
          </Grid>
        </Grid>
        <Table
-          data={{
-            nodes: deviceEntities.filter(
-              (de) => (de.m & selectedFilters || !selectedFilters) && de.id.toLowerCase().includes(search.toLowerCase())
-            )
-          }}
+          data={{ nodes: shown_data }}
          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">
--- a/src/version.h
+++ b/src/version.h
@@ -1 +1 @@
-#define EMSESP_APP_VERSION "3.4.0b12t3"
+#define EMSESP_APP_VERSION "3.4.0b12t4"