From e20e1adae62caf1a0aa0a8f25c8994fcd8cf8c8c Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Mon, 26 Jul 2021 16:47:10 +0530 Subject: Rebases the pull request Initial Draft of Device Quick Menu Initial Draft --- modern/src/map/StatusView.js | 177 ++++++++++++++++++++++++++++++------------- 1 file changed, 125 insertions(+), 52 deletions(-) (limited to 'modern/src/map/StatusView.js') diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js index c0f723d..735fbab 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 ( <> - - {t('deviceStatus')} - : - - {' '} - {formatPosition(device.status, 'status')} -
- - {t('sharedLocation')} - : - - {' '} - {formatPosition(position, 'latitude')} - {' '} - {formatPosition(position, 'longitude')} -
- - {t('positionSpeed')} - : - - {' '} - {formatPosition(position.speed, 'speed')} -
- - {t('positionCourse')} - : - - {' '} - {formatPosition(position.course, 'course')} -
- - {t('positionDistance')} - : - - {' '} - {formatPosition(position.attributes.totalDistance, 'distance')} -
- {position.attributes.batteryLevel - && ( - <> - - {t('positionBattery')} - : - - {' '} - {formatPosition(position.attributes.batteryLevel, 'batteryLevel')} -
- - )} - {t('sharedShowDetails')} + + + + + + + + {device.status} + + + + + + {formatSpeed(position.speed, speedUnit)} + + + {position.attributes.batteryLevel && ( + + + + {formatPosition(position.attributes.batteryLevel, 'batteryLevel')} + + + )} + + + + {formatDistance(position.attributes.totalDistance, distanceUnit)} + + + + + + {formatPosition(position.course, 'course')} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; -- cgit v1.2.3 From 8deaba8e1f7511348d734f173b238271fd7b84be Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Fri, 6 Aug 2021 14:58:15 +0530 Subject: Minor update to rebase PR --- modern/src/map/StatusView.js | 1 - 1 file changed, 1 deletion(-) (limited to 'modern/src/map/StatusView.js') diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js index 735fbab..e37699a 100644 --- a/modern/src/map/StatusView.js +++ b/modern/src/map/StatusView.js @@ -19,7 +19,6 @@ import { 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 useStyles = makeStyles((theme) => ({ -- cgit v1.2.3 From 27f718e72df9300f013a6db78fc2982622772792 Mon Sep 17 00:00:00 2001 From: Ashutosh Bishnoi Date: Sat, 7 Aug 2021 17:14:47 +0530 Subject: Showing status view on device click --- modern/src/map/SelectedDeviceMap.js | 50 ++++++++++++++++++++++++++++++++++--- modern/src/map/StatusView.js | 10 +------- modern/src/theme/palette.js | 11 ++++++++ 3 files changed, 58 insertions(+), 13 deletions(-) (limited to 'modern/src/map/StatusView.js') diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js index e6c5f58..e55ee10 100644 --- a/modern/src/map/SelectedDeviceMap.js +++ b/modern/src/map/SelectedDeviceMap.js @@ -1,21 +1,63 @@ -import { useEffect } from 'react'; -import { useSelector } from 'react-redux'; +import React, { 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'; +import { useHistory } from 'react-router-dom'; import { map } from './Map'; +import store from '../store'; +import StatusView from './StatusView'; +import theme from '../theme'; + +let popup; const SelectedDeviceMap = () => { + const history = useHistory(); + const mapCenter = useSelector((state) => { if (state.devices.selectedId) { const position = state.positions.items[state.devices.selectedId] || null; if (position) { - return [position.longitude, position.latitude]; + return { deviceId: state.devices.selectedId, position: [position.longitude, position.latitude] }; } } return null; }); + const showStatus = (deviceId, coordinates) => { + const placeholder = document.createElement('div'); + ReactDOM.render( + + + history.push(`/position/${positionId}`)} + onShowHistory={() => history.push('/replay')} + onEditClick={(deviceId) => history.push(`/device/${deviceId}`)} + /> + + , + placeholder, + ); + + if (popup) { + popup.remove(); + } + popup = new maplibregl.Popup({ + offset: 25, + anchor: 'top', + closeOnClick: true, + }); + + popup.setDOMContent(placeholder).setLngLat(coordinates).addTo(map); + }; + useEffect(() => { - map.easeTo({ center: mapCenter }); + if (mapCenter) { + map.easeTo({ center: mapCenter.position }); + showStatus(mapCenter.deviceId, mapCenter.position); + } }, [mapCenter]); return null; diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js index e37699a..00d36c5 100644 --- a/modern/src/map/StatusView.js +++ b/modern/src/map/StatusView.js @@ -25,15 +25,7 @@ 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, - }, + ...theme.palette.colors, listItemContainer: { maxWidth: '240px', }, diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js index ac26e57..622e49b 100644 --- a/modern/src/theme/palette.js +++ b/modern/src/theme/palette.js @@ -18,4 +18,15 @@ export default { main: traccarGreen, contrastText: traccarWhite, }, + colors: { + red: { + color: traccarRed, + }, + green: { + color: traccarGreen, + }, + gray: { + color: traccarGray, + }, + }, }; -- cgit v1.2.3