diff options
| -rw-r--r-- | modern/src/main/StatusCard.js | 37 | ||||
| -rw-r--r-- | modern/src/reports/EventReportPage.js | 102 | ||||
| -rw-r--r-- | modern/src/reports/RouteReportPage.js | 74 | ||||
| -rw-r--r-- | modern/src/reports/StatisticsPage.js | 58 | ||||
| -rw-r--r-- | modern/src/reports/StopReportPage.js | 58 | ||||
| -rw-r--r-- | modern/src/reports/SummaryReportPage.js | 78 | ||||
| -rw-r--r-- | modern/src/reports/TripReportPage.js | 58 | ||||
| -rw-r--r-- | modern/src/settings/CalendarsPage.js | 38 | ||||
| -rw-r--r-- | modern/src/settings/CommandsPage.js | 46 | ||||
| -rw-r--r-- | modern/src/settings/ComputedAttributesPage.js | 54 | ||||
| -rw-r--r-- | modern/src/settings/DriversPage.js | 42 | ||||
| -rw-r--r-- | modern/src/settings/GroupsPage.js | 38 | ||||
| -rw-r--r-- | modern/src/settings/MaintenancesPage.js | 50 | ||||
| -rw-r--r-- | modern/src/settings/NotificationsPage.js | 50 | ||||
| -rw-r--r-- | modern/src/settings/UsersPage.js | 50 |
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> ); |