aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/Navigation.js2
-rw-r--r--modern/src/common/components/PositionValue.js2
-rw-r--r--modern/src/other/NetworkPage.js122
-rw-r--r--modern/src/other/PositionPage.js14
4 files changed, 127 insertions, 13 deletions
diff --git a/modern/src/Navigation.js b/modern/src/Navigation.js
index b4156713..e7366d2b 100644
--- a/modern/src/Navigation.js
+++ b/modern/src/Navigation.js
@@ -13,6 +13,7 @@ import NotificationPage from './settings/NotificationPage';
import GroupsPage from './settings/GroupsPage';
import GroupPage from './settings/GroupPage';
import PositionPage from './other/PositionPage';
+import NetworkPage from './other/NetworkPage';
import EventReportPage from './reports/EventReportPage';
import ReplayPage from './other/ReplayPage';
import TripReportPage from './reports/TripReportPage';
@@ -89,6 +90,7 @@ const Navigation = () => {
<Route index element={<MainPage />} />
<Route path="position/:id" element={<PositionPage />} />
+ <Route path="network/:positionId" element={<NetworkPage />} />
<Route path="event/:id" element={<EventPage />} />
<Route path="replay" element={<ReplayPage />} />
<Route path="geofences" element={<GeofencesPage />} />
diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js
index 3dd0eb6f..cdb2c6d6 100644
--- a/modern/src/common/components/PositionValue.js
+++ b/modern/src/common/components/PositionValue.js
@@ -87,6 +87,8 @@ const PositionValue = ({ position, property, attribute }) => {
return address;
}
return (<Link href="#" onClick={showAddress}>{t('sharedShowAddress')}</Link>);
+ case 'network':
+ return (<Link component={RouterLink} to={`/network/${position.id}`}>{t('sharedInfoTitle')}</Link>);
default:
return formatValue(value);
}
diff --git a/modern/src/other/NetworkPage.js b/modern/src/other/NetworkPage.js
new file mode 100644
index 00000000..9dc00c61
--- /dev/null
+++ b/modern/src/other/NetworkPage.js
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import {
+ Typography, Container, Paper, AppBar, Toolbar, IconButton, Table, TableHead, TableRow, TableCell, TableBody,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useEffectAsync } from '../reactHelper';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ content: {
+ overflow: 'auto',
+ paddingTop: theme.spacing(2),
+ paddingBottom: theme.spacing(2),
+ display: 'flex',
+ flexDirection: 'column',
+ gap: theme.spacing(2),
+ },
+}));
+
+const NetworkPage = () => {
+ const classes = useStyles();
+ const navigate = useNavigate();
+
+ const { positionId } = useParams();
+
+ const [item, setItem] = useState({});
+
+ useEffectAsync(async () => {
+ if (positionId) {
+ const response = await fetch(`/api/positions?id=${positionId}`);
+ if (response.ok) {
+ const positions = await response.json();
+ if (positions.length > 0) {
+ setItem(positions[0]);
+ }
+ } else {
+ throw Error(await response.text());
+ }
+ }
+ }, [positionId]);
+
+ const deviceName = useSelector((state) => {
+ if (item) {
+ const device = state.devices.items[item.deviceId];
+ if (device) {
+ return device.name;
+ }
+ }
+ return null;
+ });
+
+ return (
+ <div className={classes.root}>
+ <AppBar position="sticky" color="inherit">
+ <Toolbar>
+ <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate(-1)}>
+ <ArrowBackIcon />
+ </IconButton>
+ <Typography variant="h6">
+ {deviceName}
+ </Typography>
+ </Toolbar>
+ </AppBar>
+ <div className={classes.content}>
+ <Container maxWidth="sm">
+ <Paper>
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>MCC</TableCell>
+ <TableCell>MNC</TableCell>
+ <TableCell>LAC</TableCell>
+ <TableCell>CID</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {(item.network?.cellTowers || []).map((cell) => (
+ <TableRow key={cell.cellId}>
+ <TableCell>{cell.mobileCountryCode}</TableCell>
+ <TableCell>{cell.mobileNetworkCode}</TableCell>
+ <TableCell>{cell.locationAreaCode}</TableCell>
+ <TableCell>{cell.cellId}</TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </Paper>
+ </Container>
+ <Container maxWidth="sm">
+ <Paper>
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>MAC</TableCell>
+ <TableCell>RSSI</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {(item.network?.wifiAccessPoints || []).map((wifi) => (
+ <TableRow key={wifi.macAddress}>
+ <TableCell>{wifi.macAddress}</TableCell>
+ <TableCell>{wifi.signalStrength}</TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </Paper>
+ </Container>
+ </div>
+ </div>
+ );
+};
+
+export default NetworkPage;
diff --git a/modern/src/other/PositionPage.js b/modern/src/other/PositionPage.js
index eb1b90c3..1a5f6d9d 100644
--- a/modern/src/other/PositionPage.js
+++ b/modern/src/other/PositionPage.js
@@ -2,17 +2,7 @@ import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import {
- Typography,
- Container,
- Paper,
- AppBar,
- Toolbar,
- IconButton,
- Table,
- TableHead,
- TableRow,
- TableCell,
- TableBody,
+ Typography, Container, Paper, AppBar, Toolbar, IconButton, Table, TableHead, TableRow, TableCell, TableBody,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
@@ -55,8 +45,6 @@ const PositionPage = () => {
} else {
throw Error(await response.text());
}
- } else {
- setItem({});
}
}, [id]);