enable write in dashboard

2025-12-07 16:29:51 +03:00 · 2024-10-04 13:32:42 +02:00
parent 01db9db6ae
commit fd7d8ca532
8 changed files with 286 additions and 165 deletions
--- a/interface/src/app/main/Dashboard.tsx
+++ b/interface/src/app/main/Dashboard.tsx
@@ -1,24 +1,38 @@
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import { IconContext } from 'react-icons/lib';
+import { toast } from 'react-toastify';

 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import EditIcon from '@mui/icons-material/Edit';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
-import { Box, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import {
+  Box,
+  IconButton,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography
+} from '@mui/material';

 import { Body, Cell, Row, Table } from '@table-library/react-table-library/table';
 import { useTheme } from '@table-library/react-table-library/theme';
 import { CellTree, useTree } from '@table-library/react-table-library/tree';
-import { useAutoRequest } from 'alova/client';
+import { useAutoRequest, useRequest } from 'alova/client';
 import { FormLoader, SectionContent, useLayoutTitle } from 'components';
+import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';

-import { readDashboard } from '../../api/app';
+import { readDashboard, writeDeviceValue } from '../../api/app';
+import DeviceIcon from './DeviceIcon';
+import DashboardDevicesDialog from './DevicesDialog';
 import { formatValue } from './deviceValue';
-import type { DashboardItem } from './types';
+import { type DashboardItem, type DeviceValue } from './types';
+import { deviceValueItemValidation } from './validators';

 const Dashboard = () => {
  const { LL } = useI18nContext();
+  const { me } = useContext(AuthenticatedContext);

  useLayoutTitle('Dashboard'); // TODO translate

@@ -34,9 +48,39 @@ const Dashboard = () => {
    pollingTime: 1500
  });

+  const { loading: submitting, send: sendDeviceValue } = useRequest(
+    (data: { id: number; c: string; v: unknown }) => writeDeviceValue(data),
+    {
+      immediate: false
+    }
+  );
+
+  const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState(false);
+  const [selectedDeviceValue, setSelectedDeviceValue] = useState<DeviceValue>();
+
+  const deviceValueDialogClose = () => {
+    setDeviceValueDialogOpen(false);
+    void sendDeviceData(selectedDevice);
+  };
+  const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
+    const id = Number(device_select.state.id);
+    await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
+      .then(() => {
+        toast.success(LL.WRITE_CMD_SENT());
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .finally(async () => {
+        setDeviceValueDialogOpen(false);
+        await sendDeviceData(id);
+        setSelectedDeviceValue(undefined);
+      });
+  };
+
  const dashboard_theme = useTheme({
    Table: `
-      --data-table-library_grid-template-columns: minmax(80px, auto) 120px;
+      --data-table-library_grid-template-columns: minmax(80px, auto) 120px 40px;
    `,
    BaseRow: `
      font-size: 14px;
@@ -46,10 +90,8 @@ const Dashboard = () => {
    `,
    Row: `
      background-color: #1e1e1e;
-      // position: relative;
-      // cursor: pointer;
      .td {
-        height: 24px;
+        height: 22px;
      }
      &:hover .td {
        border-top: 1px solid #177ac9;
@@ -58,15 +100,8 @@ const Dashboard = () => {
    `
  });

-  function onTreeChange(action, state) {
-    // do nothing for now
-  }
-
  const tree = useTree(
    { nodes: data },
-    {
-      onChange: onTreeChange
-    },
    {
      treeIcon: {
        margin: '4px',
@@ -84,22 +119,38 @@ const Dashboard = () => {
      tree.fns.onToggleAll({});
      setFirstLoad(false);
    }
-  }, [data]);
+  });

  const showName = (di: DashboardItem) => {
    if (di.id < 100) {
+      // if its a device row
      if (di.nodes?.length) {
        return (
-          <span>
-            <span style={{ color: '#2196f3' }}>{di.n}</span>
+          <>
+            <span style="font-size: 14px;">
+              <DeviceIcon type_id={di.t} />
+              &nbsp;&nbsp;{di.n}
+            </span>
            <span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span>
-          </span>
+          </>
        );
      }
-      return <div style={{ color: '#2196f3' }}>{di.n}</div>;
    }
+    return <div style={{ color: '#d3d3d3' }}>{di.n}</div>;
+  };

-    return <div>{di.n}</div>;
+  const showDeviceValue = (di: DashboardItem) => {
+    // convert di to dv
+    // TODO should we not just use dv?
+    const dv: DeviceValue = {
+      id: '  ' + di.n,
+      v: di.v,
+      u: di.u,
+      c: di.c,
+      l: di.l
+    };
+    setSelectedDeviceValue(dv);
+    setDeviceValueDialogOpen(true);
  };

  const handleShowAll = (
@@ -129,6 +180,7 @@ const Dashboard = () => {
    return (
      <>
        <Typography mb={2} variant="body2" color="warning">
+          {/* TODO translate */}
          The dashboard shows all EMS entities that are marked as favorite, and the
          sensors.
        </Typography>
@@ -158,33 +210,71 @@ const Dashboard = () => {
            border: '1px solid grey'
          }}
        >
-          <Table
-            data={{ nodes: data }}
-            theme={dashboard_theme}
-            layout={{ custom: true }}
-            tree={tree}
+          <IconContext.Provider
+            value={{
+              color: 'lightblue',
+              size: '16',
+              style: { verticalAlign: 'middle' }
+            }}
          >
-            {(tableList: DashboardItem[]) => (
-              <Body>
-                {tableList.map((di: DashboardItem) => (
-                  <Row key={di.id} item={di} disabled={di.nodes?.length === 0}>
-                    {di.nodes?.length === 0 ? (
-                      <Cell>{showName(di)}</Cell>
-                    ) : (
-                      <CellTree item={di}>{showName(di)}</CellTree>
-                    )}
-                    <Cell pinRight>{formatValue(LL, di.v, di.u)}</Cell>
-                  </Row>
-                ))}
-              </Body>
-            )}
-          </Table>
+            <Table
+              data={{ nodes: data }}
+              theme={dashboard_theme}
+              layout={{ custom: true }}
+              tree={tree}
+            >
+              {(tableList: DashboardItem[]) => (
+                <Body>
+                  {tableList.map((di: DashboardItem) => (
+                    <Row key={di.id} item={di} disabled={di.nodes?.length === 0}>
+                      {di.nodes?.length === 0 ? (
+                        <Cell>{showName(di)}</Cell>
+                      ) : (
+                        <CellTree item={di}>{showName(di)}</CellTree>
+                      )}
+                      <Cell pinRight>
+                        <div style={{ color: '#d3d3d3' }}>
+                          {formatValue(LL, di.v, di.u)}
+                        </div>
+                      </Cell>
+
+                      <Cell stiff>
+                        {me.admin && di.c && (
+                          <IconButton
+                            size="small"
+                            onClick={() => showDeviceValue(di)}
+                          >
+                            <EditIcon color="primary" sx={{ fontSize: 16 }} />
+                          </IconButton>
+                        )}
+                      </Cell>
+                    </Row>
+                  ))}
+                </Body>
+              )}
+            </Table>
+          </IconContext.Provider>
        </Box>
      </>
    );
  };

-  return <SectionContent>{renderContent()}</SectionContent>;
+  return (
+    <SectionContent>
+      {renderContent()}
+      {selectedDeviceValue && (
+        <DashboardDevicesDialog
+          open={deviceValueDialogOpen}
+          onClose={deviceValueDialogClose}
+          onSave={deviceValueDialogSave}
+          selectedItem={selectedDeviceValue}
+          writeable={true}
+          validator={deviceValueItemValidation(selectedDeviceValue)}
+          progress={submitting}
+        />
+      )}
+    </SectionContent>
+  );
 };

 export default Dashboard;
