diff options
author | Iván Ávalos <avalos@disroot.org> | 2024-04-18 23:30:49 -0600 |
---|---|---|
committer | Iván Ávalos <avalos@disroot.org> | 2024-04-18 23:30:49 -0600 |
commit | 89f8af1e5c8a427b06a4e213d1fdade77ae090b8 (patch) | |
tree | 9c9af141405fca63acc2456b6b8557bd2dd6ad3c /src/main/DeviceList.jsx | |
parent | a3e79c6572759f6c8f4544166ea34d0e6d789b4e (diff) | |
download | trackermap-web-89f8af1e5c8a427b06a4e213d1fdade77ae090b8.tar.gz trackermap-web-89f8af1e5c8a427b06a4e213d1fdade77ae090b8.tar.bz2 trackermap-web-89f8af1e5c8a427b06a4e213d1fdade77ae090b8.zip |
Show position attributes in device list
Diffstat (limited to 'src/main/DeviceList.jsx')
-rw-r--r-- | src/main/DeviceList.jsx | 17 |
1 files changed, 13 insertions, 4 deletions
diff --git a/src/main/DeviceList.jsx b/src/main/DeviceList.jsx index eb51232f..3bb5f5e1 100644 --- a/src/main/DeviceList.jsx +++ b/src/main/DeviceList.jsx @@ -1,11 +1,12 @@ import React, { useEffect, useRef, useState } from 'react'; import { useDispatch } from 'react-redux'; import makeStyles from '@mui/styles/makeStyles'; -import { FixedSizeList } from 'react-window'; +import { VariableSizeList } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; import { devicesActions } from '../store'; import { useEffectAsync } from '../reactHelper'; import DeviceRow from './DeviceRow'; +import { useAttributePreference } from '../common/util/preferences'; const useStyles = makeStyles((theme) => ({ list: { @@ -28,6 +29,8 @@ const DeviceList = ({ devices }) => { const [, setTime] = useState(Date.now()); + const positionItems = useAttributePreference('positionItems', 'speed,address,totalDistance,course'); + useEffect(() => { const interval = setInterval(() => setTime(Date.now()), 60000); return () => { @@ -44,20 +47,26 @@ const DeviceList = ({ devices }) => { } }, []); + // RATIONALE: calculate row height to fit position attributes + const getItemSize = (index) => { + const item = devices[index]; + return 72 + (item.positionId && (positionItems.split(',').length * 20) || 0); + }; + return ( <AutoSizer className={classes.list}> {({ height, width }) => ( - <FixedSizeList + <VariableSizeList width={width} height={height} itemCount={devices.length} itemData={devices} - itemSize={72} + itemSize={getItemSize} overscanCount={10} innerRef={listInnerEl} > {DeviceRow} - </FixedSizeList> + </VariableSizeList> )} </AutoSizer> ); |