diff options
| -rw-r--r-- | modern/src/App.js | 6 | ||||
| -rw-r--r-- | modern/src/MainToolbar.js | 7 | ||||
| -rw-r--r-- | modern/src/attributes/positionAttributes.js | 7 | ||||
| -rw-r--r-- | modern/src/common/converter.js | 38 | ||||
| -rw-r--r-- | modern/src/reports/ChartReportPage.js | 4 | ||||
| -rw-r--r-- | modern/src/settings/MaintenancePage.js | 155 | ||||
| -rw-r--r-- | modern/src/settings/MaintenancesPage.js | 91 |
7 files changed, 298 insertions, 10 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index f5ebc14..db2f7a9 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -26,6 +26,8 @@ import DriversPage from './settings/DriversPage'; import DriverPage from './settings/DriverPage'; import ComputedAttributesPage from './settings/ComputedAttributesPage'; import ComputedAttributePage from './settings/ComputedAttributePage'; +import MaintenancesPage from './settings/MaintenancesPage'; +import MaintenancePage from './settings/MaintenancePage'; const App = () => { const initialized = useSelector(state => !!state.session.server && !!state.session.user); @@ -51,7 +53,9 @@ const App = () => { <Route exact path='/settings/drivers' component={DriversPage} /> <Route exact path='/settings/driver/:id?' component={DriverPage} /> <Route exact path='/settings/attributes' component={ComputedAttributesPage} /> - <Route exact path='/settings/attribute/:id?' component={ComputedAttributePage} /> + <Route exact path='/settings/attribute/:id?' component={ComputedAttributePage} /> + <Route exact path='/settings/maintenances' component={MaintenancesPage} /> + <Route exact path='/settings/maintenance/:id?' component={MaintenancePage} /> <Route exact path='/admin/server' component={ServerPage} /> <Route exact path='/admin/users' component={UsersPage} /> <Route exact path='/reports/route' component={RouteReportPage} /> diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 91b3d69..ebe2efd 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -30,6 +30,7 @@ import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; import TrendingUpIcon from '@material-ui/icons/TrendingUp'; import FolderIcon from '@material-ui/icons/Folder'; import ReplayIcon from '@material-ui/icons/Replay'; +import BuildIcon from '@material-ui/icons/Build'; import t from './common/localization'; const useStyles = makeStyles(theme => ({ @@ -185,6 +186,12 @@ const MainToolbar = () => { </ListItemIcon> <ListItemText primary={t('sharedComputedAttributes')} /> </ListItem> + <ListItem button onClick={() => history.push('/settings/maintenances')}> + <ListItemIcon> + <BuildIcon /> + </ListItemIcon> + <ListItemText primary={t('sharedMaintenance')} /> + </ListItem> </List> {adminEnabled && ( <> diff --git a/modern/src/attributes/positionAttributes.js b/modern/src/attributes/positionAttributes.js index 4492683..b1efe3d 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', - }, + }, + 'odometer': { + name: t('positionOdometer'), + type: 'number', + dataType: 'distance', + }, }; diff --git a/modern/src/common/converter.js b/modern/src/common/converter.js index e48b076..9cdc623 100644 --- a/modern/src/common/converter.js +++ b/modern/src/common/converter.js @@ -1,13 +1,39 @@ -export const speedConverter = (value, unit) => { - let factor; +const speedConverter = unit => { switch (unit) { case 'kmh': - factor = 1.852; + return 1.852; case 'mph': - factor = 1.15078; + return 1.15078; case 'kn': default: - factor = 1; + return 1; } - return (value * factor).toFixed(2); }; + +const distanceConverter = unit => { + switch (unit) { + case 'mi': + return 0.000621371; + case 'nmi': + return 0.000539957; + case 'km': + default: + return 0.001; + } +} + +export const speedFromKnots = (value, unit) => { + return value * speedConverter(unit); +} + +export const speedToKnots = (value, unit) => { + return value / speedConverter(unit); +} + +export const distanceFromMeters = (value, unit) => { + return value * distanceConverter(unit); +} + +export const distanceToMeters = (value, unit) => { + return value / distanceConverter(unit); +} diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js index 543c8a9..80424cc 100644 --- a/modern/src/reports/ChartReportPage.js +++ b/modern/src/reports/ChartReportPage.js @@ -5,7 +5,7 @@ import ReportFilter from './ReportFilter'; import Graph from './Graph'; import { useAttributePreference } from '../common/preferences'; import { formatDate } from '../common/formatter'; -import { speedConverter } from '../common/converter'; +import { speedFromKnots } from '../common/converter'; import t from '../common/localization'; const Filter = ({ children, setItems }) => { @@ -19,7 +19,7 @@ const Filter = ({ children, setItems }) => { const positions = await response.json(); let formattedPositions = positions.map(position => { return { - speed: Number(speedConverter(position.speed, speedUnit)), + speed: Number(speedFromKnots(position.speed, speedUnit)), altitude: position.altitude, accuracy: position.accuracy, fixTime: formatDate(position.fixTime) diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js new file mode 100644 index 0000000..9263ee3 --- /dev/null +++ b/modern/src/settings/MaintenancePage.js @@ -0,0 +1,155 @@ +import React, { useState } from 'react'; +import t from '../common/localization'; +import { prefixString } from '../common/stringUtils'; +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'; +import { speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters } from '../common/converter'; + +const useStyles = makeStyles(() => ({ + details: { + flexDirection: 'column', + }, +})); + +const MaintenancePage = () => { + + const classes = useStyles(); + const [item, setItem] = useState(); + const [labels, setLabels] = useState({start: '', period: ''}); + + const speedUnit = useAttributePreference('speedUnit'); + const distanceUnit = useAttributePreference('distanceUnit'); + + const convertToList = (attributes) => { + let otherList = []; + for (const key in attributes) { + const value = attributes[key]; + if (value.type === 'number') { + otherList.push({key, name: value.name, type: value.type}); + } + } + return otherList; + } + + const onMaintenanceTypeChange = event => { + const newValue = event.target.value; + setItem({ ...item, type: newValue, start: 0, period: 0 }); + + const attribute = positionAttributes[newValue]; + if (attribute && attribute.dataType) { + switch (attribute.dataType) { + case 'distance': + setLabels({ ...labels, start: t(prefixString('shared', distanceUnit)), period: t(prefixString('shared', distanceUnit))}); + break; + case 'speed': + setLabels({ ...labels, start: t(prefixString('shared', speedUnit)), period: t(prefixString('shared', speedUnit))}); + break; + default: + break; + } + } + } + + const rawToValue = value => { + + const attribute = positionAttributes[item.type]; + if (attribute && attribute.dataType) { + switch (attribute.dataType) { + case 'speed': + return speedFromKnots(value, speedUnit); + case 'distance': + return distanceFromMeters(value, distanceUnit); + } + } + return value; + } + + const valueToRaw = value => { + + const attribute = positionAttributes[item.type]; + if (attribute && attribute.dataType) { + switch (attribute.dataType) { + case 'speed': + return speedToKnots(value, speedUnit); + case 'distance': + return distanceToMeters(value, distanceUnit); + } + } + return value; + } + + return ( + <EditItemView endpoint="maintenance" item={item} setItem={setItem}> + {item && + <> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedRequired')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + margin="normal" + value={item.name || ''} + onChange={event => setItem({...item, name: event.target.value})} + label={t('sharedName')} + variant="filled" /> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('sharedType')}</InputLabel> + <Select + value={item.type || ''} + onChange={onMaintenanceTypeChange}> + {convertToList(positionAttributes).map(({ key, name })=>( + <MenuItem key={key} value={key}>{name}</MenuItem> + ))} + </Select> + </FormControl> + <TextField + margin="normal" + type="number" + value={rawToValue(item.start) || ''} + onChange={event => setItem({...item, start: valueToRaw(event.target.value)})} + label={t('maintenanceStart')} + variant="filled" + InputProps={{ + endAdornment: <InputAdornment position="start">{labels.start}</InputAdornment>, + }} /> + <TextField + margin="normal" + type="number" + value={rawToValue(item.period) || ''} + onChange={event => setItem({...item, period: valueToRaw(event.target.value)})} + label={t('maintenancePeriod')} + variant="filled" + InputProps={{ + endAdornment: <InputAdornment position="start">{labels.period}</InputAdornment>, + }} /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedAttributes')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <EditAttributesView + attributes={item.attributes} + setAttributes={attributes => setItem({...item, attributes})} + definitions={{}} + /> + </AccordionDetails> + </Accordion> + </> + } + </EditItemView> + ); +} + +export default MaintenancePage; diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js new file mode 100644 index 0000000..7ba4bd2 --- /dev/null +++ b/modern/src/settings/MaintenancesPage.js @@ -0,0 +1,91 @@ +import React, { useState } from 'react'; +import MainToolbar from '../MainToolbar'; +import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton } from '@material-ui/core'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +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), + padding: theme.spacing(0, 1), + }, +})); + +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'); + if (response.ok) { + setItems(await response.json()); + } + }, [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> + <TableHead> + <TableRow> + <TableCell className={classes.columnAction} /> + <TableCell>{t('sharedName')}</TableCell> + <TableCell>{t('sharedType')}</TableCell> + <TableCell>{t('maintenanceStart')}</TableCell> + <TableCell>{t('maintenancePeriod')}</TableCell> + </TableRow> + </TableHead> + <TableBody> + {items.map(item => ( + <TableRow key={item.id}> + <TableCell className={classes.columnAction} padding="none"> + <IconButton onClick={event => onMenuClick(event.currentTarget, item.id)}> + <MoreVertIcon /> + </IconButton> + </TableCell> + <TableCell>{item.name}</TableCell> + <TableCell>{item.type}</TableCell> + <TableCell>{convertAttribute(item.type, item.start)}</TableCell> + <TableCell>{convertAttribute(item.type, item.period)}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> + ); +} + +const MaintenacesPage = () => { + return ( + <> + <MainToolbar /> + <EditCollectionView content={MaintenancesView} editPath="/settings/maintenance" endpoint="maintenance" /> + </> + ); +} + +export default MaintenacesPage; |