--- a/interface/src/app/main/DeviceIcon.tsx
+++ b/interface/src/app/main/DeviceIcon.tsx
@@ -2,6 +2,7 @@ import { AiOutlineAlert, AiOutlineControl, AiOutlineGateway } from 'react-icons/
 import { CgSmartHomeBoiler } from 'react-icons/cg';
 import { FaSolarPanel } from 'react-icons/fa';
 import { GiHeatHaze, GiTap } from 'react-icons/gi';
+import { MdPlaylistAdd } from 'react-icons/md';
 import {
  MdOutlineDevices,
  MdOutlinePool,
@@ -11,50 +12,40 @@ import {
 import { TiFlowSwitch } from 'react-icons/ti';
 import { VscVmConnect } from 'react-icons/vsc';

-import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
+import type { SvgIconProps } from '@mui/material';

 import { DeviceType } from './types';

+const deviceIconLookup: {
+  [key in DeviceType]: React.ComponentType<SvgIconProps> | undefined;
+} = {
+  [DeviceType.TEMPERATURESENSOR]: MdOutlineSensors,
+  [DeviceType.ANALOGSENSOR]: MdOutlineSensors,
+  [DeviceType.BOILER]: CgSmartHomeBoiler,
+  [DeviceType.HEATSOURCE]: CgSmartHomeBoiler,
+  [DeviceType.THERMOSTAT]: MdThermostatAuto,
+  [DeviceType.MIXER]: AiOutlineControl,
+  [DeviceType.SOLAR]: FaSolarPanel,
+  [DeviceType.HEATPUMP]: GiHeatHaze,
+  [DeviceType.GATEWAY]: AiOutlineGateway,
+  [DeviceType.SWITCH]: TiFlowSwitch,
+  [DeviceType.CONTROLLER]: VscVmConnect,
+  [DeviceType.CONNECT]: VscVmConnect,
+  [DeviceType.ALERT]: AiOutlineAlert,
+  [DeviceType.EXTENSION]: MdOutlineDevices,
+  [DeviceType.WATER]: GiTap,
+  [DeviceType.POOL]: MdOutlinePool,
+  [DeviceType.CUSTOM]: MdPlaylistAdd,
+  [DeviceType.UNKNOWN]: undefined,
+  [DeviceType.SYSTEM]: undefined,
+  [DeviceType.SCHEDULER]: undefined,
+  [DeviceType.GENERIC]: undefined,
+  [DeviceType.VENTILATION]: undefined
+};
+
 const DeviceIcon = ({ type_id }: { type_id: DeviceType }) => {
-  switch (type_id) {
-    case DeviceType.TEMPERATURESENSOR:
-    case DeviceType.ANALOGSENSOR:
-      return <MdOutlineSensors />;
-    case DeviceType.BOILER:
-    case DeviceType.HEATSOURCE:
-      return <CgSmartHomeBoiler />;
-    case DeviceType.THERMOSTAT:
-      return <MdThermostatAuto />;
-    case DeviceType.MIXER:
-      return <AiOutlineControl />;
-    case DeviceType.SOLAR:
-      return <FaSolarPanel />;
-    case DeviceType.HEATPUMP:
-      return <GiHeatHaze />;
-    case DeviceType.GATEWAY:
-      return <AiOutlineGateway />;
-    case DeviceType.SWITCH:
-      return <TiFlowSwitch />;
-    case DeviceType.CONTROLLER:
-    case DeviceType.CONNECT:
-      return <VscVmConnect />;
-    case DeviceType.ALERT:
-      return <AiOutlineAlert />;
-    case DeviceType.EXTENSION:
-      return <MdOutlineDevices />;
-    case DeviceType.WATER:
-      return <GiTap />;
-    case DeviceType.POOL:
-      return <MdOutlinePool />;
-    case DeviceType.CUSTOM:
-      return (
-        <PlaylistAddIcon
-          sx={{ color: 'lightblue', fontSize: 22, verticalAlign: 'middle' }}
-        />
-      );
-    default:
-      return null;
-  }
+  const Icon = deviceIconLookup[type_id];
+  return Icon ? <Icon /> : null;
 };

 export default DeviceIcon;
--- a/interface/src/app/main/Devices.tsx
+++ b/interface/src/app/main/Devices.tsx
@@ -170,7 +170,7 @@ const Devices = () => {
    common_theme,
    {
      Table: `
-        --data-table-library_grid-template-columns: 40px repeat(1, minmax(0, 1fr)) 130px;
+        --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 130px;
      `,
      BaseRow: `
        .td {
@@ -527,57 +527,57 @@ const Devices = () => {
  };

  const renderCoreData = () => (
-    <IconContext.Provider
-      value={{
-        color: 'lightblue',
-        size: '18',
-        style: { verticalAlign: 'middle' }
-      }}
-    >
-      {!coreData.connected && (
-        <MessageBox my={2} level="error" message={LL.EMS_BUS_WARNING()} />
-      )}
+    <>
+      <IconContext.Provider
+        value={{
+          color: 'lightblue',
+          size: '18',
+          style: { verticalAlign: 'middle' }
+        }}
+      >
+        {!coreData.connected && (
+          <MessageBox my={2} level="error" message={LL.EMS_BUS_WARNING()} />
+        )}

-      {coreData.connected && (
-        <Table
-          data={{ nodes: coreData.devices }}
-          select={device_select}
-          theme={device_theme}
-          layout={{ custom: true }}
-        >
-          {(tableList: Device[]) => (
-            <>
-              <Header>
-                <HeaderRow>
-                  <HeaderCell stiff />
-                  <HeaderCell resize>{LL.DESCRIPTION()}</HeaderCell>
-                  <HeaderCell stiff>{LL.TYPE(0)}</HeaderCell>
-                </HeaderRow>
-              </Header>
-              <Body>
-                {tableList.length === 0 && (
-                  <CircularProgress sx={{ margin: 1 }} size={18} />
-                )}
-                {tableList.map((device: Device) => (
-                  <Row key={device.id} item={device}>
-                    <Cell stiff>
-                      <DeviceIcon type_id={device.t} />
-                    </Cell>
-                    <Cell>
-                      {device.n}
-                      <span style={{ color: 'lightblue' }}>
-                        &nbsp;&nbsp;({device.e})
-                      </span>
-                    </Cell>
-                    <Cell stiff>{device.tn}</Cell>
-                  </Row>
-                ))}
-              </Body>
-            </>
-          )}
-        </Table>
-      )}
-    </IconContext.Provider>
+        {coreData.connected && (
+          <Table
+            data={{ nodes: coreData.devices }}
+            select={device_select}
+            theme={device_theme}
+            layout={{ custom: true }}
+          >
+            {(tableList: Device[]) => (
+              <>
+                <Header>
+                  <HeaderRow>
+                    <HeaderCell resize>{LL.DESCRIPTION()}</HeaderCell>
+                    <HeaderCell stiff>{LL.TYPE(0)}</HeaderCell>
+                  </HeaderRow>
+                </Header>
+                <Body>
+                  {tableList.length === 0 && (
+                    <CircularProgress sx={{ margin: 1 }} size={18} />
+                  )}
+                  {tableList.map((device: Device) => (
+                    <Row key={device.id} item={device}>
+                      <Cell>
+                        <DeviceIcon type_id={device.t} />
+                        &nbsp;&nbsp;
+                        {device.n}
+                        <span style={{ color: 'lightblue' }}>
+                          &nbsp;&nbsp;({device.e})
+                        </span>
+                      </Cell>
+                      <Cell stiff>{device.tn}</Cell>
+                    </Row>
+                  ))}
+                </Body>
+              </>
+            )}
+          </Table>
+        )}
+      </IconContext.Provider>
+    </>
  );

  const deviceValueDialogClose = () => {
@@ -733,7 +733,7 @@ const Devices = () => {
                            size="small"
                            onClick={() => showDeviceValue(dv)}
                          >
-                            {dv.v === '' && dv.c ? (
+                            {dv.v === '' ? (
                              <PlayArrowIcon color="primary" sx={{ fontSize: 16 }} />
                            ) : (
                              <EditIcon color="primary" sx={{ fontSize: 16 }} />
--- a/interface/src/app/main/types.ts
+++ b/interface/src/app/main/types.ts
@@ -117,9 +117,13 @@ export interface CoreData {
 export interface DashboardItem {
  id: number; // unique index
  n: string; // name
-  v?: unknown; // value
+  v?: unknown; // value, optional
  u: number; // uom
-  nodes?: DashboardItem[]; // nodes
+  t: number; // type from DeviceType
+  c?: string; // command, optional
+  l?: string[]; // list, optional
+  h?: string; // help text, optional
+  nodes?: DashboardItem[]; // nodes, optional
 }

 export interface DashboardData {
--- a/interface/src/components/layout/LayoutMenu.tsx
+++ b/interface/src/components/layout/LayoutMenu.tsx
@@ -144,8 +144,8 @@ const LayoutMenu = () => {
      </List>
      <Divider />
      <List>
-        <ListItem disablePadding onClick={handleClick}>
-          <ListItemButton>
+        <ListItem disablePadding>
+          <ListItemButton component="button" onClick={handleClick}>
            <ListItemIcon sx={{ color: '#9e9e9e' }}>
              <AccountCircleIcon />
            </ListItemIcon>