Implement automatic device following

3 files changed, 15 insertions, 0 deletions

diff --git a/web/app/view/Devices.js b/web/app/view/Devices.js
index 128cd3be1..21bea6980 100644
--- a/web/app/view/Devices.js
+++ b/web/app/view/Devices.js
@@ -42,6 +42,12 @@ Ext.define('Traccar.view.Devices', {
         }, {
             xtype: 'tbfill'
         }, {
+            id:'deviceFollowButton',
+            glyph: 'xf05b@FontAwesome',
+            tooltip: Strings.deviceFollow,
+            tooltipType: 'title',
+            enableToggle: true
+        }, {
             xtype: 'settingsMenu'
         }]
     },
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index a3412b796..e4ce53b57 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -97,6 +97,10 @@ Ext.define('Traccar.view.MapController', {
         }
     },
 
+    followSelected: function () {
+        return Ext.getCmp('deviceFollowButton') && Ext.getCmp('deviceFollowButton').pressed;
+    },
+
     updateLatest: function (store, data) {
         var i, position, geometry, device, deviceId, marker, style;
 
@@ -129,6 +133,10 @@ Ext.define('Traccar.view.MapController', {
             }
 
             marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180);
+
+            if (marker === this.selectedMarker && this.followSelected()) {
+                this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
+            }
         }
     },
 
diff --git a/web/l10n/en.json b/web/l10n/en.json
index b18c85afd..d70e97a07 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -33,6 +33,7 @@
     "deviceIdentifier": "Identifier",
     "deviceLastUpdate": "Last Update",
     "deviceCommand": "Command",
+    "deviceFollow": "Follow",
     "settingsTitle": "Settings",
     "settingsUser": "Account",
     "settingsServer": "Server",