Modifications for clients

1 files changed, 31 insertions, 23 deletions

diff --git a/src/main/DeviceRow.jsx b/src/main/DeviceRow.jsx
index 8b97eaa7..bf0103cc 100644
--- a/src/main/DeviceRow.jsx
+++ b/src/main/DeviceRow.jsx
@@ -7,6 +7,7 @@ import {
 } from '@mui/material';
 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
+import CircleIcon from '@mui/icons-material/Circle';
 import BatteryFullIcon from '@mui/icons-material/BatteryFull';
 import BatteryChargingFullIcon from '@mui/icons-material/BatteryChargingFull';
 import Battery60Icon from '@mui/icons-material/Battery60';
@@ -75,6 +76,35 @@ const DeviceRow = ({ data, index, style }) => {
   const positionAttributes = usePositionAttributes(t);
   const positionItems = useAttributePreference('positionItems', 'speed,address,totalDistance,course');
 
+  const primaryText = () => {
+    // RATIONALE: we connect output/out1 to engine lock
+    let lock = undefined;
+    if (position) {
+      if (position.attributes.hasOwnProperty('output')) {
+        lock = position.attributes.output === 1;
+      } else if (position.attributes.hasOwnProperty('out1')) {
+        lock = position.attributes.out1;
+      }
+    }
+
+    return (
+      <>
+        {position && position.attributes.hasOwnProperty('ignition') && position.attributes.ignition
+          ? <CircleIcon fontSize="inherit" className={classes.success} />
+          : <CircleIcon fontSize="inherit" className={classes.neutral} />
+        }
+        {" "}
+        {
+          (lock === undefined)
+            ? <LockIcon fontSize="inherit" className={classes.error} />
+            : <LockOpenIcon fontSize="inherit" className={classes.success} />
+        }
+        {" "}
+        { item[devicePrimary] }
+      </>
+    );
+  };
+
   const secondaryText = () => {
     let status;
     if (item.status === 'online' || !item.lastUpdate) {
@@ -105,26 +135,6 @@ const DeviceRow = ({ data, index, style }) => {
     );
   };
 
-  // RATIONALE: we connect output/out1 to engine lock
-  const positionLock = () => {
-    let lock = false;
-    if (position.attributes.output !== undefined) {
-      lock = position.attributes.output === 1;
-    } else if (position.attributes.out1 !== undefined) {
-      lock = position.attributes.out1;
-    } else {
-      return <></>;
-    }
-
-    return (
-      <IconButton size="small">{
-        (lock) 
-          ? <LockIcon fontSize="small" className={classes.error} />
-          : <LockOpenIcon fontSize="small" height={20} className={classes.success} />
-      }</IconButton>
-    )
-  };
-
   return (
     <div style={style}>
       <ListItemButton
@@ -139,7 +149,7 @@ const DeviceRow = ({ data, index, style }) => {
           </Avatar>
         </ListItemAvatar>
         <ListItemText
-            primary={item[devicePrimary]}
+            primary={primaryText()}
             primaryTypographyProps={{ noWrap: true }}
             secondary={secondaryText()}
             secondaryTypographyProps={{ noWrap: true }}
@@ -153,8 +163,6 @@ const DeviceRow = ({ data, index, style }) => {
                 </IconButton>
               </Tooltip>
             )}
-            {/* RATIONALE: clients want engine lock at a glance */}
-            {positionLock()}
             {position.attributes.hasOwnProperty('ignition') && (
               <Tooltip title={`${t('positionIgnition')}: ${formatBoolean(position.attributes.ignition, t)}`}>
                 <IconButton size="small">