aboutsummaryrefslogtreecommitdiff
path: root/modern/src/main
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-10-21 18:14:12 -0700
committerAnton Tananaev <anton@traccar.org>2022-10-21 18:14:12 -0700
commit23f2332c7ce6cea72d91df102d35c03d0d3ce49e (patch)
treed44071ff0b198017028978165c58d69f91374e57 /modern/src/main
parent52421e5f09687d4ae57386a69f9ffc69c011f9bb (diff)
downloadtrackermap-web-23f2332c7ce6cea72d91df102d35c03d0d3ce49e.tar.gz
trackermap-web-23f2332c7ce6cea72d91df102d35c03d0d3ce49e.tar.bz2
trackermap-web-23f2332c7ce6cea72d91df102d35c03d0d3ce49e.zip
Extract device row
Diffstat (limited to 'modern/src/main')
-rw-r--r--modern/src/main/DeviceList.js69
-rw-r--r--modern/src/main/DeviceRow.js (renamed from modern/src/main/DevicesList.js)64
-rw-r--r--modern/src/main/MainPage.js6
3 files changed, 75 insertions, 64 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 && (