fix slowness

This commit is contained in:
proddy
2024-10-04 15:41:58 +02:00
parent fd7d8ca532
commit 4fde9e7c54
3 changed files with 80 additions and 56 deletions

View File

@@ -62,7 +62,7 @@ const CustomEntities = () => {
return () => { return () => {
clearInterval(timer); clearInterval(timer);
}; };
}); }, []);
const { send: writeEntities } = useRequest( const { send: writeEntities } = useRequest(
(data: Entities) => writeCustomEntities(data), (data: Entities) => writeCustomEntities(data),

View File

@@ -18,7 +18,7 @@ import {
import { Body, Cell, Row, Table } from '@table-library/react-table-library/table'; import { Body, Cell, Row, Table } from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme'; import { useTheme } from '@table-library/react-table-library/theme';
import { CellTree, useTree } from '@table-library/react-table-library/tree'; import { CellTree, useTree } from '@table-library/react-table-library/tree';
import { useAutoRequest, useRequest } from 'alova/client'; import { useRequest } from 'alova/client';
import { FormLoader, SectionContent, useLayoutTitle } from 'components'; import { FormLoader, SectionContent, useLayoutTitle } from 'components';
import { AuthenticatedContext } from 'contexts/authentication'; import { AuthenticatedContext } from 'contexts/authentication';
import { useI18nContext } from 'i18n/i18n-react'; import { useI18nContext } from 'i18n/i18n-react';
@@ -42,10 +42,10 @@ const Dashboard = () => {
const { const {
data, data,
send: fetchDashboard, send: fetchDashboard,
error error,
} = useAutoRequest(readDashboard, { loading
initialData: [], } = useRequest(readDashboard, {
pollingTime: 1500 initialData: []
}); });
const { loading: submitting, send: sendDeviceValue } = useRequest( const { loading: submitting, send: sendDeviceValue } = useRequest(
@@ -62,6 +62,8 @@ const Dashboard = () => {
setDeviceValueDialogOpen(false); setDeviceValueDialogOpen(false);
void sendDeviceData(selectedDevice); void sendDeviceData(selectedDevice);
}; };
// TODO get this working next
const deviceValueDialogSave = async (devicevalue: DeviceValue) => { const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
const id = Number(device_select.state.id); const id = Number(device_select.state.id);
await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v }) await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
@@ -102,6 +104,9 @@ const Dashboard = () => {
const tree = useTree( const tree = useTree(
{ nodes: data }, { nodes: data },
{
onChange: null
},
{ {
treeIcon: { treeIcon: {
margin: '4px', margin: '4px',
@@ -109,25 +114,37 @@ const Dashboard = () => {
iconRight: <ChevronRightIcon color="primary" />, iconRight: <ChevronRightIcon color="primary" />,
iconDown: <ExpandMoreIcon color="primary" /> iconDown: <ExpandMoreIcon color="primary" />
}, },
indentation: 28 indentation: 50
} }
); );
useEffect(() => {
const timer = setInterval(() => {
if (deviceValueDialogOpen) {
return;
}
fetchDashboard();
}, 2000);
return () => {
clearInterval(timer);
};
}, []);
// auto expand on first load // auto expand on first load
useEffect(() => { useEffect(() => {
if (data.length && firstLoad && !tree.state.ids.length) { if (firstLoad && data.length && !tree.state.ids.length) {
tree.fns.onToggleAll({}); tree.fns.onToggleAll({});
setFirstLoad(false); setFirstLoad(false);
} }
}); }, [data]);
const showName = (di: DashboardItem) => { const showName = (di: DashboardItem) => {
if (di.id < 100) { if (di.id < 100) {
// if its a device row // if its a device and has entities
if (di.nodes?.length) { if (di.nodes?.length) {
return ( return (
<> <>
<span style="font-size: 14px;"> <span style="font-size: 14px">
<DeviceIcon type_id={di.t} /> <DeviceIcon type_id={di.t} />
&nbsp;&nbsp;{di.n} &nbsp;&nbsp;{di.n}
</span> </span>
@@ -136,7 +153,7 @@ const Dashboard = () => {
); );
} }
} }
return <div style={{ color: '#d3d3d3' }}>{di.n}</div>; return <span style="color:lightgrey">{di.n}</span>;
}; };
const showDeviceValue = (di: DashboardItem) => { const showDeviceValue = (di: DashboardItem) => {
@@ -168,14 +185,14 @@ const Dashboard = () => {
return <FormLoader onRetry={fetchDashboard} errorMessage={error?.message} />; return <FormLoader onRetry={fetchDashboard} errorMessage={error?.message} />;
} }
if (data.length === 0) { // if (data.length === 0) {
return ( // return (
<Typography variant="body2" color="warning"> // <Typography variant="body2" color="warning">
{/* TODO translate */} // {/* TODO translate */}
No entities found. // No entities found.
</Typography> // </Typography>
); // );
} // }
return ( return (
<> <>
@@ -217,42 +234,49 @@ const Dashboard = () => {
style: { verticalAlign: 'middle' } style: { verticalAlign: 'middle' }
}} }}
> >
<Table {!loading && data.length === 0 ? (
data={{ nodes: data }} <Typography variant="body2" color="warning">
theme={dashboard_theme} {/* TODO translate */}
layout={{ custom: true }} No entities found.
tree={tree} </Typography>
> ) : (
{(tableList: DashboardItem[]) => ( <Table
<Body> data={{ nodes: data }}
{tableList.map((di: DashboardItem) => ( theme={dashboard_theme}
<Row key={di.id} item={di} disabled={di.nodes?.length === 0}> layout={{ custom: true }}
{di.nodes?.length === 0 ? ( tree={tree}
<Cell>{showName(di)}</Cell> >
) : ( {(tableList: DashboardItem[]) => (
<CellTree item={di}>{showName(di)}</CellTree> <Body>
)} {tableList.map((di: DashboardItem) => (
<Cell pinRight> <Row key={di.id} item={di}>
<div style={{ color: '#d3d3d3' }}> {di.id > 99 ? (
{formatValue(LL, di.v, di.u)} <Cell>{showName(di)}</Cell>
</div> ) : (
</Cell> <CellTree item={di}>{showName(di)}</CellTree>
<Cell stiff>
{me.admin && di.c && (
<IconButton
size="small"
onClick={() => showDeviceValue(di)}
>
<EditIcon color="primary" sx={{ fontSize: 16 }} />
</IconButton>
)} )}
</Cell> <Cell pinRight>
</Row> <span style={{ color: 'lightgrey' }}>
))} {formatValue(LL, di.v, di.u)}
</Body> </span>
)} </Cell>
</Table>
<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> </IconContext.Provider>
</Box> </Box>
</> </>

View File

@@ -428,7 +428,7 @@ const Devices = () => {
return () => { return () => {
clearInterval(timer); clearInterval(timer);
}; };
}); }, []);
const deviceValueDialogSave = async (devicevalue: DeviceValue) => { const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
const id = Number(device_select.state.id); const id = Number(device_select.state.id);