diff options
Diffstat (limited to 'web/app/view/MapController.js')
-rw-r--r-- | web/app/view/MapController.js | 317 |
1 files changed, 0 insertions, 317 deletions
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js deleted file mode 100644 index 3b0db6b07..000000000 --- a/web/app/view/MapController.js +++ /dev/null @@ -1,317 +0,0 @@ -/* - * 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: { - '*': { - selectdevice: 'selectDevice', - selectreport: 'selectReport', - mapstaterequest: 'getMapState' - } - }, - store: { - '#Devices': { - add: 'updateDevice', - update: 'updateDevice' - }, - '#LatestPositions': { - add: 'updateLatest', - update: 'updateLatest' - }, - '#ReportRoute': { - load: 'loadReport', - clear: 'clearReport' - } - }, - component: { - '#': { - selectfeature: 'selectFeature' - } - } - } - }, - - init: function () { - this.latestMarkers = {}; - this.reportMarkers = {}; - }, - - getDeviceColor: function (device) { - switch (device.get('status')) { - case 'online': - return Traccar.Style.mapColorOnline; - case 'offline': - return Traccar.Style.mapColorOffline; - default: - return Traccar.Style.mapColorUnknown; - } - }, - - changeMarkerColor: function (style, color) { - return new ol.style.Style({ - image: new ol.style.Arrow({ - radius: style.getImage().getRadius(), - fill: new ol.style.Fill({ - color: color - }), - stroke: style.getImage().getStroke(), - rotation: style.getImage().getRotation() - }), - text: style.getText() - }); - }, - - updateDevice: function (store, data) { - var i, device, deviceId, marker; - - if (!Ext.isArray(data)) { - data = [data]; - } - - for (i = 0; i < data.length; i++) { - device = data[i]; - deviceId = device.get('id'); - - if (deviceId in this.latestMarkers) { - marker = this.latestMarkers[deviceId]; - marker.setStyle( - this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device))); - } - } - }, - - followSelected: function () { - return Ext.getCmp('deviceFollowButton') && Ext.getCmp('deviceFollowButton').pressed; - }, - - updateLatest: function (store, data) { - var i, position, geometry, device, deviceId, marker, style; - - 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); - - if (device) { - 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().getLatestSource().addFeature(marker); - - style = this.getLatestMarker(this.getDeviceColor(device)); - style.getText().setText(device.get('name')); - marker.setStyle(style); - } - - marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180); - - if (marker === this.selectedMarker && this.followSelected()) { - this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); - } - } - } - }, - - loadReport: function (store, data) { - var i, position, point, geometry, marker, style; - - this.clearReport(store); - - if (data.length > 0) { - this.reportRoute = []; - for (i = 0; i < data.length; i++) { - if (i === 0 || data[i].get('deviceId') !== data[i - 1].get('deviceId')) { - this.reportRoute.push(new ol.Feature({ - geometry: new ol.geom.LineString([]) - })); - this.reportRoute[this.reportRoute.length - 1].setStyle(this.getRouteStyle(data[i].get('deviceId'))); - this.getView().getRouteSource().addFeature(this.reportRoute[this.reportRoute.length - 1]); - } - 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().getReportSource().addFeature(marker); - - style = this.getReportMarker(position.get('deviceId')); - style.getImage().setRotation(position.get('course') * Math.PI / 180); - /*style.getText().setText( - Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat24));*/ - - marker.setStyle(style); - - this.reportRoute[this.reportRoute.length - 1].getGeometry().appendCoordinate(point); - } - - this.getView().getMapView().fit(this.reportRoute[0].getGeometry(), this.getView().getMap().getSize()); - } - }, - - clearReport: function (store) { - var key, i; - - if (this.reportRoute) { - for (i = 0; i < this.reportRoute.length; i++) { - this.getView().getRouteSource().removeFeature(this.reportRoute[i]); - } - this.reportRoute = null; - } - - if (this.reportMarkers) { - for (key in this.reportMarkers) { - if (this.reportMarkers.hasOwnProperty(key)) { - this.getView().getReportSource().removeFeature(this.reportMarkers[key]); - } - } - this.reportMarkers = {}; - } - }, - - getRouteStyle: function (deviceId) { - var index = 0; - if (deviceId !== undefined) { - index = deviceId % Traccar.Style.mapRouteColor.length; - } - return new ol.style.Style({ - stroke: new ol.style.Stroke({ - color: Traccar.Style.mapRouteColor[index], - width: Traccar.Style.mapRouteWidth - }) - }); - }, - - getMarkerStyle: function (radius, color) { - return new ol.style.Style({ - image: new ol.style.Arrow({ - radius: radius, - fill: new ol.style.Fill({ - color: color - }), - stroke: new ol.style.Stroke({ - color: Traccar.Style.mapArrowStrokeColor, - width: Traccar.Style.mapArrowStrokeWidth - }) - }), - text: new ol.style.Text({ - textBaseline: 'bottom', - fill: new ol.style.Fill({ - color: Traccar.Style.mapTextColor - }), - stroke: new ol.style.Stroke({ - color: Traccar.Style.mapTextStrokeColor, - width: Traccar.Style.mapTextStrokeWidth - }), - offsetY: -radius / 2 - Traccar.Style.mapTextOffset, - font : Traccar.Style.mapTextFont - }) - }); - }, - - getLatestMarker: function (color) { - return this.getMarkerStyle( - Traccar.Style.mapRadiusNormal, color); - }, - - getReportMarker: function (deviceId) { - var index = 0; - if (deviceId !== undefined) { - index = deviceId % Traccar.Style.mapRouteColor.length; - } - return this.getMarkerStyle( - Traccar.Style.mapRadiusNormal, Traccar.Style.mapRouteColor[index]); - }, - - 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() - }); - }, - - selectMarker: function (marker, center) { - if (this.selectedMarker) { - this.selectedMarker.setStyle( - this.resizeMarker(this.selectedMarker.getStyle(), Traccar.Style.mapRadiusNormal)); - } - - if (marker) { - marker.setStyle( - this.resizeMarker(marker.getStyle(), Traccar.Style.mapRadiusSelected)); - if (center) { - this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); - } - } - - this.selectedMarker = marker; - }, - - selectDevice: function (device, center) { - this.selectMarker(this.latestMarkers[device.get('id')], center); - }, - - selectReport: function (position, center) { - this.selectMarker(this.reportMarkers[position.get('id')], center); - }, - - 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); - } - } - }, - - getMapState: function () { - var zoom, center, projection; - projection = this.getView().getMapView().getProjection(); - center = ol.proj.transform(this.getView().getMapView().getCenter(), projection, 'EPSG:4326'); - zoom = this.getView().getMapView().getZoom(); - this.fireEvent('mapstate', center[1], center[0], zoom); - } -}); |