aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-27 07:20:07 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-27 07:20:07 -0700
commit8e0fa926ee03a025ad284b06280132f55be22e28 (patch)
tree9f68909944f2623beb6aed44602a8961346edff8
parent32cb5f8d90df09fd45a54c96491bc3568f14690b (diff)
downloadtrackermap-web-8e0fa926ee03a025ad284b06280132f55be22e28.tar.gz
trackermap-web-8e0fa926ee03a025ad284b06280132f55be22e28.tar.bz2
trackermap-web-8e0fa926ee03a025ad284b06280132f55be22e28.zip
Improve page scrolling
-rw-r--r--modern/src/main/StatusCard.js37
-rw-r--r--modern/src/reports/EventReportPage.js102
-rw-r--r--modern/src/reports/RouteReportPage.js74
-rw-r--r--modern/src/reports/StatisticsPage.js58
-rw-r--r--modern/src/reports/StopReportPage.js58
-rw-r--r--modern/src/reports/SummaryReportPage.js78
-rw-r--r--modern/src/reports/TripReportPage.js58
-rw-r--r--modern/src/settings/CalendarsPage.js38
-rw-r--r--modern/src/settings/CommandsPage.js46
-rw-r--r--modern/src/settings/ComputedAttributesPage.js54
-rw-r--r--modern/src/settings/DriversPage.js42
-rw-r--r--modern/src/settings/GroupsPage.js38
-rw-r--r--modern/src/settings/MaintenancesPage.js50
-rw-r--r--modern/src/settings/NotificationsPage.js50
-rw-r--r--modern/src/settings/UsersPage.js50
15 files changed, 443 insertions, 390 deletions
diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index d521749b..d991bd6a 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -13,7 +13,6 @@ import {
TableBody,
TableRow,
TableCell,
- TableContainer,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import CloseIcon from '@mui/icons-material/Close';
@@ -124,25 +123,23 @@ const StatusCard = ({ deviceId, onClose }) => {
/>
{position && (
<CardContent>
- <TableContainer>
- <Table size="small" classes={{ root: classes.table }}>
- <TableBody>
- {positionItems.filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => (
- <StatusRow
- key={key}
- name={positionAttributes[key].name}
- content={(
- <PositionValue
- position={position}
- property={position.hasOwnProperty(key) ? key : null}
- attribute={position.hasOwnProperty(key) ? null : key}
- />
- )}
- />
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ <Table size="small" classes={{ root: classes.table }}>
+ <TableBody>
+ {positionItems.filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => (
+ <StatusRow
+ key={key}
+ name={positionAttributes[key].name}
+ content={(
+ <PositionValue
+ position={position}
+ property={position.hasOwnProperty(key) ? key : null}
+ attribute={position.hasOwnProperty(key) ? null : key}
+ />
+ )}
+ />
+ ))}
+ </TableBody>
+ </Table>
</CardContent>
)}
<CardActions classes={{ root: classes.actions }} disableSpacing>
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index bc820c4c..504534a2 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,8 +1,9 @@
import React, { useState } from 'react';
import {
- FormControl, InputLabel, Select, MenuItem, TableContainer, Table, TableHead, TableRow, TableCell, TableBody,
+ FormControl, InputLabel, Select, MenuItem, Table, TableHead, TableRow, TableCell, TableBody,
} from '@mui/material';
import { useSelector } from 'react-redux';
+import { makeStyles } from '@mui/styles';
import { formatDate } from '../common/util/formatter';
import ReportFilter, { useFilterStyles } from './components/ReportFilter';
import { prefixString } from '../common/util/stringUtils';
@@ -43,8 +44,19 @@ const columnsArray = [
];
const columnsMap = new Map(columnsArray);
+const useStyles = makeStyles(() => ({
+ header: {
+ position: 'sticky',
+ left: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ },
+}));
+
const EventReportPage = () => {
- const classes = useFilterStyles();
+ const classes = useStyles();
+ const filterClasses = useFilterStyles();
const t = useTranslation();
const geofences = useSelector((state) => state.geofences.items);
@@ -96,51 +108,51 @@ const EventReportPage = () => {
return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportEvents']}>
- <ReportFilter handleSubmit={handleSubmit}>
- <div className={classes.item}>
- <FormControl fullWidth>
- <InputLabel>{t('reportEventTypes')}</InputLabel>
- <Select
- label={t('reportEventTypes')}
- value={eventTypes}
- onChange={(event, child) => {
- let values = event.target.value;
- const clicked = child.props.value;
- if (values.includes('allEvents') && values.length > 1) {
- values = [clicked];
- }
- setEventTypes(values);
- }}
- multiple
- >
- {typesArray.map(([key, string]) => (
- <MenuItem key={key} value={key}>{t(string)}</MenuItem>
+ <div className={classes.header}>
+ <ReportFilter handleSubmit={handleSubmit}>
+ <div className={filterClasses.item}>
+ <FormControl fullWidth>
+ <InputLabel>{t('reportEventTypes')}</InputLabel>
+ <Select
+ label={t('reportEventTypes')}
+ value={eventTypes}
+ onChange={(event, child) => {
+ let values = event.target.value;
+ const clicked = child.props.value;
+ if (values.includes('allEvents') && values.length > 1) {
+ values = [clicked];
+ }
+ setEventTypes(values);
+ }}
+ multiple
+ >
+ {typesArray.map(([key, string]) => (
+ <MenuItem key={key} value={key}>{t(string)}</MenuItem>
+ ))}
+ </Select>
+ </FormControl>
+ </div>
+ <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
+ </ReportFilter>
+ </div>
+ <Table>
+ <TableHead>
+ <TableRow>
+ {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ {columns.map((key) => (
+ <TableCell key={key}>
+ {formatValue(item, key)}
+ </TableCell>
))}
- </Select>
- </FormControl>
- </div>
- <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
- </ReportFilter>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- {columns.map((key) => (
- <TableCell key={key}>
- {formatValue(item, key)}
- </TableCell>
- ))}
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
</PageLayout>
);
};
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 3f89888f..c88da633 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import {
- Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
+ Table, TableBody, TableCell, TableHead, TableRow,
} from '@mui/material';
+import { makeStyles } from '@mui/styles';
import ReportFilter from './components/ReportFilter';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
@@ -12,7 +13,18 @@ import ColumnSelect from './components/ColumnSelect';
import usePositionAttributes from '../common/attributes/usePositionAttributes';
import { useCatch } from '../reactHelper';
+const useStyles = makeStyles(() => ({
+ header: {
+ position: 'sticky',
+ left: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ },
+}));
+
const RouteReportPage = () => {
+ const classes = useStyles();
const t = useTranslation();
const positionAttributes = usePositionAttributes(t);
@@ -41,37 +53,37 @@ const RouteReportPage = () => {
return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}>
- <ReportFilter handleSubmit={handleSubmit}>
- <ColumnSelect
- columns={columns}
- setColumns={setColumns}
- columnsObject={positionAttributes}
- />
- </ReportFilter>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- {columns.map((key) => (<TableCell key={key}>{positionAttributes[key].name}</TableCell>))}
+ <div className={classes.header}>
+ <ReportFilter handleSubmit={handleSubmit}>
+ <ColumnSelect
+ columns={columns}
+ setColumns={setColumns}
+ columnsObject={positionAttributes}
+ />
+ </ReportFilter>
+ </div>
+ <Table>
+ <TableHead>
+ <TableRow>
+ {columns.map((key) => (<TableCell key={key}>{positionAttributes[key].name}</TableCell>))}
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ {columns.map((key) => (
+ <TableCell key={key}>
+ <PositionValue
+ position={item}
+ property={item.hasOwnProperty(key) ? key : null}
+ attribute={item.hasOwnProperty(key) ? null : key}
+ />
+ </TableCell>
+ ))}
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- {columns.map((key) => (
- <TableCell key={key}>
- <PositionValue
- position={item}
- property={item.hasOwnProperty(key) ? key : null}
- attribute={item.hasOwnProperty(key) ? null : key}
- />
- </TableCell>
- ))}
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
</PageLayout>
);
};
diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index b9b14902..bb9926f7 100644
--- a/modern/src/reports/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import {
- TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+ Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { formatDate } from '../common/util/formatter';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
@@ -25,7 +26,18 @@ const columnsArray = [
];
const columnsMap = new Map(columnsArray);
+const useStyles = makeStyles(() => ({
+ header: {
+ position: 'sticky',
+ left: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ },
+}));
+
const StatisticsPage = () => {
+ const classes = useStyles();
const t = useTranslation();
const [columns, setColumns] = usePersistedState('statisticsColumns', ['captureTime', 'activeUsers', 'activeDevices', 'messagesStored']);
@@ -43,29 +55,29 @@ const StatisticsPage = () => {
return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}>
- <ReportFilter handleSubmit={handleSubmit} showOnly ignoreDevice>
- <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
- </ReportFilter>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+ <div className={classes.header}>
+ <ReportFilter handleSubmit={handleSubmit} showOnly ignoreDevice>
+ <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
+ </ReportFilter>
+ </div>
+ <Table>
+ <TableHead>
+ <TableRow>
+ {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ {columns.map((key) => (
+ <TableCell key={key}>
+ {key === 'captureTime' ? formatDate(item[key]) : item[key]}
+ </TableCell>
+ ))}
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- {columns.map((key) => (
- <TableCell key={key}>
- {key === 'captureTime' ? formatDate(item[key]) : item[key]}
- </TableCell>
- ))}
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
</PageLayout>
);
};
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 55091292..6cf8be07 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import {
- Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
+ Table, TableBody, TableCell, TableHead, TableRow,
} from '@mui/material';
+import { makeStyles } from '@mui/styles';
import {
formatDistance, formatHours, formatDate, formatVolume,
} from '../common/util/formatter';
@@ -25,7 +26,18 @@ const columnsArray = [
];
const columnsMap = new Map(columnsArray);
+const useStyles = makeStyles(() => ({
+ header: {
+ position: 'sticky',
+ left: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ },
+}));
+
const StopReportPage = () => {
+ const classes = useStyles();
const t = useTranslation();
const distanceUnit = useAttributePreference('distanceUnit');
@@ -73,29 +85,29 @@ const StopReportPage = () => {
return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportStops']}>
- <ReportFilter handleSubmit={handleSubmit}>
- <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
- </ReportFilter>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+ <div className={classes.header}>
+ <ReportFilter handleSubmit={handleSubmit}>
+ <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
+ </ReportFilter>
+ </div>
+ <Table>
+ <TableHead>
+ <TableRow>
+ {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.positionId}>
+ {columns.map((key) => (
+ <TableCell key={key}>
+ {formatValue(item, key)}
+ </TableCell>
+ ))}
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.positionId}>
- {columns.map((key) => (
- <TableCell key={key}>
- {formatValue(item, key)}
- </TableCell>
- ))}
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
</PageLayout>
);
};
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 49fc7bb1..e2f5e009 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import {
- FormControl, InputLabel, Select, MenuItem, TableContainer, Table, TableHead, TableRow, TableBody, TableCell,
+ FormControl, InputLabel, Select, MenuItem, Table, TableHead, TableRow, TableBody, TableCell,
} from '@mui/material';
+import { makeStyles } from '@mui/styles';
import {
formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
} from '../common/util/formatter';
@@ -26,8 +27,19 @@ const columnsArray = [
];
const columnsMap = new Map(columnsArray);
+const useStyles = makeStyles(() => ({
+ header: {
+ position: 'sticky',
+ left: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ },
+}));
+
const SummaryReportPage = () => {
- const classes = useFilterStyles();
+ const classes = useStyles();
+ const filterClasses = useFilterStyles();
const t = useTranslation();
const distanceUnit = useAttributePreference('distanceUnit');
@@ -79,38 +91,38 @@ const SummaryReportPage = () => {
return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportSummary']}>
- <ReportFilter handleSubmit={handleSubmit}>
- <div className={classes.item}>
- <FormControl fullWidth>
- <InputLabel>{t('sharedType')}</InputLabel>
- <Select label={t('sharedType')} value={daily} onChange={(e) => setDaily(e.target.value)}>
- <MenuItem value={false}>{t('reportSummary')}</MenuItem>
- <MenuItem value>{t('reportDaily')}</MenuItem>
- </Select>
- </FormControl>
- </div>
- <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
- </ReportFilter>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+ <div className={classes.header}>
+ <ReportFilter handleSubmit={handleSubmit}>
+ <div className={filterClasses.item}>
+ <FormControl fullWidth>
+ <InputLabel>{t('sharedType')}</InputLabel>
+ <Select label={t('sharedType')} value={daily} onChange={(e) => setDaily(e.target.value)}>
+ <MenuItem value={false}>{t('reportSummary')}</MenuItem>
+ <MenuItem value>{t('reportDaily')}</MenuItem>
+ </Select>
+ </FormControl>
+ </div>
+ <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
+ </ReportFilter>
+ </div>
+ <Table>
+ <TableHead>
+ <TableRow>
+ {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={(`${item.deviceId}_${Date.parse(item.startTime)}`)}>
+ {columns.map((key) => (
+ <TableCell key={key}>
+ {formatValue(item, key)}
+ </TableCell>
+ ))}
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={(`${item.deviceId}_${Date.parse(item.startTime)}`)}>
- {columns.map((key) => (
- <TableCell key={key}>
- {formatValue(item, key)}
- </TableCell>
- ))}
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
</PageLayout>
);
};
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 773e7510..4d627b67 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import {
- Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
+ Table, TableBody, TableCell, TableHead, TableRow,
} from '@mui/material';
+import { makeStyles } from '@mui/styles';
import {
formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
} from '../common/util/formatter';
@@ -30,7 +31,18 @@ const columnsArray = [
];
const columnsMap = new Map(columnsArray);
+const useStyles = makeStyles(() => ({
+ header: {
+ position: 'sticky',
+ left: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ },
+}));
+
const TripReportPage = () => {
+ const classes = useStyles();
const t = useTranslation();
const distanceUnit = useAttributePreference('distanceUnit');
@@ -82,29 +94,29 @@ const TripReportPage = () => {
return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportTrips']}>
- <ReportFilter handleSubmit={handleSubmit}>
- <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
- </ReportFilter>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+ <div className={classes.header}>
+ <ReportFilter handleSubmit={handleSubmit}>
+ <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
+ </ReportFilter>
+ </div>
+ <Table>
+ <TableHead>
+ <TableRow>
+ {columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.startPositionId}>
+ {columns.map((key) => (
+ <TableCell key={key}>
+ {formatValue(item, key)}
+ </TableCell>
+ ))}
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.startPositionId}>
- {columns.map((key) => (
- <TableCell key={key}>
- {formatValue(item, key)}
- </TableCell>
- ))}
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
</PageLayout>
);
};
diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js
index 3f4aa3d3..ea28967c 100644
--- a/modern/src/settings/CalendarsPage.js
+++ b/modern/src/settings/CalendarsPage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import {
- TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+ Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useEffectAsync } from '../reactHelper';
@@ -35,26 +35,24 @@ const CalendarsPage = () => {
return (
<PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedCalendars']}>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('sharedName')}</TableCell>
- <TableCell className={classes.columnAction} />
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedName')}</TableCell>
+ <TableCell className={classes.columnAction} />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.name}</TableCell>
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" setTimestamp={setTimestamp} />
+ </TableCell>
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{item.name}</TableCell>
- <TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/calendar" endpoint="calendars" setTimestamp={setTimestamp} />
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
<CollectionFab editPath="/settings/calendar" />
</PageLayout>
);
diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js
index 397263d0..5ff194d5 100644
--- a/modern/src/settings/CommandsPage.js
+++ b/modern/src/settings/CommandsPage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import {
- TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+ Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useEffectAsync } from '../reactHelper';
@@ -37,30 +37,28 @@ const CommandsPage = () => {
return (
<PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedSavedCommands']}>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('sharedDescription')}</TableCell>
- <TableCell>{t('sharedType')}</TableCell>
- <TableCell>{t('commandSendSms')}</TableCell>
- <TableCell className={classes.columnAction} />
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedDescription')}</TableCell>
+ <TableCell>{t('sharedType')}</TableCell>
+ <TableCell>{t('commandSendSms')}</TableCell>
+ <TableCell className={classes.columnAction} />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.description}</TableCell>
+ <TableCell>{t(prefixString('command', item.type))}</TableCell>
+ <TableCell>{formatBoolean(item.textChannel, t)}</TableCell>
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" setTimestamp={setTimestamp} />
+ </TableCell>
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{item.description}</TableCell>
- <TableCell>{t(prefixString('command', item.type))}</TableCell>
- <TableCell>{formatBoolean(item.textChannel, t)}</TableCell>
- <TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/command" endpoint="commands" setTimestamp={setTimestamp} />
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
<CollectionFab editPath="/settings/command" />
</PageLayout>
);
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index c8e07b71..5de79dc0 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import {
- TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+ Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useEffectAsync } from '../reactHelper';
@@ -37,34 +37,32 @@ const ComputedAttributesPage = () => {
return (
<PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedComputedAttributes']}>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('sharedDescription')}</TableCell>
- <TableCell>{t('sharedAttribute')}</TableCell>
- <TableCell>{t('sharedExpression')}</TableCell>
- <TableCell>{t('sharedType')}</TableCell>
- {administrator && <TableCell className={classes.columnAction} />}
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedDescription')}</TableCell>
+ <TableCell>{t('sharedAttribute')}</TableCell>
+ <TableCell>{t('sharedExpression')}</TableCell>
+ <TableCell>{t('sharedType')}</TableCell>
+ {administrator && <TableCell className={classes.columnAction} />}
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.description}</TableCell>
+ <TableCell>{item.attribute}</TableCell>
+ <TableCell>{item.expression}</TableCell>
+ <TableCell>{item.type}</TableCell>
+ {administrator && (
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/attribute" endpoint="attributes/computed" setTimestamp={setTimestamp} />
+ </TableCell>
+ )}
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{item.description}</TableCell>
- <TableCell>{item.attribute}</TableCell>
- <TableCell>{item.expression}</TableCell>
- <TableCell>{item.type}</TableCell>
- {administrator && (
- <TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/attribute" endpoint="attributes/computed" setTimestamp={setTimestamp} />
- </TableCell>
- )}
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
<CollectionFab editPath="/settings/attribute" />
</PageLayout>
);
diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js
index b66f9f9a..cdff5488 100644
--- a/modern/src/settings/DriversPage.js
+++ b/modern/src/settings/DriversPage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import {
- TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+ Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useEffectAsync } from '../reactHelper';
@@ -35,28 +35,26 @@ const DriversPage = () => {
return (
<PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedDrivers']}>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('sharedName')}</TableCell>
- <TableCell>{t('deviceIdentifier')}</TableCell>
- <TableCell className={classes.columnAction} />
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedName')}</TableCell>
+ <TableCell>{t('deviceIdentifier')}</TableCell>
+ <TableCell className={classes.columnAction} />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.name}</TableCell>
+ <TableCell>{item.uniqueId}</TableCell>
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" setTimestamp={setTimestamp} />
+ </TableCell>
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{item.name}</TableCell>
- <TableCell>{item.uniqueId}</TableCell>
- <TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/driver" endpoint="drivers" setTimestamp={setTimestamp} />
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
<CollectionFab editPath="/settings/driver" />
</PageLayout>
);
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index 1ec63b0c..16a907c2 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import {
- TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+ Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useEffectAsync } from '../reactHelper';
@@ -35,26 +35,24 @@ const GroupsPage = () => {
return (
<PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'settingsGroups']}>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('sharedName')}</TableCell>
- <TableCell className={classes.columnAction} />
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedName')}</TableCell>
+ <TableCell className={classes.columnAction} />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.name}</TableCell>
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/group" endpoint="groups" setTimestamp={setTimestamp} />
+ </TableCell>
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{item.name}</TableCell>
- <TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/group" endpoint="groups" setTimestamp={setTimestamp} />
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
<CollectionFab editPath="/settings/group" />
</PageLayout>
);
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 6f752b32..7569e7bf 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import {
- TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+ Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useEffectAsync } from '../reactHelper';
@@ -58,32 +58,30 @@ const MaintenacesPage = () => {
return (
<PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedMaintenance']}>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('sharedName')}</TableCell>
- <TableCell>{t('sharedType')}</TableCell>
- <TableCell>{t('maintenanceStart')}</TableCell>
- <TableCell>{t('maintenancePeriod')}</TableCell>
- <TableCell className={classes.columnAction} />
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedName')}</TableCell>
+ <TableCell>{t('sharedType')}</TableCell>
+ <TableCell>{t('maintenanceStart')}</TableCell>
+ <TableCell>{t('maintenancePeriod')}</TableCell>
+ <TableCell className={classes.columnAction} />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.name}</TableCell>
+ <TableCell>{item.type}</TableCell>
+ <TableCell>{convertAttribute(item.type, item.start)}</TableCell>
+ <TableCell>{convertAttribute(item.type, item.period)}</TableCell>
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" setTimestamp={setTimestamp} />
+ </TableCell>
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{item.name}</TableCell>
- <TableCell>{item.type}</TableCell>
- <TableCell>{convertAttribute(item.type, item.start)}</TableCell>
- <TableCell>{convertAttribute(item.type, item.period)}</TableCell>
- <TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" setTimestamp={setTimestamp} />
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
<CollectionFab editPath="/settings/maintenance" />
</PageLayout>
);
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index 5f8c5512..bdc9857f 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import {
- TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+ Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useEffectAsync } from '../reactHelper';
@@ -48,32 +48,30 @@ const NotificationsPage = () => {
return (
<PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedNotifications']}>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('notificationType')}</TableCell>
- <TableCell>{t('notificationAlways')}</TableCell>
- <TableCell>{t('sharedAlarms')}</TableCell>
- <TableCell>{t('notificationNotificators')}</TableCell>
- <TableCell className={classes.columnAction} />
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('notificationType')}</TableCell>
+ <TableCell>{t('notificationAlways')}</TableCell>
+ <TableCell>{t('sharedAlarms')}</TableCell>
+ <TableCell>{t('notificationNotificators')}</TableCell>
+ <TableCell className={classes.columnAction} />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{t(prefixString('event', item.type))}</TableCell>
+ <TableCell>{formatBoolean(item.always, t)}</TableCell>
+ <TableCell>{formatList('alarm', item.attributes.alarms)}</TableCell>
+ <TableCell>{formatList('notificator', item.notificators)}</TableCell>
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" setTimestamp={setTimestamp} />
+ </TableCell>
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{t(prefixString('event', item.type))}</TableCell>
- <TableCell>{formatBoolean(item.always, t)}</TableCell>
- <TableCell>{formatList('alarm', item.attributes.alarms)}</TableCell>
- <TableCell>{formatList('notificator', item.notificators)}</TableCell>
- <TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/notification" endpoint="notifications" setTimestamp={setTimestamp} />
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
<CollectionFab editPath="/settings/notification" />
</PageLayout>
);
diff --git a/modern/src/settings/UsersPage.js b/modern/src/settings/UsersPage.js
index adbbcbda..ad755936 100644
--- a/modern/src/settings/UsersPage.js
+++ b/modern/src/settings/UsersPage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import {
- TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+ Table, TableRow, TableCell, TableHead, TableBody,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { useEffectAsync } from '../reactHelper';
@@ -36,32 +36,30 @@ const UsersPage = () => {
return (
<PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'settingsUsers']}>
- <TableContainer>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>{t('sharedName')}</TableCell>
- <TableCell>{t('userEmail')}</TableCell>
- <TableCell>{t('userAdmin')}</TableCell>
- <TableCell>{t('sharedDisabled')}</TableCell>
- <TableCell className={classes.columnAction} />
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>{t('sharedName')}</TableCell>
+ <TableCell>{t('userEmail')}</TableCell>
+ <TableCell>{t('userAdmin')}</TableCell>
+ <TableCell>{t('sharedDisabled')}</TableCell>
+ <TableCell className={classes.columnAction} />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {items.map((item) => (
+ <TableRow key={item.id}>
+ <TableCell>{item.name}</TableCell>
+ <TableCell>{item.email}</TableCell>
+ <TableCell>{formatBoolean(item.administrator, t)}</TableCell>
+ <TableCell>{formatBoolean(item.disabled, t)}</TableCell>
+ <TableCell className={classes.columnAction} padding="none">
+ <CollectionActions itemId={item.id} editPath="/settings/user" endpoint="users" setTimestamp={setTimestamp} />
+ </TableCell>
</TableRow>
- </TableHead>
- <TableBody>
- {items.map((item) => (
- <TableRow key={item.id}>
- <TableCell>{item.name}</TableCell>
- <TableCell>{item.email}</TableCell>
- <TableCell>{formatBoolean(item.administrator, t)}</TableCell>
- <TableCell>{formatBoolean(item.disabled, t)}</TableCell>
- <TableCell className={classes.columnAction} padding="none">
- <CollectionActions itemId={item.id} editPath="/settings/user" endpoint="users" setTimestamp={setTimestamp} />
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ ))}
+ </TableBody>
+ </Table>
<CollectionFab editPath="/settings/user" />
</PageLayout>
);