diff options
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/App.js | 2 | ||||
-rw-r--r-- | modern/src/EditItemView.js | 4 | ||||
-rw-r--r-- | modern/src/MainPage.js | 4 | ||||
-rw-r--r-- | modern/src/MainToolbar.js | 7 | ||||
-rw-r--r-- | modern/src/SocketController.js | 3 | ||||
-rw-r--r-- | modern/src/admin/ServerPage.js | 109 | ||||
-rw-r--r-- | modern/src/admin/UsersPage.js | 4 | ||||
-rw-r--r-- | modern/src/reports/RouteReportPage.js | 4 |
8 files changed, 127 insertions, 10 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index a4c00e28..4d786390 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -4,6 +4,7 @@ import CssBaseline from '@material-ui/core/CssBaseline'; import MainPage from './MainPage'; import LoginPage from './LoginPage'; import RouteReportPage from './reports/RouteReportPage'; +import ServerPage from './admin/ServerPage'; import UsersPage from './admin/UsersPage'; import DevicePage from './DevicePage'; import UserPage from './UserPage'; @@ -20,6 +21,7 @@ const App = () => { <Route exact path='/user/:id?' component={UserPage} /> <Route exact path='/device/:id?' component={DevicePage} /> <Route exact path='/reports/route' component={RouteReportPage} /> + <Route exact path='/admin/server' component={ServerPage} /> <Route exact path='/admin/users' component={UsersPage} /> </Switch> </> diff --git a/modern/src/EditItemView.js b/modern/src/EditItemView.js index 096b80d3..f67927aa 100644 --- a/modern/src/EditItemView.js +++ b/modern/src/EditItemView.js @@ -1,5 +1,5 @@ import React from 'react'; -import MainToobar from './MainToolbar'; +import MainToolbar from './MainToolbar'; import { useHistory, useParams } from 'react-router-dom'; import { makeStyles } from '@material-ui/core/styles'; import Container from '@material-ui/core/Container'; @@ -57,7 +57,7 @@ const EditItemView = ({ children, endpoint, setItem, getItem }) => { return ( <> - <MainToobar /> + <MainToolbar /> <Container maxWidth='xs' className={classes.container}> <form> {children} diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 3032f93e..aec78466 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -6,7 +6,7 @@ import ContainerDimensions from 'react-container-dimensions'; import LinearProgress from '@material-ui/core/LinearProgress'; import DevicesList from './DevicesList'; import MainMap from './MainMap'; -import MainToobar from './MainToolbar'; +import MainToolbar from './MainToolbar'; const useStyles = makeStyles(theme => ({ root: { @@ -43,7 +43,7 @@ const MainPage = ({ width }) => { return !initialized ? (<LinearProgress />) : ( <div className={classes.root}> - <MainToobar /> + <MainToolbar /> <div className={classes.content}> <Drawer anchor={isWidthUp('sm', width) ? 'left' : 'bottom'} diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 60731967..71e92c3b 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -20,6 +20,7 @@ import DashboardIcon from '@material-ui/icons/Dashboard'; import BarChartIcon from '@material-ui/icons/BarChart'; import SettingsIcon from '@material-ui/icons/Settings'; import PeopleIcon from '@material-ui/icons/People'; +import StorageIcon from '@material-ui/icons/Storage'; import t from './common/localization'; const useStyles = makeStyles(theme => ({ @@ -167,6 +168,12 @@ const MainToolbar = () => { {t('userAdmin')} </ListSubheader> }> + <ListItem button onClick={() => history.push('/admin/server')}> + <ListItemIcon> + <StorageIcon /> + </ListItemIcon> + <ListItemText primary={t('settingsServer')} /> + </ListItem> <ListItem button onClick={() => history.push('/admin/users')}> <ListItemIcon> <PeopleIcon /> diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index 73df6d0a..cda693a1 100644 --- a/modern/src/SocketController.js +++ b/modern/src/SocketController.js @@ -51,8 +51,7 @@ const SocketController = () => { useEffectAsync(async () => { const response = await fetch('/api/server'); if (response.ok) { - const server = await response.json(); - dispatch(sessionActions.updateServer(server)); + dispatch(sessionActions.updateServer(await response.json())); } }, []); 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> ); diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index 406cc422..a478ddbd 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import MainToobar from '../MainToolbar'; +import MainToolbar from '../MainToolbar'; import { Grid, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, makeStyles, FormControl, InputLabel, Select, MenuItem, Button, TextField } from '@material-ui/core'; import t from '../common/localization'; import { useSelector } from 'react-redux'; @@ -79,7 +79,7 @@ const RouteReportPage = () => { return ( <div className={classes.root}> - <MainToobar /> + <MainToolbar /> <div className={classes.content}> <Grid container spacing={2}> <Grid item xs={12} md={3} lg={2}> |