diff options
| -rw-r--r-- | modern/src/DevicesList.js | 8 | ||||
| -rw-r--r-- | modern/src/common/formatter.js | 1 | ||||
| -rw-r--r-- | modern/src/map/PositionsMap.js | 19 | ||||
| -rw-r--r-- | modern/src/map/StatusView.js | 6 |
4 files changed, 21 insertions, 13 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index c51385ef..bcd6786a 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -24,7 +24,7 @@ import { devicesActions } from './store'; import EditCollectionView from './EditCollectionView'; import { useEffectAsync } from './reactHelper'; import { - formatAlarm, formatBoolean, formatPercentage, getStatusColor, + formatAlarm, formatBoolean, formatPercentage, formatStatus, getStatusColor, } from './common/formatter'; import { useTranslation } from './LocalizationProvider'; @@ -86,7 +86,11 @@ const DeviceRow = ({ data, index, style }) => { <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" /> </Avatar> </ListItemAvatar> - <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} /> + <ListItemText + primary={item.name} + secondary={formatStatus(item.status, t)} + classes={{ secondary: classes[getStatusColor(item.status)] }} + /> <ListItemSecondaryAction className={classes.indicators}> {position && ( <> diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js index c1f024a7..6968deb7 100644 --- a/modern/src/common/formatter.js +++ b/modern/src/common/formatter.js @@ -10,6 +10,7 @@ export const formatPercentage = (value) => `${value}%`; export const formatDate = (value, format = 'YYYY-MM-DD HH:mm') => moment(value).format(format); export const formatTime = (value, format = 'YYYY-MM-DD HH:mm:ss') => moment(value).format(format); +export const formatStatus = (value, t) => t(prefixString('deviceStatus', value)); export const formatAlarm = (value, t) => t(prefixString('alarm', value)); export const formatPosition = (value, key, t) => { diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js index cabce3df..d82347f1 100644 --- a/modern/src/map/PositionsMap.js +++ b/modern/src/map/PositionsMap.js @@ -10,6 +10,7 @@ import store from '../store'; import StatusView from './StatusView'; import theme from '../theme'; import { getStatusColor } from '../common/formatter'; +import { LocalizationProvider } from '../LocalizationProvider'; const PositionsMap = ({ positions }) => { const id = 'positions'; @@ -41,14 +42,16 @@ const PositionsMap = ({ positions }) => { const placeholder = document.createElement('div'); ReactDOM.render( <Provider store={store}> - <ThemeProvider theme={theme}> - <StatusView - deviceId={feature.properties.deviceId} - onShowDetails={(positionId) => history.push(`/position/${positionId}`)} - onShowHistory={() => history.push('/replay')} - onEditClick={(deviceId) => history.push(`/device/${deviceId}`)} - /> - </ThemeProvider> + <LocalizationProvider> + <ThemeProvider theme={theme}> + <StatusView + deviceId={feature.properties.deviceId} + onShowDetails={(positionId) => history.push(`/position/${positionId}`)} + onShowHistory={() => history.push('/replay')} + onEditClick={(deviceId) => history.push(`/device/${deviceId}`)} + /> + </ThemeProvider> + </LocalizationProvider> </Provider>, placeholder, ); diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js index cdd6ecaf..2c3a7568 100644 --- a/modern/src/map/StatusView.js +++ b/modern/src/map/StatusView.js @@ -14,7 +14,7 @@ import EditIcon from '@material-ui/icons/Edit'; import DeleteIcon from '@material-ui/icons/Delete'; import { - formatPosition, getStatusColor, getBatteryStatus, formatDistance, formatSpeed, + formatPosition, getStatusColor, getBatteryStatus, formatDistance, formatSpeed, formatStatus, } from '../common/formatter'; import { useAttributePreference } from '../common/preferences'; import RemoveDialog from '../RemoveDialog'; @@ -72,7 +72,7 @@ const StatusView = ({ <ListItem classes={{ container: classes.listItemContainer }}> <ListItemText primary={t('deviceStatus')} /> <ListItemSecondaryAction> - <span className={classes[getStatusColor(device.status)]}>{device.status}</span> + <span className={classes[getStatusColor(device.status)]}>{formatStatus(device.status, t)}</span> </ListItemSecondaryAction> </ListItem> <ListItem classes={{ container: classes.listItemContainer }}> @@ -107,7 +107,7 @@ const StatusView = ({ </Grid> <Grid item container> <Grid item> - <Button color="secondary" onClick={handleClick}>More Info</Button> + <Button color="secondary" onClick={handleClick}>{t('sharedInfoTitle')}</Button> </Grid> <Grid item> <IconButton onClick={onShowHistory}> |