diff options
Diffstat (limited to 'web/app/view/MapController.js')
| -rw-r--r-- | web/app/view/MapController.js | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js new file mode 100644 index 000000000..4979cd920 --- /dev/null +++ b/web/app/view/MapController.js @@ -0,0 +1,214 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +Ext.define('Traccar.view.MapController', { + extend: 'Ext.app.ViewController', + alias: 'controller.map', + + config: { + listen: { + controller: { + '*': { + reportShow: 'reportShow', + reportClear: 'reportClear', + selectDevice: 'selectDevice', + selectReport: 'selectReport' + } + } + } + }, + + init: function() { + this.liveData = {}; + this.update(true); + }, + + 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 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 style = this.getMarkerStyle(styles.mapLiveRadius, styles.mapLiveColor); + var marker = new ol.Feature({ + geometry: geometry, + originalStyle: style + }); + marker.setStyle(style); + this.getView().vectorSource.addFeature(marker); + this.liveData[data[i].deviceId] = marker; + } + } + + this.update(false); + }, + failure: function() { + // TODO: error + } + }); + }, + + getLineStyle: function() { + return new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: styles.mapStrokeColor, + width: styles.mapRouteWidth + }) + }); + }, + + getMarkerStyle: function(radius, color) { + /*return new ol.style.Style({ + text: new ol.style.Text({ + text: '\uf041', + font: 'normal 32px FontAwesome', + textBaseline: 'Bottom', + fill: new ol.style.Fill({ + color: color + }), + stroke: new ol.style.Stroke({ + color: 'black', + width: 2 + }) + }) + });*/ + return new ol.style.Style({ + image: new ol.style.Circle({ + radius: radius, + fill: new ol.style.Fill({ + color: color + }), + stroke: new ol.style.Stroke({ + color: styles.mapStrokeColor, + width: styles.mapMarkerStroke + }) + }) + }); + }, + + reportShow: function() { + this.reportClear(); + + var vectorSource = this.getView().vectorSource; + + var data = Ext.getStore('Positions').getData(); + + var index; + var positions = []; + this.reportRoutePoints = {}; + + 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(styles.mapReportRadius, styles.mapReportColor); + 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; + } + + this.reportRoute = new ol.Feature({ + geometry: new ol.geom.LineString(positions) + }); + 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 index; + var vectorSource = this.getView().vectorSource; + + if (this.reportRoute !== undefined) { + vectorSource.removeFeature(this.reportRoute); + this.reportRoute = undefined; + } + + if (this.reportRoutePoints !== undefined) { + for (var key in this.reportRoutePoints) { + if (this.reportRoutePoints.hasOwnProperty(key)) { + vectorSource.removeFeature(this.reportRoutePoints[key]); + } + } + this.reportRoutePoints = {}; + } + }, + + selectPosition: function(feature) { + if (this.currentFeature !== undefined) { + this.currentFeature.setStyle(this.currentFeature.get('originalStyle')); + } + + if (feature !== undefined) { + feature.setStyle(this.getMarkerStyle(styles.mapSelectRadius, styles.mapSelectColor)); + + var pan = ol.animation.pan({ + duration: styles.mapDelay, + source: this.getView().mapView.getCenter() + }); + this.getView().map.beforeRender(pan); + this.getView().mapView.setCenter(feature.getGeometry().getCoordinates()); + } + + this.currentFeature = feature; + }, + + selectDevice: function(device) { + this.selectPosition(this.liveData[device.get('id')]); + }, + + selectReport: function(position) { + if (this.reportRoutePoints[position.get('id')] !== undefined) { + this.selectPosition(this.reportRoutePoints[position.get('id')]); + } + } + +}); |