From a154c692e08f340f3a81e024fb8e9f1d3a56cf52 Mon Sep 17 00:00:00 2001 From: Desmond Kyeremeh Date: Thu, 1 Jul 2021 14:21:08 +0000 Subject: Used OptionsLayout for admin pages --- modern/src/admin/ServerPage.js | 111 +++++++++++++++++++++++++++---------- modern/src/admin/StatisticsPage.js | 76 +++++++++++++++++-------- modern/src/admin/UsersPage.js | 26 +++++---- 3 files changed, 150 insertions(+), 63 deletions(-) (limited to 'modern/src') diff --git a/modern/src/admin/ServerPage.js b/modern/src/admin/ServerPage.js index 43664e5..c33a631 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 ( - <> - - - {item && + + + {item && ( <> }> @@ -64,9 +64,12 @@ const ServerPage = () => { setItem({...item, announcement: event.target.value})} + onChange={event => + setItem({ ...item, announcement: event.target.value }) + } label={t('serverAnnouncement')} - variant="filled" /> + variant="filled" + /> @@ -77,17 +80,55 @@ const ServerPage = () => { setItem({...item, registration: event.target.checked})} />} - label={t('serverRegistration')} /> + control={ + + setItem({ ...item, registration: event.target.checked }) + } + /> + } + label={t('serverRegistration')} + /> setItem({...item, readonly: event.target.checked})} />} - label={t('serverReadonly')} /> + control={ + + setItem({ ...item, readonly: event.target.checked }) + } + /> + } + label={t('serverReadonly')} + /> setItem({...item, deviceReadonly: event.target.checked})} />} - label={t('userDeviceReadonly')} /> + control={ + + setItem({ + ...item, + deviceReadonly: event.target.checked + }) + } + /> + } + label={t('userDeviceReadonly')} + /> setItem({...item, limitCommands: event.target.checked})} />} - label={t('userLimitCommands')} /> + control={ + + setItem({ + ...item, + limitCommands: event.target.checked + }) + } + /> + } + label={t('userLimitCommands')} + /> @@ -99,26 +140,36 @@ const ServerPage = () => { setItem({...item, attributes})} - definitions={{...userAttributes, ...deviceAttributes}} + setAttributes={attributes => setItem({ ...item, attributes })} + definitions={{ ...userAttributes, ...deviceAttributes }} /> - } - + )} +
- -
- + ); -} +}; export default ServerPage; diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/admin/StatisticsPage.js index 0137a1f..b1504c8 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 ( <> {t('reportPeriod')} - setPeriod(e.target.value)}> {t('reportToday')} {t('reportYesterday')} {t('reportThisWeek')} @@ -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' && ( { 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 + /> )} - + - ) -} + ); +}; const StatisticsPage = () => { - const [items, setItems] = useState([]); return ( - }> + + @@ -114,7 +144,7 @@ const StatisticsPage = () => { - {items.map((item) => ( + {items.map(item => ( {formatDate(item.captureTime)} {item.activeUsers} @@ -131,8 +161,8 @@ const StatisticsPage = () => {
- + ); -} +}; export default StatisticsPage; diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js index 630bea4..aed675c 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 }) => { - {items.map((item) => ( + {items.map(item => ( - onMenuClick(event.currentTarget, item.id)}> + onMenuClick(event.currentTarget, item.id)} + > @@ -56,15 +59,18 @@ const UsersView = ({ updateTimestamp, onMenuClick }) => { ); -} +}; const UsersPage = () => { return ( - <> - - - + + + ); -} +}; export default UsersPage; -- cgit v1.2.3