From 6c0d7e512c585fe159aa30c8bb844b02bb9d99be Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Tue, 28 Mar 2017 14:15:02 +0500 Subject: Move map related classes to subfolder --- web/app/view/BaseMap.js | 146 -------- web/app/view/GeofenceDialogController.js | 4 +- web/app/view/GeofenceMap.js | 126 ------- web/app/view/GeofenceMapController.js | 44 --- web/app/view/Main.js | 4 +- web/app/view/MainMobile.js | 4 +- web/app/view/Map.js | 140 -------- web/app/view/MapController.js | 89 ----- web/app/view/MapMarkerController.js | 565 ------------------------------ web/app/view/map/BaseMap.js | 146 ++++++++ web/app/view/map/GeofenceMap.js | 126 +++++++ web/app/view/map/GeofenceMapController.js | 44 +++ web/app/view/map/Map.js | 140 ++++++++ web/app/view/map/MapController.js | 89 +++++ web/app/view/map/MapMarkerController.js | 565 ++++++++++++++++++++++++++++++ 15 files changed, 1116 insertions(+), 1116 deletions(-) delete mode 100644 web/app/view/BaseMap.js delete mode 100644 web/app/view/GeofenceMap.js delete mode 100644 web/app/view/GeofenceMapController.js delete mode 100644 web/app/view/Map.js delete mode 100644 web/app/view/MapController.js delete mode 100644 web/app/view/MapMarkerController.js create mode 100644 web/app/view/map/BaseMap.js create mode 100644 web/app/view/map/GeofenceMap.js create mode 100644 web/app/view/map/GeofenceMapController.js create mode 100644 web/app/view/map/Map.js create mode 100644 web/app/view/map/MapController.js create mode 100644 web/app/view/map/MapMarkerController.js (limited to 'web/app/view') diff --git a/web/app/view/BaseMap.js b/web/app/view/BaseMap.js deleted file mode 100644 index c755b6c9..00000000 --- a/web/app/view/BaseMap.js +++ /dev/null @@ -1,146 +0,0 @@ -/* - * Copyright 2016 Anton Tananaev (anton@traccar.org) - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -Ext.define('Traccar.view.BaseMap', { - extend: 'Ext.panel.Panel', - xtype: 'baseMapView', - - layout: 'fit', - - getMap: function () { - return this.map; - }, - - getMapView: function () { - return this.mapView; - }, - - initMap: function () { - var server, layer, type, bingKey, lat, lon, zoom, target; - - server = Traccar.app.getServer(); - - type = Traccar.app.getPreference('map', null); - bingKey = server.get('bingKey'); - - if (type === 'custom') { - layer = new ol.layer.Tile({ - source: new ol.source.XYZ({ - url: server.get('mapUrl'), - attributions: [ - new ol.Attribution({ - html: '' - }) - ] - }) - }); - } else if (type === 'bingRoad') { - layer = new ol.layer.Tile({ - source: new ol.source.BingMaps({ - key: bingKey, - imagerySet: 'Road' - }) - }); - } else if (type === 'bingAerial') { - layer = new ol.layer.Tile({ - source: new ol.source.BingMaps({ - key: bingKey, - imagerySet: 'Aerial' - }) - }); - } else if (type === 'osm') { - layer = new ol.layer.Tile({ - source: new ol.source.OSM({}) - }); - } else { - layer = new ol.layer.Tile({ - source: new ol.source.XYZ({ - urls: [ - 'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', - 'https://cartodb-basemaps-b.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', - 'https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', - 'https://cartodb-basemaps-d.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png' - ], - attributions: [ - new ol.Attribution({ - html: [ - '© OpenStreetMap ' + - 'contributors, © CARTO' - ] - }) - ] - }) - }); - } - - lat = Traccar.app.getPreference('latitude', Traccar.Style.mapDefaultLat); - lon = Traccar.app.getPreference('longitude', Traccar.Style.mapDefaultLon); - zoom = Traccar.app.getPreference('zoom', Traccar.Style.mapDefaultZoom); - - this.mapView = new ol.View({ - center: ol.proj.fromLonLat([lon, lat]), - zoom: zoom, - maxZoom: Traccar.Style.mapMaxZoom - }); - - this.map = new ol.Map({ - target: this.body.dom.id, - layers: [layer], - view: this.mapView - }); - - target = this.map.getTarget(); - if (typeof target === 'string') { - target = Ext.get(target).dom; - } - - this.map.on('pointermove', function (e) { - var hit = this.forEachFeatureAtPixel(e.pixel, function (feature, layer) { - return true; - }); - if (hit) { - target.style.cursor = 'pointer'; - } else { - target.style.cursor = ''; - } - }); - - this.map.on('click', function (e) { - if (this.map.hasFeatureAtPixel(e.pixel, { - layerFilter: function (layer) { - return !layer.get('name'); - } - })) { - this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) { - this.fireEvent('selectfeature', feature); - }.bind(this)); - } else { - this.fireEvent('deselectfeature'); - } - }, this); - }, - - listeners: { - afterrender: function () { - this.initMap(); - }, - - resize: function () { - this.map.updateSize(); - } - } -}); diff --git a/web/app/view/GeofenceDialogController.js b/web/app/view/GeofenceDialogController.js index 936c46dc..e6bb753b 100644 --- a/web/app/view/GeofenceDialogController.js +++ b/web/app/view/GeofenceDialogController.js @@ -1,5 +1,5 @@ /* - * Copyright 2016 Anton Tananaev (anton@traccar.org) + * Copyright 2016 - 2017 Anton Tananaev (anton@traccar.org) * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by @@ -21,7 +21,7 @@ Ext.define('Traccar.view.GeofenceDialogController', { requires: [ 'Traccar.view.BaseWindow', - 'Traccar.view.GeofenceMap' + 'Traccar.view.map.GeofenceMap' ], config: { diff --git a/web/app/view/GeofenceMap.js b/web/app/view/GeofenceMap.js deleted file mode 100644 index 0a56b337..00000000 --- a/web/app/view/GeofenceMap.js +++ /dev/null @@ -1,126 +0,0 @@ -/* - * Copyright 2016 Anton Tananaev (anton@traccar.org) - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -Ext.define('Traccar.view.GeofenceMap', { - extend: 'Traccar.view.BaseMap', - xtype: 'geofenceMapView', - - requires: [ - 'Traccar.view.GeofenceMapController', - 'Traccar.GeofenceConverter' - ], - - controller: 'geofenceMap', - bodyBorder: true, - - tbar: { - items: [{ - xtype: 'combobox', - store: 'GeofenceTypes', - valueField: 'key', - displayField: 'name', - editable: false, - listeners: { - select: 'onTypeSelect' - } - }, { - xtype: 'tbfill' - }, { - glyph: 'xf00c@FontAwesome', - tooltip: Strings.sharedSave, - tooltipType: 'title', - minWidth: 0, - handler: 'onSaveClick' - }, { - glyph: 'xf00d@FontAwesome', - tooltip: Strings.sharedCancel, - tooltipType: 'title', - minWidth: 0, - handler: 'onCancelClick' - }] - }, - - getFeatures: function () { - return this.features; - }, - - initMap: function () { - var map, featureOverlay, geometry, fillColor; - this.callParent(); - - map = this.map; - - this.features = new ol.Collection(); - if (this.area !== '') { - geometry = Traccar.GeofenceConverter.wktToGeometry(this.mapView, this.area); - this.features.push(new ol.Feature(geometry)); - if (geometry instanceof ol.geom.Circle) { - this.mapView.setCenter(geometry.getCenter()); - } else if (geometry instanceof ol.geom.Polygon) { - this.mapView.setCenter(geometry.getCoordinates()[0][0]); - } - } - fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor); - fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity; - featureOverlay = new ol.layer.Vector({ - source: new ol.source.Vector({ - features: this.features - }), - style: new ol.style.Style({ - fill: new ol.style.Fill({ - color: fillColor - }), - stroke: new ol.style.Stroke({ - color: Traccar.Style.mapGeofenceColor, - width: Traccar.Style.mapGeofenceWidth - }), - image: new ol.style.Circle({ - radius: Traccar.Style.mapGeofenceRadius, - fill: new ol.style.Fill({ - color: Traccar.Style.mapGeofenceColor - }) - }) - }) - }); - featureOverlay.setMap(map); - - map.addInteraction(new ol.interaction.Modify({ - features: this.features, - deleteCondition: function (event) { - return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event); - } - })); - }, - - addInteraction: function (type) { - this.draw = new ol.interaction.Draw({ - features: this.features, - type: type - }); - this.draw.on('drawstart', function () { - this.features.clear(); - }, this); - this.map.addInteraction(this.draw); - }, - - removeInteraction: function () { - if (this.draw) { - this.map.removeInteraction(this.draw); - this.draw = null; - } - } -}); diff --git a/web/app/view/GeofenceMapController.js b/web/app/view/GeofenceMapController.js deleted file mode 100644 index ff5c70c6..00000000 --- a/web/app/view/GeofenceMapController.js +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Copyright 2016 Anton Tananaev (anton@traccar.org) - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -Ext.define('Traccar.view.GeofenceMapController', { - extend: 'Ext.app.ViewController', - alias: 'controller.geofenceMap', - - requires: [ - 'Traccar.GeofenceConverter' - ], - - onSaveClick: function (button) { - var geometry, projection; - if (this.getView().getFeatures().getLength() > 0) { - geometry = this.getView().getFeatures().pop().getGeometry(); - projection = this.getView().getMapView().getProjection(); - this.fireEvent('savearea', Traccar.GeofenceConverter.geometryToWkt(projection, geometry)); - button.up('window').close(); - } - }, - - onCancelClick: function (button) { - button.up('window').close(); - }, - - onTypeSelect: function (combo) { - this.getView().removeInteraction(); - this.getView().addInteraction(combo.getValue()); - } -}); diff --git a/web/app/view/Main.js b/web/app/view/Main.js index da6e5394..c186efd0 100644 --- a/web/app/view/Main.js +++ b/web/app/view/Main.js @@ -1,5 +1,5 @@ /* - * Copyright 2015 Anton Tananaev (anton@traccar.org) + * Copyright 2015 - 2017 Anton Tananaev (anton@traccar.org) * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by @@ -23,7 +23,7 @@ Ext.define('Traccar.view.Main', { 'Traccar.view.Devices', 'Traccar.view.State', 'Traccar.view.Report', - 'Traccar.view.Map' + 'Traccar.view.map.Map' ], layout: 'border', diff --git a/web/app/view/MainMobile.js b/web/app/view/MainMobile.js index 347db315..b0d4223b 100644 --- a/web/app/view/MainMobile.js +++ b/web/app/view/MainMobile.js @@ -1,5 +1,5 @@ /* - * Copyright 2015 Anton Tananaev (anton@traccar.org) + * Copyright 2015 - 2017 Anton Tananaev (anton@traccar.org) * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by @@ -25,7 +25,7 @@ Ext.define('Traccar.view.MainMobile', { 'Traccar.view.Devices', 'Traccar.view.State', 'Traccar.view.Report', - 'Traccar.view.Map' + 'Traccar.view.map.Map' ], layout: 'card', diff --git a/web/app/view/Map.js b/web/app/view/Map.js deleted file mode 100644 index a3879ab9..00000000 --- a/web/app/view/Map.js +++ /dev/null @@ -1,140 +0,0 @@ -/* - * Copyright 2015 - 2016 Anton Tananaev (anton@traccar.org) - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -Ext.define('Traccar.view.Map', { - extend: 'Traccar.view.BaseMap', - xtype: 'mapView', - - requires: [ - 'Traccar.view.MapController', - 'Traccar.view.SettingsMenu' - ], - - controller: 'map', - - title: Strings.mapTitle, - tbar: { - componentCls: 'toolbar-header-style', - defaults: { - xtype: 'button', - tooltipType: 'title', - stateEvents: ['toggle'], - enableToggle: true, - stateful: { - pressed: true - } - }, - items: [{ - xtype: 'tbtext', - html: Strings.mapTitle, - baseCls: 'x-panel-header-title-default' - }, { - xtype: 'tbfill' - }, { - handler: 'showReports', - reference: 'showReportsButton', - glyph: 'xf0f6@FontAwesome', - stateful: false, - enableToggle: false, - tooltip: Strings.reportTitle - }, { - handler: 'updateGeofences', - reference: 'showGeofencesButton', - glyph: 'xf21d@FontAwesome', - pressed: true, - stateId: 'show-geofences-button', - tooltip: Strings.sharedGeofences - }, { - handler: 'showLiveRoutes', - reference: 'showLiveRoutes', - glyph: 'xf1b0@FontAwesome', - stateId: 'show-live-routes-button', - tooltip: Strings.mapLiveRoutes - }, { - reference: 'deviceFollowButton', - glyph: 'xf05b@FontAwesome', - tooltip: Strings.deviceFollow, - stateId: 'device-follow-button', - toggleHandler: 'onFollowClick' - }, { - id: 'soundButton', - glyph: 'xf0a2@FontAwesome', - tooltip: Strings.sharedSound, - stateId: 'sound-button' - }, { - xtype: 'settingsMenu', - enableToggle: false - }] - }, - - getMarkersSource: function () { - return this.markersSource; - }, - - getAccuracySource: function () { - return this.accuracySource; - }, - - getRouteSource: function () { - return this.routeSource; - }, - - getGeofencesSource: function () { - return this.geofencesSource; - }, - - getLiveRouteSource: function () { - return this.liveRouteSource; - }, - - getLiveRouteLayer: function () { - return this.liveRouteLayer; - }, - - initMap: function () { - this.callParent(); - - this.geofencesSource = new ol.source.Vector({}); - this.map.addLayer(new ol.layer.Vector({ - name: 'geofencesLayer', - source: this.geofencesSource - })); - - this.liveRouteSource = new ol.source.Vector({}); - this.liveRouteLayer = new ol.layer.Vector({ - source: this.liveRouteSource, - visible: false - }); - this.map.addLayer(this.liveRouteLayer); - - this.routeSource = new ol.source.Vector({}); - this.map.addLayer(new ol.layer.Vector({ - source: this.routeSource - })); - - this.accuracySource = new ol.source.Vector({}); - this.map.addLayer(new ol.layer.Vector({ - name: 'accuracyLayer', - source: this.accuracySource - })); - - this.markersSource = new ol.source.Vector({}); - this.map.addLayer(new ol.layer.Vector({ - source: this.markersSource - })); - } -}); diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js deleted file mode 100644 index 04e8c448..00000000 --- a/web/app/view/MapController.js +++ /dev/null @@ -1,89 +0,0 @@ -/* - * Copyright 2015 - 2017 Anton Tananaev (anton@traccar.org) - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -Ext.define('Traccar.view.MapController', { - extend: 'Traccar.view.MapMarkerController', - alias: 'controller.map', - - requires: [ - 'Traccar.GeofenceConverter' - ], - - config: { - listen: { - controller: { - '*': { - mapstaterequest: 'getMapState', - zoomtoalldevices: 'zoomToAllDevices' - } - }, - store: { - '#Geofences': { - load: 'updateGeofences', - add: 'updateGeofences', - update: 'updateGeofences', - remove: 'updateGeofences' - } - } - } - }, - - init: function () { - this.callParent(); - this.lookupReference('showReportsButton').setVisible(Traccar.app.isMobile()); - }, - - showReports: function () { - Traccar.app.showReports(true); - }, - - onFollowClick: function (button, pressed) { - if (pressed && this.selectedMarker) { - this.getView().getMapView().setCenter(this.selectedMarker.getGeometry().getCoordinates()); - } - }, - - showLiveRoutes: function (button) { - this.getView().getLiveRouteLayer().setVisible(button.pressed); - }, - - 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); - }, - - updateGeofences: function () { - this.getView().getGeofencesSource().clear(); - if (this.lookupReference('showGeofencesButton').pressed) { - Ext.getStore('Geofences').each(function (geofence) { - var feature = new ol.Feature(Traccar.GeofenceConverter - .wktToGeometry(this.getView().getMapView(), geofence.get('area'))); - feature.setStyle(this.getAreaStyle(geofence.get('name'), - geofence.get('attributes') ? geofence.get('attributes').color : null)); - this.getView().getGeofencesSource().addFeature(feature); - return true; - }, this); - } - }, - - zoomToAllDevices: function () { - this.zoomToAllPositions(Ext.getStore('LatestPositions').getData().items); - } -}); diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js deleted file mode 100644 index fa380e76..00000000 --- a/web/app/view/MapMarkerController.js +++ /dev/null @@ -1,565 +0,0 @@ -/* - * Copyright 2015 - 2016 Anton Tananaev (anton@traccar.org) - * Copyright 2016 Andrey Kunitsyn (andrey@traccar.org) - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -Ext.define('Traccar.view.MapMarkerController', { - extend: 'Ext.app.ViewController', - alias: 'controller.mapMarker', - - requires: [ - 'Traccar.model.Position', - 'Traccar.model.Device', - 'Traccar.DeviceImages' - ], - - config: { - listen: { - controller: { - '*': { - selectdevice: 'selectDevice', - selectreport: 'selectReport' - }, - 'devices': { - deselectfeature: 'deselectDevice' - } - }, - store: { - '#Devices': { - add: 'updateDevice', - update: 'updateDevice', - remove: 'removeDevice' - }, - '#VisibleDevices': { - add: 'updateVisibleDevices', - update: 'updateVisibleDevices', - remove: 'updateVisibleDevices', - refresh: 'filterDevices' - }, - '#LatestPositions': { - add: 'updateLatest', - update: 'updateLatest' - }, - '#ReportRoute': { - add: 'addReportMarkers', - load: 'loadReport', - clear: 'clearReport' - } - }, - component: { - '#': { - selectfeature: 'selectFeature', - deselectfeature: 'deselectFeature' - } - } - } - }, - - init: function () { - this.latestMarkers = {}; - this.reportMarkers = {}; - this.accuracyCircles = {}; - this.liveRoutes = {}; - this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10); - }, - - getAreaStyle: function (label, color) { - var fillColor, strokeColor, styleConfig; - if (color) { - fillColor = ol.color.asArray(color); - strokeColor = color; - } else { - fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor); - strokeColor = Traccar.Style.mapGeofenceColor; - } - fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity; - styleConfig = { - fill: new ol.style.Fill({ - color: fillColor - }), - stroke: new ol.style.Stroke({ - color: strokeColor, - width: Traccar.Style.mapGeofenceWidth - }) - }; - if (label) { - styleConfig.text = new ol.style.Text({ - text: label, - fill: new ol.style.Fill({ - color: Traccar.Style.mapGeofenceTextColor - }), - stroke: new ol.style.Stroke({ - color: Traccar.Style.mapTextStrokeColor, - width: Traccar.Style.mapTextStrokeWidth - }), - font: Traccar.Style.mapTextFont - }); - } - return new ol.style.Style(styleConfig); - }, - - getDeviceColor: function (device) { - switch (device.get('status')) { - case 'online': - return Traccar.Style.mapColorOnline; - case 'offline': - return Traccar.Style.mapColorOffline; - default: - return Traccar.Style.mapColorUnknown; - } - }, - - updateDevice: function (store, data) { - var i, device, deviceId, marker, style; - - 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]; - style = marker.getStyle(); - if (style.getImage().fill !== this.getDeviceColor(device) || - style.getImage().category !== device.get('category')) { - this.updateDeviceMarker(style, this.getDeviceColor(device), device.get('category')); - marker.changed(); - } - if (style.getText().getText() !== device.get('name')) { - style.getText().setText(device.get('name')); - marker.changed(); - } - } - } - }, - - removeDevice: function (store, data) { - var i, deviceId; - if (!Ext.isArray(data)) { - data = [data]; - } - for (i = 0; i < data.length; i++) { - deviceId = data[i].get('id'); - if (this.latestMarkers[deviceId]) { - this.getView().getMarkersSource().removeFeature(this.latestMarkers[deviceId]); - delete this.latestMarkers[deviceId]; - } - if (this.accuracyCircles[deviceId]) { - this.getView().getAccuracySource().removeFeature(this.accuracyCircles[deviceId]); - delete this.accuracyCircles[deviceId]; - } - if (this.liveRoutes[deviceId]) { - this.getView().getLiveRouteSource().removeFeature(this.liveRoutes[deviceId]); - delete this.liveRoutes[deviceId]; - } - } - }, - - updateLatest: function (store, data) { - var i, position, device; - - if (!Ext.isArray(data)) { - data = [data]; - } - - for (i = 0; i < data.length; i++) { - position = data[i]; - device = Ext.getStore('Devices').getById(position.get('deviceId')); - - if (device) { - this.updateAccuracy(position, device); - this.updateLatestMarker(position, device); - this.updateLiveRoute(position, device); - } - } - }, - - updateAccuracy: function (position, device) { - var center, radius, feature, mapView, projection, pointResolution; - mapView = this.getView().getMapView(); - feature = this.accuracyCircles[position.get('deviceId')]; - - if (position.get('accuracy')) { - projection = mapView.getProjection(); - center = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]); - pointResolution = ol.proj.getPointResolution(projection, mapView.getResolution(), center); - radius = (position.get('accuracy') / ol.proj.METERS_PER_UNIT.m) * mapView.getResolution() / pointResolution; - - if (feature) { - feature.getGeometry().setCenter(center); - feature.getGeometry().setRadius(radius); - } else { - feature = new ol.Feature(new ol.geom.Circle(center, radius)); - feature.setStyle(this.getAreaStyle(null, Traccar.Style.mapAccuracyColor)); - feature.setId(position.get('deviceId')); - this.accuracyCircles[position.get('deviceId')] = feature; - if (this.isDeviceVisible(device)) { - this.getView().getAccuracySource().addFeature(feature); - } - } - } else { - if (feature && this.getView().getAccuracySource().getFeatureById(feature.getId())) { - this.getView().getAccuracySource().removeFeature(feature); - } - delete this.accuracyCircles[position.get('deviceId')]; - } - }, - - updateLatestMarker: function (position, device) { - var geometry, deviceId, marker, style; - geometry = new ol.geom.Point(ol.proj.fromLonLat([ - position.get('longitude'), - position.get('latitude') - ])); - deviceId = position.get('deviceId'); - if (deviceId in this.latestMarkers) { - marker = this.latestMarkers[deviceId]; - style = marker.getStyle(); - if (style.getImage().angle !== position.get('course')) { - this.rotateMarker(style, position.get('course')); - } - marker.setGeometry(geometry); - } else { - marker = new ol.Feature(geometry); - marker.set('record', device); - - style = this.getLatestMarker(this.getDeviceColor(device), - position.get('course'), - device.get('category')); - style.getText().setText(device.get('name')); - marker.setStyle(style); - marker.setId(device.get('id')); - this.latestMarkers[deviceId] = marker; - if (this.isDeviceVisible(device)) { - this.getView().getMarkersSource().addFeature(marker); - } - } - - if (marker === this.selectedMarker && this.lookupReference('deviceFollowButton').pressed) { - this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); - } - }, - - updateLiveRoute: function (position, device) { - var deviceId, liveLine, liveCoordinates, lastLiveCoordinates, newCoordinates; - deviceId = position.get('deviceId'); - if (deviceId in this.liveRoutes) { - liveCoordinates = this.liveRoutes[deviceId].getGeometry().getCoordinates(); - lastLiveCoordinates = liveCoordinates[liveCoordinates.length - 1]; - newCoordinates = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]); - if (lastLiveCoordinates[0] === newCoordinates[0] && - lastLiveCoordinates[1] === newCoordinates[1]) { - return; - } - if (liveCoordinates.length >= this.liveRouteLength) { - liveCoordinates.shift(); - } - liveCoordinates.push(newCoordinates); - this.liveRoutes[deviceId].getGeometry().setCoordinates(liveCoordinates); - } else { - liveLine = new ol.Feature({ - geometry: new ol.geom.LineString([ - ol.proj.fromLonLat([ - position.get('longitude'), - position.get('latitude') - ]) - ]) - }); - liveLine.setStyle(this.getRouteStyle(deviceId)); - liveLine.setId(position.get('deviceId')); - this.liveRoutes[deviceId] = liveLine; - if (this.isDeviceVisible(device)) { - this.getView().getMarkersSource().addFeature(liveLine); - } - } - }, - - loadReport: function (store, data) { - var i, position, point; - - this.addReportMarkers(store, data); - - this.reportRoute = []; - for (i = 0; i < data.length; i++) { - position = data[i]; - point = ol.proj.fromLonLat([ - position.get('longitude'), - position.get('latitude') - ]); - 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]); - } - this.reportRoute[this.reportRoute.length - 1].getGeometry().appendCoordinate(point); - } - }, - - addReportMarker: function (position) { - var geometry, marker, style, 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); - style = this.getReportMarker(position.get('deviceId'), position.get('course')); - marker.setStyle(style); - this.reportMarkers[position.get('id')] = marker; - this.getView().getMarkersSource().addFeature(marker); - }, - - addReportMarkers: function (store, data) { - var i; - this.clearReport(); - for (i = 0; i < data.length; i++) { - if (store.showMarkers) { - this.addReportMarker(data[i]); - } - } - this.zoomToAllPositions(data); - }, - - clearReport: function () { - 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().getMarkersSource().removeFeature(this.reportMarkers[key]); - } - } - this.reportMarkers = {}; - } - - if (this.selectedMarker && this.selectedMarker.get('record') instanceof Traccar.model.Position) { - this.selectedMarker = null; - } - }, - - getRouteStyle: function (deviceId) { - return new ol.style.Style({ - stroke: new ol.style.Stroke({ - color: Traccar.app.getReportColor(deviceId), - width: Traccar.Style.mapRouteWidth - }) - }); - }, - - getMarkerStyle: function (zoom, color, angle, category) { - var image = Traccar.DeviceImages.getImageIcon(color, zoom, angle, category); - return new ol.style.Style({ - image: image, - 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: -image.getSize()[1] / 2 - Traccar.Style.mapTextOffset, - font : Traccar.Style.mapTextFont - }) - }); - }, - - getLatestMarker: function (color, angle, category) { - return this.getMarkerStyle(false, color, angle, category); - }, - - getReportMarker: function (deviceId, angle) { - return this.getMarkerStyle(false, Traccar.app.getReportColor(deviceId), angle, 'arrow'); - }, - - resizeMarker: function (style, zoom) { - var image, text; - image = Traccar.DeviceImages.getImageIcon(style.getImage().fill, - zoom, - style.getImage().angle, - style.getImage().category); - text = style.getText(); - text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); - style.setText(text); - style.setImage(image); - }, - - rotateMarker: function (style, angle) { - style.setImage(Traccar.DeviceImages.getImageIcon(style.getImage().fill, - style.getImage().zoom, - angle, - style.getImage().category)); - }, - - updateDeviceMarker: function (style, color, category) { - var image, text; - image = Traccar.DeviceImages.getImageIcon(color, - style.getImage().zoom, - style.getImage().angle, - category); - text = style.getText(); - text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); - style.setText(text); - style.setImage(image); - }, - - selectMarker: function (marker, center) { - if (this.selectedMarker) { - if (!Ext.getStore('ReportRoute').showMarkers && - this.selectedMarker.get('record') instanceof Traccar.model.Position) { - this.getView().getMarkersSource().removeFeature(this.selectedMarker); - delete this.reportMarkers[this.selectedMarker.get('record').get('id')]; - } else { - this.resizeMarker(this.selectedMarker.getStyle(), false); - this.selectedMarker.getStyle().setZIndex(0); - this.selectedMarker.changed(); - } - } - - if (marker) { - this.resizeMarker(marker.getStyle(), true); - marker.getStyle().setZIndex(1); - marker.changed(); - 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) { - if (position instanceof Traccar.model.Position) { - if (!Ext.getStore('ReportRoute').showMarkers) { - this.addReportMarker(position); - } - 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); - } - } - }, - - deselectFeature: function () { - this.deselectDevice(); - this.fireEvent('deselectfeature'); - }, - - deselectDevice: function () { - this.selectMarker(null, false); - }, - - zoomToAllPositions: function (data) { - var i, point, minx, miny, maxx, maxy; - for (i = 0; i < data.length; i++) { - point = ol.proj.fromLonLat([ - data[i].get('longitude'), - data[i].get('latitude') - ]); - if (i === 0) { - minx = maxx = point[0]; - miny = maxy = point[1]; - } else { - minx = Math.min(point[0], minx); - miny = Math.min(point[1], miny); - maxx = Math.max(point[0], maxx); - maxy = Math.max(point[1], maxy); - } - } - if (minx !== maxx || miny !== maxy) { - this.getView().getMapView().fit([minx, miny, maxx, maxy]); - } else if (point) { - this.getView().getMapView().fit(new ol.geom.Point(point)); - } - }, - - updateVisibleDevices: function (store, data) { - var i, device; - - if (!Ext.isArray(data)) { - data = [data]; - } - - for (i = 0; i < data.length; i++) { - device = data[i]; - if (device.get('id') in this.latestMarkers) { - this.updateDeviceVisibility(device); - } - } - }, - - isDeviceVisible: function (device) { - return Ext.getStore('VisibleDevices').contains(device); - }, - - updateDeviceVisibility: function (device) { - var deviceId, accuracy, liveLine, marker; - deviceId = device.get('id'); - marker = this.latestMarkers[deviceId]; - accuracy = this.accuracyCircles[deviceId]; - liveLine = this.liveRoutes[deviceId]; - if (this.isDeviceVisible(device)) { - if (marker && !this.getView().getMarkersSource().getFeatureById(marker.getId())) { - this.getView().getMarkersSource().addFeature(marker); - } - if (accuracy && !this.getView().getAccuracySource().getFeatureById(accuracy.getId())) { - this.getView().getAccuracySource().addFeature(accuracy); - } - if (liveLine && !this.getView().getLiveRouteSource().getFeatureById(liveLine.getId())) { - this.getView().getLiveRouteSource().addFeature(liveLine); - } - } else { - if (marker && this.getView().getMarkersSource().getFeatureById(marker.getId())) { - this.getView().getMarkersSource().removeFeature(marker); - } - if (accuracy && this.getView().getAccuracySource().getFeatureById(accuracy.getId())) { - this.getView().getAccuracySource().removeFeature(accuracy); - } - if (liveLine && this.getView().getLiveRouteSource().getFeatureById(liveLine.getId())) { - this.getView().getLiveRouteSource().removeFeature(liveLine); - } - } - }, - - filterDevices: function (store) { - Ext.getStore('Devices').each(this.updateDeviceVisibility, this, false); - } -}); diff --git a/web/app/view/map/BaseMap.js b/web/app/view/map/BaseMap.js new file mode 100644 index 00000000..ac3b2694 --- /dev/null +++ b/web/app/view/map/BaseMap.js @@ -0,0 +1,146 @@ +/* + * Copyright 2016 - 2017 Anton Tananaev (anton@traccar.org) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +Ext.define('Traccar.view.map.BaseMap', { + extend: 'Ext.panel.Panel', + xtype: 'baseMapView', + + layout: 'fit', + + getMap: function () { + return this.map; + }, + + getMapView: function () { + return this.mapView; + }, + + initMap: function () { + var server, layer, type, bingKey, lat, lon, zoom, target; + + server = Traccar.app.getServer(); + + type = Traccar.app.getPreference('map', null); + bingKey = server.get('bingKey'); + + if (type === 'custom') { + layer = new ol.layer.Tile({ + source: new ol.source.XYZ({ + url: server.get('mapUrl'), + attributions: [ + new ol.Attribution({ + html: '' + }) + ] + }) + }); + } else if (type === 'bingRoad') { + layer = new ol.layer.Tile({ + source: new ol.source.BingMaps({ + key: bingKey, + imagerySet: 'Road' + }) + }); + } else if (type === 'bingAerial') { + layer = new ol.layer.Tile({ + source: new ol.source.BingMaps({ + key: bingKey, + imagerySet: 'Aerial' + }) + }); + } else if (type === 'osm') { + layer = new ol.layer.Tile({ + source: new ol.source.OSM({}) + }); + } else { + layer = new ol.layer.Tile({ + source: new ol.source.XYZ({ + urls: [ + 'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', + 'https://cartodb-basemaps-b.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', + 'https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', + 'https://cartodb-basemaps-d.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png' + ], + attributions: [ + new ol.Attribution({ + html: [ + '© OpenStreetMap ' + + 'contributors, © CARTO' + ] + }) + ] + }) + }); + } + + lat = Traccar.app.getPreference('latitude', Traccar.Style.mapDefaultLat); + lon = Traccar.app.getPreference('longitude', Traccar.Style.mapDefaultLon); + zoom = Traccar.app.getPreference('zoom', Traccar.Style.mapDefaultZoom); + + this.mapView = new ol.View({ + center: ol.proj.fromLonLat([lon, lat]), + zoom: zoom, + maxZoom: Traccar.Style.mapMaxZoom + }); + + this.map = new ol.Map({ + target: this.body.dom.id, + layers: [layer], + view: this.mapView + }); + + target = this.map.getTarget(); + if (typeof target === 'string') { + target = Ext.get(target).dom; + } + + this.map.on('pointermove', function (e) { + var hit = this.forEachFeatureAtPixel(e.pixel, function (feature, layer) { + return true; + }); + if (hit) { + target.style.cursor = 'pointer'; + } else { + target.style.cursor = ''; + } + }); + + this.map.on('click', function (e) { + if (this.map.hasFeatureAtPixel(e.pixel, { + layerFilter: function (layer) { + return !layer.get('name'); + } + })) { + this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) { + this.fireEvent('selectfeature', feature); + }.bind(this)); + } else { + this.fireEvent('deselectfeature'); + } + }, this); + }, + + listeners: { + afterrender: function () { + this.initMap(); + }, + + resize: function () { + this.map.updateSize(); + } + } +}); diff --git a/web/app/view/map/GeofenceMap.js b/web/app/view/map/GeofenceMap.js new file mode 100644 index 00000000..37d3be74 --- /dev/null +++ b/web/app/view/map/GeofenceMap.js @@ -0,0 +1,126 @@ +/* + * Copyright 2016 - 2017 Anton Tananaev (anton@traccar.org) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +Ext.define('Traccar.view.map.GeofenceMap', { + extend: 'Traccar.view.map.BaseMap', + xtype: 'geofenceMapView', + + requires: [ + 'Traccar.view.map.GeofenceMapController', + 'Traccar.GeofenceConverter' + ], + + controller: 'geofenceMap', + bodyBorder: true, + + tbar: { + items: [{ + xtype: 'combobox', + store: 'GeofenceTypes', + valueField: 'key', + displayField: 'name', + editable: false, + listeners: { + select: 'onTypeSelect' + } + }, { + xtype: 'tbfill' + }, { + glyph: 'xf00c@FontAwesome', + tooltip: Strings.sharedSave, + tooltipType: 'title', + minWidth: 0, + handler: 'onSaveClick' + }, { + glyph: 'xf00d@FontAwesome', + tooltip: Strings.sharedCancel, + tooltipType: 'title', + minWidth: 0, + handler: 'onCancelClick' + }] + }, + + getFeatures: function () { + return this.features; + }, + + initMap: function () { + var map, featureOverlay, geometry, fillColor; + this.callParent(); + + map = this.map; + + this.features = new ol.Collection(); + if (this.area !== '') { + geometry = Traccar.GeofenceConverter.wktToGeometry(this.mapView, this.area); + this.features.push(new ol.Feature(geometry)); + if (geometry instanceof ol.geom.Circle) { + this.mapView.setCenter(geometry.getCenter()); + } else if (geometry instanceof ol.geom.Polygon) { + this.mapView.setCenter(geometry.getCoordinates()[0][0]); + } + } + fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor); + fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity; + featureOverlay = new ol.layer.Vector({ + source: new ol.source.Vector({ + features: this.features + }), + style: new ol.style.Style({ + fill: new ol.style.Fill({ + color: fillColor + }), + stroke: new ol.style.Stroke({ + color: Traccar.Style.mapGeofenceColor, + width: Traccar.Style.mapGeofenceWidth + }), + image: new ol.style.Circle({ + radius: Traccar.Style.mapGeofenceRadius, + fill: new ol.style.Fill({ + color: Traccar.Style.mapGeofenceColor + }) + }) + }) + }); + featureOverlay.setMap(map); + + map.addInteraction(new ol.interaction.Modify({ + features: this.features, + deleteCondition: function (event) { + return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event); + } + })); + }, + + addInteraction: function (type) { + this.draw = new ol.interaction.Draw({ + features: this.features, + type: type + }); + this.draw.on('drawstart', function () { + this.features.clear(); + }, this); + this.map.addInteraction(this.draw); + }, + + removeInteraction: function () { + if (this.draw) { + this.map.removeInteraction(this.draw); + this.draw = null; + } + } +}); diff --git a/web/app/view/map/GeofenceMapController.js b/web/app/view/map/GeofenceMapController.js new file mode 100644 index 00000000..ffafb7f8 --- /dev/null +++ b/web/app/view/map/GeofenceMapController.js @@ -0,0 +1,44 @@ +/* + * Copyright 2016 - 2017 Anton Tananaev (anton@traccar.org) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +Ext.define('Traccar.view.map.GeofenceMapController', { + extend: 'Ext.app.ViewController', + alias: 'controller.geofenceMap', + + requires: [ + 'Traccar.GeofenceConverter' + ], + + onSaveClick: function (button) { + var geometry, projection; + if (this.getView().getFeatures().getLength() > 0) { + geometry = this.getView().getFeatures().pop().getGeometry(); + projection = this.getView().getMapView().getProjection(); + this.fireEvent('savearea', Traccar.GeofenceConverter.geometryToWkt(projection, geometry)); + button.up('window').close(); + } + }, + + onCancelClick: function (button) { + button.up('window').close(); + }, + + onTypeSelect: function (combo) { + this.getView().removeInteraction(); + this.getView().addInteraction(combo.getValue()); + } +}); diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js new file mode 100644 index 00000000..d4e654eb --- /dev/null +++ b/web/app/view/map/Map.js @@ -0,0 +1,140 @@ +/* + * Copyright 2015 - 2017 Anton Tananaev (anton@traccar.org) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +Ext.define('Traccar.view.map.Map', { + extend: 'Traccar.view.map.BaseMap', + xtype: 'mapView', + + requires: [ + 'Traccar.view.map.MapController', + 'Traccar.view.SettingsMenu' + ], + + controller: 'map', + + title: Strings.mapTitle, + tbar: { + componentCls: 'toolbar-header-style', + defaults: { + xtype: 'button', + tooltipType: 'title', + stateEvents: ['toggle'], + enableToggle: true, + stateful: { + pressed: true + } + }, + items: [{ + xtype: 'tbtext', + html: Strings.mapTitle, + baseCls: 'x-panel-header-title-default' + }, { + xtype: 'tbfill' + }, { + handler: 'showReports', + reference: 'showReportsButton', + glyph: 'xf0f6@FontAwesome', + stateful: false, + enableToggle: false, + tooltip: Strings.reportTitle + }, { + handler: 'updateGeofences', + reference: 'showGeofencesButton', + glyph: 'xf21d@FontAwesome', + pressed: true, + stateId: 'show-geofences-button', + tooltip: Strings.sharedGeofences + }, { + handler: 'showLiveRoutes', + reference: 'showLiveRoutes', + glyph: 'xf1b0@FontAwesome', + stateId: 'show-live-routes-button', + tooltip: Strings.mapLiveRoutes + }, { + reference: 'deviceFollowButton', + glyph: 'xf05b@FontAwesome', + tooltip: Strings.deviceFollow, + stateId: 'device-follow-button', + toggleHandler: 'onFollowClick' + }, { + id: 'soundButton', + glyph: 'xf0a2@FontAwesome', + tooltip: Strings.sharedSound, + stateId: 'sound-button' + }, { + xtype: 'settingsMenu', + enableToggle: false + }] + }, + + getMarkersSource: function () { + return this.markersSource; + }, + + getAccuracySource: function () { + return this.accuracySource; + }, + + getRouteSource: function () { + return this.routeSource; + }, + + getGeofencesSource: function () { + return this.geofencesSource; + }, + + getLiveRouteSource: function () { + return this.liveRouteSource; + }, + + getLiveRouteLayer: function () { + return this.liveRouteLayer; + }, + + initMap: function () { + this.callParent(); + + this.geofencesSource = new ol.source.Vector({}); + this.map.addLayer(new ol.layer.Vector({ + name: 'geofencesLayer', + source: this.geofencesSource + })); + + this.liveRouteSource = new ol.source.Vector({}); + this.liveRouteLayer = new ol.layer.Vector({ + source: this.liveRouteSource, + visible: false + }); + this.map.addLayer(this.liveRouteLayer); + + this.routeSource = new ol.source.Vector({}); + this.map.addLayer(new ol.layer.Vector({ + source: this.routeSource + })); + + this.accuracySource = new ol.source.Vector({}); + this.map.addLayer(new ol.layer.Vector({ + name: 'accuracyLayer', + source: this.accuracySource + })); + + this.markersSource = new ol.source.Vector({}); + this.map.addLayer(new ol.layer.Vector({ + source: this.markersSource + })); + } +}); diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js new file mode 100644 index 00000000..8a5e81c6 --- /dev/null +++ b/web/app/view/map/MapController.js @@ -0,0 +1,89 @@ +/* + * Copyright 2015 - 2017 Anton Tananaev (anton@traccar.org) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +Ext.define('Traccar.view.map.MapController', { + extend: 'Traccar.view.map.MapMarkerController', + alias: 'controller.map', + + requires: [ + 'Traccar.GeofenceConverter' + ], + + config: { + listen: { + controller: { + '*': { + mapstaterequest: 'getMapState', + zoomtoalldevices: 'zoomToAllDevices' + } + }, + store: { + '#Geofences': { + load: 'updateGeofences', + add: 'updateGeofences', + update: 'updateGeofences', + remove: 'updateGeofences' + } + } + } + }, + + init: function () { + this.callParent(); + this.lookupReference('showReportsButton').setVisible(Traccar.app.isMobile()); + }, + + showReports: function () { + Traccar.app.showReports(true); + }, + + onFollowClick: function (button, pressed) { + if (pressed && this.selectedMarker) { + this.getView().getMapView().setCenter(this.selectedMarker.getGeometry().getCoordinates()); + } + }, + + showLiveRoutes: function (button) { + this.getView().getLiveRouteLayer().setVisible(button.pressed); + }, + + 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); + }, + + updateGeofences: function () { + this.getView().getGeofencesSource().clear(); + if (this.lookupReference('showGeofencesButton').pressed) { + Ext.getStore('Geofences').each(function (geofence) { + var feature = new ol.Feature(Traccar.GeofenceConverter + .wktToGeometry(this.getView().getMapView(), geofence.get('area'))); + feature.setStyle(this.getAreaStyle(geofence.get('name'), + geofence.get('attributes') ? geofence.get('attributes').color : null)); + this.getView().getGeofencesSource().addFeature(feature); + return true; + }, this); + } + }, + + zoomToAllDevices: function () { + this.zoomToAllPositions(Ext.getStore('LatestPositions').getData().items); + } +}); diff --git a/web/app/view/map/MapMarkerController.js b/web/app/view/map/MapMarkerController.js new file mode 100644 index 00000000..9dcb356c --- /dev/null +++ b/web/app/view/map/MapMarkerController.js @@ -0,0 +1,565 @@ +/* + * Copyright 2015 - 2017 Anton Tananaev (anton@traccar.org) + * Copyright 2016 - 2017 Andrey Kunitsyn (andrey@traccar.org) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +Ext.define('Traccar.view.map.MapMarkerController', { + extend: 'Ext.app.ViewController', + alias: 'controller.mapMarker', + + requires: [ + 'Traccar.model.Position', + 'Traccar.model.Device', + 'Traccar.DeviceImages' + ], + + config: { + listen: { + controller: { + '*': { + selectdevice: 'selectDevice', + selectreport: 'selectReport' + }, + 'devices': { + deselectfeature: 'deselectDevice' + } + }, + store: { + '#Devices': { + add: 'updateDevice', + update: 'updateDevice', + remove: 'removeDevice' + }, + '#VisibleDevices': { + add: 'updateVisibleDevices', + update: 'updateVisibleDevices', + remove: 'updateVisibleDevices', + refresh: 'filterDevices' + }, + '#LatestPositions': { + add: 'updateLatest', + update: 'updateLatest' + }, + '#ReportRoute': { + add: 'addReportMarkers', + load: 'loadReport', + clear: 'clearReport' + } + }, + component: { + '#': { + selectfeature: 'selectFeature', + deselectfeature: 'deselectFeature' + } + } + } + }, + + init: function () { + this.latestMarkers = {}; + this.reportMarkers = {}; + this.accuracyCircles = {}; + this.liveRoutes = {}; + this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10); + }, + + getAreaStyle: function (label, color) { + var fillColor, strokeColor, styleConfig; + if (color) { + fillColor = ol.color.asArray(color); + strokeColor = color; + } else { + fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor); + strokeColor = Traccar.Style.mapGeofenceColor; + } + fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity; + styleConfig = { + fill: new ol.style.Fill({ + color: fillColor + }), + stroke: new ol.style.Stroke({ + color: strokeColor, + width: Traccar.Style.mapGeofenceWidth + }) + }; + if (label) { + styleConfig.text = new ol.style.Text({ + text: label, + fill: new ol.style.Fill({ + color: Traccar.Style.mapGeofenceTextColor + }), + stroke: new ol.style.Stroke({ + color: Traccar.Style.mapTextStrokeColor, + width: Traccar.Style.mapTextStrokeWidth + }), + font: Traccar.Style.mapTextFont + }); + } + return new ol.style.Style(styleConfig); + }, + + getDeviceColor: function (device) { + switch (device.get('status')) { + case 'online': + return Traccar.Style.mapColorOnline; + case 'offline': + return Traccar.Style.mapColorOffline; + default: + return Traccar.Style.mapColorUnknown; + } + }, + + updateDevice: function (store, data) { + var i, device, deviceId, marker, style; + + 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]; + style = marker.getStyle(); + if (style.getImage().fill !== this.getDeviceColor(device) || + style.getImage().category !== device.get('category')) { + this.updateDeviceMarker(style, this.getDeviceColor(device), device.get('category')); + marker.changed(); + } + if (style.getText().getText() !== device.get('name')) { + style.getText().setText(device.get('name')); + marker.changed(); + } + } + } + }, + + removeDevice: function (store, data) { + var i, deviceId; + if (!Ext.isArray(data)) { + data = [data]; + } + for (i = 0; i < data.length; i++) { + deviceId = data[i].get('id'); + if (this.latestMarkers[deviceId]) { + this.getView().getMarkersSource().removeFeature(this.latestMarkers[deviceId]); + delete this.latestMarkers[deviceId]; + } + if (this.accuracyCircles[deviceId]) { + this.getView().getAccuracySource().removeFeature(this.accuracyCircles[deviceId]); + delete this.accuracyCircles[deviceId]; + } + if (this.liveRoutes[deviceId]) { + this.getView().getLiveRouteSource().removeFeature(this.liveRoutes[deviceId]); + delete this.liveRoutes[deviceId]; + } + } + }, + + updateLatest: function (store, data) { + var i, position, device; + + if (!Ext.isArray(data)) { + data = [data]; + } + + for (i = 0; i < data.length; i++) { + position = data[i]; + device = Ext.getStore('Devices').getById(position.get('deviceId')); + + if (device) { + this.updateAccuracy(position, device); + this.updateLatestMarker(position, device); + this.updateLiveRoute(position, device); + } + } + }, + + updateAccuracy: function (position, device) { + var center, radius, feature, mapView, projection, pointResolution; + mapView = this.getView().getMapView(); + feature = this.accuracyCircles[position.get('deviceId')]; + + if (position.get('accuracy')) { + projection = mapView.getProjection(); + center = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]); + pointResolution = ol.proj.getPointResolution(projection, mapView.getResolution(), center); + radius = (position.get('accuracy') / ol.proj.METERS_PER_UNIT.m) * mapView.getResolution() / pointResolution; + + if (feature) { + feature.getGeometry().setCenter(center); + feature.getGeometry().setRadius(radius); + } else { + feature = new ol.Feature(new ol.geom.Circle(center, radius)); + feature.setStyle(this.getAreaStyle(null, Traccar.Style.mapAccuracyColor)); + feature.setId(position.get('deviceId')); + this.accuracyCircles[position.get('deviceId')] = feature; + if (this.isDeviceVisible(device)) { + this.getView().getAccuracySource().addFeature(feature); + } + } + } else { + if (feature && this.getView().getAccuracySource().getFeatureById(feature.getId())) { + this.getView().getAccuracySource().removeFeature(feature); + } + delete this.accuracyCircles[position.get('deviceId')]; + } + }, + + updateLatestMarker: function (position, device) { + var geometry, deviceId, marker, style; + geometry = new ol.geom.Point(ol.proj.fromLonLat([ + position.get('longitude'), + position.get('latitude') + ])); + deviceId = position.get('deviceId'); + if (deviceId in this.latestMarkers) { + marker = this.latestMarkers[deviceId]; + style = marker.getStyle(); + if (style.getImage().angle !== position.get('course')) { + this.rotateMarker(style, position.get('course')); + } + marker.setGeometry(geometry); + } else { + marker = new ol.Feature(geometry); + marker.set('record', device); + + style = this.getLatestMarker(this.getDeviceColor(device), + position.get('course'), + device.get('category')); + style.getText().setText(device.get('name')); + marker.setStyle(style); + marker.setId(device.get('id')); + this.latestMarkers[deviceId] = marker; + if (this.isDeviceVisible(device)) { + this.getView().getMarkersSource().addFeature(marker); + } + } + + if (marker === this.selectedMarker && this.lookupReference('deviceFollowButton').pressed) { + this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); + } + }, + + updateLiveRoute: function (position, device) { + var deviceId, liveLine, liveCoordinates, lastLiveCoordinates, newCoordinates; + deviceId = position.get('deviceId'); + if (deviceId in this.liveRoutes) { + liveCoordinates = this.liveRoutes[deviceId].getGeometry().getCoordinates(); + lastLiveCoordinates = liveCoordinates[liveCoordinates.length - 1]; + newCoordinates = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]); + if (lastLiveCoordinates[0] === newCoordinates[0] && + lastLiveCoordinates[1] === newCoordinates[1]) { + return; + } + if (liveCoordinates.length >= this.liveRouteLength) { + liveCoordinates.shift(); + } + liveCoordinates.push(newCoordinates); + this.liveRoutes[deviceId].getGeometry().setCoordinates(liveCoordinates); + } else { + liveLine = new ol.Feature({ + geometry: new ol.geom.LineString([ + ol.proj.fromLonLat([ + position.get('longitude'), + position.get('latitude') + ]) + ]) + }); + liveLine.setStyle(this.getRouteStyle(deviceId)); + liveLine.setId(position.get('deviceId')); + this.liveRoutes[deviceId] = liveLine; + if (this.isDeviceVisible(device)) { + this.getView().getMarkersSource().addFeature(liveLine); + } + } + }, + + loadReport: function (store, data) { + var i, position, point; + + this.addReportMarkers(store, data); + + this.reportRoute = []; + for (i = 0; i < data.length; i++) { + position = data[i]; + point = ol.proj.fromLonLat([ + position.get('longitude'), + position.get('latitude') + ]); + 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]); + } + this.reportRoute[this.reportRoute.length - 1].getGeometry().appendCoordinate(point); + } + }, + + addReportMarker: function (position) { + var geometry, marker, style, 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); + style = this.getReportMarker(position.get('deviceId'), position.get('course')); + marker.setStyle(style); + this.reportMarkers[position.get('id')] = marker; + this.getView().getMarkersSource().addFeature(marker); + }, + + addReportMarkers: function (store, data) { + var i; + this.clearReport(); + for (i = 0; i < data.length; i++) { + if (store.showMarkers) { + this.addReportMarker(data[i]); + } + } + this.zoomToAllPositions(data); + }, + + clearReport: function () { + 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().getMarkersSource().removeFeature(this.reportMarkers[key]); + } + } + this.reportMarkers = {}; + } + + if (this.selectedMarker && this.selectedMarker.get('record') instanceof Traccar.model.Position) { + this.selectedMarker = null; + } + }, + + getRouteStyle: function (deviceId) { + return new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: Traccar.app.getReportColor(deviceId), + width: Traccar.Style.mapRouteWidth + }) + }); + }, + + getMarkerStyle: function (zoom, color, angle, category) { + var image = Traccar.DeviceImages.getImageIcon(color, zoom, angle, category); + return new ol.style.Style({ + image: image, + 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: -image.getSize()[1] / 2 - Traccar.Style.mapTextOffset, + font : Traccar.Style.mapTextFont + }) + }); + }, + + getLatestMarker: function (color, angle, category) { + return this.getMarkerStyle(false, color, angle, category); + }, + + getReportMarker: function (deviceId, angle) { + return this.getMarkerStyle(false, Traccar.app.getReportColor(deviceId), angle, 'arrow'); + }, + + resizeMarker: function (style, zoom) { + var image, text; + image = Traccar.DeviceImages.getImageIcon(style.getImage().fill, + zoom, + style.getImage().angle, + style.getImage().category); + text = style.getText(); + text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); + style.setText(text); + style.setImage(image); + }, + + rotateMarker: function (style, angle) { + style.setImage(Traccar.DeviceImages.getImageIcon(style.getImage().fill, + style.getImage().zoom, + angle, + style.getImage().category)); + }, + + updateDeviceMarker: function (style, color, category) { + var image, text; + image = Traccar.DeviceImages.getImageIcon(color, + style.getImage().zoom, + style.getImage().angle, + category); + text = style.getText(); + text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); + style.setText(text); + style.setImage(image); + }, + + selectMarker: function (marker, center) { + if (this.selectedMarker) { + if (!Ext.getStore('ReportRoute').showMarkers && + this.selectedMarker.get('record') instanceof Traccar.model.Position) { + this.getView().getMarkersSource().removeFeature(this.selectedMarker); + delete this.reportMarkers[this.selectedMarker.get('record').get('id')]; + } else { + this.resizeMarker(this.selectedMarker.getStyle(), false); + this.selectedMarker.getStyle().setZIndex(0); + this.selectedMarker.changed(); + } + } + + if (marker) { + this.resizeMarker(marker.getStyle(), true); + marker.getStyle().setZIndex(1); + marker.changed(); + 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) { + if (position instanceof Traccar.model.Position) { + if (!Ext.getStore('ReportRoute').showMarkers) { + this.addReportMarker(position); + } + 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); + } + } + }, + + deselectFeature: function () { + this.deselectDevice(); + this.fireEvent('deselectfeature'); + }, + + deselectDevice: function () { + this.selectMarker(null, false); + }, + + zoomToAllPositions: function (data) { + var i, point, minx, miny, maxx, maxy; + for (i = 0; i < data.length; i++) { + point = ol.proj.fromLonLat([ + data[i].get('longitude'), + data[i].get('latitude') + ]); + if (i === 0) { + minx = maxx = point[0]; + miny = maxy = point[1]; + } else { + minx = Math.min(point[0], minx); + miny = Math.min(point[1], miny); + maxx = Math.max(point[0], maxx); + maxy = Math.max(point[1], maxy); + } + } + if (minx !== maxx || miny !== maxy) { + this.getView().getMapView().fit([minx, miny, maxx, maxy]); + } else if (point) { + this.getView().getMapView().fit(new ol.geom.Point(point)); + } + }, + + updateVisibleDevices: function (store, data) { + var i, device; + + if (!Ext.isArray(data)) { + data = [data]; + } + + for (i = 0; i < data.length; i++) { + device = data[i]; + if (device.get('id') in this.latestMarkers) { + this.updateDeviceVisibility(device); + } + } + }, + + isDeviceVisible: function (device) { + return Ext.getStore('VisibleDevices').contains(device); + }, + + updateDeviceVisibility: function (device) { + var deviceId, accuracy, liveLine, marker; + deviceId = device.get('id'); + marker = this.latestMarkers[deviceId]; + accuracy = this.accuracyCircles[deviceId]; + liveLine = this.liveRoutes[deviceId]; + if (this.isDeviceVisible(device)) { + if (marker && !this.getView().getMarkersSource().getFeatureById(marker.getId())) { + this.getView().getMarkersSource().addFeature(marker); + } + if (accuracy && !this.getView().getAccuracySource().getFeatureById(accuracy.getId())) { + this.getView().getAccuracySource().addFeature(accuracy); + } + if (liveLine && !this.getView().getLiveRouteSource().getFeatureById(liveLine.getId())) { + this.getView().getLiveRouteSource().addFeature(liveLine); + } + } else { + if (marker && this.getView().getMarkersSource().getFeatureById(marker.getId())) { + this.getView().getMarkersSource().removeFeature(marker); + } + if (accuracy && this.getView().getAccuracySource().getFeatureById(accuracy.getId())) { + this.getView().getAccuracySource().removeFeature(accuracy); + } + if (liveLine && this.getView().getLiveRouteSource().getFeatureById(liveLine.getId())) { + this.getView().getLiveRouteSource().removeFeature(liveLine); + } + } + }, + + filterDevices: function (store) { + Ext.getStore('Devices').each(this.updateDeviceVisibility, this, false); + } +}); -- cgit v1.2.3