Used OptionsLayout for admin pages

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;