aboutsummaryrefslogtreecommitdiff
path: root/src/other/NetworkPage.jsx
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2024-04-06 09:22:10 -0700
committerAnton Tananaev <anton@traccar.org>2024-04-06 09:22:10 -0700
commitf418231b6b2f5e030a0d2dcc390c314602b1f740 (patch)
tree10326adf3792bc2697e06bb5f2b8ef2a8f7e55fe /src/other/NetworkPage.jsx
parentb392a4af78e01c8e0f50aad5468e9583675b24be (diff)
downloadtrackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.gz
trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.tar.bz2
trackermap-web-f418231b6b2f5e030a0d2dcc390c314602b1f740.zip
Move modern to the top
Diffstat (limited to 'src/other/NetworkPage.jsx')
-rw-r--r--src/other/NetworkPage.jsx122
1 files changed, 122 insertions, 0 deletions
diff --git a/src/other/NetworkPage.jsx b/src/other/NetworkPage.jsx
new file mode 100644
index 00000000..9dc00c61
--- /dev/null
+++ b/src/other/NetworkPage.jsx
@@ -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;