diff options
| author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-09-13 17:52:38 -0700 |
|---|---|---|
| committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-09-13 17:52:38 -0700 |
| commit | f3024c900dffe7668b294054ee9a0345696769db (patch) | |
| tree | 95226532e8b825fc741b928c1898a851530c4c91 /modern | |
| parent | 6ef7e13621d746482ad906955675541fdd7f0705 (diff) | |
| download | etbsa-traccar-web-f3024c900dffe7668b294054ee9a0345696769db.tar.gz etbsa-traccar-web-f3024c900dffe7668b294054ee9a0345696769db.tar.bz2 etbsa-traccar-web-f3024c900dffe7668b294054ee9a0345696769db.zip | |
Implement status popup
Diffstat (limited to 'modern')
| -rw-r--r-- | modern/public/index.html | 1 | ||||
| -rw-r--r-- | modern/public/styles.css | 8 | ||||
| -rw-r--r-- | modern/src/MainMap.js | 29 | ||||
| -rw-r--r-- | modern/src/StatusView.js | 20 | ||||
| -rw-r--r-- | modern/src/common/formatter.js | 1 |
5 files changed, 56 insertions, 3 deletions
diff --git a/modern/public/index.html b/modern/public/index.html index ecded7c..78138ed 100644 --- a/modern/public/index.html +++ b/modern/public/index.html @@ -6,6 +6,7 @@ <meta name="theme-color" content="#000000"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> + <link rel="stylesheet" href="%PUBLIC_URL%/styles.css"> <title>Traccar</title> </head> <body style="margin: 0; padding: 0;"> diff --git a/modern/public/styles.css b/modern/public/styles.css new file mode 100644 index 0000000..60d1208 --- /dev/null +++ b/modern/public/styles.css @@ -0,0 +1,8 @@ +canvas { + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); +} + +.mapboxgl-popup-content { + padding: 10px !important; +} diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js index fadfe9e..5ba5098 100644 --- a/modern/src/MainMap.js +++ b/modern/src/MainMap.js @@ -1,8 +1,11 @@ import React, { useRef, useLayoutEffect, useEffect, useState } from 'react'; -import { useSelector } from 'react-redux'; +import ReactDOM from 'react-dom'; +import { Provider, useSelector } from 'react-redux'; import mapboxgl from 'mapbox-gl'; import mapManager from './mapManager'; +import store from './store'; +import StatusView from './StatusView'; const MainMap = () => { const containerEl = useRef(null); @@ -22,10 +25,11 @@ const MainMap = () => { const createFeature = (state, position) => { const device = state.devices.items[position.deviceId] || null; return { + deviceId: position.deviceId, name: device ? device.name : '', } }; - + const positions = useSelector(state => ({ type: 'FeatureCollection', features: Object.values(state.positions.items).map(position => ({ @@ -54,7 +58,26 @@ const MainMap = () => { }, []); const markerClickHandler = (event) => { - // TODO + const feature = event.features[0]; + let coordinates = feature.geometry.coordinates.slice(); + while (Math.abs(event.lngLat.lng - coordinates[0]) > 180) { + coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360; + } + + const placeholder = document.createElement('div'); + ReactDOM.render( + <Provider store={store}> + <StatusView deviceId={feature.properties.deviceId} /> + </Provider>, + placeholder); + + new mapboxgl.Popup({ + offset: 25, + anchor: 'top' + }) + .setDOMContent(placeholder) + .setLngLat(coordinates) + .addTo(mapManager.map); }; useEffect(() => { diff --git a/modern/src/StatusView.js b/modern/src/StatusView.js new file mode 100644 index 0000000..ed0149e --- /dev/null +++ b/modern/src/StatusView.js @@ -0,0 +1,20 @@ +import t from './common/localization' +import React from 'react'; +import { useSelector } from 'react-redux'; +import formatter from './common/formatter'; + +const StatusView = (props) => { + const device = useSelector(state => state.devices.items[props.deviceId]); + const position = useSelector(state => state.positions.items[props.deviceId]); + + return ( + <> + <b>{t('deviceStatus')}:</b> {formatter(device.status, 'status')}<br /> + <b>{t('positionSpeed')}:</b> {formatter(position.speed, 'speed')}<br /> + <b>{t('positionCourse')}:</b> {formatter(position.course, 'course')}<br /> + <b>{t('positionDistance')}:</b> {formatter(position.attributes.totalDistance, 'distance')}<br /> + </> + ); +}; + +export default StatusView; diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js index ce46c6c..50841e1 100644 --- a/modern/src/common/formatter.js +++ b/modern/src/common/formatter.js @@ -8,6 +8,7 @@ const formatValue = (key, value) => { case 'longitude': return value.toFixed(5); case 'speed': + case 'course': return value.toFixed(1); default: return value; |