aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-03-22 19:30:28 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-03-22 19:30:28 -0700
commit990d485a21c945e7d57b85378650a65f3e79eed3 (patch)
treeeb513a337f097607410f4ae48d673dd18c2f1c74 /modern
parent80f36b23de8557445623e530708298a557f9fa2e (diff)
downloadetbsa-traccar-web-990d485a21c945e7d57b85378650a65f3e79eed3.tar.gz
etbsa-traccar-web-990d485a21c945e7d57b85378650a65f3e79eed3.tar.bz2
etbsa-traccar-web-990d485a21c945e7d57b85378650a65f3e79eed3.zip
Handle list clicks
Diffstat (limited to 'modern')
-rw-r--r--modern/src/DeviceList.js7
-rw-r--r--modern/src/MainMap.js22
-rw-r--r--modern/src/actions/index.js5
-rw-r--r--modern/src/reducers/index.js5
4 files changed, 36 insertions, 3 deletions
diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
index f636921..03c5126 100644
--- a/modern/src/DeviceList.js
+++ b/modern/src/DeviceList.js
@@ -10,16 +10,21 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import Divider from '@material-ui/core/Divider';
+import { selectDevice } from './actions';
const mapStateToProps = state => ({
devices: Array.from(state.devices.values())
});
class DeviceList extends Component {
+ handleClick(device) {
+ this.props.dispatch(selectDevice(device));
+ }
+
render() {
const devices = this.props.devices.map((device, index, list) =>
<Fragment key={device.id.toString()}>
- <ListItem button>
+ <ListItem button onClick={(e) => this.handleClick(device)}>
<ListItemAvatar>
<Avatar>
<LocationOnIcon />
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index f030560..35b933b 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -3,6 +3,16 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import mapboxgl from 'mapbox-gl';
+const calculateMapCenter = (state) => {
+ if (state.selectedDevice) {
+ const position = state.positions.get(state.selectedDevice);
+ if (position) {
+ return [position.longitude, position.latitude];
+ }
+ }
+ return null;
+}
+
const mapFeatureProperties = (state, position) => {
return {
name: state.devices.get(position.deviceId).name
@@ -10,6 +20,7 @@ const mapFeatureProperties = (state, position) => {
}
const mapStateToProps = state => ({
+ mapCenter: calculateMapCenter(state),
data: {
type: 'FeatureCollection',
features: Array.from(state.positions.values()).map(position => ({
@@ -135,8 +146,15 @@ class MainMap extends Component {
}
componentDidUpdate(prevProps) {
- if (this.map && prevProps.data !== this.props.data) {
- this.map.getSource('positions').setData(this.props.data);
+ if (this.map) {
+ if (prevProps.mapCenter !== this.props.mapCenter) {
+ this.map.easeTo({
+ center: this.props.mapCenter
+ });
+ }
+ if (prevProps.data.features !== this.props.data.features) {
+ this.map.getSource('positions').setData(this.props.data);
+ }
}
}
diff --git a/modern/src/actions/index.js b/modern/src/actions/index.js
index 8ef49fa..5527810 100644
--- a/modern/src/actions/index.js
+++ b/modern/src/actions/index.js
@@ -12,3 +12,8 @@ export const updateEvents = events => ({
type: 'UPDATE_EVENTS',
events
})
+
+export const selectDevice = device => ({
+ type: 'SELECT_DEVICE',
+ device
+})
diff --git a/modern/src/reducers/index.js b/modern/src/reducers/index.js
index 4593d1f..752a4c3 100644
--- a/modern/src/reducers/index.js
+++ b/modern/src/reducers/index.js
@@ -22,6 +22,11 @@ function rootReducer(state = initialState, action) {
...state,
positions: updateMap(state.positions, action.positions, 'deviceId')
});
+ case 'SELECT_DEVICE':
+ return Object.assign({}, {
+ ...state,
+ selectedDevice: action.device.id
+ });
default:
return state;
}