Merge pull request #377 from Abyss777/selecting_improvement

Bring markers to front and deselect on empty space click

6 files changed, 52 insertions, 25 deletions

diff --git a/web/app/view/BaseMap.js b/web/app/view/BaseMap.js
index f0d51d52..f329cf28 100644
--- a/web/app/view/BaseMap.js
+++ b/web/app/view/BaseMap.js
@@ -120,9 +120,17 @@ Ext.define('Traccar.view.BaseMap', {
         });
 
         this.map.on('click', function (e) {
-            this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
-                this.fireEvent('selectfeature', feature);
-            }.bind(this));
+            if (this.map.hasFeatureAtPixel(e.pixel, {
+                layerFilter: function (layer) {
+                    return layer.get('name') !== 'geofencesLayer';
+                }
+            })) {
+                this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
+                    this.fireEvent('selectfeature', feature);
+                }.bind(this));
+            } else {
+                this.fireEvent('deselectfeature');
+            }
         }, this);
     },
 
diff --git a/web/app/view/DevicesController.js b/web/app/view/DevicesController.js
index f09950b3..20b90b3b 100644
--- a/web/app/view/DevicesController.js
+++ b/web/app/view/DevicesController.js
@@ -32,7 +32,8 @@ Ext.define('Traccar.view.DevicesController', {
         listen: {
             controller: {
                 '*': {
-                    selectreport: 'selectReport'
+                    selectreport: 'selectReport',
+                    deselectfeature: 'deselectFeature'
                 },
                 'map': {
                     selectdevice: 'selectDevice'
@@ -143,11 +144,15 @@ Ext.define('Traccar.view.DevicesController', {
 
     selectReport: function (position) {
         if (position !== undefined) {
-            this.getView().getSelectionModel().deselectAll();
+            this.deselectFeature();
         }
     },
 
     onUpdateDevice: function (store, data) {
         this.updateButtons(this.getView().getSelectionModel());
+    },
+
+    deselectFeature: function () {
+        this.getView().getSelectionModel().deselectAll();
     }
 });
diff --git a/web/app/view/Map.js b/web/app/view/Map.js
index 2cc37ecb..7f109fdf 100644
--- a/web/app/view/Map.js
+++ b/web/app/view/Map.js
@@ -85,18 +85,14 @@ Ext.define('Traccar.view.Map', {
         }]
     },
 
-    getLatestSource: function () {
-        return this.latestSource;
+    getMarkersSource: function () {
+        return this.markersSource;
     },
 
     getRouteSource: function () {
         return this.routeSource;
     },
 
-    getReportSource: function () {
-        return this.reportSource;
-    },
-
     getGeofencesSource: function () {
         return this.geofencesSource;
     },
@@ -114,6 +110,7 @@ Ext.define('Traccar.view.Map', {
 
         this.geofencesSource = new ol.source.Vector({});
         this.map.addLayer(new ol.layer.Vector({
+            name: 'geofencesLayer',
             source: this.geofencesSource
         }));
 
@@ -124,19 +121,14 @@ Ext.define('Traccar.view.Map', {
         });
         this.map.addLayer(this.liveRouteLayer);
 
-        this.latestSource = new ol.source.Vector({});
-        this.map.addLayer(new ol.layer.Vector({
-            source: this.latestSource
-        }));
-
         this.routeSource = new ol.source.Vector({});
         this.map.addLayer(new ol.layer.Vector({
             source: this.routeSource
         }));
 
-        this.reportSource = new ol.source.Vector({});
+        this.markersSource = new ol.source.Vector({});
         this.map.addLayer(new ol.layer.Vector({
-            source: this.reportSource
+            source: this.markersSource
         }));
     }
 });
diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js
index f8f0e43f..907451b6 100644
--- a/web/app/view/MapMarkerController.js
+++ b/web/app/view/MapMarkerController.js
@@ -52,7 +52,8 @@ Ext.define('Traccar.view.MapMarkerController', {
             },
             component: {
                 '#': {
-                    selectfeature: 'selectFeature'
+                    selectfeature: 'selectFeature',
+                    deselectfeature: 'deselectFeature'
                 }
             }
         }
@@ -111,7 +112,7 @@ Ext.define('Traccar.view.MapMarkerController', {
         for (i = 0; i < data.length; i++) {
             deviceId = data[i].get('id');
             if (this.latestMarkers[deviceId]) {
-                this.getView().getLatestSource().removeFeature(this.latestMarkers[deviceId]);
+                this.getView().getMarkersSource().removeFeature(this.latestMarkers[deviceId]);
             }
         }
     },
@@ -158,7 +159,7 @@ Ext.define('Traccar.view.MapMarkerController', {
             style.getText().setText(device.get('name'));
             marker.setStyle(style);
             this.latestMarkers[deviceId] = marker;
-            this.getView().getLatestSource().addFeature(marker);
+            this.getView().getMarkersSource().addFeature(marker);
 
         }
 
@@ -247,7 +248,7 @@ Ext.define('Traccar.view.MapMarkerController', {
                 Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat24));*/
             marker.setStyle(style);
             this.reportMarkers[position.get('id')] = marker;
-            this.getView().getReportSource().addFeature(marker);
+            this.getView().getMarkersSource().addFeature(marker);
         }
         if (minx !== maxx || miny !== maxy) {
             this.getView().getMapView().fit([minx, miny, maxx, maxy], this.getView().getMap().getSize());
@@ -269,7 +270,7 @@ Ext.define('Traccar.view.MapMarkerController', {
         if (this.reportMarkers) {
             for (key in this.reportMarkers) {
                 if (this.reportMarkers.hasOwnProperty(key)) {
-                    this.getView().getReportSource().removeFeature(this.reportMarkers[key]);
+                    this.getView().getMarkersSource().removeFeature(this.reportMarkers[key]);
                 }
             }
             this.reportMarkers = {};
@@ -346,11 +347,13 @@ Ext.define('Traccar.view.MapMarkerController', {
     selectMarker: function (marker, center) {
         if (this.selectedMarker) {
             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());
@@ -379,5 +382,10 @@ Ext.define('Traccar.view.MapMarkerController', {
                 this.fireEvent('selectreport', record, false);
             }
         }
+    },
+
+    deselectFeature: function () {
+        this.selectMarker(null, false);
+        this.fireEvent('deselectfeature');
     }
 });
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 383b38bf..0064c5b8 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -33,7 +33,8 @@ Ext.define('Traccar.view.ReportController', {
             controller: {
                 '*': {
                     selectdevice: 'selectDevice',
-                    showsingleevent: 'showSingleEvent'
+                    showsingleevent: 'showSingleEvent',
+                    deselectfeature: 'deselectFeature'
                 },
                 'map': {
                     selectreport: 'selectReport'
@@ -195,6 +196,12 @@ Ext.define('Traccar.view.ReportController', {
         }
     },
 
+    deselectFeature: function () {
+        if (this.lookupReference('reportTypeField').getValue() !== 'trips') {
+            this.getGrid().getSelectionModel().deselectAll();
+        }
+    },
+
     selectTrip: function (trip) {
         var from, to;
         from = new Date(trip.get('startTime'));
diff --git a/web/app/view/StateController.js b/web/app/view/StateController.js
index 38356979..bef54d27 100644
--- a/web/app/view/StateController.js
+++ b/web/app/view/StateController.js
@@ -34,7 +34,8 @@ Ext.define('Traccar.view.StateController', {
                 '*': {
                     selectdevice: 'selectDevice',
                     selectreport: 'selectReport',
-                    updatealiases: 'updateAliases'
+                    updatealiases: 'updateAliases',
+                    deselectfeature: 'deselectFeature'
                 }
             },
             store: {
@@ -157,6 +158,12 @@ Ext.define('Traccar.view.StateController', {
         }
     },
 
+    deselectFeature: function () {
+        this.deviceId = null;
+        this.position = null;
+        Ext.getStore('Attributes').removeAll();
+    },
+
     clearReport: function (store) {
         this.position = null;
         Ext.getStore('Attributes').removeAll();