diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-09-22 23:01:32 -0700 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-09-22 23:01:32 -0700 |
commit | bbc54a464a8a3cf41904c5335fb1845ff8af1887 (patch) | |
tree | ebf973383fb6d0ef1fd23f196c85621b5d8cd0bc /modern/src/admin | |
parent | 94fd5f9f6e8767014a1204794f790fbeaa5e821d (diff) | |
download | trackermap-web-bbc54a464a8a3cf41904c5335fb1845ff8af1887.tar.gz trackermap-web-bbc54a464a8a3cf41904c5335fb1845ff8af1887.tar.bz2 trackermap-web-bbc54a464a8a3cf41904c5335fb1845ff8af1887.zip |
Add server settings page
Diffstat (limited to 'modern/src/admin')
-rw-r--r-- | modern/src/admin/ServerPage.js | 109 | ||||
-rw-r--r-- | modern/src/admin/UsersPage.js | 4 |
2 files changed, 111 insertions, 2 deletions
diff --git a/modern/src/admin/ServerPage.js b/modern/src/admin/ServerPage.js new file mode 100644 index 00000000..01b8db14 --- /dev/null +++ b/modern/src/admin/ServerPage.js @@ -0,0 +1,109 @@ +import React from 'react'; +import TextField from '@material-ui/core/TextField'; + +import t from '../common/localization'; +import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Button, FormControl, Container, Checkbox, FormControlLabel } from '@material-ui/core'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { useHistory } from 'react-router-dom'; +import { useDispatch, useSelector } from 'react-redux'; +import MainToolbar from '../MainToolbar'; +import { sessionActions } from '../store'; + +const useStyles = makeStyles(theme => ({ + container: { + marginTop: theme.spacing(2), + }, + buttons: { + display: 'flex', + justifyContent: 'space-evenly', + '& > *': { + flexBasis: '33%', + }, + }, + details: { + flexDirection: 'column', + }, +})); + +const ServerPage = () => { + const history = useHistory(); + const dispatch = useDispatch(); + const classes = useStyles(); + + const item = useSelector(state => state.session.server); + const setItem = (updatedItem) => dispatch(sessionActions.updateServer(updatedItem)); + + const handleSave = async () => { + const response = await fetch('/api/server', { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(item), + }); + + if (response.ok) { + history.goBack(); + } + }; + + return ( + <> + <MainToolbar /> + <Container maxWidth='xs' className={classes.container}> + <form> + {item && + <> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedPreferences')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + margin="normal" + defaultValue={item.announcement} + onChange={event => setItem({...item, announcement: event.target.value})} + label={t('serverAnnouncement')} + variant="filled" /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedPermissions')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <FormControlLabel + control={<Checkbox checked={item.registration} onChange={event => setItem({...item, registration: event.target.checked})} />} + label={t('serverRegistration')} /> + <FormControlLabel + control={<Checkbox checked={item.readonly} onChange={event => setItem({...item, readonly: event.target.checked})} />} + label={t('serverReadonly')} /> + <FormControlLabel + control={<Checkbox checked={item.deviceReadonly} onChange={event => setItem({...item, deviceReadonly: event.target.checked})} />} + label={t('userDeviceReadonly')} /> + <FormControlLabel + control={<Checkbox checked={item.limitCommands} onChange={event => setItem({...item, limitCommands: event.target.checked})} />} + label={t('userLimitCommands')} /> + </AccordionDetails> + </Accordion> + </> + } + <FormControl fullWidth margin='normal'> + <div className={classes.buttons}> + <Button type='button' color='primary' variant='outlined' onClick={() => history.goBack()}> + {t('sharedCancel')} + </Button> + <Button type='button' color='primary' variant='contained' onClick={handleSave}> + {t('sharedSave')} + </Button> + </div> + </FormControl> + </form> + </Container> + </> + ); +} + +export default ServerPage; diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js index e4b21467..d0861f1c 100644 --- a/modern/src/admin/UsersPage.js +++ b/modern/src/admin/UsersPage.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import MainToobar from '../MainToolbar'; +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'; @@ -66,7 +66,7 @@ const UsersPage = () => { return ( <div className={classes.root}> - <MainToobar /> + <MainToolbar /> <EditCollectionView content={UsersView} editPath="/user" endpoint="users" /> </div> ); |