Merge pull request #308 from Abyss777/live_route

Implement live routes

2 files changed, 95 insertions, 29 deletions

diff --git a/web/app/view/Map.js b/web/app/view/Map.js
index 2cbd1714..a19ac7d5 100644
--- a/web/app/view/Map.js
+++ b/web/app/view/Map.js
@@ -43,6 +43,14 @@ Ext.define('Traccar.view.Map', {
         return this.geofencesSource;
     },
 
+    getLiveRouteSource: function () {
+        return this.liveRouteSource;
+    },
+
+    getLiveRouteLayer: function () {
+        return this.liveRouteLayer;
+    },
+
     initMap: function () {
         this.callParent();
 
@@ -51,6 +59,13 @@ Ext.define('Traccar.view.Map', {
             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.latestSource = new ol.source.Vector({});
         this.map.addLayer(new ol.layer.Vector({
             source: this.latestSource
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index c2477860..050adce1 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com)
+ * Copyright 2015 - 2016 Anton Tananaev (anton.tananaev@gmail.com)
  *
  * 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
@@ -65,18 +65,29 @@ Ext.define('Traccar.view.MapController', {
     init: function () {
         this.latestMarkers = {};
         this.reportMarkers = {};
+        this.liveRoutes = {};
+        this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10);
         this.getView().header = {
             xtype: 'header',
             title: Strings.mapTitle,
-            items: [{
+            defaults: {
                 xtype: 'button',
+                tooltipType: 'title',
+                margin: Traccar.Style.headerButtonsMargin
+            },
+            items: [{
                 handler: 'showGeofences',
                 reference: 'showGeofencesButton',
                 glyph: 'xf21d@FontAwesome',
                 enableToggle: true,
                 pressed: true,
-                tooltip: Strings.sharedGeofences,
-                tooltipType: 'title'
+                tooltip: Strings.sharedGeofences
+            }, {
+                handler: 'showLiveRoutes',
+                reference: 'showLiveRoutes',
+                glyph: 'xf1b0@FontAwesome',
+                enableToggle: true,
+                tooltip: Strings.mapLiveRoutes
             }]
         };
     },
@@ -129,8 +140,12 @@ Ext.define('Traccar.view.MapController', {
         return Ext.getCmp('deviceFollowButton') && Ext.getCmp('deviceFollowButton').pressed;
     },
 
+    showLiveRoutes: function (button) {
+        this.getView().getLiveRouteLayer().setVisible(button.pressed);
+    },
+
     updateLatest: function (store, data) {
-        var i, position, geometry, device, deviceId, marker, style;
+        var i, position, device;
 
         if (!Ext.isArray(data)) {
             data = [data];
@@ -138,35 +153,71 @@ Ext.define('Traccar.view.MapController', {
 
         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);
+            device = Ext.getStore('Devices').findRecord('id', position.get('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);
-                }
+                this.updateLatestMarker(position, device);
+                this.updateLiveRoute(position);
+            }
+        }
+    },
+
+    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];
+            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);
+        marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180);
 
-                if (marker === this.selectedMarker && this.followSelected()) {
-                    this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
-                }
+        if (marker === this.selectedMarker && this.followSelected()) {
+            this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
+        }
+    },
+
+    updateLiveRoute: function (position) {
+        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));
+            this.liveRoutes[deviceId] = liveLine;
+            this.getView().getLiveRouteSource().addFeature(liveLine);
         }
     },