From f15034e5fe4e5c702975b8a0f583a9917c4b1b3b Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Sat, 22 May 2021 12:49:22 +0530 Subject: Resolving Comments and Observations --- modern/src/components/LoginForm.js | 125 --------------------- modern/src/components/RegisterForm.js | 122 -------------------- modern/src/components/ResetPasswordForm.js | 12 -- modern/src/components/registration/LoginForm.js | 125 +++++++++++++++++++++ modern/src/components/registration/RegisterForm.js | 122 ++++++++++++++++++++ .../components/registration/ResetPasswordForm.js | 12 ++ modern/src/components/reports/ReportNavbar.js | 34 ++++++ modern/src/components/reports/ReportSidebar.js | 30 +++++ 8 files changed, 323 insertions(+), 259 deletions(-) delete mode 100644 modern/src/components/LoginForm.js delete mode 100644 modern/src/components/RegisterForm.js delete mode 100644 modern/src/components/ResetPasswordForm.js create mode 100644 modern/src/components/registration/LoginForm.js create mode 100644 modern/src/components/registration/RegisterForm.js create mode 100644 modern/src/components/registration/ResetPasswordForm.js create mode 100644 modern/src/components/reports/ReportNavbar.js create mode 100644 modern/src/components/reports/ReportSidebar.js (limited to 'modern/src/components') diff --git a/modern/src/components/LoginForm.js b/modern/src/components/LoginForm.js deleted file mode 100644 index d52a51d..0000000 --- a/modern/src/components/LoginForm.js +++ /dev/null @@ -1,125 +0,0 @@ -import React, { useState } from 'react'; -import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core'; -import { useTheme } from '@material-ui/core/styles'; -import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; -import { sessionActions } from './../store'; -import t from './../common/localization'; -import RegisterForm from './RegisterForm'; -import ResetPasswordForm from './ResetPasswordForm'; - -const useStyles = makeStyles(theme => ({ - logoContainer: { - textAlign: 'center', - }, - resetPassword: { - cursor: 'pointer', - } -})); - -const forms = { - register: () => RegisterForm, - resetPassword: () => ResetPasswordForm, -}; - -const LoginForm = ({ setCurrentForm }) => { - - const classes = useStyles(); - const dispatch = useDispatch(); - const history = useHistory(); - const theme = useTheme(); - const matches = useMediaQuery(theme.breakpoints.down('md')); - - const [failed, setFailed] = useState(false); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const registrationEnabled = useSelector(state => state.session.server ? state.session.server['registration'] : false); - - const handleEmailChange = (event) => { - setEmail(event.target.value); - } - - const handlePasswordChange = (event) => { - setPassword(event.target.value); - } - - const handleLogin = async (event) => { - event.preventDefault(); - const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) }); - if (response.ok) { - const user = await response.json(); - dispatch(sessionActions.updateUser(user)); - history.push('/'); - } else { - setFailed(true); - setPassword(''); - } - } - - return ( - - - {matches && Traccar} - - - - - - - - - - - - - - - - - {t('loginLanguage')} - - - - - - - setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')} - - - - ) -} - -export default LoginForm; diff --git a/modern/src/components/RegisterForm.js b/modern/src/components/RegisterForm.js deleted file mode 100644 index 6d013f7..0000000 --- a/modern/src/components/RegisterForm.js +++ /dev/null @@ -1,122 +0,0 @@ -import React, { useState } from 'react'; -import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core'; -import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import LoginForm from './LoginForm'; -import t from './../common/localization'; - -const useStyles = makeStyles(theme => ({ - register: { - fontSize: theme.spacing(3), - fontWeight: 500 - }, - link: { - fontSize: theme.spacing(3), - fontWeight: 500, - marginTop: theme.spacing(0.5), - cursor: 'pointer' - } -})); - -const forms = { - login: () => LoginForm, -}; - -const RegisterForm = ({ setCurrentForm }) => { - - const classes = useStyles(); - const [name, setName] = useState(''); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [snackbarOpen, setSnackbarOpen] = useState(false); - - const submitDisabled = () => { - return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; - } - - const handleRegister = async () => { - const response = await fetch('/api/users', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({name, email, password}) - }); - - if (response.ok) { - setSnackbarOpen(true); - } - } - - return ( - <> - setCurrentForm(forms.login)} - autoHideDuration={6000} - message={t('loginCreated')} /> - - - - - setCurrentForm(forms.login)}> - - - - - - - {t('loginRegister')} - - - - - setName(event.target.value)} - variant='filled' /> - - - setEmail(event.target.value)} - variant='filled' /> - - - setPassword(event.target.value)} - variant='filled' /> - - - - - - - ) -} - -export default RegisterForm; diff --git a/modern/src/components/ResetPasswordForm.js b/modern/src/components/ResetPasswordForm.js deleted file mode 100644 index c268f80..0000000 --- a/modern/src/components/ResetPasswordForm.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -const ResetPasswordForm = () => { - - return ( - <> -
Reset Password Comming Soon!!!
- - ) -} - -export default ResetPasswordForm; diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js new file mode 100644 index 0000000..6469b31 --- /dev/null +++ b/modern/src/components/registration/LoginForm.js @@ -0,0 +1,125 @@ +import React, { useState } from 'react'; +import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core'; +import { useTheme } from '@material-ui/core/styles'; +import { useDispatch, useSelector } from 'react-redux'; +import { useHistory } from 'react-router-dom'; +import { sessionActions } from '../../store'; +import t from '../../common/localization'; +import RegisterForm from './RegisterForm'; +import ResetPasswordForm from './ResetPasswordForm'; + +const useStyles = makeStyles(theme => ({ + logoContainer: { + textAlign: 'center', + }, + resetPassword: { + cursor: 'pointer', + } +})); + +const forms = { + register: () => RegisterForm, + resetPassword: () => ResetPasswordForm, +}; + +const LoginForm = ({ setCurrentForm }) => { + + const classes = useStyles(); + const dispatch = useDispatch(); + const history = useHistory(); + const theme = useTheme(); + const matches = useMediaQuery(theme.breakpoints.down('md')); + + const [failed, setFailed] = useState(false); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const registrationEnabled = useSelector(state => state.session.server ? state.session.server['registration'] : false); + + const handleEmailChange = (event) => { + setEmail(event.target.value); + } + + const handlePasswordChange = (event) => { + setPassword(event.target.value); + } + + const handleLogin = async (event) => { + event.preventDefault(); + const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) }); + if (response.ok) { + const user = await response.json(); + dispatch(sessionActions.updateUser(user)); + history.push('/'); + } else { + setFailed(true); + setPassword(''); + } + } + + return ( + + + {matches && Traccar} + + + + + + + + + + + + + + + + + {t('loginLanguage')} + + + + + + + setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')} + + + + ) +} + +export default LoginForm; diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js new file mode 100644 index 0000000..c2af04b --- /dev/null +++ b/modern/src/components/registration/RegisterForm.js @@ -0,0 +1,122 @@ +import React, { useState } from 'react'; +import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core'; +import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import LoginForm from './LoginForm'; +import t from './../../common/localization'; + +const useStyles = makeStyles(theme => ({ + register: { + fontSize: theme.spacing(3), + fontWeight: 500 + }, + link: { + fontSize: theme.spacing(3), + fontWeight: 500, + marginTop: theme.spacing(0.5), + cursor: 'pointer' + } +})); + +const forms = { + login: () => LoginForm, +}; + +const RegisterForm = ({ setCurrentForm }) => { + + const classes = useStyles(); + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [snackbarOpen, setSnackbarOpen] = useState(false); + + const submitDisabled = () => { + return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; + } + + const handleRegister = async () => { + const response = await fetch('/api/users', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({name, email, password}) + }); + + if (response.ok) { + setSnackbarOpen(true); + } + } + + return ( + <> + setCurrentForm(forms.login)} + autoHideDuration={6000} + message={t('loginCreated')} /> + + + + + setCurrentForm(forms.login)}> + + + + + + + {t('loginRegister')} + + + + + setName(event.target.value)} + variant='filled' /> + + + setEmail(event.target.value)} + variant='filled' /> + + + setPassword(event.target.value)} + variant='filled' /> + + + + + + + ) +} + +export default RegisterForm; diff --git a/modern/src/components/registration/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js new file mode 100644 index 0000000..c268f80 --- /dev/null +++ b/modern/src/components/registration/ResetPasswordForm.js @@ -0,0 +1,12 @@ +import React from 'react'; + +const ResetPasswordForm = () => { + + return ( + <> +
Reset Password Comming Soon!!!
+ + ) +} + +export default ResetPasswordForm; diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js new file mode 100644 index 0000000..93c01a0 --- /dev/null +++ b/modern/src/components/reports/ReportNavbar.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; + +import MenuIcon from '@material-ui/icons/Menu'; +import t from '../../common/localization'; + +const useStyles = makeStyles(theme => ({ + menuButton: { + } +})); +const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => { + + const classes = useStyles(); + + return ( + + + setOpenDrawer(!openDrawer)} + className={classes.menuButton}> + + + + {t('reportTitle')} / {reportName} + + + + ) +} + +export default ReportNavbar; diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js new file mode 100644 index 0000000..e42c36e --- /dev/null +++ b/modern/src/components/reports/ReportSidebar.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; +import { Link, useHistory, useLocation } from 'react-router-dom'; + +const ReportNavbar = ({ routes, setReportName }) => { + + const location = useLocation(); + + return ( + + {routes.map((route, index) => ( + setReportName(route.name)}> + + {route.icon} + + + + ))} + + ) +} + +export default ReportNavbar; -- cgit v1.2.3 From 81ad6a0e5c8ed4f35ccac0cd271b8923e686c060 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Mon, 24 May 2021 14:47:57 +0530 Subject: Resolved some comments on the reports --- modern/package.json | 3 +- modern/public/logo.svg | 170 +++++-------------------- modern/public/logo_back.svg | 33 ----- modern/src/MainToolbar.js | 51 +------- modern/src/components/reports/ReportNavbar.js | 16 +-- modern/src/components/reports/ReportSidebar.js | 9 +- modern/src/reports/ChartReportPage.js | 16 +-- modern/src/reports/Graph.js | 28 ++-- modern/src/reports/ReportLayoutPage.js | 14 +- 9 files changed, 67 insertions(+), 273 deletions(-) delete mode 100644 modern/public/logo_back.svg (limited to 'modern/src/components') diff --git a/modern/package.json b/modern/package.json index 8e5edc6..6902d37 100644 --- a/modern/package.json +++ b/modern/package.json @@ -18,11 +18,10 @@ "react": "^16.13.1", "react-container-dimensions": "^1.4.1", "react-dom": "^16.13.1", - "react-perfect-scrollbar": "^1.5.8", "react-redux": "^7.2.1", "react-router-dom": "^5.2.0", "react-scripts": "^3.4.3", - "recharts": "^1.8.5", + "recharts": "^2.0.9", "redux": "^4.0.5", "typeface-roboto": "0.0.75", "wellknown": "^0.5.0" diff --git a/modern/public/logo.svg b/modern/public/logo.svg index c2ed83b..008b46d 100644 --- a/modern/public/logo.svg +++ b/modern/public/logo.svg @@ -1,145 +1,33 @@ - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - GPSLABS - - - - - + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modern/public/logo_back.svg b/modern/public/logo_back.svg deleted file mode 100644 index 008b46d..0000000 --- a/modern/public/logo_back.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 702a7e5..63d8efe 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -22,12 +22,7 @@ import PeopleIcon from '@material-ui/icons/People'; import StorageIcon from '@material-ui/icons/Storage'; import PersonIcon from '@material-ui/icons/Person'; import NotificationsIcon from '@material-ui/icons/Notifications'; -import TimelineIcon from '@material-ui/icons/Timeline'; -import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; -import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'; -import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive'; -import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; -import TrendingUpIcon from '@material-ui/icons/TrendingUp'; +import DescriptionIcon from '@material-ui/icons/Description'; import FolderIcon from '@material-ui/icons/Folder'; import ReplayIcon from '@material-ui/icons/Replay'; import BuildIcon from '@material-ui/icons/Build'; @@ -104,50 +99,12 @@ const MainToolbar = () => { - - - - {t('reportTitle')} - - }> history.push('/reports/route')}> - - - - - history.push('/reports/event')}> - - + - - - history.push('/reports/trip')}> - - - - - - history.push('/reports/stop')}> - - - - - - history.push('/reports/summary')}> - - - - - - history.push('/reports/chart')}> - - - - - + +
{filter} - - - {children} - - + {children}
-- cgit v1.2.3 From 402b30df63f6dfafda32ae37aa2d4df9ef638fd2 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Tue, 25 May 2021 10:54:25 +0530 Subject: Added Report Title For Mobile and Tablet view --- modern/src/components/reports/ReportNavbar.js | 4 ++-- modern/src/reports/ReportLayoutPage.js | 20 +++++++++++++++++--- 2 files changed, 19 insertions(+), 5 deletions(-) (limited to 'modern/src/components') diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js index 674db3a..3167c75 100644 --- a/modern/src/components/reports/ReportNavbar.js +++ b/modern/src/components/reports/ReportNavbar.js @@ -3,7 +3,7 @@ import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core'; import MenuIcon from '@material-ui/icons/Menu'; import t from '../../common/localization'; -const ReportNavbar = ({ openDrawer, setOpenDrawer }) => { +const ReportNavbar = ({ openDrawer, setOpenDrawer, reportTitle }) => { return ( @@ -16,7 +16,7 @@ const ReportNavbar = ({ openDrawer, setOpenDrawer }) => { - {t('reportTitle')} + {t('reportTitle')} {reportTitle ? `/ ${reportTitle}` : ''} diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js index ed7fe54..4280400 100644 --- a/modern/src/reports/ReportLayoutPage.js +++ b/modern/src/reports/ReportLayoutPage.js @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import { useHistory } from 'react-router-dom'; +import React, { useState, useEffect } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; import { Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core'; import TimelineIcon from '@material-ui/icons/Timeline'; import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; @@ -61,12 +61,26 @@ const routes = [ const ReportLayoutPage = ({ children, filter, }) => { const classes = useStyles(); const history = useHistory(); + const location = useLocation(); const [openDrawer, setOpenDrawer] = useState(false); + const [reportTitle, setReportTitle] = useState(); + + useEffect(() => { + routes.forEach(route => { + switch (location.pathname) { + case `${route.href}`: + setReportTitle(route.name); + break; + default: + break; + } + }); + }, []); return (
- + Date: Mon, 31 May 2021 14:17:13 +0530 Subject: Finalizing reports implemetations --- modern/src/components/reports/ReportSidebar.js | 2 +- modern/src/reports/EventReportPage.js | 14 +++++++------ modern/src/reports/Graph.js | 7 +++---- modern/src/reports/ReportFilter.js | 15 +++++++++++-- modern/src/reports/RouteReportPage.js | 20 ++++++++++-------- modern/src/reports/StopReportPage.js | 19 ++++++++++------- modern/src/reports/SummaryReportPage.js | 21 +++++++++++-------- modern/src/reports/TripReportPage.js | 29 ++++++++++++++------------ modern/src/theme/dimensions.js | 4 ++++ 9 files changed, 79 insertions(+), 52 deletions(-) (limited to 'modern/src/components') diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js index a71ac4b..2d4c47c 100644 --- a/modern/src/components/reports/ReportSidebar.js +++ b/modern/src/components/reports/ReportSidebar.js @@ -7,7 +7,7 @@ const ReportNavbar = ({ routes }) => { const location = useLocation(); return ( - + {routes.map((route, index) => ( { @@ -61,6 +62,7 @@ const Filter = ({ setItems }) => { const EventReportPage = () => { + const theme = useTheme(); const geofences = useSelector(state => state.geofences.items); const [items, setItems] = useState([]); @@ -76,24 +78,24 @@ const EventReportPage = () => { headerName: t('positionFixTime'), field: 'serverTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.dateColumnWidth, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('sharedType'), field: 'type', type: 'string', - flex:1, + width: theme.dimensions.stringColumnWidth, valueFormatter: ({ value }) => t(prefixString('event', value)), }, { headerName: t('sharedGeofence'), field: 'geofenceId', - flex: 1, + width: theme.dimensions.stringColumnWidth, valueFormatter: ({ value }) => formatGeofence(value), }, { headerName: t('sharedMaintenance'), field: 'maintenanceId', type: 'number', - flex: 1 + width: theme.dimensions.stringColumnWidth, }]; return ( diff --git a/modern/src/reports/Graph.js b/modern/src/reports/Graph.js index b785e06..990eb5d 100644 --- a/modern/src/reports/Graph.js +++ b/modern/src/reports/Graph.js @@ -1,9 +1,8 @@ import React from 'react'; -import { Box, Paper } from '@material-ui/core'; +import { withWidth } from '@material-ui/core'; import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; const CustomizedAxisTick = ({ x, y, payload }) =>{ - console.log('inside customized tick ', payload.value) if(!payload.value) { return payload.value; } @@ -19,7 +18,7 @@ const CustomizedAxisTick = ({ x, y, payload }) =>{ const Graph = ({ type, items }) => { return ( - + } height={60} /> @@ -32,4 +31,4 @@ const Graph = ({ type, items }) => { ); } -export default Graph; +export default withWidth()(Graph); diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index 0e5ab69..c7835e7 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -1,11 +1,22 @@ import React, { useState } from 'react'; -import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core'; +import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography, makeStyles } from '@material-ui/core'; import { useSelector } from 'react-redux'; import moment from 'moment'; import t from '../common/localization'; +const useStyles = makeStyles(theme => ({ + gridContainer: { + margin: theme.spacing(0, -1), + '& > .MuiGrid-item': { + padding: theme.spacing(1.5, 1) + } + } +})); + const ReportFilter = ({ children, handleSubmit, showOnly }) => { + const classes = useStyles(); + const devices = useSelector(state => Object.values(state.devices.items)); const [deviceId, setDeviceId] = useState(); const [period, setPeriod] = useState('today'); @@ -57,7 +68,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => { } return ( - + {t('reportDevice')} diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js index 02d41a2..6befa47 100644 --- a/modern/src/reports/RouteReportPage.js +++ b/modern/src/reports/RouteReportPage.js @@ -1,11 +1,12 @@ import React, { useState } from 'react'; +import { Paper } from '@material-ui/core'; import { DataGrid } from '@material-ui/data-grid'; -import t from '../common/localization'; +import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference, usePreference } from '../common/preferences'; -import { Paper } from '@material-ui/core'; +import t from '../common/localization'; const Filter = ({ setItems }) => { @@ -31,41 +32,42 @@ const RouteReportPage = () => { const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const coordinateFormat = usePreference('coordinateFormat'); + const theme = useTheme(); const columns = [{ headerName: t('positionFixTime'), field: 'fixTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.dateColumnWidth, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('positionLatitude'), field: 'latitude', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatCoordinate('latitude', value, coordinateFormat), }, { headerName: t('positionLongitude'), field: 'longitude', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatCoordinate('longitude', value, coordinateFormat), }, { headerName: t('positionSpeed'), field: 'speed', type: 'number', - flex: 1, + width: theme.dimensions.stringColumnWidth, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('positionAddress'), field: 'address', type: 'string', - flex: 1, + width: theme.dimensions.stringColumnWidth, }, { headerName: t('positionIgnition'), field: 'ignition', type: 'boolean', - flex: 1, + width: theme.dimensions.booleanColumnWidth, valueGetter: ({ row }) => row.attributes.ignition, valueFormatter: ({ value }) => formatBoolean(value), }, { @@ -73,7 +75,7 @@ const RouteReportPage = () => { field: 'totalDistance', type: 'number', hide: true, - flex: 1, + width: theme.dimensions.numberColumnWidth, valueGetter: ({ row }) => row.attributes.totalDistance, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }] diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index 7873151..d572742 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -1,10 +1,11 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import t from '../common/localization'; +import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatHours, formatDate, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; +import t from '../common/localization'; const Filter = ({ setItems }) => { @@ -28,6 +29,8 @@ const Filter = ({ setItems }) => { const StopReportPage = () => { + const theme = useTheme(); + const distanceUnit = useAttributePreference('distanceUnit'); const volumeUnit = useAttributePreference('volumeUnit'); @@ -37,43 +40,43 @@ const StopReportPage = () => { headerName: t('reportStartTime'), field: 'startTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.dateColumnWidth, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('positionOdometer'), field: 'startOdometer', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('positionAddress'), field: 'address', type: 'string', hide: true, - flex: 1, + width: theme.dimensions.stringColumnWidth, }, { headerName: t('reportEndTime'), field: 'endTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.dateColumnWidth, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportDuration'), field: 'duration', type: 'string', - flex: 1, + width: theme.dimensions.stringColumnWidth, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportEngineHours'), field: 'engineHours', type: 'string', - flex: 1, + width: theme.dimensions.stringColumnWidth, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportSpentFuel'), field: 'spentFuel', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, hide: true, valueFormatter: ({ value }) => formatVolume(value, volumeUnit), }] diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index f63f50b..a2392f2 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -1,11 +1,12 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; import { Grid, FormControlLabel, Checkbox } from '@material-ui/core'; -import t from '../common/localization'; +import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatHours, formatDate, formatSpeed, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; +import t from '../common/localization'; const Filter = ({ setItems }) => { @@ -39,6 +40,8 @@ const Filter = ({ setItems }) => { const SummaryReportPage = () => { + const theme = useTheme(); + const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); const volumeUnit = useAttributePreference('volumeUnit'); @@ -49,49 +52,49 @@ const SummaryReportPage = () => { headerName: t('reportStartDate'), field: 'startTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.dateColumnWidth, valueFormatter: ({ value }) => formatDate(value, 'YYYY-MM-DD'), }, { headerName: t('sharedDistance'), field: 'distance', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportStartOdometer'), field: 'startOdometer', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportEndOdometer'), field: 'endOdometer', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportAverageSpeed'), field: 'averageSpeed', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportMaximumSpeed'), field: 'maxSpeed', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportEngineHours'), field: 'engineHours', type: 'string', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportSpentFuel'), field: 'spentFuel', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, hide: true, valueFormatter: ({ value }) => formatVolume(value, volumeUnit), }] diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index 45a7786..ab5f449 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -1,10 +1,11 @@ import React, { useState } from 'react'; import { DataGrid } from '@material-ui/data-grid'; -import t from '../common/localization'; +import { useTheme } from "@material-ui/core/styles"; import { formatDistance, formatSpeed, formatHours, formatDate, formatVolume } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; import { useAttributePreference } from '../common/preferences'; +import t from '../common/localization'; const Filter = ({ setItems }) => { @@ -27,6 +28,8 @@ const Filter = ({ setItems }) => { } const TripReportPage = () => { + + const theme = useTheme(); const distanceUnit = useAttributePreference('distanceUnit'); const speedUnit = useAttributePreference('speedUnit'); @@ -38,74 +41,74 @@ const TripReportPage = () => { headerName: t('reportStartTime'), field: 'startTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.dateColumnWidth, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportStartOdometer'), field: 'startOdometer', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportStartAddress'), field: 'startAddress', type: 'string', hide: true, - flex: 1, + width: theme.dimensions.stringColumnWidth, }, { headerName: t('reportEndTime'), field: 'endTime', type: 'dateTime', - flex: 1, + width: theme.dimensions.dateColumnWidth, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportEndOdometer'), field: 'endOdometer', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportEndAddress'), field: 'endAddress', type: 'string', hide: true, - flex: 1, + width: theme.dimensions.stringColumnWidth, }, { headerName: t('sharedDistance'), field: 'distance', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportAverageSpeed'), field: 'averageSpeed', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportMaximumSpeed'), field: 'maxSpeed', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportDuration'), field: 'duration', type: 'string', - flex: 1, + width: theme.dimensions.stringColumnWidth, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportSpentFuel'), field: 'spentFuel', type: 'number', - flex: 1, + width: theme.dimensions.numberColumnWidth, hide: true, valueFormatter: ({ value }) => formatVolume(value, volumeUnit), }, { headerName: t('sharedDriver'), field: 'driverName', type: 'string', - flex: 1, + width: theme.dimensions.stringColumnWidth, hide: true }] diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js index 16e6aad..ebb393b 100644 --- a/modern/src/theme/dimensions.js +++ b/modern/src/theme/dimensions.js @@ -5,4 +5,8 @@ export default { tabletSidebarWidth: '52px', desktopDrawerWidth: '360px', tabletDrawerWidth: '320px', + dateColumnWidth: 160, + numberColumnWidth: 130, + stringColumnWidth: 160, + booleanColumnWidth: 130 }; -- cgit v1.2.3 From b897b8027613ca1fc65d87c70a55860cfd339583 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Fri, 11 Jun 2021 11:51:26 +0530 Subject: Fixing issues in report implementations --- modern/src/SocketController.js | 1 - modern/src/components/reports/ReportNavbar.js | 6 ++-- modern/src/components/reports/ReportSidebar.js | 4 +-- modern/src/reports/EventReportPage.js | 8 +++--- modern/src/reports/ReportFilter.js | 40 +++++++++++++------------- modern/src/reports/ReportLayoutPage.js | 8 +++--- modern/src/reports/RouteReportPage.js | 14 ++++----- modern/src/reports/StopReportPage.js | 14 ++++----- modern/src/reports/SummaryReportPage.js | 16 +++++------ modern/src/reports/TripReportPage.js | 24 ++++++++-------- modern/src/theme/dimensions.js | 14 ++++----- 11 files changed, 74 insertions(+), 75 deletions(-) (limited to 'modern/src/components') diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js index 9ce4ab2..c100df1 100644 --- a/modern/src/SocketController.js +++ b/modern/src/SocketController.js @@ -38,7 +38,6 @@ const SocketController = () => { socket.onmessage = (event) => { const data = JSON.parse(event.data); - console.log('socket message received ', data); if (data.devices) { dispatch(devicesActions.update(data.devices)); } diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js index 3167c75..ac01fad 100644 --- a/modern/src/components/reports/ReportNavbar.js +++ b/modern/src/components/reports/ReportNavbar.js @@ -3,7 +3,7 @@ import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core'; import MenuIcon from '@material-ui/icons/Menu'; import t from '../../common/localization'; -const ReportNavbar = ({ openDrawer, setOpenDrawer, reportTitle }) => { +const ReportNavbar = ({ setOpenDrawer, reportTitle }) => { return ( @@ -12,11 +12,11 @@ const ReportNavbar = ({ openDrawer, setOpenDrawer, reportTitle }) => { color="inherit" aria-label="open drawer" edge="start" - onClick={() => setOpenDrawer(!openDrawer)}> + onClick={() => setOpenDrawer(true)}> - {t('reportTitle')} {reportTitle ? `/ ${reportTitle}` : ''} + {t('reportTitle')} {` / ${reportTitle}`} diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js index 2d4c47c..90e20c0 100644 --- a/modern/src/components/reports/ReportSidebar.js +++ b/modern/src/components/reports/ReportSidebar.js @@ -2,7 +2,7 @@ import React from 'react'; import { List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core'; import { Link, useLocation } from 'react-router-dom'; -const ReportNavbar = ({ routes }) => { +const ReportSidebar = ({ routes }) => { const location = useLocation(); @@ -26,4 +26,4 @@ const ReportNavbar = ({ routes }) => { ) } -export default ReportNavbar; +export default ReportSidebar; diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 8b21769..6d80860 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -78,24 +78,24 @@ const EventReportPage = () => { headerName: t('positionFixTime'), field: 'serverTime', type: 'dateTime', - width: theme.dimensions.dateColumnWidth, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('sharedType'), field: 'type', type: 'string', - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => t(prefixString('event', value)), }, { headerName: t('sharedGeofence'), field: 'geofenceId', - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatGeofence(value), }, { headerName: t('sharedMaintenance'), field: 'maintenanceId', type: 'number', - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, }]; return ( diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js index c7835e7..8055d30 100644 --- a/modern/src/reports/ReportFilter.js +++ b/modern/src/reports/ReportFilter.js @@ -121,26 +121,26 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => { {t('reportShow')} - - {!showOnly && - } - - - {!showOnly && - } - + {!showOnly && + + + } + {!showOnly && + + + } ); } diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js index 4280400..fafffc7 100644 --- a/modern/src/reports/ReportLayoutPage.js +++ b/modern/src/reports/ReportLayoutPage.js @@ -19,12 +19,12 @@ const useStyles = makeStyles(theme => ({ height: '100%', }, drawerContainer: { - width: theme.dimensions.desktopDrawerWidth, + width: theme.dimensions.drawerWidthDesktop, }, drawer: { - width: theme.dimensions.desktopDrawerWidth, + width: theme.dimensions.drawerWidthDesktop, [theme.breakpoints.down("md")]: { - width: theme.dimensions.tabletDrawerWidth, + width: theme.dimensions.drawerWidthTablet, } }, content: { @@ -80,7 +80,7 @@ const ReportLayoutPage = ({ children, filter, }) => { return (
- + { headerName: t('positionFixTime'), field: 'fixTime', type: 'dateTime', - width: theme.dimensions.dateColumnWidth, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('positionLatitude'), field: 'latitude', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatCoordinate('latitude', value, coordinateFormat), }, { headerName: t('positionLongitude'), field: 'longitude', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatCoordinate('longitude', value, coordinateFormat), }, { headerName: t('positionSpeed'), field: 'speed', type: 'number', - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('positionAddress'), field: 'address', type: 'string', - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, }, { headerName: t('positionIgnition'), field: 'ignition', type: 'boolean', - width: theme.dimensions.booleanColumnWidth, + width: theme.dimensions.columnWidthBoolean, valueGetter: ({ row }) => row.attributes.ignition, valueFormatter: ({ value }) => formatBoolean(value), }, { @@ -75,7 +75,7 @@ const RouteReportPage = () => { field: 'totalDistance', type: 'number', hide: true, - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueGetter: ({ row }) => row.attributes.totalDistance, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }] diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js index d572742..6953c46 100644 --- a/modern/src/reports/StopReportPage.js +++ b/modern/src/reports/StopReportPage.js @@ -40,43 +40,43 @@ const StopReportPage = () => { headerName: t('reportStartTime'), field: 'startTime', type: 'dateTime', - width: theme.dimensions.dateColumnWidth, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('positionOdometer'), field: 'startOdometer', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('positionAddress'), field: 'address', type: 'string', hide: true, - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, }, { headerName: t('reportEndTime'), field: 'endTime', type: 'dateTime', - width: theme.dimensions.dateColumnWidth, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportDuration'), field: 'duration', type: 'string', - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportEngineHours'), field: 'engineHours', type: 'string', - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportSpentFuel'), field: 'spentFuel', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, hide: true, valueFormatter: ({ value }) => formatVolume(value, volumeUnit), }] diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js index a2392f2..e3819a5 100644 --- a/modern/src/reports/SummaryReportPage.js +++ b/modern/src/reports/SummaryReportPage.js @@ -52,49 +52,49 @@ const SummaryReportPage = () => { headerName: t('reportStartDate'), field: 'startTime', type: 'dateTime', - width: theme.dimensions.dateColumnWidth, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value, 'YYYY-MM-DD'), }, { headerName: t('sharedDistance'), field: 'distance', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportStartOdometer'), field: 'startOdometer', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportEndOdometer'), field: 'endOdometer', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportAverageSpeed'), field: 'averageSpeed', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportMaximumSpeed'), field: 'maxSpeed', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportEngineHours'), field: 'engineHours', type: 'string', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportSpentFuel'), field: 'spentFuel', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, hide: true, valueFormatter: ({ value }) => formatVolume(value, volumeUnit), }] diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js index ab5f449..5f414f4 100644 --- a/modern/src/reports/TripReportPage.js +++ b/modern/src/reports/TripReportPage.js @@ -41,74 +41,74 @@ const TripReportPage = () => { headerName: t('reportStartTime'), field: 'startTime', type: 'dateTime', - width: theme.dimensions.dateColumnWidth, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportStartOdometer'), field: 'startOdometer', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportStartAddress'), field: 'startAddress', type: 'string', hide: true, - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, }, { headerName: t('reportEndTime'), field: 'endTime', type: 'dateTime', - width: theme.dimensions.dateColumnWidth, + width: theme.dimensions.columnWidthDate, valueFormatter: ({ value }) => formatDate(value), }, { headerName: t('reportEndOdometer'), field: 'endOdometer', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportEndAddress'), field: 'endAddress', type: 'string', hide: true, - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, }, { headerName: t('sharedDistance'), field: 'distance', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatDistance(value, distanceUnit), }, { headerName: t('reportAverageSpeed'), field: 'averageSpeed', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportMaximumSpeed'), field: 'maxSpeed', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, valueFormatter: ({ value }) => formatSpeed(value, speedUnit), }, { headerName: t('reportDuration'), field: 'duration', type: 'string', - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, valueFormatter: ({ value }) => formatHours(value), }, { headerName: t('reportSpentFuel'), field: 'spentFuel', type: 'number', - width: theme.dimensions.numberColumnWidth, + width: theme.dimensions.columnWidthNumber, hide: true, valueFormatter: ({ value }) => formatVolume(value, volumeUnit), }, { headerName: t('sharedDriver'), field: 'driverName', type: 'string', - width: theme.dimensions.stringColumnWidth, + width: theme.dimensions.columnWidthString, hide: true }] diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js index ebb393b..a2403ab 100644 --- a/modern/src/theme/dimensions.js +++ b/modern/src/theme/dimensions.js @@ -2,11 +2,11 @@ export default { inputHeight: '42px', borderRadius: '4px', sidebarWidth: '28%', - tabletSidebarWidth: '52px', - desktopDrawerWidth: '360px', - tabletDrawerWidth: '320px', - dateColumnWidth: 160, - numberColumnWidth: 130, - stringColumnWidth: 160, - booleanColumnWidth: 130 + sidebarWidthTablet: '52px', + drawerWidthDesktop: '360px', + drawerWidthTablet: '320px', + columnWidthDate: 160, + columnWidthNumber: 130, + columnWidthString: 160, + columnWidthBoolean: 130 }; -- cgit v1.2.3