diff options
Diffstat (limited to 'web/app/view/MapController.js')
| -rw-r--r-- | web/app/view/MapController.js | 290 |
1 files changed, 153 insertions, 137 deletions
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index b53e46671..bc8ca843c 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -22,197 +22,213 @@ Ext.define('Traccar.view.MapController', { listen: { controller: { '*': { - reportShow: 'reportShow', - reportClear: 'reportClear', selectDevice: 'selectDevice', selectReport: 'selectReport' } + }, + store: { + '#LatestPositions': { + add: 'updateLatest', + update: 'updateLatest' + }, + '#Positions': { + load: 'loadReport', + clear: 'clearReport' + } + }, + component: { + '#': { + selectFeature: 'selectFeature' + } } } }, init: function () { - this.liveData = {}; - this.update(true); + this.latestMarkers = {}; + this.reportMarkers = {}; }, - update: function (first) { - Ext.Ajax.request({ - scope: this, - url: '/api/async', - params: { - first: first - }, - success: function (response) { - var data = Ext.decode(response.responseText).data; - - var i; - for (i = 0; i < data.length; i++) { - - var store = Ext.getStore('LatestPositions'); - var deviceStore = Ext.getStore('Devices'); - - var found = store.query('deviceId', data[i].deviceId); - if (found.getCount() > 0) { - found.first().set(data[i]); - } else { - store.add(Ext.create('Traccar.model.Position', data[i])); - } - - var geometry = new ol.geom.Point(ol.proj.fromLonLat([ - data[i].longitude, - data[i].latitude - ])); - - if (data[i].deviceId in this.liveData) { - this.liveData[data[i].deviceId].setGeometry(geometry); - } else { - var name = deviceStore.query('id', data[i].deviceId).first().get('name'); - - var style = this.getMarkerStyle(Traccar.Style.mapLiveRadius, Traccar.Style.mapLiveColor, data[i].course, name); - var marker = new ol.Feature({ - geometry: geometry, - originalStyle: style - }); - marker.setStyle(style); - this.getView().vectorSource.addFeature(marker); - this.liveData[data[i].deviceId] = marker; - } - } + updateLatest: function (store, data) { + var i, position, geometry, device, deviceId, marker, style; - this.update(false); - }, - failure: function () { - // TODO: error + if (!Ext.isArray(data)) { + data = [data]; + } + + for (i = 0; i < data.length; i++) { + position = data[i]; + deviceId = position.get('deviceId'); + device = Ext.getStore('Devices').findRecord('id', deviceId, 0, false, false, true); + + geometry = new ol.geom.Point(ol.proj.fromLonLat([ + position.get('longitude'), + position.get('latitude') + ])); + + if (deviceId in this.latestMarkers) { + marker = this.latestMarkers[deviceId]; + marker.setGeometry(geometry); + } else { + marker = new ol.Feature(geometry); + marker.set('record', device); + this.latestMarkers[deviceId] = marker; + this.getView().getVectorSource().addFeature(marker); + + style = this.getLatestMarker(); + style.getImage().setRotation(position.get('course') * 180 / Math.PI); + style.getText().setText(device.get('name')); + marker.setStyle(style); } + } + }, + + loadReport: function (store, data) { + var i, position, point, geometry, marker, style; + + this.clearReport(store); + + this.reportRoute = new ol.Feature({ + geometry: new ol.geom.LineString([]) }); + this.reportRoute.setStyle(this.getRouteStyle()); + this.getView().getVectorSource().addFeature(this.reportRoute); + + for (i = 0; i < data.length; i++) { + position = data[i]; + + point = ol.proj.fromLonLat([ + position.get('longitude'), + position.get('latitude') + ]); + geometry = new ol.geom.Point(point); + + marker = new ol.Feature(geometry); + marker.set('record', position); + this.reportMarkers[position.get('id')] = marker; + this.getView().getVectorSource().addFeature(marker); + + style = this.getReportMarker(); + style.getImage().setRotation(position.get('course') * 180 / Math.PI); + style.getText().setText( + Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat)); + + marker.setStyle(style); + + this.reportRoute.getGeometry().appendCoordinate(point); + } + }, + + clearReport: function (store) { + var vectorSource, key; + vectorSource = this.getView().getVectorSource(); + + if (this.reportRoute) { + vectorSource.removeFeature(this.reportRoute); + this.reportRoute = null; + } + + if (this.reportMarkers) { + for (key in this.reportMarkers) { + if (this.reportMarkers.hasOwnProperty(key)) { + vectorSource.removeFeature(this.reportMarkers[key]); + } + } + this.reportMarkers = {}; + } }, - getLineStyle: function () { + getRouteStyle: function () { return new ol.style.Style({ stroke: new ol.style.Stroke({ - color: Traccar.Style.mapStrokeColor, + color: Traccar.Style.mapRouteColor, width: Traccar.Style.mapRouteWidth }) }); }, - getMarkerStyle: function (radius, color, rotation, text) { + getMarkerStyle: function (radius, color) { return new ol.style.Style({ - image: new ol.style.RegularShape({ - points: 3, + image: new ol.style.Arrow({ radius: radius, fill: new ol.style.Fill({ color: color }), stroke: new ol.style.Stroke({ - color: Traccar.Style.mapStrokeColor, - width: Traccar.Style.mapMarkerStroke - }), - rotation: rotation * Math.PI / 180 + color: Traccar.Style.mapArrowStrokeColor, + width: Traccar.Style.mapArrowStrokeWidth + }) }), text: new ol.style.Text({ textBaseline: 'bottom', - text: text, fill: new ol.style.Fill({ - color: '#000' + color: Traccar.Style.mapTextColor }), stroke: new ol.style.Stroke({ - color: '#FFF', - width: 2 + color: Traccar.Style.mapTextStrokeColor, + width: Traccar.Style.mapTextStrokeWidth }), - offsetY: -12, - font : 'bold 12px sans-serif' + offsetY: -radius / 2 - Traccar.Style.mapTextOffset, + font : Traccar.Style.mapTextFont }) }); }, - reportShow: function () { - this.reportClear(); - - var vectorSource = this.getView().vectorSource; - - var data = Ext.getStore('Positions').getData(); - - var index; - var positions = []; - this.reportRoutePoints = {}; + getLatestMarker: function () { + return this.getMarkerStyle( + Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorUnknown); + }, - for (index = 0; index < data.getCount(); index++) { - var point = ol.proj.fromLonLat([ - data.getAt(index).data.longitude, - data.getAt(index).data.latitude - ]); - positions.push(point); - - var style = this.getMarkerStyle(Traccar.Style.mapReportRadius, Traccar.Style.mapReportColor, data.getAt(index).data.course); - var feature = new ol.Feature({ - geometry: new ol.geom.Point(positions[index]), - originalStyle: style - }); - feature.setStyle(style); - this.reportRoutePoints[data.getAt(index).get('id')] = feature; - } + getReportMarker: function () { + return this.getMarkerStyle( + Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport); + }, - this.reportRoute = new ol.Feature({ - geometry: new ol.geom.LineString(positions) + resizeMarker: function (style, radius) { + return new ol.style.Style({ + image: new ol.style.Arrow({ + radius: radius, + fill: style.getImage().getFill(), + stroke: style.getImage().getStroke(), + rotation: style.getImage().getRotation() + }), + text: style.getText() }); - this.reportRoute.setStyle(this.getLineStyle()); - vectorSource.addFeature(this.reportRoute); - - for (var key in this.reportRoutePoints) { - if (this.reportRoutePoints.hasOwnProperty(key)) { - vectorSource.addFeature(this.reportRoutePoints[key]); - } - } }, - reportClear: function () { - var vectorSource = this.getView().vectorSource; - - if (this.reportRoute !== undefined) { - vectorSource.removeFeature(this.reportRoute); - this.reportRoute = undefined; + selectMarker: function (marker, center) { + if (this.selectedMarker) { + this.selectedMarker.setStyle( + this.resizeMarker(this.selectedMarker.getStyle(), Traccar.Style.mapRadiusNormal)); } - if (this.reportRoutePoints !== undefined) { - for (var key in this.reportRoutePoints) { - if (this.reportRoutePoints.hasOwnProperty(key)) { - vectorSource.removeFeature(this.reportRoutePoints[key]); - } + if (marker) { + marker.setStyle( + this.resizeMarker(marker.getStyle(), Traccar.Style.mapRadiusSelected)); + if (center) { + this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); } - this.reportRoutePoints = {}; - } - }, - - selectPosition: function (feature) { - if (this.currentFeature !== undefined) { - this.currentFeature.setStyle(this.currentFeature.get('originalStyle')); } - if (feature !== undefined) { - var name = feature.getStyle().getText().getText(); - feature.setStyle(this.getMarkerStyle(Traccar.Style.mapSelectRadius, Traccar.Style.mapSelectColor, 0, name)); - - var pan = ol.animation.pan({ - duration: Traccar.Style.mapDelay, - source: this.getView().mapView.getCenter() - }); - this.getView().map.beforeRender(pan); - this.getView().mapView.setCenter(feature.getGeometry().getCoordinates()); - } + this.selectedMarker = marker; + }, - this.currentFeature = feature; + selectDevice: function (device, center) { + this.selectMarker(this.latestMarkers[device.get('id')], center); }, - selectDevice: function (device) { - this.selectPosition(this.liveData[device.get('id')]); + selectReport: function (position, center) { + this.selectMarker(this.reportMarkers[position.get('id')], center); }, - selectReport: function (position) { - if (this.reportRoutePoints[position.get('id')] !== undefined) { - this.selectPosition(this.reportRoutePoints[position.get('id')]); + selectFeature: function (feature) { + var record = feature.get('record'); + if (record) { + if (record instanceof Traccar.model.Device) { + this.fireEvent('selectDevice', record, false); + } else { + this.fireEvent('selectReport', record, false); + } } } - }); |