aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/MainPage.js1
-rw-r--r--modern/src/PositionPage.js24
-rw-r--r--modern/src/common/formatter.js30
-rw-r--r--modern/src/components/PositionValue.js51
-rw-r--r--modern/src/reports/ReplayPage.js6
5 files changed, 68 insertions, 44 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 247001aa..8c36f621 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -66,6 +66,7 @@ const useStyles = makeStyles((theme) => ({
},
statusCard: {
position: 'fixed',
+ zIndex: 5,
[theme.breakpoints.up('md')]: {
left: `calc(50% + ${theme.dimensions.drawerWidthDesktop} / 2)`,
bottom: theme.spacing(3),
diff --git a/modern/src/PositionPage.js b/modern/src/PositionPage.js
index 08502668..6a9809d4 100644
--- a/modern/src/PositionPage.js
+++ b/modern/src/PositionPage.js
@@ -7,9 +7,9 @@ import {
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import { useHistory, useParams } from 'react-router-dom';
import { useEffectAsync } from './reactHelper';
-import { formatPosition } from './common/formatter';
import { prefixString } from './common/stringUtils';
import { useTranslation } from './LocalizationProvider';
+import PositionValue from './components/PositionValue';
const useStyles = makeStyles((theme) => ({
root: {
@@ -51,11 +51,6 @@ const PositionPage = () => {
return null;
});
- const attributesList = () => {
- const combinedList = { ...item, ...item.attributes };
- return Object.entries(combinedList).filter(([, value]) => typeof value !== 'object');
- };
-
return (
<>
<AppBar position="sticky" color="inherit">
@@ -79,11 +74,18 @@ const PositionPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {item && attributesList().map(([key, value]) => (
- <TableRow key={key}>
- <TableCell>{key}</TableCell>
- <TableCell><strong>{t(prefixString('position', key))}</strong></TableCell>
- <TableCell>{formatPosition(value, key, t)}</TableCell>
+ {item && Object.getOwnPropertyNames(item).filter((it) => it !== 'attributes').map((property) => (
+ <TableRow key={property}>
+ <TableCell>{property}</TableCell>
+ <TableCell><strong>{t(prefixString('position', property))}</strong></TableCell>
+ <TableCell><PositionValue position={item} property={property} /></TableCell>
+ </TableRow>
+ ))}
+ {item && Object.getOwnPropertyNames(item.attributes).map((attribute) => (
+ <TableRow key={attribute}>
+ <TableCell>{attribute}</TableCell>
+ <TableCell><strong>{t(prefixString('position', attribute)) || t(prefixString('device', attribute))}</strong></TableCell>
+ <TableCell><PositionValue position={item} attribute={attribute} /></TableCell>
</TableRow>
))}
</TableBody>
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index fed29a9d..bc3af6fb 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -13,36 +13,6 @@ export const formatTime = (value, format = 'YYYY-MM-DD HH:mm:ss') => moment(valu
export const formatStatus = (value, t) => t(prefixString('deviceStatus', value));
export const formatAlarm = (value, t) => t(prefixString('alarm', value));
-export const formatPosition = (value, key, t) => {
- if (value != null && typeof value === 'object') {
- value = value[key];
- }
- switch (key) {
- case 'fixTime':
- case 'deviceTime':
- case 'serverTime':
- case 'eventTime':
- return formatTime(value);
- case 'latitude':
- case 'longitude':
- return value.toFixed(5);
- case 'speed':
- case 'course':
- return value.toFixed(1);
- case 'batteryLevel':
- return formatPercentage(value);
- case 'alarm':
- return formatAlarm(value, t);
- default:
- if (typeof value === 'number') {
- return formatNumber(value);
- } if (typeof value === 'boolean') {
- return formatBoolean(value, t);
- }
- return value;
- }
-};
-
export const formatCourse = (value) => {
const courseValues = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
return courseValues[Math.floor(value / 45)];
diff --git a/modern/src/components/PositionValue.js b/modern/src/components/PositionValue.js
new file mode 100644
index 00000000..b9e573fe
--- /dev/null
+++ b/modern/src/components/PositionValue.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { formatAlarm, formatBoolean, formatCoordinate, formatCourse, formatDistance, formatNumber, formatPercentage, formatSpeed, formatTime } from '../common/formatter';
+import { useAttributePreference, usePreference } from '../common/preferences';
+import { useTranslation } from '../LocalizationProvider';
+
+const PositionValue = ({ position, property, attribute }) => {
+ const t = useTranslation();
+
+ const key = property || attribute;
+ const value = property ? position[property] : position.attributes[attribute];
+
+ const distanceUnit = useAttributePreference('distanceUnit');
+ const speedUnit = useAttributePreference('speedUnit');
+ const coordinateFormat = usePreference('coordinateFormat');
+
+ const formatValue = () => {
+ switch (key) {
+ case 'fixTime':
+ case 'deviceTime':
+ case 'serverTime':
+ return formatTime(value);
+ case 'latitude':
+ return formatCoordinate('latitude', value, coordinateFormat);
+ case 'longitude':
+ return formatCoordinate('longitude', value, coordinateFormat);
+ case 'speed':
+ return formatSpeed(value, speedUnit, t);
+ case 'course':
+ return formatCourse(value);
+ case 'batteryLevel':
+ return formatPercentage(value);
+ case 'alarm':
+ return formatAlarm(value, t);
+ case 'odometer':
+ case 'distance':
+ case 'totalDistance':
+ return formatDistance(value, distanceUnit, t)
+ default:
+ if (typeof value === 'number') {
+ return formatNumber(value);
+ } if (typeof value === 'boolean') {
+ return formatBoolean(value, t);
+ }
+ return value;
+ }
+ }
+
+ return (<>{formatValue(value)}</>);
+};
+
+export default PositionValue;
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index 9840ea8e..08563b3a 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -13,7 +13,7 @@ import { useSelector } from 'react-redux';
import Map from '../map/Map';
import ReplayPathMap from '../map/ReplayPathMap';
import PositionsMap from '../map/PositionsMap';
-import { formatPosition } from '../common/formatter';
+import { formatTime } from '../common/formatter';
import ReportFilter from './ReportFilter';
import { useTranslation } from '../LocalizationProvider';
@@ -160,7 +160,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 ? formatTime(positions[i]) : '')}
ValueLabelComponent={TimeLabel}
/>
</Grid>
@@ -181,7 +181,7 @@ const ReplayPage = () => {
<FastForwardIcon />
</IconButton>
</Grid>
- <Grid item xs>{formatPosition(positions[index], 'fixTime')}</Grid>
+ <Grid item xs>{formatTime(positions[index])}</Grid>
</Grid>
</Grid>
</Paper>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 01:58:43 +0000