Hours only shown for backhoes and tractors, changed favicon.ico, replay slider previous and back buttons, and other improvements

7 files changed, 56 insertions, 29 deletions

diff --git a/modern/public/favicon.ico b/modern/public/favicon.ico
index 6be99dd..0413df6 100644
--- a/modern/public/favicon.ico
+++ b/modern/public/favicon.ico
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index be24641..74aa6bc 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -48,6 +48,7 @@ const useStyles = makeStyles((theme) => ({
     '&:hover': {
       backgroundColor: 'white',
     },
+    height: '150px',
   },
   listItemSecondary: {
     fontSize: '0.92rem',
@@ -126,8 +127,8 @@ const DeviceRow = ({ data, index, style }) => {
         <ListItemAvatar>
           <img className={classes.icon} src={`images/icon/${(item.category || 'default').toLowerCase()}.png`} alt="" />
         </ListItemAvatar>
+        
         {/* Status icon */}
-
         <ListItemText primary={
           <>
             <FiberManualRecordIcon fontSize="inherit" color={statusColor()} classes={{ colorPrimary: classes.green }} />
@@ -153,7 +154,11 @@ const DeviceRow = ({ data, index, style }) => {
                   {/* Datetime */}
                   <CalendarTodayIcon fontSize="inherit" /> {formatDate(position.serverTime)}
                   {/* Hours */}
-                  {position.attributes.hours && position.attributes.hours > 1 && ` (${formatHours(position.attributes.hours, t)})`}
+                  {item.category
+                    && (item.category.toLowerCase() === 'backhoe' || item.category.toLowerCase() === 'tractor' )
+                    && position.attributes.hours
+                    && position.attributes.hours > 1
+                    && ` (${formatHours(position.attributes.hours, t)})`}
                 </>
               )}
             </>
@@ -217,7 +222,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
             height={height}
             itemCount={items.length}
             itemData={{ items, onMenuClick }}
-            itemSize={144}
+            itemSize={150}
             overscanCount={10}
             innerRef={listInnerEl}
           >
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 0d3ad54..374f132 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -36,7 +36,7 @@ const useStyles = makeStyles((theme) => ({
     left: 0,
     top: 0,
     margin: theme.spacing(1.5),
-    width: theme.dimensions.drawerWidthDesktop,
+    width: '450px',
     bottom: 56,
     zIndex: 1301,
     transition: 'transform .5s ease',
@@ -47,7 +47,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   sidebarCollapsed: {
-    transform: `translateX(-${theme.dimensions.drawerWidthDesktop})`,
+    transform: `translateX(-450px)`,
     marginLeft: 0,
     [theme.breakpoints.down('sm')]: {
       transform: 'translateX(-100vw)',
diff --git a/modern/src/components/BottomMenu.js b/modern/src/components/BottomMenu.js
index 4d5d4ea..59ad96e 100644
--- a/modern/src/components/BottomMenu.js
+++ b/modern/src/components/BottomMenu.js
@@ -23,7 +23,7 @@ const useStyles = makeStyles((theme) => ({
     [theme.breakpoints.up('md')]: {
       left: theme.spacing(1.5),
       bottom: theme.spacing(1.5),
-      width: theme.dimensions.drawerWidthDesktop,
+      width: '450px',
     },
   },
 }));
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index c5c3eee..5320158 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -35,6 +35,7 @@ const PositionsMap = ({ positions }) => {
   const createFeature = (devices, position) => {
     const device = devices[position.deviceId];
     return {
+      position: position,
       deviceId: position.deviceId,
       name: device.name,
       category: device.category || 'default',
@@ -52,16 +53,20 @@ const PositionsMap = ({ positions }) => {
       coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360;
     }
 
+    console.log(event);
+
+    const position = JSON.parse(feature.properties.position);
     const placeholder = document.createElement('div');
     ReactDOM.render(
       <Provider store={store}>
         <ThemeProvider theme={theme}>
-          <StatusView
-            deviceId={feature.properties.deviceId}
-            onShowDetails={(positionId) => history.push(`/position/${positionId}`)}
-            onShowHistory={() => history.push('/replay')}
-            onEditClick={(deviceId) => history.push(`/device/${deviceId}`)}
-            onCommandsClick={(deviceId) => history.push(`/device/${deviceId}/commands`) }
+            <StatusView
+              position={position}
+              deviceId={feature.properties.deviceId}
+              onShowDetails={(positionId) => history.push(`/position/${positionId}`)}
+              onShowHistory={() => history.push('/replay')}
+              onEditClick={(deviceId) => history.push(`/device/${deviceId}`)}
+              onCommandsClick={(deviceId) => history.push(`/device/${deviceId}/commands`) }
           />
         </ThemeProvider>
       </Provider>,
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index 6fb72c7..b451573 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const StatusView = ({
-  deviceId, onShowDetails, onShowHistory, onEditClick, onCommandsClick,
+  position, deviceId, onShowDetails, onShowHistory, onEditClick, onCommandsClick,
 }) => {
   const classes = useStyles();
   const t = useTranslation();
@@ -45,7 +45,6 @@ const StatusView = ({
   const [removeDialogShown, setRemoveDialogShown] = useState(false);
   const session = useSelector((state) => state.session);
   const device = useSelector((state) => state.devices.items[deviceId]);
-  const position = useSelector(getPosition(deviceId));
 
   const distanceUnit = useAttributePreference('distanceUnit');
   const speedUnit = useAttributePreference('speedUnit');
@@ -90,7 +89,10 @@ const StatusView = ({
               <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }}>
                 <ListItemText primary={t('positionSpeed')} secondary={formatSpeed(position.speed, speedUnit, t)} />
               </ListItem>
-              {position.attributes.hours && (
+              {device.category
+              && (device.category.toLowerCase() === 'backhoe' || device.category.toLowerCase() === 'tractor')
+              && position.attributes.hours
+              && (
                 <ListItem classes={{ container: classes.listItemContainer, root: classes.listItemRoot }}>
                   <ListItemText primary={t('positionHours')} secondary={formatHours(position.attributes.hours, t)} />
                 </ListItem>)}
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index bb32daa..5d2b803 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -1,13 +1,17 @@
 import React, { useState } from 'react';
 import {
-  Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography,
+  Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Paper, Slider, Tooltip, Typography, IconButton, Box
 } from '@material-ui/core';
+
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import SkipNextIcon from '@material-ui/icons/SkipNext';
+import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
+
 import MainToolbar from '../MainToolbar';
 import Map from '../map/Map';
 import ReplayPathMap from '../map/ReplayPathMap';
 import PositionsMap from '../map/PositionsMap';
-import { formatPosition } from '../common/formatter';
+import { formatPosition, formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
 import { useTranslation } from '../LocalizationProvider';
 
@@ -68,18 +72,29 @@ const ReplayPage = () => {
       <Container maxWidth="sm" className={classes.controlPanel}>
         {!!positions.length
           && (
-          <Paper className={classes.controlContent}>
-            <Slider
-              max={positions.length - 1}
-              step={null}
-              marks={positions.map((_, index) => ({ value: index }))}
-              value={index}
-              onChange={(_, index) => setIndex(index)}
-              valueLabelDisplay="auto"
-              valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')}
-              ValueLabelComponent={TimeLabel}
-            />
-          </Paper>
+            <Paper className={classes.controlContent}>
+                <Box maxWidth="sm" display="flex">
+                    <IconButton color="primary" disabled={index === 0} onClick={() => setIndex(index - 1)}>
+                        <SkipPreviousIcon />
+                    </IconButton>
+                    <Box flexGrow={1} textAlign="center">
+                        <Typography variant="button">{formatDate(positions[index].deviceTime)}</Typography>
+                    </Box>
+                    <IconButton color="primary" disabled={index === positions.length - 1} onClick={() => setIndex(index + 1)}>
+                        <SkipNextIcon />
+                    </IconButton>
+                </Box>
+                <Slider
+                  max={positions.length - 1}
+                  step={null}
+                  marks={positions.map((_, index) => ({ value: index }))}
+                  value={index}
+                  onChange={(_, index) => setIndex(index)}
+                  valueLabelDisplay="auto"
+                  valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')}
+                  ValueLabelComponent={TimeLabel}
+                />
+            </Paper>
           )}
         <div>
           <Accordion expanded={expanded} onChange={() => setExpanded(!expanded)}>