2 files changed, 60 insertions, 20 deletions

diff --git a/web/app/view/MapMarkerController.js b/web/app/view/MapMarkerController.js
index 97e75925..5fa9f4ca 100644
--- a/web/app/view/MapMarkerController.js
+++ b/web/app/view/MapMarkerController.js
@@ -202,30 +202,26 @@ Ext.define('Traccar.view.MapMarkerController', {
 
         this.addReportMarkers(store, data);
 
-        if (data.length > 0) {
-            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);
+        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.getView().getMapView().fit(this.reportRoute[0].getGeometry(), this.getView().getMap().getSize());
+            this.reportRoute[this.reportRoute.length - 1].getGeometry().appendCoordinate(point);
         }
     },
 
     addReportMarkers: function (store, data) {
-        var i, position, point, geometry, marker, style;
+        var i, position, point, geometry, marker, style, minx, miny, maxx, maxy;
         this.clearReport();
         for (i = 0; i < data.length; i++) {
             position = data[i];
@@ -233,6 +229,15 @@ Ext.define('Traccar.view.MapMarkerController', {
                 position.get('longitude'),
                 position.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);
+            }
             geometry = new ol.geom.Point(point);
             marker = new ol.Feature(geometry);
             marker.set('record', position);
@@ -243,6 +248,11 @@ Ext.define('Traccar.view.MapMarkerController', {
             this.reportMarkers[position.get('id')] = marker;
             this.getView().getReportSource().addFeature(marker);
         }
+        if (minx !== maxx || miny !== maxy) {
+            this.getView().getMapView().fit([minx, miny, maxx, maxy], this.getView().getMap().getSize());
+        } else if (geometry) {
+            this.getView().getMapView().fit(geometry, this.getView().getMap().getSize());
+        }
     },
 
     clearReport: function () {
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index f8a01bc6..1f3f3a2a 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -32,7 +32,8 @@ Ext.define('Traccar.view.ReportController', {
         listen: {
             controller: {
                 '*': {
-                    selectdevice: 'selectDevice'
+                    selectdevice: 'selectDevice',
+                    showsingleevent: 'showSingleEvent'
                 },
                 'map': {
                     selectreport: 'selectReport'
@@ -40,6 +41,7 @@ Ext.define('Traccar.view.ReportController', {
             },
             store: {
                 '#ReportEvents': {
+                    add: 'loadEvents',
                     load: 'loadEvents'
                 }
             }
@@ -208,15 +210,43 @@ Ext.define('Traccar.view.ReportController', {
                 params: {
                     id: positionIds
                 },
+                scope: this,
                 callback: function (records, operation, success) {
                     if (success) {
                         Ext.getStore('ReportRoute').add(records);
+                        if (records.length === 1) {
+                            this.fireEvent('selectreport', records[0], false);
+                        }
                     }
                 }
             });
         }
     },
 
+    showSingleEvent: function (eventId) {
+        this.lookupReference('reportTypeField').setValue('events');
+        Ext.getStore('Events').load({
+            id: eventId,
+            scope: this,
+            callback: function (records, operation, success) {
+                if (success) {
+                    Ext.getStore('ReportEvents').add(records);
+                    if (records.length > 0) {
+                        if (!records[0].get('positionId')) {
+                            if (Traccar.app.isMobile()) {
+                                Traccar.app.showReports(true);
+                            } else {
+                                this.getView().expand();
+                            }
+                        }
+                        this.getView().getSelectionModel().select([records[0]], false, true);
+                        this.getView().getView().focusRow(records[0]);
+                    }
+                }
+            }
+        });
+    },
+
     downloadFile: function (requestUrl, requestParams) {
         Ext.Ajax.request({
             url: requestUrl,