diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2021-02-15 22:10:52 -0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-15 22:10:52 -0800 |
commit | 8560d1f0f4f6709cc964762dbe5d65f63d40190e (patch) | |
tree | bd812414d948efb3ba38c9065facd1cc131449cc /modern/src/settings | |
parent | 65af8bad51851ff7f15319d5ce14ff24697aaded (diff) | |
parent | 9d3bea9f3ecb2da4563a8cf7f444f478f88e9c38 (diff) | |
download | trackermap-web-8560d1f0f4f6709cc964762dbe5d65f63d40190e.tar.gz trackermap-web-8560d1f0f4f6709cc964762dbe5d65f63d40190e.tar.bz2 trackermap-web-8560d1f0f4f6709cc964762dbe5d65f63d40190e.zip |
Merge pull request #815 from mail2bishnoi/maintenance
Initial Maintenance Screen
Diffstat (limited to 'modern/src/settings')
-rw-r--r-- | modern/src/settings/MaintenancePage.js | 155 | ||||
-rw-r--r-- | modern/src/settings/MaintenancesPage.js | 91 |
2 files changed, 246 insertions, 0 deletions
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js new file mode 100644 index 00000000..9263ee30 --- /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 00000000..7ba4bd29 --- /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; |