aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--modern/public/favicon.icobin15086 -> 3322 bytes
-rw-r--r--modern/src/DevicesList.js11
-rw-r--r--modern/src/MainPage.js4
-rw-r--r--modern/src/components/BottomMenu.js2
-rw-r--r--modern/src/map/PositionsMap.js17
-rw-r--r--modern/src/map/StatusView.js8
-rw-r--r--modern/src/reports/ReplayPage.js43
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
Binary files 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 }) => {
<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)}>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 02:33:44 +0000