diff options
| -rw-r--r-- | modern/src/DevicesList.js | 82 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 100 |
2 files changed, 96 insertions, 86 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index c774cdfe..d80c0608 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -19,7 +19,7 @@ import EditCollectionView from './EditCollectionView'; import { useEffectAsync } from './reactHelper'; import { formatPosition } from './common/formatter'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ list: { maxHeight: '100%', }, @@ -31,7 +31,7 @@ const useStyles = makeStyles(theme => ({ batteryText: { fontSize: '0.75rem', fontWeight: 'normal', - lineHeight: '0.875rem' + lineHeight: '0.875rem', }, green: { color: theme.palette.common.green, @@ -40,58 +40,31 @@ const useStyles = makeStyles(theme => ({ color: theme.palette.common.red, }, gray: { - color: theme.palette.common.gray - } + color: theme.palette.common.gray, + }, })); -const OnlineStatus =({ status }) => { - - const classes = useStyles(); - +const getOnlineStatus = (status) => { switch (status) { case 'online': - return <span className={classes.green}>{status}</span> + return 'green'; case 'offline': - return <span className={classes.red}>{status}</span> + return 'red'; case 'unknown': default: - return <span className={classes.gray}>{status}</span> - } -} - -const DeviceStatus = ({ deviceId }) => { - const classes = useStyles(); - let batteryClass = ''; - - const position = useSelector(state => state.positions.items[deviceId]); - if (!position) { - return null; + return 'gray'; } - const batteryLevel = position.attributes.hasOwnProperty('batteryLevel') ? position.attributes.batteryLevel : 'undefined'; +}; +const getBatteryStatus = (batteryLevel) => { if (batteryLevel >= 70) { - batteryClass = classes.green; - } else if (batteryLevel > 30) { - batteryClass = classes.gray; - } else { - batteryClass = classes.red; + return 'green'; } - return ( - <Grid container direction="row" alignItems="center" alignContent="center" spacing={1}> - {position.attributes.hasOwnProperty('ignition') && <Grid item> - <VpnKeyIcon className={`${position.attributes.ignition ? classes.green : classes.gray}`}/> - </Grid>} - {batteryLevel !== 'undefined' && <Grid item container xs alignItems="center" alignContent="center"> - <Grid item> - <span className={classes.batteryText}>{formatPosition(batteryLevel, 'batteryLevel')}</span> - </Grid> - <Grid item> - <BatteryFullIcon className={batteryClass} /> - </Grid> - </Grid>} - </Grid> - ); -} + if (batteryLevel > 30) { + return 'gray'; + } + return 'red'; +}; const DeviceRow = ({ data, index, style }) => { const classes = useStyles(); @@ -99,6 +72,7 @@ const DeviceRow = ({ data, index, style }) => { const { items, onMenuClick } = data; const item = items[index]; + const position = useSelector((state) => state.positions.items[item.id]); return ( <div style={style}> @@ -109,9 +83,27 @@ const DeviceRow = ({ data, index, style }) => { <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" /> </Avatar> </ListItemAvatar> - <ListItemText primary={item.name} secondary={<OnlineStatus status={item.status} />} /> + <ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getOnlineStatus(item.status)] }} /> <ListItemSecondaryAction> - <DeviceStatus deviceId={item.id} /> + {position && ( + <Grid container direction="row" alignItems="center" alignContent="center" spacing={1}> + {position.attributes.hasOwnProperty('ignition') && ( + <Grid item> + <VpnKeyIcon className={`${position.attributes.ignition ? classes.green : classes.gray}`} /> + </Grid> + )} + {position.attributes.hasOwnProperty('batteryLevel') && ( + <Grid item container xs alignItems="center" alignContent="center"> + <Grid item> + <span className={classes.batteryText}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel')}</span> + </Grid> + <Grid item> + <BatteryFullIcon className={classes[getBatteryStatus(position.attributes.batteryLevel)]} /> + </Grid> + </Grid> + )} + </Grid> + )} </ListItemSecondaryAction> </ListItem> {index < items.length - 1 ? <Divider /> : null} diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 9740227e..e41cc338 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; -import classnames from 'classnames'; -import { makeStyles, withWidth, Paper, Toolbar, Grid, TextField, IconButton, Button } from '@material-ui/core'; +import { + makeStyles, Paper, Toolbar, Grid, TextField, IconButton, Button, +} from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; import useMediaQuery from '@material-ui/core/useMediaQuery'; @@ -48,15 +49,15 @@ const useStyles = makeStyles((theme) => ({ zIndex: 1301, height: '100%', maxHeight: `calc(100vh - ${theme.spacing(20)}px)`, - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { top: theme.spacing(7), left: '0px', width: '100%', maxHeight: `calc(100vh - ${theme.spacing(14)}px)`, - } + }, }, paper: { - borderRadius: '0px', + borderRadius: '0px', }, toolbar: { paddingLeft: theme.spacing(2), @@ -68,25 +69,33 @@ const useStyles = makeStyles((theme) => ({ collapsed: { transform: `translateX(-${360 + 16}px)`, transition: 'transform .5s ease', - [theme.breakpoints.down("md")]: { - transform: `translateX(-100vw)`, - } + [theme.breakpoints.down('md')]: { + transform: 'translateX(-100vw)', + }, }, uncollapsed: { transform: `translateX(${theme.spacing(1.5)})`, transition: 'transform .5s ease', - [theme.breakpoints.down("md")]: { - transform: `translateX(0)`, - } + [theme.breakpoints.down('md')]: { + transform: 'translateX(0)', + }, }, deviceButton: { position: 'absolute', left: theme.spacing(1), top: theme.spacing(10.5), borderRadius: '0px', - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { + left: theme.spacing(0), top: theme.spacing(7), - } + }, + }, + deviceButtonBackground: { + backgroundColor: 'white', + color: '#777777', + '&:hover': { + backgroundColor: 'white', + }, }, bottomMenuContainer: { position: 'absolute', @@ -94,11 +103,11 @@ const useStyles = makeStyles((theme) => ({ bottom: theme.spacing(1.5), width: theme.dimensions.drawerWidthDesktop, zIndex: 1301, - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { bottom: theme.spacing(0), left: '0px', - width: '100%' - } + width: '100%', + }, }, menuButton: { display: 'flex', @@ -108,10 +117,10 @@ const useStyles = makeStyles((theme) => ({ fontSize: '0.75rem', fontWeight: 'normal', color: '#222222', - } + }, })); -const MainPage = ({ width }) => { +const MainPage = () => { const classes = useStyles(); const history = useHistory(); const theme = useTheme(); @@ -123,7 +132,7 @@ const MainPage = ({ width }) => { const handleClose = () => { setCollapsed(!collapsed); - } + }; return ( <div className={classes.root}> @@ -135,48 +144,57 @@ const MainPage = ({ width }) => { <CurrentPositionsMap /> <SelectedDeviceMap /> </Map> - {collapsed && - <Button - variant="contained" - color={matchesMD ? "secondary": "default"} + {collapsed + && ( + <Button + variant="contained" + color={matchesMD ? 'secondary' : 'primary'} + classes={{ containedPrimary: classes.deviceButtonBackground }} className={classes.deviceButton} onClick={handleClose} - startIcon={<ListIcon />}> - {t('deviceTitle')} + startIcon={<ListIcon />} + disableElevation + > + {!matchesMD ? 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={matchesMD ? 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 && <Grid item> + {matchesMD && ( + <Grid item> <IconButton onClick={handleClose}> <ArrowBackIcon /> - </IconButton> - </Grid>} + </IconButton> + </Grid> + )} <Grid item xs> <TextField fullWidth - name='deviceName' + name="deviceName" value={deviceName || ''} - autoComplete='deviceName' + autoComplete="deviceName" autoFocus - onChange={event => setDeviceName(event.target.value)} + onChange={(event) => setDeviceName(event.target.value)} placeholder="Search Devices" - variant='filled' /> + variant="filled" + /> </Grid> <Grid item> <IconButton onClick={() => history.push('/device')}> <AddIcon /> </IconButton> </Grid> - {!matchesMD && <Grid item> + {!matchesMD && ( + <Grid item> <IconButton onClick={handleClose}> <CloseIcon /> </IconButton> - </Grid>} + </Grid> + )} </Grid> </Toolbar> </Paper> @@ -196,25 +214,25 @@ const MainPage = ({ width }) => { <IconButton classes={{ label: classes.menuButton }}> <ReplayIcon /> <span className={classes.iconText}>{t('reportReplay')}</span> - </IconButton> + </IconButton> </Grid> <Grid item> <IconButton classes={{ label: classes.menuButton }}> <DescriptionIcon /> <span className={classes.iconText}>{t('reportTitle')}</span> - </IconButton> + </IconButton> </Grid> <Grid item> <IconButton classes={{ label: classes.menuButton }}> <ShuffleIcon /> <span className={classes.iconText}>Options</span> - </IconButton> + </IconButton> </Grid> <Grid item> <IconButton classes={{ label: classes.menuButton }}> <PersonIcon /> <span className={classes.iconText}>{t('settingsUser')}</span> - </IconButton> + </IconButton> </Grid> </Grid> </Toolbar> @@ -224,4 +242,4 @@ const MainPage = ({ width }) => { ); }; -export default withWidth()(MainPage); +export default MainPage; |