diff options
| -rw-r--r-- | modern/src/main/DeviceList.js | 69 | ||||
| -rw-r--r-- | modern/src/main/DeviceRow.js (renamed from modern/src/main/DevicesList.js) | 64 | ||||
| -rw-r--r-- | modern/src/main/MainPage.js | 6 | ||||
| -rw-r--r-- | modern/src/settings/PreferencesPage.js | 2 |
4 files changed, 76 insertions, 65 deletions
diff --git a/modern/src/main/DeviceList.js b/modern/src/main/DeviceList.js new file mode 100644 index 00000000..80104b00 --- /dev/null +++ b/modern/src/main/DeviceList.js @@ -0,0 +1,69 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { useDispatch } from 'react-redux'; +import makeStyles from '@mui/styles/makeStyles'; +import { List } from '@mui/material'; +import { FixedSizeList } from 'react-window'; +import AutoSizer from 'react-virtualized-auto-sizer'; +import { devicesActions } from '../store'; +import { useEffectAsync } from '../reactHelper'; +import DeviceRow from './DeviceRow'; + +const useStyles = makeStyles((theme) => ({ + list: { + maxHeight: '100%', + }, + listInner: { + position: 'relative', + margin: theme.spacing(1.5, 0), + }, +})); + +const DeviceList = ({ devices }) => { + const classes = useStyles(); + const dispatch = useDispatch(); + const listInnerEl = useRef(null); + + if (listInnerEl.current) { + listInnerEl.current.className = classes.listInner; + } + + const [, setTime] = useState(Date.now()); + + useEffect(() => { + const interval = setInterval(() => setTime(Date.now()), 60000); + return () => { + clearInterval(interval); + }; + }, []); + + useEffectAsync(async () => { + const response = await fetch('/api/devices'); + if (response.ok) { + dispatch(devicesActions.refresh(await response.json())); + } else { + throw Error(await response.text()); + } + }, []); + + return ( + <AutoSizer className={classes.list}> + {({ height, width }) => ( + <List disablePadding> + <FixedSizeList + width={width} + height={height} + itemCount={devices.length} + itemData={{ items: devices }} + itemSize={72} + overscanCount={10} + innerRef={listInnerEl} + > + {DeviceRow} + </FixedSizeList> + </List> + )} + </AutoSizer> + ); +}; + +export default DeviceList; diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DeviceRow.js index 054cf509..440e6f5c 100644 --- a/modern/src/main/DevicesList.js +++ b/modern/src/main/DeviceRow.js @@ -1,11 +1,9 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import makeStyles from '@mui/styles/makeStyles'; import { - IconButton, Tooltip, Avatar, List, ListItemAvatar, ListItemText, ListItemButton, + IconButton, Tooltip, Avatar, ListItemAvatar, ListItemText, ListItemButton, } from '@mui/material'; -import { FixedSizeList } from 'react-window'; -import AutoSizer from 'react-virtualized-auto-sizer'; import BatteryFullIcon from '@mui/icons-material/BatteryFull'; import BatteryChargingFullIcon from '@mui/icons-material/BatteryChargingFull'; import Battery60Icon from '@mui/icons-material/Battery60'; @@ -15,7 +13,6 @@ import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20'; import ErrorIcon from '@mui/icons-material/Error'; import moment from 'moment'; import { devicesActions } from '../store'; -import { useEffectAsync } from '../reactHelper'; import { formatAlarm, formatBoolean, formatPercentage, formatStatus, getStatusColor, } from '../common/util/formatter'; @@ -26,13 +23,6 @@ import usePersistedState from '../common/util/usePersistedState'; import { ReactComponent as EngineIcon } from '../resources/images/data/engine.svg'; const useStyles = makeStyles((theme) => ({ - list: { - maxHeight: '100%', - }, - listInner: { - position: 'relative', - margin: theme.spacing(1.5, 0), - }, icon: { width: '25px', height: '25px', @@ -170,52 +160,4 @@ const DeviceRow = ({ data, index, style }) => { ); }; -const DevicesList = ({ devices }) => { - const classes = useStyles(); - const dispatch = useDispatch(); - const listInnerEl = useRef(null); - - if (listInnerEl.current) { - listInnerEl.current.className = classes.listInner; - } - - const [, setTime] = useState(Date.now()); - - useEffect(() => { - const interval = setInterval(() => setTime(Date.now()), 60000); - return () => { - clearInterval(interval); - }; - }, []); - - useEffectAsync(async () => { - const response = await fetch('/api/devices'); - if (response.ok) { - dispatch(devicesActions.refresh(await response.json())); - } else { - throw Error(await response.text()); - } - }, []); - - return ( - <AutoSizer className={classes.list}> - {({ height, width }) => ( - <List disablePadding> - <FixedSizeList - width={width} - height={height} - itemCount={devices.length} - itemData={{ items: devices }} - itemSize={72} - overscanCount={10} - innerRef={listInnerEl} - > - {DeviceRow} - </FixedSizeList> - </List> - )} - </AutoSizer> - ); -}; - -export default DevicesList; +export default DeviceRow; diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js index 2713c81e..a296d5f6 100644 --- a/modern/src/main/MainPage.js +++ b/modern/src/main/MainPage.js @@ -6,7 +6,7 @@ import { makeStyles } from '@mui/styles'; import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useDispatch, useSelector } from 'react-redux'; -import DevicesList from './DevicesList'; +import DeviceList from './DeviceList'; import BottomMenu from '../common/components/BottomMenu'; import StatusCard from '../common/components/StatusCard'; import { devicesActions } from '../store'; @@ -63,7 +63,7 @@ const MainPage = () => { const desktop = useMediaQuery(theme.breakpoints.up('md')); - const [mapOnSelect] = usePersistedState('mapOnSelect', false); + const [mapOnSelect] = usePersistedState('mapOnSelect', true); const selectedDeviceId = useSelector((state) => state.devices.selectedId); const positions = useSelector((state) => state.positions.items); @@ -126,7 +126,7 @@ const MainPage = () => { </div> )} <Paper square className={classes.contentList} style={devicesOpen ? {} : { visibility: 'hidden' }}> - <DevicesList devices={filteredDevices} /> + <DeviceList devices={filteredDevices} /> </Paper> </div> {desktop && ( diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js index 403ea156..02c457a6 100644 --- a/modern/src/settings/PreferencesPage.js +++ b/modern/src/settings/PreferencesPage.js @@ -71,7 +71,7 @@ const PreferencesPage = () => { const [mapLiveRoutes, setMapLiveRoutes] = usePersistedState('mapLiveRoutes', false); const [mapFollow, setMapFollow] = usePersistedState('mapFollow', false); const [mapCluster, setMapCluster] = usePersistedState('mapCluster', true); - const [mapOnSelect, setMapOnSelect] = usePersistedState('mapOnSelect', false); + const [mapOnSelect, setMapOnSelect] = usePersistedState('mapOnSelect', true); const filter = createFilterOptions(); |