aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-10-24 21:29:00 -0700
committerAnton Tananaev <anton@traccar.org>2022-10-24 21:29:00 -0700
commit744144fc8883a035c5a0b63b53535c2361656b3e (patch)
tree47d350a9bb6df5699f6a2742c0b0d8ebed69b938 /modern
parent49b17ad4e4cef0dbc947bca4faee84829aa7a311 (diff)
downloadtrackermap-web-744144fc8883a035c5a0b63b53535c2361656b3e.tar.gz
trackermap-web-744144fc8883a035c5a0b63b53535c2361656b3e.tar.bz2
trackermap-web-744144fc8883a035c5a0b63b53535c2361656b3e.zip
Add devices page
Diffstat (limited to 'modern')
-rw-r--r--modern/src/Navigation.js2
-rw-r--r--modern/src/settings/DevicesPage.js79
-rw-r--r--modern/src/settings/components/SettingsMenu.js7
3 files changed, 88 insertions, 0 deletions
diff --git a/modern/src/Navigation.js b/modern/src/Navigation.js
index 1c26424f..d08fc12b 100644
--- a/modern/src/Navigation.js
+++ b/modern/src/Navigation.js
@@ -47,6 +47,7 @@ import AccumulatorsPage from './settings/AccumulatorsPage';
import CommandSendPage from './settings/CommandSendPage';
import App from './App';
import ChangeServerPage from './other/ChangeServerPage';
+import DevicesPage from './settings/DevicesPage';
const Navigation = () => {
const navigate = useNavigate();
@@ -112,6 +113,7 @@ const Navigation = () => {
<Route path="attributes" element={<ComputedAttributesPage />} />
<Route path="attribute/:id" element={<ComputedAttributePage />} />
<Route path="attribute" element={<ComputedAttributePage />} />
+ <Route path="devices" element={<DevicesPage />} />
<Route path="device/:id" element={<DevicePage />} />
<Route path="device" element={<DevicePage />} />
<Route path="drivers" element={<DriversPage />} />
diff --git a/modern/src/settings/DevicesPage.js b/modern/src/settings/DevicesPage.js
new file mode 100644
index 00000000..f3ee218f
--- /dev/null
+++ b/modern/src/settings/DevicesPage.js
@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import {
+ Table, TableRow, TableCell, TableHead, TableBody,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useEffectAsync } from '../reactHelper';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import SettingsMenu from './components/SettingsMenu';
+import CollectionFab from './components/CollectionFab';
+import CollectionActions from './components/CollectionActions';
+import TableShimmer from '../common/components/TableShimmer';
+import SearchHeader, { filterByKeyword } from './components/SearchHeader';
+
+const useStyles = makeStyles((theme) => ({
+ columnAction: {
+ width: '1%',
+ paddingRight: theme.spacing(1),
+ },
+}));
+
+const DevicesPage = () => {
+ const classes = useStyles();
+ const t = useTranslation();
+
+ const [timestamp, setTimestamp] = useState(Date.now());
+ const [items, setItems] = useState([]);
+ const [searchKeyword, setSearchKeyword] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ useEffectAsync(async () => {
+ setLoading(true);
+ try {
+ const response = await fetch('/api/devices');
+ if (response.ok) {
+ setItems(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ } finally {
+ setLoading(false);
+ }
+ }, [timestamp]);
+
+ return (
+ <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedDrivers']}>
+ <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} />
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedName')}</TableCell>
+ <TableCell>{t('deviceIdentifier')}</TableCell>
+ <TableCell>{t('sharedPhone')}</TableCell>
+ <TableCell>{t('deviceModel')}</TableCell>
+ <TableCell>{t('deviceContact')}</TableCell>
+ <TableCell className={classes.columnAction} />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.name}</TableCell>
+ <TableCell>{item.uniqueId}</TableCell>
+ <TableCell>{item.phone}</TableCell>
+ <TableCell>{item.model}</TableCell>
+ <TableCell>{item.contact}</TableCell>
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/device" endpoint="devices" setTimestamp={setTimestamp} />
+ </TableCell>
+ </TableRow>
+ )) : (<TableShimmer columns={6} endAction />)}
+ </TableBody>
+ </Table>
+ <CollectionFab editPath="/settings/driver" />
+ </PageLayout>
+ );
+};
+
+export default DevicesPage;
diff --git a/modern/src/settings/components/SettingsMenu.js b/modern/src/settings/components/SettingsMenu.js
index 7a1bf1b3..6a431ba1 100644
--- a/modern/src/settings/components/SettingsMenu.js
+++ b/modern/src/settings/components/SettingsMenu.js
@@ -12,6 +12,7 @@ import BuildIcon from '@mui/icons-material/Build';
import PeopleIcon from '@mui/icons-material/People';
import TodayIcon from '@mui/icons-material/Today';
import PublishIcon from '@mui/icons-material/Publish';
+import SmartphoneIcon from '@mui/icons-material/Smartphone';
import { Link, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useTranslation } from '../../common/components/LocalizationProvider';
@@ -62,6 +63,12 @@ const SettingsMenu = () => {
selected={location.pathname === `/settings/user/${userId}`}
/>
<MenuItem
+ title={t('deviceTitle')}
+ link="/settings/devices"
+ icon={<SmartphoneIcon />}
+ selected={location.pathname.startsWith('/settings/device')}
+ />
+ <MenuItem
title={t('sharedGeofences')}
link="/geofences"
icon={<CreateIcon />}