Remove position formatter

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>