aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--modern/src/admin/ServerPage.js111
-rw-r--r--modern/src/admin/StatisticsPage.js76
-rw-r--r--modern/src/admin/UsersPage.js26
3 files changed, 150 insertions, 63 deletions
diff --git a/modern/src/admin/ServerPage.js b/modern/src/admin/ServerPage.js
index 43664e54..c33a6316 100644
--- a/modern/src/admin/ServerPage.js
+++ b/modern/src/admin/ServerPage.js
@@ -6,26 +6,26 @@ import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
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';
import EditAttributesView from '../attributes/EditAttributesView';
import deviceAttributes from '../attributes/deviceAttributes';
import userAttributes from '../attributes/userAttributes';
+import OptionsLayout from '../settings/OptionsLayout';
const useStyles = makeStyles(theme => ({
container: {
- marginTop: theme.spacing(2),
+ marginTop: theme.spacing(2)
},
buttons: {
display: 'flex',
justifyContent: 'space-evenly',
'& > *': {
- flexBasis: '33%',
- },
+ flexBasis: '33%'
+ }
},
details: {
- flexDirection: 'column',
- },
+ flexDirection: 'column'
+ }
}));
const ServerPage = () => {
@@ -34,13 +34,14 @@ const ServerPage = () => {
const classes = useStyles();
const item = useSelector(state => state.session.server);
- const setItem = (updatedItem) => dispatch(sessionActions.updateServer(updatedItem));
+ 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),
+ body: JSON.stringify(item)
});
if (response.ok) {
@@ -49,10 +50,9 @@ const ServerPage = () => {
};
return (
- <>
- <MainToolbar />
- <Container maxWidth='xs' className={classes.container}>
- {item &&
+ <OptionsLayout>
+ <Container maxWidth="xs" className={classes.container}>
+ {item && (
<>
<Accordion defaultExpanded>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
@@ -64,9 +64,12 @@ const ServerPage = () => {
<TextField
margin="normal"
value={item.announcement || ''}
- onChange={event => setItem({...item, announcement: event.target.value})}
+ onChange={event =>
+ setItem({ ...item, announcement: event.target.value })
+ }
label={t('serverAnnouncement')}
- variant="filled" />
+ variant="filled"
+ />
</AccordionDetails>
</Accordion>
<Accordion>
@@ -77,17 +80,55 @@ const ServerPage = () => {
</AccordionSummary>
<AccordionDetails className={classes.details}>
<FormControlLabel
- control={<Checkbox checked={item.registration} onChange={event => setItem({...item, registration: event.target.checked})} />}
- label={t('serverRegistration')} />
+ 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')} />
+ 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')} />
+ 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')} />
+ control={
+ <Checkbox
+ checked={item.limitCommands}
+ onChange={event =>
+ setItem({
+ ...item,
+ limitCommands: event.target.checked
+ })
+ }
+ />
+ }
+ label={t('userLimitCommands')}
+ />
</AccordionDetails>
</Accordion>
<Accordion>
@@ -99,26 +140,36 @@ const ServerPage = () => {
<AccordionDetails className={classes.details}>
<EditAttributesView
attributes={item.attributes}
- setAttributes={attributes => setItem({...item, attributes})}
- definitions={{...userAttributes, ...deviceAttributes}}
+ setAttributes={attributes => setItem({ ...item, attributes })}
+ definitions={{ ...userAttributes, ...deviceAttributes }}
/>
</AccordionDetails>
</Accordion>
</>
- }
- <FormControl fullWidth margin='normal'>
+ )}
+ <FormControl fullWidth margin="normal">
<div className={classes.buttons}>
- <Button type='button' color='primary' variant='outlined' onClick={() => history.goBack()}>
+ <Button
+ type="button"
+ color="primary"
+ variant="outlined"
+ onClick={() => history.goBack()}
+ >
{t('sharedCancel')}
</Button>
- <Button type='button' color='primary' variant='contained' onClick={handleSave}>
+ <Button
+ type="button"
+ color="primary"
+ variant="contained"
+ onClick={handleSave}
+ >
{t('sharedSave')}
</Button>
</div>
</FormControl>
</Container>
- </>
+ </OptionsLayout>
);
-}
+};
export default ServerPage;
diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/admin/StatisticsPage.js
index 0137a1f1..b1504c87 100644
--- a/modern/src/admin/StatisticsPage.js
+++ b/modern/src/admin/StatisticsPage.js
@@ -3,8 +3,8 @@ import React, { useState } from 'react';
import { FormControl, InputLabel,Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core';
import t from '../common/localization';
import { formatDate } from '../common/formatter';
-import ReportLayout from '../reports/ReportLayout';
import moment from 'moment';
+import OptionsLayout from '../settings/OptionsLayout';
const Filter = ({ setItems }) => {
const [period, setPeriod] = useState('today');
@@ -20,24 +20,36 @@ const Filter = ({ setItems }) => {
selectedTo = moment().endOf('day');
break;
case 'yesterday':
- selectedFrom = moment().subtract(1, 'day').startOf('day');
- selectedTo = moment().subtract(1, 'day').endOf('day');
+ selectedFrom = moment()
+ .subtract(1, 'day')
+ .startOf('day');
+ selectedTo = moment()
+ .subtract(1, 'day')
+ .endOf('day');
break;
case 'thisWeek':
selectedFrom = moment().startOf('week');
selectedTo = moment().endOf('week');
break;
case 'previousWeek':
- selectedFrom = moment().subtract(1, 'week').startOf('week');
- selectedTo = moment().subtract(1, 'week').endOf('week');
+ selectedFrom = moment()
+ .subtract(1, 'week')
+ .startOf('week');
+ selectedTo = moment()
+ .subtract(1, 'week')
+ .endOf('week');
break;
case 'thisMonth':
selectedFrom = moment().startOf('month');
selectedTo = moment().endOf('month');
break;
case 'previousMonth':
- selectedFrom = moment().subtract(1, 'month').startOf('month');
- selectedTo = moment().subtract(1, 'month').endOf('month');
+ selectedFrom = moment()
+ .subtract(1, 'month')
+ .startOf('month');
+ selectedTo = moment()
+ .subtract(1, 'month')
+ .endOf('month');
break;
default:
selectedFrom = from;
@@ -45,18 +57,23 @@ const Filter = ({ setItems }) => {
break;
}
- const query = new URLSearchParams({ from: selectedFrom.toISOString(), to: selectedTo.toISOString() });
- const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' });
+ const query = new URLSearchParams({
+ from: selectedFrom.toISOString(),
+ to: selectedTo.toISOString()
+ });
+ const response = await fetch(`/api/statistics?${query.toString()}`, {
+ Accept: 'application/json'
+ });
if (response.ok) {
setItems(await response.json());
}
- }
+ };
return (
<>
<FormControl variant="filled" margin="normal" fullWidth>
<InputLabel>{t('reportPeriod')}</InputLabel>
- <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
+ <Select value={period} onChange={e => setPeriod(e.target.value)}>
<MenuItem value="today">{t('reportToday')}</MenuItem>
<MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
<MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
@@ -73,8 +90,11 @@ const Filter = ({ setItems }) => {
label={t('reportFrom')}
type="datetime-local"
value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
- onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
- fullWidth />
+ onChange={e =>
+ setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))
+ }
+ fullWidth
+ />
)}
{period === 'custom' && (
<TextField
@@ -83,20 +103,30 @@ const Filter = ({ setItems }) => {
label={t('reportTo')}
type="datetime-local"
value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
- onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
- fullWidth />
+ onChange={e =>
+ setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))
+ }
+ fullWidth
+ />
)}
- <Button variant="contained" color="primary" onClick={handleClick} fullWidth>{t('reportShow')}</Button>
+ <Button
+ variant="contained"
+ color="primary"
+ onClick={handleClick}
+ fullWidth
+ >
+ {t('reportShow')}
+ </Button>
</>
- )
-}
+ );
+};
const StatisticsPage = () => {
-
const [items, setItems] = useState([]);
return (
- <ReportLayout filter={<Filter setItems={setItems} />}>
+ <OptionsLayout>
+ <Filter setItems={setItems} />
<TableContainer component={Paper}>
<Table>
<TableHead>
@@ -114,7 +144,7 @@ const StatisticsPage = () => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {items.map(item => (
<TableRow key={item.id}>
<TableCell>{formatDate(item.captureTime)}</TableCell>
<TableCell>{item.activeUsers}</TableCell>
@@ -131,8 +161,8 @@ const StatisticsPage = () => {
</TableBody>
</Table>
</TableContainer>
- </ReportLayout>
+ </OptionsLayout>
);
-}
+};
export default StatisticsPage;
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index 630bea43..aed675c9 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/admin/UsersPage.js
@@ -6,12 +6,13 @@ import t from '../common/localization';
import { useEffectAsync } from '../reactHelper';
import EditCollectionView from '../EditCollectionView';
import { formatBoolean } from '../common/formatter';
+import OptionsLayout from '../settings/OptionsLayout';
const useStyles = makeStyles(theme => ({
columnAction: {
width: theme.spacing(1),
- padding: theme.spacing(0, 1),
- },
+ padding: theme.spacing(0, 1)
+ }
}));
const UsersView = ({ updateTimestamp, onMenuClick }) => {
@@ -39,10 +40,12 @@ const UsersView = ({ updateTimestamp, onMenuClick }) => {
</TableRow>
</TableHead>
<TableBody>
- {items.map((item) => (
+ {items.map(item => (
<TableRow key={item.id}>
<TableCell className={classes.columnAction} padding="none">
- <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
+ <IconButton
+ onClick={event => onMenuClick(event.currentTarget, item.id)}
+ >
<MoreVertIcon />
</IconButton>
</TableCell>
@@ -56,15 +59,18 @@ const UsersView = ({ updateTimestamp, onMenuClick }) => {
</Table>
</TableContainer>
);
-}
+};
const UsersPage = () => {
return (
- <>
- <MainToolbar />
- <EditCollectionView content={UsersView} editPath="/user" endpoint="users" />
- </>
+ <OptionsLayout>
+ <EditCollectionView
+ content={UsersView}
+ editPath="/user"
+ endpoint="users"
+ />
+ </OptionsLayout>
);
-}
+};
export default UsersPage;
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 18:44:11 +0000