Improve device list icons

3 files changed, 36 insertions, 27 deletions

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 15a88874..490f428d 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -6,19 +6,21 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import Grid from '@material-ui/core/Grid';
 import ListItemText from '@material-ui/core/ListItemText';
-import SvgIcon from '@material-ui/core/SvgIcon';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import BatteryFullIcon from '@material-ui/icons/BatteryFull';
-import { ReactComponent as IgnitionIcon } from '../public/images/ignition.svg';
+import Battery60Icon from '@material-ui/icons/Battery60';
+import Battery20Icon from '@material-ui/icons/Battery20';
+import FlashOnIcon from '@material-ui/icons/FlashOn';
+import FlashOffIcon from '@material-ui/icons/FlashOff';
 
 import { devicesActions } from './store';
 import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
-import { formatPosition, getBatteryStatus, getStatusColor } from './common/formatter';
+import { formatBoolean, formatPercentage, getStatusColor } from './common/formatter';
 import { useTranslation } from './LocalizationProvider';
+import { Tooltip } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   list: {
@@ -47,12 +49,12 @@ const useStyles = makeStyles((theme) => ({
   positive: {
     color: theme.palette.colors.positive,
   },
+  medium: {
+    color: theme.palette.colors.medium,
+  },
   negative: {
     color: theme.palette.colors.negative,
   },
-  neutral: {
-    color: theme.palette.colors.neutral,
-  },
   indicators: {
     lineHeight: 1,
   },
@@ -66,7 +68,6 @@ const DeviceRow = ({ data, index, style }) => {
   const { items } = data;
   const item = items[index];
   const position = useSelector((state) => state.positions.items[item.id]);
-  const showIgnition = position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition;
 
   return (
     <div style={style}>
@@ -79,23 +80,28 @@ const DeviceRow = ({ data, index, style }) => {
         <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
         <ListItemSecondaryAction className={classes.indicators}>
           {position && (
-          <Grid container direction="row" alignItems="center" alignContent="center" spacing={2}>
-            {showIgnition && (
-            <Grid item>
-              <SvgIcon component={IgnitionIcon} />
-            </Grid>
-            )}
-            {position.attributes.hasOwnProperty('batteryLevel') && (
-            <Grid item container xs alignItems="center" alignContent="center">
-              <Grid item>
-                <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel', t)}</span>
-              </Grid>
-              <Grid item>
-                <BatteryFullIcon className={classes[getBatteryStatus(position.attributes.batteryLevel)]} />
-              </Grid>
-            </Grid>
-            )}
-          </Grid>
+            <>
+              {position.attributes.hasOwnProperty('ignition') && (
+                <Tooltip title={`${t('positionIgnition')}: ${formatBoolean(position.attributes.ignition, t)}`}>
+                  {position.attributes.ignition ? (
+                    <FlashOnIcon className={classes.positive} />
+                  ) : (
+                    <FlashOffIcon className={classes.negative} />
+                  )}
+                </Tooltip>
+              )}
+              {position.attributes.hasOwnProperty('batteryLevel') && (
+                <Tooltip title={`${t('positionBatteryLevel')}: ${formatPercentage(position.attributes.batteryLevel)}`}>
+                  {position.attributes.batteryLevel > 70 ? (
+                    <BatteryFullIcon className={classes.positive} />
+                  ) : position.attributes.batteryLevel > 30 ? (
+                    <Battery60Icon className={classes.medium} />
+                  ) : (
+                    <Battery20Icon className={classes.negative} />
+                  )}
+                </Tooltip>
+              )}
+            </>
           )}
         </ListItemSecondaryAction>
       </ListItem>
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index 1d4806e8..2a7c9095 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -4,6 +4,8 @@ export const formatBoolean = (value, t) => (value ? t('sharedYes') : t('sharedNo
 
 export const formatNumber = (value, precision = 1) => Number(value.toFixed(precision));
 
+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);
 
@@ -24,7 +26,7 @@ export const formatPosition = (value, key, t) => {
     case 'course':
       return value.toFixed(1);
     case 'batteryLevel':
-      return `${value}%`;
+      return formatPercentage(value);
     default:
       if (typeof value === 'number') {
         return formatNumber(value);
@@ -119,7 +121,7 @@ export const getBatteryStatus = (batteryLevel) => {
     return 'positive';
   }
   if (batteryLevel > 30) {
-    return 'neutral';
+    return 'medium';
   }
   return 'negative';
 };
diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js
index 46f82ae9..d24d60cc 100644
--- a/modern/src/theme/palette.js
+++ b/modern/src/theme/palette.js
@@ -8,6 +8,7 @@ export default {
   },
   colors: {
     positive: '#4CAF50',
+    medium: '#F3A813',
     negative: '#CC2222',
     neutral: '#888888',
   },