Merge branch 'dev' of https://github.com/emsesp/EMS-ESP32 into idf4

interface/package-lock.json

@@ -29,7 +29,7 @@
         "react": "^17.0.2",
         "react-app-rewired": "^2.2.1",
         "react-dom": "^17.0.2",
-        "react-dropzone": "^14.1.1",
+        "react-dropzone": "^14.2.0",
         "react-icons": "^4.3.1",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
@@ -8012,14 +8012,14 @@
       }
     },
     "node_modules/file-selector": {
-      "version": "0.5.0",
+      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
-      "integrity": "sha512-s8KNnmIDTBoD0p9uJ9uD0XY38SCeBOtj0UMXyQSLg1Ypfrfj8+dAvwsLjYQkQ2GjhVtp2HrnF5cJzMhBjfD8HA==",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
       "dependencies": {
-        "tslib": "^2.0.3"
+        "tslib": "^2.4.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 12"
       }
     },
     "node_modules/filelist": {
@@ -14707,12 +14707,12 @@
       }
     },
     "node_modules/react-dropzone": {
-      "version": "14.1.1",
+      "version": "14.2.0",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.0.tgz",
-      "integrity": "sha512-JYavQrxU66hBHwDAXCMoHNvhMonKDA0VQ8ouJi8Ouxgz9lmtA4OGVBXgOTCq4vCbwTTDT9synvNUCIpT6zWWow==",
+      "integrity": "sha512-D7AXPtRba8rd7DBOejh3W2v1Uax6i7XKPYPuMr13XFPfnDcPHHvlEfp3raVpdj3XMHlRfYuf2H5+m8p7mlgKdQ==",
       "dependencies": {
         "attr-accept": "^2.2.2",
-        "file-selector": "^0.5.0",
+        "file-selector": "^0.6.0",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -23611,11 +23611,11 @@
       }
     },
     "file-selector": {
-      "version": "0.5.0",
+      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
-      "integrity": "sha512-s8KNnmIDTBoD0p9uJ9uD0XY38SCeBOtj0UMXyQSLg1Ypfrfj8+dAvwsLjYQkQ2GjhVtp2HrnF5cJzMhBjfD8HA==",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
       "requires": {
-        "tslib": "^2.0.3"
+        "tslib": "^2.4.0"
       }
     },
     "filelist": {
@@ -28316,12 +28316,12 @@
       }
     },
     "react-dropzone": {
-      "version": "14.1.1",
+      "version": "14.2.0",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.0.tgz",
-      "integrity": "sha512-JYavQrxU66hBHwDAXCMoHNvhMonKDA0VQ8ouJi8Ouxgz9lmtA4OGVBXgOTCq4vCbwTTDT9synvNUCIpT6zWWow==",
+      "integrity": "sha512-D7AXPtRba8rd7DBOejh3W2v1Uax6i7XKPYPuMr13XFPfnDcPHHvlEfp3raVpdj3XMHlRfYuf2H5+m8p7mlgKdQ==",
       "requires": {
         "attr-accept": "^2.2.2",
-        "file-selector": "^0.5.0",
+        "file-selector": "^0.6.0",
         "prop-types": "^15.8.1"
       }
     },

interface/package.json

@@ -25,7 +25,7 @@
     "react": "^17.0.2",
     "react-app-rewired": "^2.2.1",
     "react-dom": "^17.0.2",
-    "react-dropzone": "^14.1.1",
+    "react-dropzone": "^14.2.0",
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",

interface/src/CustomTheme.tsx

@@ -11,28 +11,12 @@ const theme = responsiveFontSizes(
     },
     palette: {
       mode: 'dark',
-      // background: {
-      //   default: grey[900], // #212121
-      //   // paper: grey[800]
-      // },
-      // primary: {
-      //   main: '#33bfff'
-      // },
       secondary: {
-        main: blue[500] // in buttons
+        main: blue[500]
       },
       info: {
-        main: blueGrey[500] // used in icons
+        main: blueGrey[500]
       }
-      // warning: {
-      //   main: orange[500]
-      // },
-      // error: {
-      //   main: red[200]
-      // },
-      // success: {
-      //   main: green[700]
-      // }
     }
   })
 );

interface/src/components/MessageBox.tsx

