diff options
| -rw-r--r-- | modern/src/App.js | 6 | ||||
| -rw-r--r-- | modern/src/EditCollectionView.js | 10 | ||||
| -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 | 93 | ||||
| -rw-r--r-- | modern/src/settings/ComputedAttributesPage.js | 73 |
6 files changed, 201 insertions, 5 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index 6b004ee..f5ebc14 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' component={ComputedAttributesPage} /> + <Route exact path='/settings/attribute/: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/EditCollectionView.js b/modern/src/EditCollectionView.js index bec1056..d3d0af1 100644 --- a/modern/src/EditCollectionView.js +++ b/modern/src/EditCollectionView.js @@ -5,6 +5,7 @@ import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import Fab from '@material-ui/core/Fab'; import AddIcon from '@material-ui/icons/Add'; +import { useSelector } from 'react-redux'; import t from './common/localization'; import RemoveDialog from './RemoveDialog'; @@ -25,6 +26,7 @@ const EditCollectionView = ({ content, editPath, endpoint }) => { const [selectedAnchorEl, setSelectedAnchorEl] = useState(null); const [removeDialogShown, setRemoveDialogShown] = useState(false); const [updateTimestamp, setUpdateTimestamp] = useState(Date.now()); + const adminEnabled = useSelector(state => state.session.user && state.session.user.administrator); const menuShow = (anchorId, itemId) => { setSelectedAnchorEl(anchorId); @@ -60,9 +62,11 @@ const EditCollectionView = ({ content, editPath, endpoint }) => { return ( <> <Content updateTimestamp={updateTimestamp} onMenuClick={menuShow} /> - <Fab size="medium" color="primary" className={classes.fab} onClick={handleAdd}> - <AddIcon /> - </Fab> + {adminEnabled && + <Fab size="medium" color="primary" className={classes.fab} onClick={handleAdd}> + <AddIcon /> + </Fab> + } <Menu open={!!selectedAnchorEl} anchorEl={selectedAnchorEl} onClose={menuHide}> <MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem> <MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem> diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 6e2981f..91b3d69 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')}> + <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 0000000..4492683 --- /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 0000000..73759fa --- /dev/null +++ b/modern/src/settings/ComputedAttributePage.js @@ -0,0 +1,93 @@ +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, + })); + + const handleChange = event => { + const newValue = event.target.value; + setKey(newValue); + const positionAttribute = positionAttributes[newValue]; + if(positionAttribute && positionAttribute.type) { + setItem({...item, attribute: newValue, type: positionAttribute.type}); + } else { + setItem({...item, attribute: newValue}); + } + } + + 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={handleChange}> + {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 0000000..1a6feab --- /dev/null +++ b/modern/src/settings/ComputedAttributesPage.js @@ -0,0 +1,73 @@ +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 { useSelector } from 'react-redux'; +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([]); + const adminEnabled = useSelector(state => state.session.user && state.session.user.administrator); + + useEffectAsync(async () => { + const response = await fetch('/api/attributes/computed'); + if (response.ok) { + setItems(await response.json()); + } + }, [updateTimestamp]); + + return ( + <TableContainer> + <Table> + <TableHead> + <TableRow> + {adminEnabled && <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}> + {adminEnabled && + <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" endpoint="attributes/computed" /> + </> + ); +} + +export default ComputedAttributesPage; |