aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAshutosh Bishnoi <mail2bishnoi@gmail.com>2021-07-26 16:47:10 +0530
committerAshutosh Bishnoi <mail2bishnoi@gmail.com>2021-08-06 14:55:03 +0530
commite20e1adae62caf1a0aa0a8f25c8994fcd8cf8c8c (patch)
treee1f337404b7aef5f1716e77c1c5667ffbd44a31f /modern/src
parent59c60f8fcfabe855231e3dfecf9b363b7488024f (diff)
downloadtrackermap-web-e20e1adae62caf1a0aa0a8f25c8994fcd8cf8c8c.tar.gz
trackermap-web-e20e1adae62caf1a0aa0a8f25c8994fcd8cf8c8c.tar.bz2
trackermap-web-e20e1adae62caf1a0aa0a8f25c8994fcd8cf8c8c.zip
Rebases the pull request
Initial Draft of Device Quick Menu Initial Draft
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/common/formatter.js22
-rw-r--r--modern/src/map/PositionsMap.js11
-rw-r--r--modern/src/map/StatusView.js177
3 files changed, 157 insertions, 53 deletions
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index 3c0341b7..f0bb2e11 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -98,3 +98,25 @@ export const formatCoordinate = (key, value, unit) => {
return `${value.toFixed(6)}°`;
}
};
+
+export const getStatusColor = (status) => {
+ switch (status) {
+ case 'online':
+ return 'green';
+ case 'offline':
+ return 'red';
+ case 'unknown':
+ default:
+ return 'gray';
+ }
+};
+
+export const getBatteryStatus = (batteryLevel) => {
+ if (batteryLevel >= 70) {
+ return 'green';
+ }
+ if (batteryLevel > 30) {
+ return 'gray';
+ }
+ return 'red';
+};
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 2de01d2c..9719b45b 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -1,5 +1,6 @@
import React, { useCallback, useEffect } from 'react';
import ReactDOM from 'react-dom';
+import { ThemeProvider } from '@material-ui/core/styles';
import maplibregl from 'maplibre-gl';
import { Provider, useSelector } from 'react-redux';
@@ -7,6 +8,7 @@ import { useHistory } from 'react-router-dom';
import { map } from './Map';
import store from '../store';
import StatusView from './StatusView';
+import theme from '../theme';
const PositionsMap = ({ positions }) => {
const id = 'positions';
@@ -49,7 +51,14 @@ const PositionsMap = ({ positions }) => {
const placeholder = document.createElement('div');
ReactDOM.render(
<Provider store={store}>
- <StatusView deviceId={feature.properties.deviceId} onShowDetails={(positionId) => history.push(`/position/${positionId}`)} />
+ <ThemeProvider theme={theme}>
+ <StatusView
+ deviceId={feature.properties.deviceId}
+ onShowDetails={(positionId) => history.push(`/position/${positionId}`)}
+ onShowHistory={() => history.push('/replay')}
+ onEditClick={(deviceId) => history.push(`/device/${deviceId}`)}
+ />
+ </ThemeProvider>
</Provider>,
placeholder,
);
diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js
index c0f723d2..735fbab4 100644
--- a/modern/src/map/StatusView.js
+++ b/modern/src/map/StatusView.js
@@ -1,70 +1,143 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+ makeStyles, Paper, IconButton, Grid, Button,
+} from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
import { useSelector } from 'react-redux';
+
+import ReplayIcon from '@material-ui/icons/Replay';
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
+import EditIcon from '@material-ui/icons/Edit';
+import DeleteIcon from '@material-ui/icons/Delete';
+
+import {
+ formatPosition, getStatusColor, getBatteryStatus, formatDistance, formatSpeed,
+} from '../common/formatter';
+import { useAttributePreference } from '../common/preferences';
+import RemoveDialog from '../RemoveDialog';
import t from '../common/localization';
import { formatPosition } from '../common/formatter';
import { getPosition } from '../common/selectors';
-const StatusView = ({ deviceId, onShowDetails }) => {
+const useStyles = makeStyles((theme) => ({
+ paper: {
+ width: '300px',
+ },
+ green: {
+ color: theme.palette.common.green,
+ },
+ red: {
+ color: theme.palette.common.red,
+ },
+ gray: {
+ color: theme.palette.common.gray,
+ },
+ listItemContainer: {
+ maxWidth: '240px',
+ },
+}));
+
+const StatusView = ({
+ deviceId, onShowDetails, onShowHistory, onEditClick,
+}) => {
+ const classes = useStyles();
+
+ const [removeDialogShown, setRemoveDialogShown] = useState(false);
const device = useSelector((state) => state.devices.items[deviceId]);
const position = useSelector(getPosition(deviceId));
+ const distanceUnit = useAttributePreference('distanceUnit');
+ const speedUnit = useAttributePreference('speedUnit');
+
const handleClick = (e) => {
e.preventDefault();
onShowDetails(position.id);
};
+ const handleEditClick = (e) => {
+ e.preventDefault();
+ onEditClick(deviceId);
+ };
+
+ const handleRemove = () => {
+ setRemoveDialogShown(true);
+ };
+
+ const handleRemoveResult = () => {
+ setRemoveDialogShown(false);
+ };
+
return (
<>
- <b>
- {t('deviceStatus')}
- :
- </b>
- {' '}
- {formatPosition(device.status, 'status')}
- <br />
- <b>
- {t('sharedLocation')}
- :
- </b>
- {' '}
- {formatPosition(position, 'latitude')}
- {' '}
- {formatPosition(position, 'longitude')}
- <br />
- <b>
- {t('positionSpeed')}
- :
- </b>
- {' '}
- {formatPosition(position.speed, 'speed')}
- <br />
- <b>
- {t('positionCourse')}
- :
- </b>
- {' '}
- {formatPosition(position.course, 'course')}
- <br />
- <b>
- {t('positionDistance')}
- :
- </b>
- {' '}
- {formatPosition(position.attributes.totalDistance, 'distance')}
- <br />
- {position.attributes.batteryLevel
- && (
- <>
- <b>
- {t('positionBattery')}
- :
- </b>
- {' '}
- {formatPosition(position.attributes.batteryLevel, 'batteryLevel')}
- <br />
- </>
- )}
- <a href="/" onClick={handleClick}>{t('sharedShowDetails')}</a>
+ <Paper className={classes.paper} elevation={0} square>
+ <Grid container direction="column">
+ <Grid item>
+ <List>
+ <ListItem classes={{ container: classes.listItemContainer }}>
+ <ListItemText primary={t('deviceStatus')} />
+ <ListItemSecondaryAction>
+ <span className={classes[getStatusColor(device.status)]}>{device.status}</span>
+ </ListItemSecondaryAction>
+ </ListItem>
+ <ListItem classes={{ container: classes.listItemContainer }}>
+ <ListItemText primary={t('positionSpeed')} />
+ <ListItemSecondaryAction>
+ <span>{formatSpeed(position.speed, speedUnit)}</span>
+ </ListItemSecondaryAction>
+ </ListItem>
+ {position.attributes.batteryLevel && (
+ <ListItem classes={{ container: classes.listItemContainer }}>
+ <ListItemText primary={t('positionBattery')} />
+ <ListItemSecondaryAction>
+ <span className={classes[getBatteryStatus(position.attributes.batteryLevel)]}>{formatPosition(position.attributes.batteryLevel, 'batteryLevel')}</span>
+ </ListItemSecondaryAction>
+ </ListItem>
+ )}
+ <ListItem classes={{ container: classes.listItemContainer }}>
+ <ListItemText primary={t('positionDistance')} />
+ <ListItemSecondaryAction>
+ <span>{formatDistance(position.attributes.totalDistance, distanceUnit)}</span>
+ </ListItemSecondaryAction>
+ </ListItem>
+ <ListItem classes={{ container: classes.listItemContainer }}>
+ <ListItemText primary={t('positionCourse')} />
+ <ListItemSecondaryAction>
+ <span>{formatPosition(position.course, 'course')}</span>
+ </ListItemSecondaryAction>
+ </ListItem>
+ </List>
+ </Grid>
+ <Grid item container>
+ <Grid item>
+ <Button color="secondary" onClick={handleClick}>More Info</Button>
+ </Grid>
+ <Grid item>
+ <IconButton onClick={onShowHistory}>
+ <ReplayIcon />
+ </IconButton>
+ </Grid>
+ <Grid item>
+ <IconButton>
+ <ExitToAppIcon />
+ </IconButton>
+ </Grid>
+ <Grid item>
+ <IconButton onClick={handleEditClick}>
+ <EditIcon />
+ </IconButton>
+ </Grid>
+ <Grid item>
+ <IconButton onClick={handleRemove} className={classes.red}>
+ <DeleteIcon />
+ </IconButton>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Paper>
+ <RemoveDialog open={removeDialogShown} endpoint="devices" itemId={deviceId} onResult={handleRemoveResult} />
</>
);
};