Fix localization issues

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}>