From 1e38ec1ceceeb60693b4fe3c302ce5477caddf40 Mon Sep 17 00:00:00 2001 From: Iván Ávalos Date: Tue, 14 Dec 2021 19:02:16 -0600 Subject: Hours only shown for backhoes and tractors, changed favicon.ico, replay slider previous and back buttons, and other improvements --- modern/public/favicon.ico | Bin 15086 -> 3322 bytes modern/src/DevicesList.js | 11 ++++++--- modern/src/MainPage.js | 4 ++-- modern/src/components/BottomMenu.js | 2 +- modern/src/map/PositionsMap.js | 17 +++++++++----- modern/src/map/StatusView.js | 8 ++++--- modern/src/reports/ReplayPage.js | 43 ++++++++++++++++++++++++------------ 7 files changed, 56 insertions(+), 29 deletions(-) diff --git a/modern/public/favicon.ico b/modern/public/favicon.ico index 6be99dd..0413df6 100644 Binary files a/modern/public/favicon.ico and b/modern/public/favicon.ico differ 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 }) => { + {/* Status icon */} - @@ -153,7 +154,11 @@ const DeviceRow = ({ data, index, style }) => { {/* Datetime */} {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( - history.push(`/position/${positionId}`)} - onShowHistory={() => history.push('/replay')} - onEditClick={(deviceId) => history.push(`/device/${deviceId}`)} - onCommandsClick={(deviceId) => history.push(`/device/${deviceId}/commands`) } + history.push(`/position/${positionId}`)} + onShowHistory={() => history.push('/replay')} + onEditClick={(deviceId) => history.push(`/device/${deviceId}`)} + onCommandsClick={(deviceId) => history.push(`/device/${deviceId}/commands`) } /> , 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 = ({ - {position.attributes.hours && ( + {device.category + && (device.category.toLowerCase() === 'backhoe' || device.category.toLowerCase() === 'tractor') + && position.attributes.hours + && ( )} 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 = () => { {!!positions.length && ( - - ({ value: index }))} - value={index} - onChange={(_, index) => setIndex(index)} - valueLabelDisplay="auto" - valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')} - ValueLabelComponent={TimeLabel} - /> - + + + setIndex(index - 1)}> + + + + {formatDate(positions[index].deviceTime)} + + setIndex(index + 1)}> + + + + ({ value: index }))} + value={index} + onChange={(_, index) => setIndex(index)} + valueLabelDisplay="auto" + valueLabelFormat={(i) => (i < positions.length ? formatPosition(positions[i], 'fixTime', t) : '')} + ValueLabelComponent={TimeLabel} + /> + )}
setExpanded(!expanded)}> -- cgit v1.2.3