diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-02-06 17:35:34 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-02-06 17:35:34 +0530 |
commit | 240518c0fc8b5237557affe8e28b9b94ef46a081 (patch) | |
tree | 76d4f970d796ec348934a071fb289721fdfa5859 | |
parent | 4dbe654290c3d1f6051ea9650549f7c254d321b4 (diff) | |
download | etbsa-traccar-web-240518c0fc8b5237557affe8e28b9b94ef46a081.tar.gz etbsa-traccar-web-240518c0fc8b5237557affe8e28b9b94ef46a081.tar.bz2 etbsa-traccar-web-240518c0fc8b5237557affe8e28b9b94ef46a081.zip |
Maintenance screen working
-rw-r--r-- | modern/src/MainToolbar.js | 3 | ||||
-rw-r--r-- | modern/src/attributes/positionAttributes.js | 7 | ||||
-rw-r--r-- | modern/src/common/converter.js | 18 | ||||
-rw-r--r-- | modern/src/settings/MaintenancePage.js | 37 | ||||
-rw-r--r-- | modern/src/settings/MaintenancesPage.js | 26 |
5 files changed, 81 insertions, 10 deletions
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 8f420e1..cfbdab9 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -31,6 +31,7 @@ import TrendingUpIcon from '@material-ui/icons/TrendingUp'; import FolderIcon from '@material-ui/icons/Folder'; import ReplayIcon from '@material-ui/icons/Replay'; import PublishIcon from '@material-ui/icons/Publish'; +import BuildIcon from '@material-ui/icons/Build'; import t from './common/localization'; const useStyles = makeStyles(theme => ({ @@ -188,7 +189,7 @@ const MainToolbar = () => { </ListItem> <ListItem button onClick={() => history.push('/settings/maintenances')}> <ListItemIcon> - <PublishIcon /> + <BuildIcon /> </ListItemIcon> <ListItemText primary={t('sharedMaintenance')} /> </ListItem> diff --git a/modern/src/attributes/positionAttributes.js b/modern/src/attributes/positionAttributes.js index 4492683..c5665da 100644 --- a/modern/src/attributes/positionAttributes.js +++ b/modern/src/attributes/positionAttributes.js @@ -12,5 +12,10 @@ export default { 'ignition': { name: t('positionIgnition'), type: 'boolean', - }, + }, + 'serviceOdometer': { + name: t('positionServiceOdometer'), + type: 'number', + dataType: 'distance', + }, }; diff --git a/modern/src/common/converter.js b/modern/src/common/converter.js index e48b076..8193e77 100644 --- a/modern/src/common/converter.js +++ b/modern/src/common/converter.js @@ -3,11 +3,29 @@ export const speedConverter = (value, unit) => { switch (unit) { case 'kmh': factor = 1.852; + break; case 'mph': factor = 1.15078; + break; case 'kn': default: factor = 1; } return (value * factor).toFixed(2); }; + +export const distanceConverter = (value, unit) => { + let factor; + switch (unit) { + case 'mi': + factor = 0.000621371; + break; + case 'nmi': + factor = 0.000539957; + break; + case 'km': + default: + factor = 0.001; + } + return (value * factor).toFixed(2); +}
\ No newline at end of file diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js index 8c4cdf4..9c27459 100644 --- a/modern/src/settings/MaintenancePage.js +++ b/modern/src/settings/MaintenancePage.js @@ -1,11 +1,12 @@ import React, { useState } from 'react'; - import t from '../common/localization'; import EditItemView from '../EditItemView'; import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, TextField, FormControl, InputLabel, MenuItem, Select, } from '@material-ui/core'; +import InputAdornment from '@material-ui/core/InputAdornment'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import EditAttributesView from '../attributes/EditAttributesView'; import positionAttributes from '../attributes/positionAttributes'; +import { useAttributePreference } from '../common/preferences'; const useStyles = makeStyles(() => ({ details: { @@ -14,22 +15,40 @@ const useStyles = makeStyles(() => ({ })); const MaintenancePage = () => { + const classes = useStyles(); - const [item, setItem] = useState(); + const [labels, setLabels] = useState({start: '', period: ''}); + + const speedUnit = useAttributePreference('speedUnit'); + const distanceUnit = useAttributePreference('distanceUnit'); const options = []; Object.entries(positionAttributes).map(([key, value]) => { if (value.type === 'number') { - options.push({ key, name: value.name, type: value.type }) + options.push({key, name: value.name, type: value.type}) } }); const handleChange = event => { const newValue = event.target.value; setItem({...item, type: newValue}); - } + + const attribute = positionAttributes[newValue]; + if (attribute && attribute.dataType) { + switch (attribute.dataType) { + case 'distance': + setLabels({ ...labels, start: distanceUnit, period: distanceUnit}); + break; + case 'speed': + setLabels({ ...labels, start: speedUnit, period: speedUnit}); + break; + default: + break; + } + } + } return ( <EditItemView endpoint="maintenance" item={item} setItem={setItem}> @@ -64,14 +83,20 @@ const MaintenancePage = () => { value={item.start || ''} onChange={event => setItem({...item, start: event.target.value})} label={t('maintenanceStart')} - variant="filled" /> + variant="filled" + InputProps={{ + endAdornment: <InputAdornment position="start">{labels.start}</InputAdornment>, + }} /> <TextField margin="normal" type="number" value={item.period || ''} onChange={event => setItem({...item, period: event.target.value})} label={t('maintenancePeriod')} - variant="filled" /> + variant="filled" + InputProps={{ + endAdornment: <InputAdornment position="start">{labels.period}</InputAdornment>, + }} /> </AccordionDetails> </Accordion> <Accordion> diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js index 9cbf51a..5e74e5a 100644 --- a/modern/src/settings/MaintenancesPage.js +++ b/modern/src/settings/MaintenancesPage.js @@ -6,6 +6,10 @@ import t from '../common/localization'; import { useEffectAsync } from '../reactHelper'; import EditCollectionView from '../EditCollectionView'; +import positionAttributes from '../attributes/positionAttributes'; +import { formatDistance, formatSpeed } from '../common/formatter'; +import { useAttributePreference } from '../common/preferences'; + const useStyles = makeStyles(theme => ({ columnAction: { width: theme.spacing(1), @@ -17,6 +21,8 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => { const classes = useStyles(); const [items, setItems] = useState([]); + const speedUnit = useAttributePreference('speedUnit'); + const distanceUnit = useAttributePreference('distanceUnit'); useEffectAsync(async () => { const response = await fetch('/api/maintenance'); @@ -25,6 +31,22 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => { } }, [updateTimestamp]); + const convertAttribute = (key, value) => { + const attribute = positionAttributes[key]; + if (attribute && attribute.dataType) { + switch (attribute.dataType) { + case 'speed': + return formatSpeed(value, speedUnit); + case 'distance': + return formatDistance(value, distanceUnit); + default: + return value; + } + } + + return value; + } + return ( <TableContainer> <Table> @@ -47,8 +69,8 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => { </TableCell> <TableCell>{item.name}</TableCell> <TableCell>{item.type}</TableCell> - <TableCell>{item.start}</TableCell> - <TableCell>{item.period}</TableCell> + <TableCell>{convertAttribute(item.type, item.start)}</TableCell> + <TableCell>{convertAttribute(item.type, item.period)}</TableCell> </TableRow> ))} </TableBody> |