@@ -32,7 +32,6 @@ const MessageBox: FC<MessageBoxProps> = ({ level, message, sx, children, ...rest
   const theme = useTheme();
   const Icon = LEVEL_ICONS[level];
   const backgroundColor = LEVEL_BACKGROUNDS[level](theme);
-  // const color = theme.palette.getContrastText(backgroundColor);
   const color = 'white';
   return (
     <Box p={2} display="flex" alignItems="center" borderRadius={1} sx={{ backgroundColor, color, ...sx }} {...rest}>

interface/src/components/layout/LayoutAppBar.tsx

@@ -25,7 +25,6 @@ const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => {
         ml: { md: `${DRAWER_WIDTH}px` },
         boxShadow: 'none',
         backgroundColor: '#2e586a'
-        // color: "#2196f3",
       }}
     >
       <Toolbar>

interface/src/components/layout/LayoutDrawer.tsx

@@ -47,7 +47,7 @@ const LayoutDrawer: FC<LayoutDrawerProps> = ({ mobileOpen, onClose }) => {
         open={mobileOpen}
         onClose={onClose}
         ModalProps={{
-          keepMounted: true // Better open performance on mobile.
+          keepMounted: true
         }}
         sx={{
           display: { xs: 'block', md: 'none' },

interface/src/project/DashboardData.tsx

@@ -137,6 +137,11 @@ const DashboardData: FC = () => {
       border-top: 1px solid transparent;
       border-right: 1px solid transparent;
       border-bottom: 1px solid transparent;
+      &:not(.stiff) > div {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
       &:nth-of-type(1) {
         padding-left: 8px;
         min-width: 42px;
@@ -146,8 +151,8 @@ const DashboardData: FC = () => {
         }
       }
       &:nth-of-type(2) {
-        min-width: 120px;
+        min-width: 100px;
-        width: 120px;
+        width: 100px;
       }
       &:nth-of-type(3) {
         flex: 1;
@@ -157,8 +162,11 @@ const DashboardData: FC = () => {
         max-width: 100px;
       }
       &:last-of-type {
-        text-align: right;
+        padding-left: 0px;
-        min-width: 64px;
+        text-align: center;
+        width: 32px;
+        min-width: 32px;
+        max-width: 32px;
       }
     `
   });
@@ -206,34 +214,62 @@ const DashboardData: FC = () => {
       border-top: 1px solid transparent;
       border-right: 1px solid transparent;
       border-bottom: 1px solid transparent;
-      &:nth-of-type(1) {
+      &:not(.stiff) > div {
-        padding-left: 16px;
-      }
-      &:nth-of-type(4) {
-        padding-left: 16px;
-      }
-      width: 124px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-      &:last-of-type {
+      }
+      &:nth-of-type(1) {
+        width: 260px;
+      }
+      &:nth-of-type(2) {
+        flex: 1;
         text-align: right;
       }
+      &:last-of-type {
+        padding-left: 0px;
+        text-align: center;
+        width: 32px;
+        min-width: 32px;
+        max-width: 32px;
+      }
     `,
     HeaderCell: `
-      padding-left: 8px;
-      &:nth-of-type(1) {
-       padding-left: 8px;
-      }
-      &:nth-of-type(4) {
-        padding-left: 16px;
-      }
       &:not(:last-of-type) {
-        border-right: 1px solid #565656;
+        padding-left: 8px;
+        border-left: 1px solid #565656;
+      }
+      &:first-of-type {
+        border-left: 0px;
       }
     `
   });
 
+  const temperature_theme = useTheme([data_theme]);
+
+  const analog_theme = useTheme([
+    data_theme,
+    {
+      BaseCell: `
+        &:nth-of-type(1) {
+          width: 100px;
+          min-width: 100px;
+        }
+        &:nth-of-type(2) {
+          text-align: left;
+        }
+        &:nth-of-type(3) {
+          width: 100px;
+          min-width: 100px;
+        }
+        &:nth-of-type(4) {
+          text-align: right;
+          flex: 1;
+        }
+    `
+    }
+  ]);
+
   const getSortIcon = (state: any, sortKey: any) => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
@@ -671,8 +707,8 @@ const DashboardData: FC = () => {
             <Header>
               <HeaderRow>
                 <HeaderCell />
-                <HeaderCell resize>TYPE</HeaderCell>
+                <HeaderCell>TYPE</HeaderCell>
-                <HeaderCell resize>DESCRIPTION</HeaderCell>
+                <HeaderCell>DESCRIPTION</HeaderCell>
                 <HeaderCell>ENTITIES</HeaderCell>
                 <HeaderCell />
               </HeaderRow>
@@ -681,9 +717,7 @@ 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>
@@ -698,9 +732,7 @@ 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>
@@ -746,12 +778,15 @@ const DashboardData: FC = () => {
         <Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary">
           {deviceData.label}
         </Typography>
-
         <FormControlLabel
           control={<Checkbox size="small" name="onlyFav" checked={onlyFav} onChange={() => setOnlyFav(!onlyFav)} />}
-          label={<span style={{ fontSize: '12px' }}>show only favorites</span>}
+          label={
+            <span style={{ fontSize: '12px' }}>
+              only show favorites&nbsp;
+              <StarIcon color="primary" sx={{ fontSize: 12 }} />
+            </span>
+          }
         />
-
         <Table
           data={{
             nodes: onlyFav
@@ -760,7 +795,7 @@ const DashboardData: FC = () => {
           }}
           theme={data_theme}
           sort={dv_sort}
-          // layout={{ custom: true }}
+          layout={{ custom: true }}
         >
           {(tableList: any) => (
             <>
@@ -776,10 +811,10 @@ const DashboardData: FC = () => {
                       ENTITY NAME
                     </Button>
                   </HeaderCell>
-                  <HeaderCell resize>
+                  <HeaderCell>
                     <Button
                       fullWidth
-                      style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                      style={{ fontSize: '14px', justifyContent: 'flex-end' }}
                       endIcon={getSortIcon(dv_sort.state, 'VALUE')}
                       onClick={() => dv_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
                     >
@@ -832,8 +867,12 @@ const DashboardData: FC = () => {
       <Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary">
         Temperature Sensors
       </Typography>
-
+      <Table
-      <Table data={{ nodes: sensorData.sensors }} theme={data_theme} sort={sensor_sort}>
+        data={{ nodes: sensorData.sensors }}
+        theme={temperature_theme}
+        sort={sensor_sort}
+        layout={{ custom: true }}
+      >
         {(tableList: any) => (
           <>
             <Header>
@@ -848,10 +887,10 @@ const DashboardData: FC = () => {
                     NAME
                   </Button>
                 </HeaderCell>
-                <HeaderCell resize>
+                <HeaderCell>
                   <Button
                     fullWidth
-                    style={{ fontSize: '14px', justifyContent: 'flex-start' }}
+                    style={{ fontSize: '14px', justifyContent: 'flex-end' }}
                     endIcon={getSortIcon(sensor_sort.state, 'TEMPERATURE')}
                     onClick={() => sensor_sort.fns.onToggleSort({ sortKey: 'TEMPERATURE' })}
                   >
@@ -888,7 +927,7 @@ const DashboardData: FC = () => {
         Analog Sensors
       </Typography>
 
-      <Table data={{ nodes: sensorData.analogs }} theme={data_theme} sort={analog_sort}>
+      <Table data={{ nodes: sensorData.analogs }} theme={analog_theme} sort={analog_sort} layout={{ custom: true }}>
         {(tableList: any) => (
           <>
             <Header>
@@ -923,7 +962,7 @@ const DashboardData: FC = () => {
                     TYPE
                   </Button>
                 </HeaderCell>
-                <HeaderCell resize>VALUE</HeaderCell>
+                <HeaderCell>VALUE</HeaderCell>
                 <HeaderCell />
               </HeaderRow>
             </Header>

interface/src/project/DashboardStatus.tsx

@@ -99,6 +99,7 @@ const DashboardStatus: FC = () => {
       color: #90CAF9;
       font-weight: 500;
       border-bottom: 1px solid #e0e0e0;
+      padding-left: 8px;
     `,
     Row: `
       &:nth-of-type(odd) {
@@ -125,26 +126,25 @@ const DashboardStatus: FC = () => {
       border-top: 1px solid transparent;
       border-right: 1px solid transparent;
       border-bottom: 1px solid transparent;
+      &:not(.stiff) > div {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+      }
       &:nth-of-type(1) {
         padding-left: 8px;
         flex: 1;
       }
       &:nth-of-type(2) {
-        min-width: 15%;
+        width: 70px;
-        width: 15%;
         text-align: right;
       }
       &:nth-of-type(3) {
-        min-width: 15%;
+        width: 40px;
-        width: 15%;
         text-align: right;
       }
       &:last-of-type {
-        min-width: 15%;
+        width: 75px;
-        width: 15%;
         text-align: right;
         padding-right: 8px;
       }

interface/src/project/SettingsCustomization.tsx

@@ -100,22 +100,28 @@ const SettingsCustomization: FC = () => {
       }
     `,
     BaseCell: `
-      padding-left: 8px;
       border-top: 1px solid transparent;
       border-right: 1px solid transparent;
       border-bottom: 1px solid transparent;
+      &:not(.stiff) > div {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+      }
       &:nth-of-type(1) {
-        left: 0px;
+        width: 120px;
-        min-width: 124px;
+        min-width: 120px;
-        width: 124px;
+        max-width: 120px;
-        padding-left: 0px;
       }
       &:nth-of-type(2) {
-        min-width: 70%;
+        padding-left: 8px;
-        width: 70%;
+        flex: 1;
+      }
+      &:nth-of-type(3) {
+        padding-right: 8px;
+        text-align: right;
+        width: 120px;
+        min-width: 120px;
       }
     `,
     HeaderCell: `
@@ -435,7 +441,7 @@ const SettingsCustomization: FC = () => {
                       NAME
                     </Button>
                   </HeaderCell>
-                  <HeaderCell resize>VALUE</HeaderCell>
+                  <HeaderCell>VALUE</HeaderCell>
                 </HeaderRow>
               </Header>
               <Body>