diff options
| -rw-r--r-- | modern/src/App.js | 4 | ||||
| -rw-r--r-- | modern/src/MainToolbar.js | 7 | ||||
| -rw-r--r-- | modern/src/settings/GroupPage.js | 93 | ||||
| -rw-r--r-- | modern/src/settings/GroupsPage.js | 63 |
4 files changed, 167 insertions, 0 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index 9dc963b6..1f6b55a4 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -11,6 +11,8 @@ import UserPage from './UserPage'; import SocketController from './SocketController'; import NotificationsPage from './settings/NotificationsPage'; import NotificationPage from './settings/NotificationPage'; +import GroupsPage from './settings/GroupsPage'; +import GroupPage from './settings/GroupPage'; import PositionPage from './PositionPage'; const App = () => { @@ -27,6 +29,8 @@ const App = () => { <Route exact path='/reports/route' component={RouteReportPage} /> <Route exact path='/settings/notifications' component={NotificationsPage} /> <Route exact path='/settings/notification/:id?' component={NotificationPage} /> + <Route exact path='/settings/groups' component={GroupsPage} /> + <Route exact path='/settings/group/:id?' component={GroupPage} /> <Route exact path='/admin/server' component={ServerPage} /> <Route exact path='/admin/users' component={UsersPage} /> </Switch> diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 9d4824ac..374c694c 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -28,6 +28,7 @@ import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive'; import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; import TrendingUpIcon from '@material-ui/icons/TrendingUp'; +import FolderIcon from '@material-ui/icons/Folder'; import t from './common/localization'; const useStyles = makeStyles(theme => ({ @@ -159,6 +160,12 @@ const MainToolbar = () => { </ListItemIcon> <ListItemText primary={t('sharedNotifications')} /> </ListItem> + <ListItem button onClick={() => history.push('/settings/groups')}> + <ListItemIcon> + <FolderIcon /> + </ListItemIcon> + <ListItemText primary={t('settingsGroups')} /> + </ListItem> </List> {adminEnabled && ( <> diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js new file mode 100644 index 00000000..0dc61e50 --- /dev/null +++ b/modern/src/settings/GroupPage.js @@ -0,0 +1,93 @@ +import React, { useState } from 'react'; +import TextField from '@material-ui/core/TextField'; + +import t from '../common/localization'; +import EditItemView from '../EditItemView'; +import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, Select } from '@material-ui/core'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import EditAttributesView from '../attributes/EditAttributesView'; +import { useEffectAsync } from '../reactHelper'; +import deviceAttributes from '../attributes/deviceAttributes'; + +const useStyles = makeStyles(() => ({ + details: { + flexDirection: 'column', + }, +})); + +const GroupPage = () => { + const classes = useStyles(); + + const [item, setItem] = useState(); + const [groups, setGroups] = useState(); + + useEffectAsync(async () => { + const response = await fetch('/api/groups'); + if (response.ok) { + setGroups(await response.json()); + } + }, []); + + return ( + <EditItemView endpoint="groups" item={item} setItem={setItem}> + {item && + <> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedRequired')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + margin="normal" + defaultValue={item.name} + onChange={event => setItem({...item, name: event.target.value})} + label={t('sharedName')} + variant="filled" /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedExtra')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + {groups && + <FormControl margin="normal" variant="filled"> + <InputLabel>{t('groupParent')}</InputLabel> + <Select + native + defaultValue={item.groupId} + onChange={event => setItem({...item, groupId: Number(event.target.value)})}> + <option value={0}></option> + {groups.map(group => ( + <option key={group.id} value={group.id}>{group.name}</option> + ))} + </Select> + </FormControl> + } + </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={deviceAttributes} + /> + </AccordionDetails> + </Accordion> + </> + } + </EditItemView> + ); +} + +export default GroupPage; diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js new file mode 100644 index 00000000..e2740627 --- /dev/null +++ b/modern/src/settings/GroupsPage.js @@ -0,0 +1,63 @@ +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 GroupsView = ({ updateTimestamp, onMenuClick }) => { + const classes = useStyles(); + + const [items, setItems] = useState([]); + + useEffectAsync(async () => { + const response = await fetch('/api/groups'); + if (response.ok) { + setItems(await response.json()); + } + }, [updateTimestamp]); + + return ( + <TableContainer> + <Table> + <TableHead> + <TableRow> + <TableCell className={classes.columnAction} /> + <TableCell>{t('sharedName')}</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> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> + ); +} + +const GroupsPage = () => { + return ( + <> + <MainToolbar /> + <EditCollectionView content={GroupsView} editPath="/settings/group" endpoint="groups" /> + </> + ); +} + +export default GroupsPage; |