Merge pull request #425 from proddy/dev

more icons to dashboard

interface/package.json

@@ -9,7 +9,7 @@
     "@msgpack/msgpack": "^2.7.2",
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.5.3",
-    "@types/lodash": "^4.14.180",
+    "@types/lodash": "^4.14.181",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
@@ -22,8 +22,8 @@
     "notistack": "^2.0.3",
     "parse-ms": "^3.0.0",
     "react": "^17.0.2",
-    "react-app-rewired": "^2.2.1",
     "react-dom": "^17.0.2",
+    "react-app-rewired": "^2.2.1",
     "react-dropzone": "^12.0.4",
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.2.2",

interface/src/project/DashboardData.tsx

@@ -39,6 +39,8 @@ import SaveIcon from '@mui/icons-material/Save';
 import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
+import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
 
 import DeviceIcon from './DeviceIcon';
 
@@ -64,7 +66,8 @@ import {
   AnalogType,
   AnalogTypeNames,
   Sensor,
-  Analog
+  Analog,
+  DeviceEntityMask
 } from './types';
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
@@ -487,39 +490,25 @@ const DashboardData: FC = () => {
       return;
     }
 
+    const hasMask = (entityName: string, mask: number) => (parseInt(entityName.slice(0, 2), 16) & mask) === mask;
+
     const sendCommand = (dv: DeviceValue) => {
-      if (dv.c && me.admin) {
+      if (dv.c && me.admin && !hasMask(dv.n, DeviceEntityMask.DV_READONLY)) {
         setDeviceValue(dv);
       }
     };
 
-    const renderNameCell = (dv: DeviceValue) => {
-      var mask = Number(dv.n.slice(0, 2));
-      var name = dv.n.slice(2);
-      if (dv.v === undefined && dv.c) {
-        return (
-          <StyledTableCell component="th" scope="row">
-            {name}&nbsp;
-            <PlayArrowIcon color="primary" sx={{ fontSize: 12 }} />
-          </StyledTableCell>
+    const renderNameCell = (dv: DeviceValue) => (
+      <>
+        {dv.n.slice(2)}&nbsp;
+        {hasMask(dv.n, DeviceEntityMask.DV_FAVORITE) && <FavoriteBorderIcon color="success" sx={{ fontSize: 12 }} />}
+        {hasMask(dv.n, DeviceEntityMask.DV_READONLY) && <EditOffOutlinedIcon color="primary" sx={{ fontSize: 12 }} />}
+        {hasMask(dv.n, DeviceEntityMask.DV_API_MQTT_EXCLUDE) && (
+          <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
+        )}
+        {dv.v === undefined && dv.c && <PlayArrowIcon color="primary" sx={{ fontSize: 14 }} />}
+      </>
     );
-      }
-
-      if ((mask & 8) === 8) {
-        return (
-          <StyledTableCell component="th" scope="row">
-            {name}&nbsp;
-            <FavoriteBorderIcon color="success" sx={{ fontSize: 10 }} />
-          </StyledTableCell>
-        );
-      }
-
-      return (
-        <StyledTableCell component="th" scope="row">
-          {name}
-        </StyledTableCell>
-      );
-    };
 
     return (
       <>
@@ -536,17 +525,27 @@ const DashboardData: FC = () => {
           </TableHead>
           <TableBody>
             {deviceData.data.map((dv, i) => (
-              <StyledTableRow key={i} onClick={() => sendCommand(dv)}>
+              <TableRow
+                key={i}
+                onClick={() => sendCommand(dv)}
+                // sx={
+                //   hasMask(dv.n, DeviceEntityMask.DV_FAVORITE)
+                //     ? { backgroundColor: '#334900' }
+                //     : { backgroundColor: 'black' }
+                // }
+              >
                 <StyledTableCell padding="checkbox">
-                  {dv.c && me.admin && (
+                  {dv.c && me.admin && !hasMask(dv.n, DeviceEntityMask.DV_READONLY) && (
                     <IconButton size="small">
                       <EditIcon color="primary" fontSize="small" />
                     </IconButton>
                   )}
                 </StyledTableCell>
+                <StyledTableCell component="th" scope="row">
                   {renderNameCell(dv)}
+                </StyledTableCell>
                 <StyledTableCell align="right">{formatValue(dv.v, dv.u)}</StyledTableCell>
-              </StyledTableRow>
+              </TableRow>
             ))}
           </TableBody>
         </Table>

interface/src/project/SettingsCustomization.tsx

@@ -46,7 +46,7 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
     fontSize: 11
   },
   [`&.${tableCellClasses.body}`]: {
-    fontSize: 11
+    fontSize: 12
   }
 }));
 
@@ -60,7 +60,7 @@ const SettingsCustomization: FC = () => {
   const [confirmReset, setConfirmReset] = useState<boolean>(false);
 
   // eslint-disable-next-line
-  const [masks, setMasks] = useState(() => ['1']);
+  const [masks, setMasks] = useState(() => ['']);
 
   const fetchDevices = useCallback(async () => {
     try {
@@ -119,10 +119,10 @@ const SettingsCustomization: FC = () => {
         <Box mb={2} color="warning.main">
           <Typography variant="body2">
             You can mark an entity as a favorite to be listed first in the Dashboard (
-            <FavoriteBorderOutlinedIcon fontSize="small" />) ,or remove it entirely from the Dashboard (
-            <VisibilityOffOutlinedIcon fontSize="small" />) ,or disable it's write operation (
-            <EditOffOutlinedIcon fontSize="small" />) or have it excluded from the MQTT and API outputs (
-            <CommentsDisabledOutlinedIcon fontSize="small" />
+            <FavoriteBorderOutlinedIcon color="success" fontSize="small" />) ,or remove it entirely from the Dashboard (
+            <VisibilityOffOutlinedIcon color="action" fontSize="small" />) ,or disable it's write operation (
+            <EditOffOutlinedIcon color="action" fontSize="small" />) or have it excluded from the MQTT and API outputs (
+            <CommentsDisabledOutlinedIcon color="action" fontSize="small" />
             ).
           </Typography>
         </Box>

interface/src/project/types.ts

@@ -283,3 +283,11 @@ export interface WriteAnalog {
   uom: number;
   type: number;
 }
+
+export enum DeviceEntityMask {
+  DV_DEFAULT = 0,
+  DV_WEB_EXCLUDE = 1,
+  DV_API_MQTT_EXCLUDE = 2,
+  DV_READONLY = 4,
+  DV_FAVORITE = 8
+}

mock-api/server.js

@@ -488,11 +488,11 @@ const emsesp_devicedata_1 = {
 const emsesp_devicedata_2 = {
   label: 'Boiler: Nefit GBx72/Trendline/Cerapur/Greenstar Si/27i',
   data: [
+    { u: 0, n: '08reset', c: 'reset', l: ['-', 'maintenance', 'error'] },
     { v: 'false', u: 0, n: '08heating active' },
-    { v: 'false', u: 0, n: '08tapwater active' },
-    { u: 0, n: '00reset', c: 'reset', l: ['-', 'maintenance', 'error'] },
-    { v: 5, u: 1, n: '00selected flow temperature', c: 'selflowtemp' },
-    { v: 0, u: 3, n: '00burner selected max power', c: 'selburnpow' },
+    { v: 'false', u: 0, n: '04tapwater active' },
+    { v: 5, u: 1, n: '04selected flow temperature', c: 'selflowtemp' },
+    { v: 0, u: 3, n: '0Eburner selected max power', c: 'selburnpow' },
     { v: 0, u: 3, n: '00heating pump modulation' },
     { v: 53.4, u: 1, n: '00current flow temperature' },
     { v: 52.7, u: 1, n: '00return temperature' },