diff options
Diffstat (limited to 'src/main/DeviceRow.jsx')
-rw-r--r-- | src/main/DeviceRow.jsx | 54 |
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"> |