aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/DevicesList.js4
-rw-r--r--modern/src/PositionPage.js2
-rw-r--r--modern/src/admin/UsersPage.js4
-rw-r--r--modern/src/common/formatter.js16
-rw-r--r--modern/src/map/StatusView.js10
-rw-r--r--modern/src/reports/ReplayPage.js2
-rw-r--r--modern/src/reports/ReportLayout.js20
-rw-r--r--modern/src/reports/RouteReportPage.js8
-rw-r--r--modern/src/reports/StopReportPage.js4
-rw-r--r--modern/src/reports/SummaryReportPage.js12
-rw-r--r--modern/src/reports/TripReportPage.js12
-rw-r--r--modern/src/settings/MaintenancesPage.js4
-rw-r--r--modern/src/settings/NotificationsPage.js2
-rw-r--r--modern/src/settings/OptionsLayout/useRoutes.js26
14 files changed, 65 insertions, 61 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index cbf3a0a9..cea7c38c 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -19,6 +19,7 @@ import EditCollectionView from './EditCollectionView';
import { useEffectAsync } from './reactHelper';
import { formatPosition } from './common/formatter';
import { getDevices, getPosition } from './common/selectors';
+import { useTranslation } from './LocalizationProvider';
const useStyles = makeStyles((theme) => ({
list: {
@@ -83,6 +84,7 @@ const getBatteryStatus = (batteryLevel) => {
const DeviceRow = ({ data, index, style }) => {
const classes = useStyles();
const dispatch = useDispatch();
+ const t = useTranslation();
const { items } = data;
const item = items[index];
@@ -109,7 +111,7 @@ const DeviceRow = ({ data, index, style }) => {
{position.attributes.hasOwnProperty('batteryLevel') && (
<Grid item container xs alignItems="center" alignContent="center">
<Grid item>
- <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel')}</span>
+ <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel', t)}</span>
</Grid>
<Grid item>
<BatteryFullIcon className={classes[getBatteryStatus(position.attributes.batteryLevel)]} />
diff --git a/modern/src/PositionPage.js b/modern/src/PositionPage.js
index f09d43d6..2fd320a5 100644
--- a/modern/src/PositionPage.js
+++ b/modern/src/PositionPage.js
@@ -64,7 +64,7 @@ const PositionPage = () => {
/>
<ListItemSecondaryAction>
<Typography variant="body2">
- {formatPosition(value, key)}
+ {formatPosition(value, key, t)}
</Typography>
</ListItemSecondaryAction>
</ListItem>
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index 92db32e0..bd2a0033 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/admin/UsersPage.js
@@ -51,8 +51,8 @@ const UsersView = ({ updateTimestamp, onMenuClick }) => {
</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell>{item.email}</TableCell>
- <TableCell>{formatBoolean(item, 'administrator')}</TableCell>
- <TableCell>{formatBoolean(item, 'disabled')}</TableCell>
+ <TableCell>{formatBoolean(item, 'administrator', t)}</TableCell>
+ <TableCell>{formatBoolean(item, 'disabled', t)}</TableCell>
</TableRow>
))}
</TableBody>
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index 5db7a420..7a18d1af 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -1,8 +1,7 @@
import moment from 'moment';
import { useTranslation } from '../LocalizationProvider';
-export const formatBoolean = (value) => {
- const t = useTranslation();
+export const formatBoolean = (value, t) => {
return value ? t('sharedYes') : t('sharedNo');
}
@@ -10,7 +9,7 @@ export const formatNumber = (value, precision = 1) => Number(value.toFixed(preci
export const formatDate = (value, format = 'YYYY-MM-DD HH:mm') => moment(value).format(format);
-export const formatPosition = (value, key) => {
+export const formatPosition = (value, key, t) => {
if (value != null && typeof value === 'object') {
value = value[key];
}
@@ -32,14 +31,13 @@ export const formatPosition = (value, key) => {
if (typeof value === 'number') {
return formatNumber(value);
} if (typeof value === 'boolean') {
- return formatBoolean(value);
+ return formatBoolean(value, t);
}
return value;
}
};
-export const formatDistance = (value, unit) => {
- const t = useTranslation();
+export const formatDistance = (value, unit, t) => {
switch (unit) {
case 'mi':
return `${(value * 0.000621371).toFixed(2)} ${t('sharedMi')}`;
@@ -51,8 +49,7 @@ export const formatDistance = (value, unit) => {
}
};
-export const formatSpeed = (value, unit) => {
- const t = useTranslation();
+export const formatSpeed = (value, unit, t) => {
switch (unit) {
case 'kmh':
return `${(value * 1.852).toFixed(2)} ${t('sharedKmh')}`;
@@ -64,8 +61,7 @@ export const formatSpeed = (value, unit) => {
}
};
-export const formatVolume = (value, unit) => {
- const t = useTranslation();
+export const formatVolume = (value, unit, t) => {
switch (unit) {
case 'impGal':
return `${(value / 4.546).toFixed(2)} ${t('sharedGallonAbbreviation')}`;
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index 85009db7..5526e148 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -77,27 +77,29 @@ const StatusView = ({
<ListItem classes={{ container: classes.listItemContainer }}>
<ListItemText primary={t('positionSpeed')} />
<ListItemSecondaryAction>
- <span>{formatSpeed(position.speed, speedUnit)}</span>
+ {formatSpeed(position.speed, speedUnit, t)}
</ListItemSecondaryAction>
</ListItem>
{position.attributes.batteryLevel && (
<ListItem classes={{ container: classes.listItemContainer }}>
<ListItemText primary={t('positionBattery')} />
<ListItemSecondaryAction>
- <span className={classes[getBatteryStatus(position.attributes.batteryLevel)]}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel')}</span>
+ <span className={classes[getBatteryStatus(position.attributes.batteryLevel)]}>
+ {formatPosition(position.attributes.batteryLevel, 'batteryLevel', t)}
+ </span>
</ListItemSecondaryAction>
</ListItem>
)}
<ListItem classes={{ container: classes.listItemContainer }}>
<ListItemText primary={t('positionDistance')} />
<ListItemSecondaryAction>
- <span>{formatDistance(position.attributes.totalDistance, distanceUnit)}</span>
+ {formatDistance(position.attributes.totalDistance, distanceUnit, t)}
</ListItemSecondaryAction>
</ListItem>
<ListItem classes={{ container: classes.listItemContainer }}>
<ListItemText primary={t('positionCourse')} />
<ListItemSecondaryAction>
- <span>{formatPosition(position.course, 'course')}</span>
+ {formatPosition(position.course, 'course', t)}
</ListItemSecondaryAction>
</ListItem>
</List>
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index 3cc3c2f3..bb32daa5 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -76,7 +76,7 @@ const ReplayPage = () => {
value={index}
onChange={(_, index) => setIndex(index)}
valueLabelDisplay="auto"
- valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime') : '')}
+ valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')}
ValueLabelComponent={TimeLabel}
/>
</Paper>
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index 9bf1dd5e..f6e71db0 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import {
Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden,
@@ -51,15 +51,6 @@ const useStyles = makeStyles((theme) => ({
},
}));
-const routes = [
- { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
- { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
- { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
- { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
- { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
- { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
-];
-
const ReportLayout = ({ children, filter }) => {
const classes = useStyles();
const history = useHistory();
@@ -69,6 +60,15 @@ const ReportLayout = ({ children, filter }) => {
const [openDrawer, setOpenDrawer] = useState(false);
const [reportTitle, setReportTitle] = useState();
+ const routes = useMemo(() => [
+ { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
+ { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
+ { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
+ { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
+ { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
+ { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
+ ], [t]);
+
useEffect(() => {
routes.forEach((route) => {
switch (location.pathname) {
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index fe433422..3be2107b 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -32,12 +32,12 @@ const Filter = ({ setItems }) => {
};
const RouteReportPage = () => {
+ const theme = useTheme();
const t = useTranslation();
const distanceUnit = useAttributePreference('distanceUnit');
const speedUnit = useAttributePreference('speedUnit');
const coordinateFormat = usePreference('coordinateFormat');
- const theme = useTheme();
const columns = [{
headerName: t('positionFixTime'),
@@ -62,7 +62,7 @@ const RouteReportPage = () => {
field: 'speed',
type: 'number',
width: theme.dimensions.columnWidthString,
- valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+ valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
}, {
headerName: t('positionAddress'),
field: 'address',
@@ -74,7 +74,7 @@ const RouteReportPage = () => {
type: 'boolean',
width: theme.dimensions.columnWidthBoolean,
valueGetter: ({ row }) => row.attributes.ignition,
- valueFormatter: ({ value }) => formatBoolean(value),
+ valueFormatter: ({ value }) => formatBoolean(value, t),
}, {
headerName: t('deviceTotalDistance'),
field: 'totalDistance',
@@ -82,7 +82,7 @@ const RouteReportPage = () => {
hide: true,
width: theme.dimensions.columnWidthNumber,
valueGetter: ({ row }) => row.attributes.totalDistance,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+ valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
}];
const [items, setItems] = useState([]);
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 318507ed..aa668d57 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -50,7 +50,7 @@ const StopReportPage = () => {
field: 'startOdometer',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+ valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
}, {
headerName: t('positionAddress'),
field: 'address',
@@ -81,7 +81,7 @@ const StopReportPage = () => {
type: 'number',
width: theme.dimensions.columnWidthNumber,
hide: true,
- valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+ valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
}];
return (
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 84546f6b..d993d2e8 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -65,31 +65,31 @@ const SummaryReportPage = () => {
field: 'distance',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+ valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
}, {
headerName: t('reportStartOdometer'),
field: 'startOdometer',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+ valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
}, {
headerName: t('reportEndOdometer'),
field: 'endOdometer',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+ valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
}, {
headerName: t('reportAverageSpeed'),
field: 'averageSpeed',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+ valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
}, {
headerName: t('reportMaximumSpeed'),
field: 'maxSpeed',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+ valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
}, {
headerName: t('reportEngineHours'),
field: 'engineHours',
@@ -102,7 +102,7 @@ const SummaryReportPage = () => {
type: 'number',
width: theme.dimensions.columnWidthNumber,
hide: true,
- valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+ valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
}];
return (
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 22a236a2..632da7cc 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -51,7 +51,7 @@ const TripReportPage = () => {
field: 'startOdometer',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+ valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
}, {
headerName: t('reportStartAddress'),
field: 'startAddress',
@@ -69,7 +69,7 @@ const TripReportPage = () => {
field: 'endOdometer',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+ valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
}, {
headerName: t('reportEndAddress'),
field: 'endAddress',
@@ -81,19 +81,19 @@ const TripReportPage = () => {
field: 'distance',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatDistance(value, distanceUnit),
+ valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
}, {
headerName: t('reportAverageSpeed'),
field: 'averageSpeed',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+ valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
}, {
headerName: t('reportMaximumSpeed'),
field: 'maxSpeed',
type: 'number',
width: theme.dimensions.columnWidthNumber,
- valueFormatter: ({ value }) => formatSpeed(value, speedUnit),
+ valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
}, {
headerName: t('reportDuration'),
field: 'duration',
@@ -106,7 +106,7 @@ const TripReportPage = () => {
type: 'number',
width: theme.dimensions.columnWidthNumber,
hide: true,
- valueFormatter: ({ value }) => formatVolume(value, volumeUnit),
+ valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
}, {
headerName: t('sharedDriver'),
field: 'driverName',
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index a59a24e1..89b0279e 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -41,9 +41,9 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
if (attribute && attribute.dataType) {
switch (attribute.dataType) {
case 'speed':
- return formatSpeed(value, speedUnit);
+ return formatSpeed(value, speedUnit, t);
case 'distance':
- return formatDistance(value, distanceUnit);
+ return formatDistance(value, distanceUnit, t);
default:
return value;
}
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index 01483637..0d49d5ab 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -62,7 +62,7 @@ const NotificationsView = ({ updateTimestamp, onMenuClick }) => {
</IconButton>
</TableCell>
<TableCell>{t(prefixString('event', item.type))}</TableCell>
- <TableCell>{formatBoolean(item.always)}</TableCell>
+ <TableCell>{formatBoolean(item.always, t)}</TableCell>
<TableCell>{formatList('alarm', item.attributes.alarms)}</TableCell>
<TableCell>{formatList('notificator', item.notificators)}</TableCell>
</TableRow>
diff --git a/modern/src/settings/OptionsLayout/useRoutes.js b/modern/src/settings/OptionsLayout/useRoutes.js
index 4f0621ca..b6ed75fa 100644
--- a/modern/src/settings/OptionsLayout/useRoutes.js
+++ b/modern/src/settings/OptionsLayout/useRoutes.js
@@ -9,13 +9,9 @@ import BuildIcon from '@material-ui/icons/Build';
import PeopleIcon from '@material-ui/icons/People';
import BarChartIcon from '@material-ui/icons/BarChart';
import { getIsAdmin, getUserId } from '../../common/selectors';
+import { useTranslation } from '../../LocalizationProvider';
-const accountRoute = {
- name: t('settingsUser'),
- icon: <PersonIcon />,
-};
-
-const adminRoutes = [
+const useAdminRoutes = (t) => useMemo([
{ subheader: t('userAdmin') },
{
name: t('settingsServer'),
@@ -32,10 +28,14 @@ const adminRoutes = [
href: '/admin/statistics',
icon: <BarChartIcon />,
},
-];
+], [t]);
-const mainRoutes = [
- accountRoute,
+const useMainRoutes = (t, userId) => useMemo([
+ {
+ name: t('settingsUser'),
+ href: `/user/${userId}`,
+ icon: <PersonIcon />,
+ },
{
match: 'geofence',
name: t('sharedGeofences'),
@@ -72,12 +72,16 @@ const mainRoutes = [
href: '/settings/maintenances',
icon: <BuildIcon />,
},
-];
+], [t, userId]);
export default () => {
+ const t = useTranslation();
+
const isAdmin = useSelector(getIsAdmin);
const userId = useSelector(getUserId);
- accountRoute.href = `/user/${userId}`;
+
+ const mainRoutes = useMainRoutes(t, userId);
+ const adminRoutes = useAdminRoutes(t);
return useMemo(() => [...mainRoutes, ...(isAdmin ? adminRoutes : [])], [
isAdmin,
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 19:13:01 +0000