From a0cd63630f67f0dec0c839cdcf53e36d1d8aebb8 Mon Sep 17 00:00:00 2001
From: Iván Ávalos <avalos@disroot.org>
Date: Mon, 13 Dec 2021 20:23:18 -0600
Subject: Revamped device list and map marker popup

---
 modern/src/DevicesList.js | 94 +++++++++++++++++++++++++++++++++++++----------
 1 file changed, 74 insertions(+), 20 deletions(-)

(limited to 'modern/src/DevicesList.js')

diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 3c1b44f..fda6f60 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -13,10 +13,18 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import BatteryFullIcon from '@material-ui/icons/BatteryFull';
 import { ReactComponent as IgnitionIcon } from '../public/images/ignition.svg';
 
+import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import PersonIcon from '@material-ui/icons/Person';
+import SpeedIcon from '@material-ui/icons/Speed';
+import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
+import LockIcon from '@material-ui/icons/Lock';
+import LockOpenIcon from '@material-ui/icons/LockOpen';
+
 import { devicesActions, uiActions } from './store';
 import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
-import { formatPosition } from './common/formatter';
+import { formatPosition, formatSpeed, formatDate, formatHours } from './common/formatter';
+import { useAttributePreference } from './common/preferences';
 import { getDevices, getFilteredDevices, getPosition } from './common/selectors';
 import { useTranslation } from './LocalizationProvider';
 
@@ -32,12 +40,18 @@ const useStyles = makeStyles((theme) => ({
     width: '40px',
     height: '40px',
   },
+  statusIcon: {
+    paddingRight: '5px',
+  },
   listItem: {
     backgroundColor: 'white',
     '&:hover': {
       backgroundColor: 'white',
     },
   },
+  listItemSecondary: {
+    fontSize: '0.92rem',
+  },
   batteryText: {
     fontSize: '0.75rem',
     fontWeight: 'normal',
@@ -84,11 +98,21 @@ const DeviceRow = ({ data, index, style }) => {
   const dispatch = useDispatch();
   const t = useTranslation();
 
+  const speedUnit = useAttributePreference('speedUnit');
+
   const { items } = data;
   const item = items[index];
   const position = useSelector(getPosition(item.id));
   const showIgnition = position?.attributes.hasOwnProperty('ignition') && position.attributes.ignition;
 
+  const statusColor = () => {
+    if (position && position.speed >= 2) {
+      return 'primary';
+    } else {
+      return 'error';
+    }
+  };
+
   return (
     <div style={style}>
       <ListItem button key={item.id} className={classes.listItem} onClick={() => {
@@ -97,30 +121,60 @@ const DeviceRow = ({ data, index, style }) => {
           setTimeout (() => {
             dispatch(devicesActions.unselect());
           }, 1000);
-        }}>
+      }}>
+        {/* Avatar */}
         <ListItemAvatar>
           <img className={classes.icon} src={`images/icon/${(item.category || 'default').toLowerCase()}.png`} alt="" />
         </ListItemAvatar>
-        <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
+        {/* Status icon */}
+        
+        <ListItemText primary={
+          <>
+            <FiberManualRecordIcon fontSize="inherit" color={statusColor()} classes={{ colorPrimary: classes.green }}  />
+            {position && position.attributes.out1 == false && (
+              <LockOpenIcon fontSize="inherit" color="primary" classes={{ colorPrimary: classes.green }} />
+            )}
+            {position && position.attributes.out1 == true && (
+              <LockIcon fontSize="inherit" color="error" />
+            ) }
+            {` ${item.name}`}
+          </>} secondary={(
+          <>
+            {/* Contact */}
+            <PersonIcon fontSize="inherit" /> {item.contact}<br/>
+            {position && (
+              <>
+                {/* Speed */}
+                <SpeedIcon fontSize="inherit" /> {formatSpeed(position.speed, speedUnit, t)}<br/>
+                {/* Datetime */}
+                <CalendarTodayIcon fontSize="inherit" /> {formatDate(position.serverTime)}
+                {/* Hours */}
+                {position.attributes.hours && position.attributes.hours > 1 && ` (${formatHours(position.attributes.hours, t)})`}
+              </>
+            )}
+          </>
+        )} classes={{ secondary: classes.listItemSecondary }} />
         <ListItemSecondaryAction className={classes.indicators}>
           {position && (
-          <Grid container direction="row" alignItems="center" alignContent="center" spacing={2}>
-            {showIgnition && (
-            <Grid item>
-              <SvgIcon component={IgnitionIcon} />
+            <Grid container direction="row" alignItems="center" alignContent="center" spacing={2}>
+              {/* Ignition */}
+              {showIgnition && (
+                <Grid item>
+                  <SvgIcon component={IgnitionIcon} />
+                </Grid>
+              )}
+              {/* Battery level */}
+              {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('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>
           )}
         </ListItemSecondaryAction>
       </ListItem>
@@ -158,7 +212,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
             height={height}
             itemCount={items.length}
             itemData={{items, onMenuClick}}
-            itemSize={92}
+            itemSize={144}
             overscanCount={10}
             innerRef={listInnerEl}
           >
-- 
cgit v1.2.3