Merge pull request #487 from proddy/dev

table formatting again

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",
@@ -7976,14 +7976,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": {
@@ -14437,12 +14437,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": {
@@ -16294,9 +16294,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.3.1",
+      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -23280,11 +23280,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": {
@@ -27793,12 +27793,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"
       }
     },
@@ -29185,9 +29185,9 @@
       }
     },
     "tslib": {
-      "version": "2.3.1",
+      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
     "tsutils": {
       "version": "3.21.0",

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/project/DashboardData.tsx

@@ -206,34 +206,63 @@ 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: 16px;
+        width: 260px;
+        min-width: 260px;
       }
-      &:nth-of-type(4) {
+      &:nth-of-type(2) {
-        padding-left: 16px;
+        flex: 1;
-      }
-      width: 124px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      &:last-of-type {
         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 />;
@@ -746,12 +775,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 +792,7 @@ const DashboardData: FC = () => {
           }}
           theme={data_theme}
           sort={dv_sort}
-          // layout={{ custom: true }}
+          layout={{ custom: true }}
         >
           {(tableList: any) => (
             <>
@@ -776,10 +808,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 +864,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 +884,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 +924,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 +959,7 @@ const DashboardData: FC = () => {
                     TYPE
                   </Button>
                 </HeaderCell>
-                <HeaderCell resize>VALUE</HeaderCell>
+                <HeaderCell>VALUE</HeaderCell>
                 <HeaderCell />
               </HeaderRow>
             </Header>

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;
-      white-space: nowrap;
+      &:not(.stiff) > div {
-      overflow: hidden;
+        white-space: nowrap;
-      text-overflow: ellipsis;
+        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>