Show last update time

2 files changed, 69 insertions, 49 deletions

diff --git a/modern/src/common/components/LocalizationProvider.js b/modern/src/common/components/LocalizationProvider.js
index 147ac5ca..db3e1fb9 100644
--- a/modern/src/common/components/LocalizationProvider.js
+++ b/modern/src/common/components/LocalizationProvider.js
@@ -1,5 +1,9 @@
 /* eslint-disable import/no-relative-packages */
-import React, { createContext, useContext, useMemo } from 'react';
+import React, {
+  createContext, useContext, useEffect, useMemo,
+} from 'react';
+import moment from 'moment';
+import 'moment/min/locales.min';
 
 import af from '../../../../web/l10n/af.json';
 import ar from '../../../../web/l10n/ar.json';
@@ -146,6 +150,16 @@ export const LocalizationProvider = ({ children }) => {
 
   const value = useMemo(() => ({ languages, language, setLanguage }), [languages, language, setLanguage]);
 
+  useEffect(() => {
+    let selected;
+    if (language.length > 2) {
+      selected = `${language.slice(0, 2)}-${language.slice(-2).toLowerCase()}`;
+    } else {
+      selected = language;
+    }
+    moment.locale([selected, 'en']);
+  }, [language]);
+
   return (
     <LocalizationContext.Provider value={value}>
       {children}
diff --git a/modern/src/main/DevicesList.js b/modern/src/main/DevicesList.js
index 06b75715..fe963124 100644
--- a/modern/src/main/DevicesList.js
+++ b/modern/src/main/DevicesList.js
@@ -6,7 +6,6 @@ import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import ListItemText from '@mui/material/ListItemText';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -20,6 +19,7 @@ import FlashOnIcon from '@mui/icons-material/FlashOn';
 import FlashOffIcon from '@mui/icons-material/FlashOff';
 import ErrorIcon from '@mui/icons-material/Error';
 
+import moment from 'moment';
 import { devicesActions } from '../store';
 import { useEffectAsync } from '../reactHelper';
 import {
@@ -63,9 +63,6 @@ const useStyles = makeStyles((theme) => ({
   neutral: {
     color: theme.palette.colors.neutral,
   },
-  indicators: {
-    lineHeight: 1,
-  },
 }));
 
 const DeviceRow = ({ data, index, style }) => {
@@ -77,6 +74,15 @@ const DeviceRow = ({ data, index, style }) => {
   const item = items[index];
   const position = useSelector((state) => state.positions.items[item.id]);
 
+  const secondaryText = () => {
+    const status = formatStatus(item.status, t);
+    if (item.lastUpdate) {
+      const lastUpdate = moment(item.lastUpdate).fromNow();
+      return `${status} ${lastUpdate}`;
+    }
+    return status;
+  };
+
   return (
     <div style={style}>
       <ListItem button key={item.id} className={classes.listItem} onClick={() => dispatch(devicesActions.select(item.id))}>
@@ -87,52 +93,52 @@ const DeviceRow = ({ data, index, style }) => {
         </ListItemAvatar>
         <ListItemText
           primary={item.name}
-          secondary={formatStatus(item.status, t)}
+          primaryTypographyProps={{ noWrap: true }}
+          secondary={secondaryText()}
+          secondaryTypographyProps={{ noWrap: true }}
           classes={{ secondary: classes[getStatusColor(item.status)] }}
         />
-        <ListItemSecondaryAction className={classes.indicators}>
-          {position && (
-            <>
-              {position.attributes.hasOwnProperty('alarm') && (
-                <Tooltip title={`${t('eventAlarm')}: ${formatAlarm(position.attributes.alarm, t)}`}>
-                  <IconButton size="small">
-                    <ErrorIcon fontSize="small" className={classes.negative} />
-                  </IconButton>
-                </Tooltip>
-              )}
-              {position.attributes.hasOwnProperty('ignition') && (
-                <Tooltip title={`${t('positionIgnition')}: ${formatBoolean(position.attributes.ignition, t)}`}>
-                  <IconButton size="small">
-                    {position.attributes.ignition ? (
-                      <FlashOnIcon fontSize="small" className={classes.positive} />
-                    ) : (
-                      <FlashOffIcon fontSize="small" className={classes.neutral} />
-                    )}
-                  </IconButton>
-                </Tooltip>
-              )}
-              {position.attributes.hasOwnProperty('batteryLevel') && (
-                <Tooltip title={`${t('positionBatteryLevel')}: ${formatPercentage(position.attributes.batteryLevel)}`}>
-                  <IconButton size="small">
-                    {position.attributes.batteryLevel > 70 ? (
-                      position.attributes.charge
-                        ? (<BatteryChargingFullIcon fontSize="small" className={classes.positive} />)
-                        : (<BatteryFullIcon fontSize="small" className={classes.positive} />)
-                    ) : position.attributes.batteryLevel > 30 ? (
-                      position.attributes.charge
-                        ? (<BatteryCharging60Icon fontSize="small" className={classes.medium} />)
-                        : (<Battery60Icon fontSize="small" className={classes.medium} />)
-                    ) : (
-                      position.attributes.charge
-                        ? (<BatteryCharging20Icon fontSize="small" className={classes.negative} />)
-                        : (<Battery20Icon fontSize="small" className={classes.negative} />)
-                    )}
-                  </IconButton>
-                </Tooltip>
-              )}
-            </>
-          )}
-        </ListItemSecondaryAction>
+        {position && (
+          <>
+            {position.attributes.hasOwnProperty('alarm') && (
+              <Tooltip title={`${t('eventAlarm')}: ${formatAlarm(position.attributes.alarm, t)}`}>
+                <IconButton size="small">
+                  <ErrorIcon fontSize="small" className={classes.negative} />
+                </IconButton>
+              </Tooltip>
+            )}
+            {position.attributes.hasOwnProperty('ignition') && (
+              <Tooltip title={`${t('positionIgnition')}: ${formatBoolean(position.attributes.ignition, t)}`}>
+                <IconButton size="small">
+                  {position.attributes.ignition ? (
+                    <FlashOnIcon fontSize="small" className={classes.positive} />
+                  ) : (
+                    <FlashOffIcon fontSize="small" className={classes.neutral} />
+                  )}
+                </IconButton>
+              </Tooltip>
+            )}
+            {position.attributes.hasOwnProperty('batteryLevel') && (
+              <Tooltip title={`${t('positionBatteryLevel')}: ${formatPercentage(position.attributes.batteryLevel)}`}>
+                <IconButton size="small">
+                  {position.attributes.batteryLevel > 70 ? (
+                    position.attributes.charge
+                      ? (<BatteryChargingFullIcon fontSize="small" className={classes.positive} />)
+                      : (<BatteryFullIcon fontSize="small" className={classes.positive} />)
+                  ) : position.attributes.batteryLevel > 30 ? (
+                    position.attributes.charge
+                      ? (<BatteryCharging60Icon fontSize="small" className={classes.medium} />)
+                      : (<Battery60Icon fontSize="small" className={classes.medium} />)
+                  ) : (
+                    position.attributes.charge
+                      ? (<BatteryCharging20Icon fontSize="small" className={classes.negative} />)
+                      : (<Battery20Icon fontSize="small" className={classes.negative} />)
+                  )}
+                </IconButton>
+              </Tooltip>
+            )}
+          </>
+        )}
       </ListItem>
     </div>
   );