initial commit with new table code

interface/package.json

@@ -7,10 +7,11 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@msgpack/msgpack": "^2.7.2",
-    "@mui/icons-material": "^5.6.0",
+    "@mui/icons-material": "^5.6.1",
-    "@mui/material": "^5.6.0",
+    "@mui/material": "^5.6.1",
+    "@table-library/react-table-library": "^2.0.32",
     "@types/lodash": "^4.14.181",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.24",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "@types/react-router-dom": "^5.3.3",
@@ -19,15 +20,15 @@
     "http-proxy-middleware": "^2.0.4",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "notistack": "^2.0.3",
+    "notistack": "^2.0.4",
     "parse-ms": "^3.0.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-app-rewired": "^2.2.1",
-    "react-dropzone": "^12.0.4",
+    "react-dom": "^17.0.2",
+    "react-dropzone": "^12.0.5",
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.0",
+    "react-scripts": "5.0.1",
     "sockette": "^2.0.6",
     "typescript": "^4.6.3"
   },

interface/src/project/DashboardData.tsx

@@ -1,11 +1,7 @@
-import { FC, useState, useContext, useEffect } from 'react';
+import { FC, useState, useContext, useCallback, useEffect } from 'react';
 
 import {
   Button,
-  Table,
-  TableBody,
-  TableHead,
-  TableRow,
   Typography,
   Box,
   Dialog,
@@ -20,15 +16,18 @@ import {
   ListItem,
   ListItemText,
   Grid,
-  useMediaQuery
+  FormControlLabel,
+  Checkbox
 } from '@mui/material';
 
-import TableCell, { tableCellClasses } from '@mui/material/TableCell';
-
-import { styled } from '@mui/material/styles';
-
 import { useSnackbar } from 'notistack';
 
+import { Table } from '@table-library/react-table-library/table';
+import { useTheme } from '@table-library/react-table-library/theme';
+import { useSort, HeaderCellSort } from '@table-library/react-table-library/sort';
+import { Header, HeaderRow, HeaderCell, Body, Row, Cell } from '@table-library/react-table-library/table';
+import { useRowSelect } from '@table-library/react-table-library/select';
+
 import RefreshIcon from '@mui/icons-material/Refresh';
 import EditIcon from '@mui/icons-material/Edit';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
@@ -37,10 +36,11 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import SendIcon from '@mui/icons-material/TrendingFlat';
 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 KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
+import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
 
 import DeviceIcon from './DeviceIcon';
 
@@ -54,10 +54,11 @@ import { ButtonRow, FormLoader, ValidatedTextField, SectionContent, MessageBox }
 
 import * as EMSESP from './api';
 
-import { numberValue, updateValue, extractErrorMessage, useRest } from '../utils';
+import { numberValue, updateValue, extractErrorMessage } from '../utils';
 
 import {
   SensorData,
+  Device,
   CoreData,
   DeviceData,
   DeviceValue,
@@ -70,81 +71,255 @@ import {
   DeviceEntityMask
 } from './types';
 
-const StyledTableCell = styled(TableCell)(({ theme }) => ({
-  [`&.${tableCellClasses.head}`]: {
-    backgroundColor: theme.palette.common.black,
-    color: theme.palette.common.white,
-    fontSize: 14
-  }
-}));
-
-const StyledTableRow = styled(TableRow)(({ theme }) => ({
-  '&:nth-of-type(odd)': {
-    backgroundColor: theme.palette.action.hover
-  },
-  '&:hover': {
-    backgroundColor: theme.palette.info.light
-  }
-}));
-
 const DashboardData: FC = () => {
-  const { loadData, data, errorMessage } = useRest<CoreData>({ read: EMSESP.readCoreData });
-
   const { me } = useContext(AuthenticatedContext);
 
   const { enqueueSnackbar } = useSnackbar();
 
-  const [deviceData, setDeviceData] = useState<DeviceData>();
+  const [errorMessage, setErrorMessage] = useState<string>();
-  const [sensorData, setSensorData] = useState<SensorData>();
+  const [coreData, setCoreData] = useState<CoreData>({ devices: [], active_sensors: 0, analog_enabled: false });
+  const [deviceData, setDeviceData] = useState<DeviceData>({ label: '', data: [] });
+  const [sensorData, setSensorData] = useState<SensorData>({ sensors: [], analogs: [] });
   const [deviceValue, setDeviceValue] = useState<DeviceValue>();
   const [sensor, setSensor] = useState<Sensor>();
   const [analog, setAnalog] = useState<Analog>();
-  const [selectedDevice, setSelectedDevice] = useState<number>();
   const [deviceDialog, setDeviceDialog] = useState<number>(-1);
+  const [onlyFav, setOnlyFav] = useState(false);
 
-  const desktopWindow = useMediaQuery('(min-width:600px)');
+  const device_theme = useTheme({
+    BaseRow: `
+      font-size: 14px;
+      color: white;
+      height: 46px;
+      &:focus {
+        z-index: 2;
+        border-top: 1px solid #177ac9;
+        border-bottom: 1px solid #177ac9;
+      }
+  `,
+    HeaderRow: `
+      background-color: black;
+      font-size: 14px;
+      border-bottom: 1px solid #e0e0e0;
+    `,
+    Row: `
+      background-color: #1e1e1e;
+      border-top: 1px solid #565656;
+      border-bottom: 1px solid #565656;
+      position: relative;
+      z-index: 1;
+      &:not(:last-of-type) {
+        margin-bottom: -1px;
+      }
+      &:not(:first-of-type) {
+        margin-top: -1px;
+      }
+      &:hover {
+        z-index: 2;
+        color: white;
+        border-top: 1px solid #177ac9;
+        border-bottom: 1px solid #177ac9;
+      },
+      &.tr.tr-body.row-select.row-select-single-selected, &.tr.tr-body.row-select.row-select-selected {
+        background-color: #3d4752;
+        color: white;
+        font-weight: normal;
+        z-index: 2;
+        border-top: 1px solid #177ac9;
+        border-bottom: 1px solid #177ac9;
+      }
+      `,
+    BaseCell: `
+      border-top: 1px solid transparent;
+      border-right: 1px solid transparent;
+      border-bottom: 1px solid transparent;
+      &:nth-of-type(1) {
+        min-width: 42px;
+        width: 42px;
+        div {
+          width: 100%;
+        }
+      }
+      &:nth-of-type(2) {
+        min-width: 120px;
+        width: 120px;
+      }
+      &:nth-of-type(3) {
+        flex: 1;
+      }
+      &:nth-of-type(4) {
+        text-align: center;
+        max-width: 100px;
+      }
+      &:last-of-type {
+        text-align: right;
+        min-width: 64px;
+      }
+    `
+  });
 
-  const refreshAllData = () => {
+  const data_theme = useTheme({
-    if (analog || sensor || deviceValue) {
+    BaseRow: `
-      return;
+      font-size: 14px;
+      color: white;
+      height: 32px;
+  `,
+    HeaderRow: `
+      background-color: black;
+      font-size: 14px;
+      border-bottom: 1px solid #e0e0e0;
+    `,
+    Row: `
+      &:nth-of-type(odd) {
+        background-color: #303030;
+      }
+      &:nth-of-type(even) {
+        background-color: #1e1e1e;
+      }
+      border-top: 1px solid #565656;
+      border-bottom: 1px solid #565656;
+      position: relative;
+      z-index: 1;
+      &:not(:last-of-type) {
+        margin-bottom: -1px;
+      }
+      &:not(:first-of-type) {
+        margin-top: -1px;
+      }
+      &:hover {
+        z-index: 2;
+        border-top: 1px solid #177ac9;
+        border-bottom: 1px solid #177ac9;
+        color: white;
+        cursor: 'pointer',
+      }
+      `,
+    BaseCell: `
+      border-top: 1px solid transparent;
+      border-right: 1px solid transparent;
+      border-bottom: 1px solid transparent;
+      &:last-of-type {
+        text-align: right;
+        min-width: 64px;
+      }
+    `
+  });
+
+  const analog_sort = useSort(
+    { nodes: sensorData.analogs },
+    {
+      state: {
+        sortKey: 'GPIO',
+        reverse: false
+      }
+    },
+    {
+      sortIcon: {
+        iconDefault: null,
+        iconUp: <KeyboardArrowUpOutlinedIcon />,
+        iconDown: <KeyboardArrowDownOutlinedIcon />
+      },
+      sortFns: {
+        GPIO: (array) => array.sort((a, b) => a.i - b.i),
+        NAME: (array) => array.sort((a, b) => a.n.localeCompare(b.n)),
+        TYPE: (array) => array.sort((a, b) => a.t - b.t)
+      }
+    }
+  );
+
+  const sensor_sort = useSort(
+    { nodes: sensorData.sensors },
+    {
+      state: {
+        sortKey: 'NAME',
+        reverse: false
+      }
+    },
+    {
+      sortIcon: {
+        iconDefault: null,
+        iconUp: <KeyboardArrowUpOutlinedIcon />,
+        iconDown: <KeyboardArrowDownOutlinedIcon />
+      },
+      sortFns: {
+        NAME: (array) => array.sort((a, b) => a.id.localeCompare(b.id)),
+        TEMPERATURE: (array) => array.sort((a, b) => a.id.localeCompare(b.id))
+      }
+    }
+  );
+
+  const dv_sort = useSort(
+    { nodes: deviceData.data },
+    {},
+    {
+      sortIcon: {
+        margin: '0px',
+        iconDefault: null,
+        iconUp: <KeyboardArrowUpOutlinedIcon />,
+        iconDown: <KeyboardArrowDownOutlinedIcon />
+      },
+      sortFns: {
+        NAME: (array) => array.sort((a, b) => a.id.slice(2).localeCompare(b.id.slice(2)))
+      }
+    }
+  );
+
+  const device_select = useRowSelect(
+    { nodes: coreData.devices },
+    {
+      onChange: onSelectChange
+    }
+  );
+
+  function onSelectChange(action: any, state: any) {
+    if (action.type === 'ADD_BY_ID_EXCLUSIVELY') {
+      refreshData();
+    } else {
+      setSensorData({ sensors: [], analogs: [] });
     }
-    loadData();
-    if (sensorData) {
-      fetchSensorData();
-    } else if (selectedDevice) {
-      fetchDeviceData(selectedDevice);
   }
-  };
 
   const refreshData = () => {
-    if (analog || sensor || deviceValue) {
+    const selectedDevice = device_select.state.id;
+    if (selectedDevice === 'sensor') {
+      fetchSensorData();
       return;
     }
-    if (sensorData) {
+
-      fetchSensorData();
+    setSensorData({ sensors: [], analogs: [] });
-    } else if (selectedDevice) {
+    if (selectedDevice) {
       fetchDeviceData(selectedDevice);
     } else {
-      loadData();
+      fetchCoreData();
     }
   };
 
+  const fetchCoreData = useCallback(async () => {
+    try {
+      setCoreData((await EMSESP.readCoreData()).data);
+    } catch (error: any) {
+      setErrorMessage(extractErrorMessage(error, 'Failed to fetch core data'));
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchCoreData();
+  }, [fetchCoreData]);
+
   useEffect(() => {
     const timer = setInterval(() => refreshData(), 60000);
     return () => {
       clearInterval(timer);
     };
     // eslint-disable-next-line
-  }, [analog, sensor, deviceValue, sensorData, selectedDevice]);
+  }, [analog, sensor, deviceValue, sensorData]);
 
-  const fetchDeviceData = async (unique_id: number) => {
+  const fetchDeviceData = async (id: string) => {
+    const unique_id = parseInt(id);
     try {
       setDeviceData((await EMSESP.readDeviceData({ id: unique_id })).data);
     } catch (error: any) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem fetching device data'), { variant: 'error' });
+      setErrorMessage(extractErrorMessage(error, 'Problem fetching device data'));
-    } finally {
-      setSelectedDevice(unique_id);
-      setSensorData(undefined);
     }
   };
 
@@ -152,9 +327,7 @@ const DashboardData: FC = () => {
     try {
       setSensorData((await EMSESP.readSensorData()).data);
     } catch (error: any) {
-      enqueueSnackbar(extractErrorMessage(error, 'Problem fetching sensor data'), { variant: 'error' });
+      setErrorMessage(extractErrorMessage(error, 'Problem fetching sensor data'));
-    } finally {
-      setSelectedDevice(undefined);
     }
   };
 
@@ -192,10 +365,10 @@ const DashboardData: FC = () => {
   }
 
   const sendDeviceValue = async () => {
-    if (selectedDevice && deviceValue) {
+    if (deviceValue) {
       try {
         const response = await EMSESP.writeValue({
-          id: selectedDevice,
+          id: Number(device_select.state.id),
           devicevalue: deviceValue
         });
         if (response.status === 204) {
@@ -207,11 +380,10 @@ const DashboardData: FC = () => {
         }
         setDeviceValue(undefined);
       } catch (error: any) {
-        enqueueSnackbar(extractErrorMessage(error, 'Problem writing value'), { variant: 'error' });
+        setErrorMessage(extractErrorMessage(error, 'Problem writing value'));
       } finally {
+        refreshData();
         setDeviceValue(undefined);
-        fetchDeviceData(selectedDevice);
-        loadData();
       }
     }
   };
@@ -225,7 +397,7 @@ const DashboardData: FC = () => {
             {deviceValue.l && (
               <ValidatedTextField
                 name="v"
-                label={deviceValue.n.slice(2)}
+                label={deviceValue.id.slice(2)}
                 value={deviceValue.v}
                 autoFocus
                 sx={{ width: '30ch' }}
@@ -240,7 +412,7 @@ const DashboardData: FC = () => {
             {!deviceValue.l && (
               <ValidatedTextField
                 name="v"
-                label={deviceValue.n.slice(2)}
+                label={deviceValue.id.slice(2)}
                 value={deviceValue.u ? numberValue(deviceValue.v) : deviceValue.v}
                 autoFocus
                 sx={{ width: '30ch' }}
@@ -279,14 +451,14 @@ const DashboardData: FC = () => {
   };
 
   const addAnalogSensor = () => {
-    setAnalog({ i: 0, n: '', u: 0, v: 0, o: 0, t: 0, f: 1 });
+    setAnalog({ id: '0', n: '', u: 0, v: 0, o: 0, t: 0, f: 1 });
   };
 
   const sendSensor = async () => {
     if (sensor) {
       try {
         const response = await EMSESP.writeSensor({
-          id_str: sensor.is,
+          id_str: sensor.id,
           name: sensor.n,
           offset: sensor.o
         });
@@ -299,7 +471,7 @@ const DashboardData: FC = () => {
         }
         setSensor(undefined);
       } catch (error: any) {
-        enqueueSnackbar(extractErrorMessage(error, 'Problem updating sensor'), { variant: 'error' });
+        setErrorMessage(extractErrorMessage(error, 'Problem updating sensor'));
       } finally {
         setSensor(undefined);
         fetchSensorData();
@@ -314,7 +486,7 @@ const DashboardData: FC = () => {
           <DialogTitle>Edit Temperature Sensor</DialogTitle>
           <DialogContent dividers>
             <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
-              <Typography variant="body2">Sensor ID {sensor.is}</Typography>
+              <Typography variant="body2">Sensor ID {sensor.id}</Typography>
             </Box>
             <Grid container spacing={1}>
               <Grid item>
@@ -369,32 +541,32 @@ const DashboardData: FC = () => {
   };
 
   const renderDeviceDialog = () => {
-    if (data && data.devices.length > 0 && deviceDialog !== -1) {
+    if (coreData && coreData.devices.length > 0 && deviceDialog !== -1) {
       return (
         <Dialog open={deviceDialog !== -1} onClose={() => setDeviceDialog(-1)}>
           <DialogTitle>Device Details</DialogTitle>
           <DialogContent dividers>
             <List dense={true}>
               <ListItem>
-                <ListItemText primary="Type" secondary={data.devices[deviceDialog].t} />
+                <ListItemText primary="Type" secondary={coreData.devices[deviceDialog].t} />
               </ListItem>
               <ListItem>
-                <ListItemText primary="Name" secondary={data.devices[deviceDialog].n} />
+                <ListItemText primary="Name" secondary={coreData.devices[deviceDialog].n} />
               </ListItem>
               <ListItem>
-                <ListItemText primary="Brand" secondary={data.devices[deviceDialog].b} />
+                <ListItemText primary="Brand" secondary={coreData.devices[deviceDialog].b} />
               </ListItem>
               <ListItem>
                 <ListItemText
                   primary="Device ID"
-                  secondary={'0x' + ('00' + data.devices[deviceDialog].d.toString(16).toUpperCase()).slice(-2)}
+                  secondary={'0x' + ('00' + coreData.devices[deviceDialog].d.toString(16).toUpperCase()).slice(-2)}
                 />
               </ListItem>
               <ListItem>
-                <ListItemText primary="Product ID" secondary={data.devices[deviceDialog].p} />
+                <ListItemText primary="Product ID" secondary={coreData.devices[deviceDialog].p} />
               </ListItem>
               <ListItem>
-                <ListItemText primary="Version" secondary={data.devices[deviceDialog].v} />
+                <ListItemText primary="Version" secondary={coreData.devices[deviceDialog].v} />
               </ListItem>
             </List>
           </DialogContent>
@@ -408,104 +580,86 @@ const DashboardData: FC = () => {
     }
   };
 
-  const toggleDeviceData = (index: number) => {
-    loadData();
-    if (selectedDevice === index) {
-      setSelectedDevice(undefined);
-    } else {
-      fetchDeviceData(index);
-    }
-  };
-
-  const toggleSensorData = () => {
-    loadData();
-    if (sensorData) {
-      setSensorData(undefined);
-    } else {
-      fetchSensorData();
-    }
-  };
-
   const renderCoreData = () => {
-    if (!data) {
+    if (!coreData) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
+      return <FormLoader errorMessage={errorMessage} />;
     }
 
+    console.log('** Rendering main data');
+
     return (
       <IconContext.Provider value={{ color: 'lightblue', size: '24', style: { verticalAlign: 'middle' } }}>
-        {data.devices.length === 0 && <MessageBox my={2} level="warning" message="Scanning for EMS devices..." />}
+        {coreData.devices.length === 0 && <MessageBox my={2} level="warning" message="Scanning for EMS devices..." />}
-        <Table size="small">
+
-          <TableHead>
+        <Table data={{ nodes: coreData.devices }} select={device_select} theme={device_theme} layout={{ custom: true }}>
-            <TableRow>
+          {(tableList: any) => (
-              <StyledTableCell padding="checkbox" align="left" colSpan={2}>
+            <>
-                TYPE
+              <Header>
-              </StyledTableCell>
+                <HeaderRow>
-              {desktopWindow && <StyledTableCell>DESCRIPTION</StyledTableCell>}
+                  <HeaderCell />
-              <StyledTableCell align="center">ENTITIES</StyledTableCell>
+                  <HeaderCell resize>TYPE</HeaderCell>
-              <StyledTableCell />
+                  <HeaderCell resize>DESCRIPTION</HeaderCell>
-            </TableRow>
+                  <HeaderCell>ENTITIES</HeaderCell>
-          </TableHead>
+                  <HeaderCell />
-          <TableBody>
+                </HeaderRow>
-            {data.devices.map((device, index) => (
+              </Header>
-              <TableRow
+              <Body>
-                hover
+                {tableList.map((device: Device, index: number) => (
-                selected={device.i === selectedDevice}
+                  <Row key={device.id} item={device}>
-                key={index}
+                    <Cell>
-                onClick={() => device.e && toggleDeviceData(device.i)}
-              >
-                <TableCell padding="checkbox">
                       <DeviceIcon type={device.t} />
-                </TableCell>
+                    </Cell>
-                <TableCell>{device.t}</TableCell>
+                    <Cell>{device.t}</Cell>
-                {desktopWindow && <TableCell>{device.n}</TableCell>}
+                    <Cell>{device.n}</Cell>
-                <TableCell align="center">{device.e}</TableCell>
+                    <Cell>{device.e}</Cell>
-                <TableCell align="right">
+                    <Cell>
                       <IconButton size="small" onClick={() => setDeviceDialog(index)}>
-                    <InfoOutlinedIcon color="info" fontSize="small" sx={{ verticalAlign: 'middle' }} />
+                        <InfoOutlinedIcon color="info" sx={{ fontSize: 16, verticalAlign: 'middle' }} />
                       </IconButton>
-                </TableCell>
+                    </Cell>
-              </TableRow>
+                  </Row>
                 ))}
-            {(data.active_sensors > 0 || data.analog_enabled) && (
+                {(coreData.active_sensors > 0 || coreData.analog_enabled) && (
-              <TableRow hover selected={sensorData !== undefined} onClick={() => toggleSensorData()}>
+                  <Row key="sensor" item={{ id: 'sensor' }}>
-                <TableCell>
+                    <Cell>
                       <DeviceIcon type="Sensor" />
-                </TableCell>
+                    </Cell>
-                <TableCell>Sensors</TableCell>
+                    <Cell>Sensors</Cell>
-                {desktopWindow && <TableCell>Attached EMS-ESP Sensors</TableCell>}
+                    <Cell>Attached EMS-ESP Sensors</Cell>
-                <TableCell align="center">{data.active_sensors}</TableCell>
+                    <Cell>{coreData.active_sensors}</Cell>
-                <TableCell align="right">
+                    <Cell>
-                  <IconButton size="small" onClick={() => addAnalogSensor()} disabled={!data.analog_enabled}>
+                      <IconButton size="small" onClick={() => addAnalogSensor()}>
-                    <AddCircleOutlineOutlinedIcon fontSize="small" sx={{ verticalAlign: 'middle' }} />
+                        <AddCircleOutlineOutlinedIcon sx={{ fontSize: 16, verticalAlign: 'middle' }} />
                       </IconButton>
-                </TableCell>
+                    </Cell>
-              </TableRow>
+                  </Row>
+                )}
+              </Body>
+            </>
           )}
-          </TableBody>
         </Table>
       </IconContext.Provider>
     );
   };
 
   const renderDeviceData = () => {
-    if (data?.devices.length === 0 || !deviceData || !selectedDevice) {
+    if (!device_select.state.id || device_select.state.id === 'sensor') {
       return;
     }
 
-    const hasMask = (entityName: string, mask: number) => (parseInt(entityName.slice(0, 2), 16) & mask) === mask;
+    const hasMask = (id: string, mask: number) => (parseInt(id.slice(0, 2), 16) & mask) === mask;
 
     const sendCommand = (dv: DeviceValue) => {
-      if (dv.c && me.admin && !hasMask(dv.n, DeviceEntityMask.DV_READONLY)) {
+      if (dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY)) {
         setDeviceValue(dv);
       }
     };
 
     const renderNameCell = (dv: DeviceValue) => (
       <>
-        {dv.n.slice(2)}&nbsp;
+        {dv.id.slice(2)}&nbsp;
-        {hasMask(dv.n, DeviceEntityMask.DV_FAVORITE) && <FavoriteBorderIcon color="success" sx={{ fontSize: 12 }} />}
+        {hasMask(dv.id, DeviceEntityMask.DV_READONLY) && <EditOffOutlinedIcon color="primary" sx={{ fontSize: 12 }} />}
-        {hasMask(dv.n, DeviceEntityMask.DV_READONLY) && <EditOffOutlinedIcon color="primary" sx={{ fontSize: 12 }} />}
+        {hasMask(dv.id, DeviceEntityMask.DV_API_MQTT_EXCLUDE) && (
-        {hasMask(dv.n, DeviceEntityMask.DV_API_MQTT_EXCLUDE) && (
           <CommentsDisabledOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
         )}
       </>
@@ -516,47 +670,67 @@ const DashboardData: FC = () => {
         <Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary">
           {deviceData.label}
         </Typography>
-        <Table size="small">
+
-          <TableHead>
+        <FormControlLabel
-            <TableRow>
+          control={<Checkbox name="onlyFav" checked={onlyFav} onChange={() => setOnlyFav(!onlyFav)} />}
-              <StyledTableCell padding="checkbox" style={{ width: 18 }}></StyledTableCell>
+          label="show favorites only"
-              <StyledTableCell align="left">ENTITY NAME</StyledTableCell>
+        />
-              <StyledTableCell align="right">VALUE</StyledTableCell>
+
-            </TableRow>
+        <Table
-          </TableHead>
+          data={{
-          <TableBody>
+            nodes: onlyFav
-            {deviceData.data.map((dv, i) => (
+              ? deviceData.data.filter((dv) => hasMask(dv.id, DeviceEntityMask.DV_FAVORITE))
-              <StyledTableRow key={i} onClick={() => sendCommand(dv)}>
+              : deviceData.data
-                <StyledTableCell padding="checkbox">
+          }}
-                  {dv.c && me.admin && !hasMask(dv.n, DeviceEntityMask.DV_READONLY) && (
+          theme={data_theme}
-                    <IconButton size="small">
+          sort={dv_sort}
-                      <EditIcon color="primary" fontSize="small" />
+        >
+          {(tableList: any) => (
+            <>
+              <Header>
+                <HeaderRow>
+                  <HeaderCellSort resize sortKey="NAME">
+                    ENTITY NAME
+                  </HeaderCellSort>
+                  <HeaderCell>VALUE</HeaderCell>
+                  <HeaderCell />
+                </HeaderRow>
+              </Header>
+              <Body>
+                {tableList.map((dv: DeviceValue) => (
+                  <Row key={dv.id} item={dv} onClick={() => sendCommand(dv)}>
+                    <Cell>{renderNameCell(dv)}</Cell>
+                    <Cell>{formatValue(dv.v, dv.u)}</Cell>
+                    <Cell>
+                      {dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
+                        <IconButton size="small" onClick={() => sendCommand(dv)}>
+                          {isCmdOnly(dv) ? (
+                            <PlayArrowIcon color="primary" sx={{ fontSize: 16 }} />
+                          ) : (
+                            <EditIcon color="primary" sx={{ fontSize: 16 }} />
+                          )}
                         </IconButton>
                       )}
-                </StyledTableCell>
+                    </Cell>
-                <StyledTableCell component="th" scope="row">
+                  </Row>
-                  {renderNameCell(dv)}
-                </StyledTableCell>
-                <StyledTableCell align="right">
-                  {isCmdOnly(dv) ? <PlayArrowIcon color="primary" sx={{ fontSize: 14 }} /> : formatValue(dv.v, dv.u)}
-                </StyledTableCell>
-              </StyledTableRow>
                 ))}
-          </TableBody>
+              </Body>
+            </>
+          )}
         </Table>
       </>
     );
   };
 
-  const updateSensor = (sensordata: Sensor) => {
+  const updateSensor = (s: Sensor) => {
-    if (sensordata && me.admin) {
+    if (s && me.admin) {
-      setSensor(sensordata);
+      setSensor(s);
     }
   };
 
-  const updateAnalog = (analogdata: Analog) => {
+  const updateAnalog = (a: Analog) => {
     if (me.admin) {
-      setAnalog(analogdata);
+      setAnalog(a);
     }
   };
 
@@ -565,31 +739,36 @@ const DashboardData: FC = () => {
       <Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary">
         Temperature Sensors
       </Typography>
-      <Table size="small">
+
-        <TableHead>
+      <Table data={{ nodes: sensorData.sensors }} theme={data_theme} sort={sensor_sort}>
-          <TableRow>
+        {(tableList: any) => (
-            <StyledTableCell padding="checkbox" style={{ width: 18 }}></StyledTableCell>
+          <>
-            <StyledTableCell align="left">NAME</StyledTableCell>
+            <Header>
-            <StyledTableCell align="right">TEMPERATURE</StyledTableCell>
+              <HeaderRow>
-          </TableRow>
+                <HeaderCellSort resize sortKey="NAME">
-        </TableHead>
+                  NAME
-        <TableBody>
+                </HeaderCellSort>
-          {sensorData?.sensors.map((sensor_data) => (
+                <HeaderCellSort sortKey="TEMPERATURE">TEMPERATURE</HeaderCellSort>
-            <StyledTableRow key={sensor_data.n} onClick={() => updateSensor(sensor_data)}>
+                <HeaderCell />
-              <StyledTableCell padding="checkbox">
+              </HeaderRow>
+            </Header>
+            <Body>
+              {tableList.map((s: Sensor) => (
+                <Row key={s.id} item={s} onClick={() => updateSensor(s)}>
+                  <Cell>{s.n}</Cell>
+                  <Cell>{formatValue(s.t, s.u)}</Cell>
+                  <Cell>
                     {me.admin && (
-                  <IconButton edge="start" size="small">
+                      <IconButton onClick={() => updateSensor(s)}>
-                    <EditIcon color="primary" fontSize="small" />
+                        <EditIcon color="primary" sx={{ fontSize: 16 }} />
                       </IconButton>
                     )}
-              </StyledTableCell>
+                  </Cell>
-              <StyledTableCell component="th" scope="row">
+                </Row>
-                {sensor_data.n}
-              </StyledTableCell>
-              <StyledTableCell align="right">{formatValue(sensor_data.t, sensor_data.u)}</StyledTableCell>
-            </StyledTableRow>
               ))}
-        </TableBody>
+            </Body>
+          </>
+        )}
       </Table>
     </>
   );
@@ -599,35 +778,44 @@ const DashboardData: FC = () => {
       <Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary">
         Analog Sensors
       </Typography>
-      <Table size="small">
+
-        <TableHead>
+      <Table data={{ nodes: sensorData.analogs }} theme={data_theme} sort={analog_sort}>
-          <TableRow>
+        {(tableList: any) => (
-            <StyledTableCell padding="checkbox" style={{ width: 18 }}></StyledTableCell>
+          <>
-            <StyledTableCell>GPIO</StyledTableCell>
+            <Header>
-            <StyledTableCell>NAME</StyledTableCell>
+              <HeaderRow>
-            <StyledTableCell>TYPE</StyledTableCell>
+                <HeaderCellSort resize sortKey="GPIO">
-            <StyledTableCell align="right">VALUE</StyledTableCell>
+                  GPIO
-          </TableRow>
+                </HeaderCellSort>
-        </TableHead>
+                <HeaderCellSort resize sortKey="NAME">
-        <TableBody>
+                  NAME
-          {sensorData?.analogs.map((analog_data) => (
+                </HeaderCellSort>
-            <StyledTableRow key={analog_data.i} onClick={() => updateAnalog(analog_data)}>
+                <HeaderCellSort resize sortKey="TYPE">
-              <StyledTableCell padding="checkbox">
+                  TYPE
+                </HeaderCellSort>
+                <HeaderCell>VALUE</HeaderCell>
+                <HeaderCell />
+              </HeaderRow>
+            </Header>
+            <Body>
+              {tableList.map((a: Analog) => (
+                <Row key={a.id} item={a} onClick={() => updateAnalog(a)}>
+                  <Cell>{a.id}</Cell>
+                  <Cell>{a.n}</Cell>
+                  <Cell>{AnalogTypeNames[a.t]} </Cell>
+                  <Cell>{formatValue(a.v, a.u)}</Cell>
+                  <Cell>
                     {me.admin && (
-                  <IconButton edge="start" size="small">
+                      <IconButton onClick={() => updateAnalog(a)}>
-                    <EditIcon color="primary" fontSize="small" />
+                        <EditIcon color="primary" sx={{ fontSize: 16 }} />
                       </IconButton>
                     )}
-              </StyledTableCell>
+                  </Cell>
-              <StyledTableCell component="th" scope="row">
+                </Row>
-                {analog_data.i}
-              </StyledTableCell>
-              <StyledTableCell>{analog_data.n}</StyledTableCell>
-              <StyledTableCell>{AnalogTypeNames[analog_data.t]}</StyledTableCell>
-              <StyledTableCell align="right">{formatValue(analog_data.v, analog_data.u)}</StyledTableCell>
-            </StyledTableRow>
               ))}
-        </TableBody>
+            </Body>
+          </>
+        )}
       </Table>
     </>
   );
@@ -636,7 +824,7 @@ const DashboardData: FC = () => {
     if (analog) {
       try {
         const response = await EMSESP.writeAnalog({
-          id: analog.i,
+          id: analog.id,
           name: analog.n,
           offset: analog.o,
           factor: analog.f,
@@ -664,7 +852,7 @@ const DashboardData: FC = () => {
     if (analog) {
       try {
         const response = await EMSESP.writeAnalog({
-          id: analog.i,
+          id: analog.id,
           name: analog.n,
           offset: analog.o,
           factor: analog.f,
@@ -697,10 +885,11 @@ const DashboardData: FC = () => {
             <Grid container spacing={2}>
               <Grid item>
                 <ValidatedTextField
-                  name="i"
+                  name="id"
                   label="GPIO"
-                  value={numberValue(analog.i)}
+                  value={analog.id}
-                  type="number"
+                  // TODO add validation
+                  // type="number"
                   variant="outlined"
                   autoFocus
                   onChange={updateValue(setAnalog)}
@@ -781,7 +970,7 @@ const DashboardData: FC = () => {
                   </Grid>
                 </>
               )}
-              {analog.t === AnalogType.DIGITAL_OUT && (analog.i === 25 || analog.i === 26) && (
+              {analog.t === AnalogType.DIGITAL_OUT && (analog.id === '25' || analog.id === '26') && (
                 <>
                   <Grid item>
                     <ValidatedTextField
@@ -797,7 +986,7 @@ const DashboardData: FC = () => {
                   </Grid>
                 </>
               )}
-              {analog.t === AnalogType.DIGITAL_OUT && analog.i !== 25 && analog.i !== 26 && (
+              {analog.t === AnalogType.DIGITAL_OUT && analog.id !== '25' && analog.id !== '26' && (
                 <>
                   <Grid item>
                     <ValidatedTextField
@@ -881,33 +1070,21 @@ const DashboardData: FC = () => {
     }
   };
 
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
-    }
-
   return (
-      <>
+    <SectionContent title="Device and Sensor Data" titleGutter>
       {renderCoreData()}
       {renderDeviceData()}
       {renderDeviceDialog()}
-        {sensorData && sensorData.sensors.length > 0 && renderDallasData()}
+      {sensorData.sensors.length !== 0 && renderDallasData()}
-        {sensorData && sensorData.analogs.length > 0 && renderAnalogData()}
+      {sensorData.analogs.length !== 0 && renderAnalogData()}
       {renderDeviceValueDialog()}
       {renderSensorDialog()}
       {renderAnalogDialog()}
       <ButtonRow>
-          <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={refreshAllData}>
+        <Button startIcon={<RefreshIcon />} variant="outlined" color="secondary" onClick={refreshData}>
           Refresh
         </Button>
       </ButtonRow>
-      </>
-    );
-  };
-
-  return (
-    <SectionContent title="Device and Sensor Data" titleGutter>
-      {content()}
     </SectionContent>
   );
 };

interface/src/project/types.ts

@@ -69,7 +69,7 @@ export interface Status {
 }
 
 export interface Device {
-  i: number; // id
+  id: string; // id index
   t: string; // type
   b: string; // brand
   n: string; // name
@@ -80,7 +80,7 @@ export interface Device {
 }
 
 export interface Sensor {
-  is: string; // id string
+  id: string; // id string
   n: string; // name/alias
   t?: number; // temp, optional
   o: number; // offset
@@ -88,7 +88,7 @@ export interface Sensor {
 }
 
 export interface Analog {
-  i: number;
+  id: string; // id string, is GPIO
   n: string;
   v?: number;
   u: number;
@@ -126,11 +126,11 @@ export interface Devices {
 }
 
 export interface DeviceValue {
+  id: string; // index, contains mask+name
   v?: any; // value, in any format
   u: number; // uom
-  n: string; // name
+  c?: string; // command
-  c: string; // command
+  l?: string[]; // list
-  l: string[]; // list
   h?: string; // help text, optional
   s?: string; // steps for up/down, optional
   m?: string; // min, optional
@@ -143,8 +143,8 @@ export interface DeviceData {
 }
 
 export interface DeviceEntity {
-  v?: any; // value, in any format
   n: string; // name
+  v?: any; // value, in any format
   s: string; // shortname
   m: number; // mask
   om?: number; // original mask before edits
@@ -277,7 +277,7 @@ export interface WriteValue {
 }
 
 export interface WriteAnalog {
-  id: number;
+  id: string;
   name: string;
   factor: number;
   offset: number;

mock-api/server.js

@@ -253,7 +253,7 @@ const UPLOAD_FIRMWARE_ENDPOINT = REST_ENDPOINT_ROOT + 'uploadFirmware'
 const SIGN_IN_ENDPOINT = REST_ENDPOINT_ROOT + 'signIn'
 const GENERATE_TOKEN_ENDPOINT = REST_ENDPOINT_ROOT + 'generateToken'
 const system_status = {
-  emsesp_version: '3.4.0demo',
+  emsesp_version: '3.4demo',
   esp_platform: 'ESP32',
   max_alloc_heap: 113792,
   psram_size: 0,
@@ -364,7 +364,7 @@ const emsesp_devices = {
 const emsesp_coredata = {
   devices: [
     {
-      i: 2,
+      id: '2',
       t: 'Boiler',
       s: 'Boiler',
       b: 'Nefit',
@@ -375,7 +375,7 @@ const emsesp_coredata = {
       e: 68,
     },
     {
-      i: 1,
+      id: '1',
       t: 'Thermostat',
       s: 'Thermostat',
       b: '',
@@ -386,7 +386,7 @@ const emsesp_coredata = {
       e: 5,
     },
     {
-      i: 4,
+      id: '4',
       t: 'Thermostat',
       s: 'Thermostat',
       b: 'Buderus',
@@ -403,17 +403,17 @@ const emsesp_coredata = {
 
 const emsesp_sensordata = {
   sensors: [
-    { is: '28-233D-9497-0C03', n: 'Dallas 1', t: 25.7, o: 1.2, u: 1 },
+    { id: '28-233D-9497-0C03', n: 'Dallas 1', t: 25.7, o: 1.2, u: 1 },
-    { is: '28-243D-7437-1E3A', n: 'Dallas 2 outside', t: 26.1, o: 0, u: 1 },
+    { id: '28-243D-7437-1E3A', n: 'Dallas 2 outside', t: 26.1, o: 0, u: 1 },
-    { is: '28-243E-7437-1E3B', n: 'Zolder', t: 27.1, o: 0, u: 16 },
+    { id: '28-243E-7437-1E3B', n: 'Zolder', t: 27.1, o: 0, u: 16 },
-    { is: '28-183D-1892-0C33', n: 'Roof', o: 2, u: 1 },
+    { id: '28-183D-1892-0C33', n: 'Roof', o: 2, u: 1 },
   ],
   // sensors: [],
   analogs: [
-    { i: 36, n: 'motor', u: 0, o: 17, f: 0, t: 0 },
+    { id: '36', n: 'motor', u: 0, o: 17, f: 0, t: 0 },
-    { i: 37, n: 'External switch', v: 13, u: 0, o: 17, f: 0, t: 1 },
+    { id: '37', n: 'External switch', v: 13, u: 0, o: 17, f: 0, t: 1 },
-    { i: 39, n: 'Pulse count', v: 144, u: 0, o: 0, f: 0, t: 2 },
+    { id: '39', n: 'Pulse count', v: 144, u: 0, o: 0, f: 0, t: 2 },
-    { i: 40, n: 'Pressure', v: 16, u: 17, o: 0, f: 0, t: 3 },
+    { id: '40', n: 'Pressure', v: 16, u: 17, o: 0, f: 0, t: 3 },
   ],
   // analogs: [],
 }
@@ -455,31 +455,28 @@ const emsesp_devicedata_1 = {
     {
       v: '(0)',
       u: 0,
-      n: '00error code',
+      id: '00error code',
-      c: '',
     },
     {
       v: '14:54:39 06/06/2021',
       u: 0,
-      n: '00date/time',
+      id: '00date/time',
-      c: '',
     },
     {
       v: 18,
       u: 1,
-      n: '00hc1 selected room temperature',
+      id: '00hc1 selected room temperature',
       c: 'hc1/seltemp',
     },
     {
       v: 22.6,
       u: 1,
-      n: '00hc1 current room temperature',
+      id: '00hc1 current room temperature',
-      c: '',
     },
     {
       v: 'auto',
       u: 0,
-      n: '00hc1 mode',
+      id: '00hc1 mode',
       c: 'hc1/mode',
     },
   ],
@@ -488,81 +485,81 @@ 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'] },
+    { u: 0, id: '08reset', c: 'reset', l: ['-', 'maintenance', 'error'] },
-    { v: 'false', u: 0, n: '08heating active' },
+    { v: 'false', u: 0, id: '08heating active' },
-    { v: 'false', u: 0, n: '04tapwater active' },
+    { v: 'false', u: 0, id: '04tapwater active' },
-    { v: 5, u: 1, n: '04selected flow temperature', c: 'selflowtemp' },
+    { v: 5, u: 1, id: '04selected flow temperature', c: 'selflowtemp' },
-    { v: 0, u: 3, n: '0Eburner selected max power', c: 'selburnpow' },
+    { v: 0, u: 3, id: '0Eburner selected max power', c: 'selburnpow' },
-    { v: 0, u: 3, n: '00heating pump modulation' },
+    { v: 0, u: 3, id: '00heating pump modulation' },
-    { v: 53.4, u: 1, n: '00current flow temperature' },
+    { v: 53.4, u: 1, id: '00current flow temperature' },
-    { v: 52.7, u: 1, n: '00return temperature' },
+    { v: 52.7, u: 1, id: '00return temperature' },
-    { v: 1.3, u: 10, n: '00system pressure' },
+    { v: 1.3, u: 10, id: '00system pressure' },
-    { v: 54.9, u: 1, n: '00actual boiler temperature' },
+    { v: 54.9, u: 1, id: '00actual boiler temperature' },
-    { v: 'false', u: 0, n: '00gas' },
+    { v: 'false', u: 0, id: '00gas' },
-    { v: 'false', u: 0, n: '00gas stage 2' },
+    { v: 'false', u: 0, id: '00gas stage 2' },
-    { v: 0, u: 9, n: '00flame current' },
+    { v: 0, u: 9, id: '00flame current' },
-    { v: 'false', u: 0, n: '00heating pump' },
+    { v: 'false', u: 0, id: '00heating pump' },
-    { v: 'false', u: 0, n: '00fan' },
+    { v: 'false', u: 0, id: '00fan' },
-    { v: 'false', u: 0, n: '00ignition' },
+    { v: 'false', u: 0, id: '00ignition' },
-    { v: 'false', u: 0, n: '00oil preheating' },
+    { v: 'false', u: 0, id: '00oil preheating' },
-    { v: 'true', u: 0, n: '00heating activated', c: 'heatingactivated', l: ['off', 'on'] },
+    { v: 'true', u: 0, id: '00heating activated', c: 'heatingactivated', l: ['off', 'on'] },
-    { v: 80, u: 1, n: '00heating temperature', c: 'heatingtemp' },
+    { v: 80, u: 1, id: '00heating temperature', c: 'heatingtemp' },
-    { v: 70, u: 3, n: '00burner pump max power', c: 'pumpmodmax' },
+    { v: 70, u: 3, id: '00burner pump max power', c: 'pumpmodmax' },
-    { v: 30, u: 3, n: '00burner pump min power', c: 'pumpmodmin' },
+    { v: 30, u: 3, id: '00burner pump min power', c: 'pumpmodmin' },
-    { v: 1, u: 8, n: '00pump delay', c: 'pumpdelay' },
+    { v: 1, u: 8, id: '00pump delay', c: 'pumpdelay' },
-    { v: 10, u: 8, n: '00burner min period', c: 'burnminperiod' },
+    { v: 10, u: 8, id: '00burner min period', c: 'burnminperiod' },
-    { v: 0, u: 3, n: '00burner min power', c: 'burnminpower' },
+    { v: 0, u: 3, id: '00burner min power', c: 'burnminpower' },
-    { v: 50, u: 3, n: '00burner max power', c: 'burnmaxpower' },
+    { v: 50, u: 3, id: '00burner max power', c: 'burnmaxpower' },
-    { v: -6, u: 2, n: '00hysteresis on temperature', c: 'boilhyston' },
+    { v: -6, u: 2, id: '00hysteresis on temperature', c: 'boilhyston' },
-    { v: 6, u: 2, n: '00hysteresis off temperature', c: 'boilhystoff' },
+    { v: 6, u: 2, id: '00hysteresis off temperature', c: 'boilhystoff' },
-    { v: 0, u: 1, n: '00set flow temperature' },
+    { v: 0, u: 1, id: '00set flow temperature' },
-    { v: 0, u: 3, n: '00burner set power' },
+    { v: 0, u: 3, id: '00burner set power' },
-    { v: 0, u: 3, n: '00burner current power' },
+    { v: 0, u: 3, id: '00burner current power' },
-    { v: 326323, u: 0, n: '00burner starts' },
+    { v: 326323, u: 0, id: '00burner starts' },
-    { v: 553437, u: 8, n: '00total burner operating time' },
+    { v: 553437, u: 8, id: '00total burner operating time' },
-    { v: 451286, u: 8, n: '00total heat operating time' },
+    { v: 451286, u: 8, id: '00total heat operating time' },
-    { v: 4672173, u: 8, n: '00total UBA operating time' },
+    { v: 4672173, u: 8, id: '00total UBA operating time' },
-    { v: '1C(210) 06.06.2020 12:07 (0 min)', u: 0, n: '00last error code' },
+    { v: '1C(210) 06.06.2020 12:07 (0 min)', u: 0, id: '00last error code' },
-    { v: '0H', u: 0, n: '00service code' },
+    { v: '0H', u: 0, id: '00service code' },
-    { v: 203, u: 0, n: '00service code number' },
+    { v: 203, u: 0, id: '00service code number' },
-    { v: 'H00', u: 0, n: '00maintenance message' },
+    { v: 'H00', u: 0, id: '00maintenance message' },
-    { v: 'manual', u: 0, n: '00maintenance scheduled', c: 'maintenance', l: ['off', 'time', 'date', 'manual'] },
+    { v: 'manual', u: 0, id: '00maintenance scheduled', c: 'maintenance', l: ['off', 'time', 'date', 'manual'] },
-    { v: 6000, u: 7, n: '00time to next maintenance', c: 'maintenancetime' },
+    { v: 6000, u: 7, id: '00time to next maintenance', c: 'maintenancetime' },
-    { v: '01.01.2012', u: 0, n: '00next maintenance date', c: 'maintenancedate', o: 'Format: < dd.mm.yyyy >' },
+    { v: '01.01.2012', u: 0, id: '00next maintenance date', c: 'maintenancedate', o: 'Format: < dd.mm.yyyy >' },
-    { v: 'true', u: 0, n: '00dhw turn on/off', c: 'wwtapactivated', l: ['off', 'on'] },
+    { v: 'true', u: 0, id: '00dhw turn on/off', c: 'wwtapactivated', l: ['off', 'on'] },
-    { v: 62, u: 1, n: '00dhw set temperature' },
+    { v: 62, u: 1, id: '00dhw set temperature' },
-    { v: 60, u: 1, n: '00dhw selected temperature', c: 'wwseltemp' },
+    { v: 60, u: 1, id: '00dhw selected temperature', c: 'wwseltemp' },
-    { v: 'flow', u: 0, n: '00dhw type' },
+    { v: 'flow', u: 0, id: '00dhw type' },
-    { v: 'hot', u: 0, n: '00dhw comfort', c: 'wwcomfort', l: ['hot', 'eco', 'intelligent'] },
+    { v: 'hot', u: 0, id: '00dhw comfort', c: 'wwcomfort', l: ['hot', 'eco', 'intelligent'] },
-    { v: 40, u: 2, n: '00dhw flow temperature offset', c: 'wwflowtempoffset' },
+    { v: 40, u: 2, id: '00dhw flow temperature offset', c: 'wwflowtempoffset' },
-    { v: 100, u: 3, n: '00dhw max power', c: 'wwmaxpower' },
+    { v: 100, u: 3, id: '00dhw max power', c: 'wwmaxpower' },
-    { v: 'false', u: 0, n: '00dhw circulation pump available', c: 'wwcircpump', l: ['off', 'on'] },
+    { v: 'false', u: 0, id: '00dhw circulation pump available', c: 'wwcircpump', l: ['off', 'on'] },
-    { v: '3-way valve', u: 0, n: '00dhw charging type' },
+    { v: '3-way valve', u: 0, id: '00dhw charging type' },
-    { v: -5, u: 2, n: '00dhw hysteresis on temperature', c: 'wwhyston' },
+    { v: -5, u: 2, id: '00dhw hysteresis on temperature', c: 'wwhyston' },
-    { v: 0, u: 2, n: '00dhw hysteresis off temperature', c: 'wwhystoff' },
+    { v: 0, u: 2, id: '00dhw hysteresis off temperature', c: 'wwhystoff' },
-    { v: 70, u: 1, n: '00dhw disinfection temperature', c: 'wwdisinfectiontemp' },
+    { v: 70, u: 1, id: '00dhw disinfection temperature', c: 'wwdisinfectiontemp' },
     {
       v: 'off',
       u: 0,
-      n: '00dhw circulation pump mode',
+      id: '00dhw circulation pump mode',
       c: 'wwcircmode',
       l: ['off', '1x3min', '2x3min', '3x3min', '4x3min', '5x3min', '6x3min', 'continuous'],
     },
-    { v: 'false', u: 0, n: '00dhw circulation active', c: 'wwcirc', l: ['off', 'on'] },
+    { v: 'false', u: 0, id: '00dhw circulation active', c: 'wwcirc', l: ['off', 'on'] },
-    { v: 47.3, u: 1, n: '00dhw current intern temperature' },
+    { v: 47.3, u: 1, id: '00dhw current intern temperature' },
-    { v: 0, u: 4, n: '00dhw current tap water flow' },
+    { v: 0, u: 4, id: '00dhw current tap water flow' },
-    { v: 47.3, u: 1, n: '00dhw storage intern temperature' },
+    { v: 47.3, u: 1, id: '00dhw storage intern temperature' },
-    { v: 'true', u: 0, n: '00dhw activated', c: 'wwactivated', l: ['off', 'on'] },
+    { v: 'true', u: 0, id: '00dhw activated', c: 'wwactivated', l: ['off', 'on'] },
-    { v: 'false', u: 0, n: '00dhw one time charging', c: 'wwonetime', l: ['off', 'on'] },
+    { v: 'false', u: 0, id: '00dhw one time charging', c: 'wwonetime', l: ['off', 'on'] },
-    { v: 'false', u: 0, n: '00dhw disinfecting', c: 'wwdisinfecting', l: ['off', 'on'] },
+    { v: 'false', u: 0, id: '00dhw disinfecting', c: 'wwdisinfecting', l: ['off', 'on'] },
-    { v: 'false', u: 0, n: '00dhw charging' },
+    { v: 'false', u: 0, id: '00dhw charging' },
-    { v: 'false', u: 0, n: '00dhw recharging' },
+    { v: 'false', u: 0, id: '00dhw recharging' },
-    { v: 'true', u: 0, n: '00dhw temperature ok' },
+    { v: 'true', u: 0, id: '00dhw temperature ok' },
-    { v: 'false', u: 0, n: '00dhw active' },
+    { v: 'false', u: 0, id: '00dhw active' },
-    { v: 'true', u: 0, n: '00dhw 3way valve active' },
+    { v: 'true', u: 0, id: '00dhw 3way valve active' },
-    { v: 0, u: 3, n: '00dhw set pump power' },
+    { v: 0, u: 3, id: '00dhw set pump power' },
-    { v: 288768, u: 0, n: '00dhw starts' },
+    { v: 288768, u: 0, id: '00dhw starts' },
-    { v: 102151, u: 8, n: '00dhw active time' },
+    { v: 102151, u: 8, id: '00dhw active time' },
   ],
 }
 
@@ -572,19 +569,19 @@ const emsesp_devicedata_4 = {
     {
       v: 16,
       u: 1,
-      n: '00hc2 selected room temperature',
+      id: '00hc2 selected room temperature',
       c: 'hc2/seltemp',
     },
     {
       v: 18.6,
       u: 1,
-      n: '00hc2 current room temperature',
+      id: '00hc2 current room temperature',
       c: '',
     },
     {
       v: 'off',
       u: 0,
-      n: '00hc2 mode',
+      id: '00hc2 mode',
       c: 'hc2/mode',
     },
   ],
@@ -870,9 +867,12 @@ rest_server.post(EMSESP_SETTINGS_ENDPOINT, (req, res) => {
   // res.status(200).json(settings); // no restart needed
 })
 rest_server.get(EMSESP_CORE_DATA_ENDPOINT, (req, res) => {
+  console.log('send back core data...')
   res.json(emsesp_coredata)
 })
 rest_server.get(EMSESP_SENSOR_DATA_ENDPOINT, (req, res) => {
+  console.log('send back sensor data...')
+
   res.json(emsesp_sensordata)
 })
 rest_server.get(EMSESP_DEVICES_ENDPOINT, (req, res) => {
@@ -887,6 +887,7 @@ rest_server.get(EMSESP_STATUS_ENDPOINT, (req, res) => {
 })
 rest_server.post(EMSESP_DEVICEDATA_ENDPOINT, (req, res) => {
   const id = req.body.id
+  console.log('send back device data for ' + id)
   if (id === 1) {
     const encoded = msgpack.encode(emsesp_devicedata_1)
     res.write(encoded, 'binary')
@@ -986,7 +987,7 @@ rest_server.post(EMSESP_WRITE_VALUE_ENDPOINT, (req, res) => {
 rest_server.post(EMSESP_WRITE_SENSOR_ENDPOINT, (req, res) => {
   const sensor = req.body
   console.log('Write sensor: ' + JSON.stringify(sensor))
-  objIndex = emsesp_sensordata.sensors.findIndex((obj) => obj.is == sensor.id_str)
+  objIndex = emsesp_sensordata.sensors.findIndex((obj) => obj.id == sensor.id_str)
   emsesp_sensordata.sensors[objIndex].n = sensor.name
   emsesp_sensordata.sensors[objIndex].o = sensor.offset
   res.sendStatus(200)
@@ -995,12 +996,12 @@ rest_server.post(EMSESP_WRITE_SENSOR_ENDPOINT, (req, res) => {
 rest_server.post(EMSESP_WRITE_ANALOG_ENDPOINT, (req, res) => {
   const analog = req.body
   console.log('Write analog: ' + JSON.stringify(analog))
-  objIndex = emsesp_sensordata.analogs.findIndex((obj) => obj.i == analog.id)
+  objIndex = emsesp_sensordata.analogs.findIndex((obj) => obj.id == analog.id)
 
   if (objIndex === -1) {
     console.log('new analog')
     emsesp_sensordata.analogs.push({
-      i: analog.id,
+      id: analog.id,
       n: analog.name,
       f: analog.factor,
       o: analog.offset,