diff options
| -rw-r--r-- | modern/src/App.js | 6 | ||||
| -rw-r--r-- | modern/src/MainToolbar.js | 8 | ||||
| -rw-r--r-- | modern/src/attributes/positionAttributes.js | 16 | ||||
| -rw-r--r-- | modern/src/settings/ComputedAttributePage.js | 92 | ||||
| -rw-r--r-- | modern/src/settings/ComputedAttributesPage.js | 69 |
5 files changed, 189 insertions, 2 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index 6b004ee2..d7a65118 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -24,6 +24,8 @@ import SummaryReportPage from './reports/SummaryReportPage'; import ChartReportPage from './reports/ChartReportPage'; import DriversPage from './settings/DriversPage'; import DriverPage from './settings/DriverPage'; +import ComputedAttributesPage from './settings/ComputedAttributesPage'; +import ComputedAttributePage from './settings/ComputedAttributePage'; const App = () => { const initialized = useSelector(state => !!state.session.server && !!state.session.user); @@ -47,7 +49,9 @@ const App = () => { <Route exact path='/settings/groups' component={GroupsPage} /> <Route exact path='/settings/group/:id?' component={GroupPage} /> <Route exact path='/settings/drivers' component={DriversPage} /> - <Route exact path='/settings/driver/:id?' component={DriverPage} /> + <Route exact path='/settings/driver/:id?' component={DriverPage} /> + <Route exact path='/settings/attributes/computed' component={ComputedAttributesPage} /> + <Route exact path='/settings/attribute/computed/:id?' component={ComputedAttributePage} /> <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 6e2981f2..acb10aa9 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -178,7 +178,13 @@ const MainToolbar = () => { <PersonIcon /> </ListItemIcon> <ListItemText primary={t('sharedDrivers')} /> - </ListItem> + </ListItem> + <ListItem button onClick={() => history.push('/settings/attributes/computed')}> + <ListItemIcon> + <StorageIcon /> + </ListItemIcon> + <ListItemText primary={t('sharedComputedAttributes')} /> + </ListItem> </List> {adminEnabled && ( <> diff --git a/modern/src/attributes/positionAttributes.js b/modern/src/attributes/positionAttributes.js new file mode 100644 index 00000000..44926839 --- /dev/null +++ b/modern/src/attributes/positionAttributes.js @@ -0,0 +1,16 @@ +import t from '../common/localization' + +export default { + 'raw': { + name: t('positionRaw'), + type: 'string', + }, + 'index': { + name: t('positionIndex'), + type: 'number', + }, + 'ignition': { + name: t('positionIgnition'), + type: 'boolean', + }, +}; diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js new file mode 100644 index 00000000..f985152f --- /dev/null +++ b/modern/src/settings/ComputedAttributePage.js @@ -0,0 +1,92 @@ +import React, { useState } from 'react'; +import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, MenuItem, Select, TextField } from "@material-ui/core"; +import t from '../common/localization'; +import EditItemView from '../EditItemView'; + +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import positionAttributes from '../attributes/positionAttributes'; + + +const useStyles = makeStyles(() => ({ + details: { + flexDirection: 'column', + }, +})); + +const ComputedAttributePage =() => { + + const classes = useStyles(); + const [item, setItem] = useState(); + const [key, setKey] = useState(); + + const options = Object.entries(positionAttributes).map(([key, value]) => ({ + key, + name: value.name, + type: value.type, + })); + + return ( + <EditItemView endpoint="/attributes/computed" 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.description || ''} + onChange={event => setItem({...item, description: event.target.value})} + label={t('sharedDescription')} + variant="filled" /> + <FormControl variant="filled" margin="normal" fullWidth> + <InputLabel>{t('sharedAttribute')}</InputLabel> + <Select + value={item.attribute || ''} + onChange={(e) => { + const newValue = e.target.value; + const positionAttribute = positionAttributes[newValue]; + setKey(newValue); + if(positionAttribute && positionAttribute.type) { + setItem({...item, attribute: newValue, type: positionAttribute.type}); + }else { + setItem({...item, attribute: newValue}); + } + }}> + {options.map((option) => ( + <MenuItem key={option.key} value={option.key}>{option.name}</MenuItem> + ))} + </Select> + </FormControl> + <TextField + margin="normal" + value={item.expression || ''} + onChange={event => setItem({...item, expression: event.target.value})} + label={t('sharedExpression')} + multiline + rows={4} + variant="filled" /> + <FormControl + variant="filled" + margin="normal" + fullWidth + disabled={key in positionAttributes}> + <InputLabel>{t('sharedType')}</InputLabel> + <Select + value={item.type || ''} + onChange={event => setItem({...item, type: event.target.value})}> + <MenuItem value={'string'}>{t('sharedTypeString')}</MenuItem> + <MenuItem value={'number'}>{t('sharedTypeNumber')}</MenuItem> + <MenuItem value={'boolean'}>{t('sharedTypeBoolean')}</MenuItem> + </Select> + </FormControl> + </AccordionDetails> + </Accordion> + } + </EditItemView> + ) +} + +export default ComputedAttributePage; diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js new file mode 100644 index 00000000..9ca5b69d --- /dev/null +++ b/modern/src/settings/ComputedAttributesPage.js @@ -0,0 +1,69 @@ +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'; + +const useStyles = makeStyles(theme => ({ + columnAction: { + width: theme.spacing(1), + padding: theme.spacing(0, 1), + }, +})); + +const ComputedAttributeView = ({ updateTimestamp, onMenuClick }) => { + const classes = useStyles(); + + const [items, setItems] = useState([]); + + useEffectAsync(async () => { + const response = await fetch('/api/attributes/computed'); + if (response.ok) { + setItems(await response.json()); + } + }, [updateTimestamp]); + + return ( + <TableContainer> + <Table> + <TableHead> + <TableRow> + <TableCell className={classes.columnAction} /> + <TableCell>{t('sharedDescription')}</TableCell> + <TableCell>{t('sharedAttribute')}</TableCell> + <TableCell>{t('sharedExpression')}</TableCell> + <TableCell>{t('sharedType')}</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.description}</TableCell> + <TableCell>{item.attribute}</TableCell> + <TableCell>{item.expression}</TableCell> + <TableCell>{item.type}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> + ); +} + +const ComputedAttributesPage = () => { + return ( + <> + <MainToolbar /> + <EditCollectionView content={ComputedAttributeView} editPath="/settings/attribute/computed" endpoint="attributes/computed" /> + </> + ); +} + +export default ComputedAttributesPage; |