aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAshutosh Bishnoi <mail2bishnoi@gmail.com>2021-07-19 13:22:11 +0530
committerAshutosh Bishnoi <mail2bishnoi@gmail.com>2021-07-19 13:22:11 +0530
commit4a6ed2462ed5ed2960fc8245ac3c5bae967e685b (patch)
treee266c5255389b78553b52f3c10fe75512576bbf7 /modern
parentcddbb69b40883155ded4679f6a8f7b25b09882ca (diff)
downloadetbsa-traccar-web-4a6ed2462ed5ed2960fc8245ac3c5bae967e685b.tar.gz
etbsa-traccar-web-4a6ed2462ed5ed2960fc8245ac3c5bae967e685b.tar.bz2
etbsa-traccar-web-4a6ed2462ed5ed2960fc8245ac3c5bae967e685b.zip
Minor code improvement
Diffstat (limited to 'modern')
-rw-r--r--modern/src/DevicesList.js14
-rw-r--r--modern/src/MainPage.js31
2 files changed, 27 insertions, 18 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 6f0b763..b06f7f7 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -28,6 +28,12 @@ const useStyles = makeStyles((theme) => ({
height: '25px',
filter: 'brightness(0) invert(1)',
},
+ listItem: {
+ backgroundColor: 'white',
+ '&:hover': {
+ backgroundColor: 'white',
+ },
+ },
batteryText: {
fontSize: '0.75rem',
fontWeight: 'normal',
@@ -44,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
},
}));
-const getOnlineStatus = (status) => {
+const getStatusColor = (status) => {
switch (status) {
case 'online':
return 'green';
@@ -77,13 +83,13 @@ const DeviceRow = ({ data, index, style }) => {
return (
<div style={style}>
<Fragment key={index}>
- <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
+ <ListItem button key={item.id} className={classes.listItem} onClick={() => dispatch(devicesActions.select(item))}>
<ListItemAvatar>
<Avatar>
<img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
</Avatar>
</ListItemAvatar>
- <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getOnlineStatus(item.status)] }} />
+ <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
<ListItemSecondaryAction>
{position && (
<Grid container direction="row" alignItems="center" alignContent="center" spacing={1}>
@@ -145,7 +151,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
};
const DevicesList = () => (
- <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" />
+ <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" disableAdd />
);
export default DevicesList;
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index e41cc33..d5447e5 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -65,6 +65,10 @@ const useStyles = makeStyles((theme) => ({
},
deviceList: {
height: '100%',
+ backgroundColor: 'transparent',
+ [theme.breakpoints.down('md')]: {
+ backgroundColor: 'white',
+ },
},
collapsed: {
transform: `translateX(-${360 + 16}px)`,
@@ -112,8 +116,6 @@ const useStyles = makeStyles((theme) => ({
menuButton: {
display: 'flex',
flexDirection: 'column',
- },
- iconText: {
fontSize: '0.75rem',
fontWeight: 'normal',
color: '#222222',
@@ -128,7 +130,8 @@ const MainPage = () => {
const [deviceName, setDeviceName] = useState();
const [collapsed, setCollapsed] = useState(false);
- const matchesMD = useMediaQuery(theme.breakpoints.down('md'));
+ const isTablet = useMediaQuery(theme.breakpoints.down('md'));
+ const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
const handleClose = () => {
setCollapsed(!collapsed);
@@ -148,23 +151,23 @@ const MainPage = () => {
&& (
<Button
variant="contained"
- color={matchesMD ? 'secondary' : 'primary'}
+ color={isPhone ? 'secondary' : 'primary'}
classes={{ containedPrimary: classes.deviceButtonBackground }}
className={classes.deviceButton}
onClick={handleClose}
startIcon={<ListIcon />}
disableElevation
>
- {!matchesMD ? t('deviceTitle') : ''}
+ {!isPhone ? t('deviceTitle') : ''}
</Button>
)}
<div className={`${classes.listContainer} ${collapsed ? classes.collapsed : classes.uncollapsed}`}>
- <Grid container direction="column" spacing={matchesMD ? 0 : 2} style={{ height: '100%' }}>
+ <Grid container direction="column" spacing={isTablet ? 0 : 2} style={{ height: '100%' }}>
<Grid item>
<Paper className={classes.paper}>
<Toolbar className={classes.toolbar} disableGutters>
<Grid container direction="row" alignItems="center" spacing={2}>
- {matchesMD && (
+ {isTablet && (
<Grid item>
<IconButton onClick={handleClose}>
<ArrowBackIcon />
@@ -188,7 +191,7 @@ const MainPage = () => {
<AddIcon />
</IconButton>
</Grid>
- {!matchesMD && (
+ {!isTablet && (
<Grid item>
<IconButton onClick={handleClose}>
<CloseIcon />
@@ -200,9 +203,9 @@ const MainPage = () => {
</Paper>
</Grid>
<Grid item xs>
- <Paper className={`${classes.deviceList} ${classes.paper}`}>
+ <div className={classes.deviceList}>
<DevicesList />
- </Paper>
+ </div>
</Grid>
</Grid>
</div>
@@ -213,25 +216,25 @@ const MainPage = () => {
<Grid item>
<IconButton classes={{ label: classes.menuButton }}>
<ReplayIcon />
- <span className={classes.iconText}>{t('reportReplay')}</span>
+ {t('reportReplay')}
</IconButton>
</Grid>
<Grid item>
<IconButton classes={{ label: classes.menuButton }}>
<DescriptionIcon />
- <span className={classes.iconText}>{t('reportTitle')}</span>
+ {t('reportTitle')}
</IconButton>
</Grid>
<Grid item>
<IconButton classes={{ label: classes.menuButton }}>
<ShuffleIcon />
- <span className={classes.iconText}>Options</span>
+ Options
</IconButton>
</Grid>
<Grid item>
<IconButton classes={{ label: classes.menuButton }}>
<PersonIcon />
- <span className={classes.iconText}>{t('settingsUser')}</span>
+ {t('settingsUser')}
</IconButton>
</Grid>
</Grid>