diff options
| -rw-r--r-- | modern/src/MainPage.js | 1 | ||||
| -rw-r--r-- | modern/src/PositionPage.js | 24 | ||||
| -rw-r--r-- | modern/src/common/formatter.js | 30 | ||||
| -rw-r--r-- | modern/src/components/PositionValue.js | 51 | ||||
| -rw-r--r-- | modern/src/reports/ReplayPage.js | 6 |
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> |