- Enabled multiple devices for reports

- Used different colors for routes of different devices

3 files changed, 44 insertions, 19 deletions

diff --git a/web/app/Style.js b/web/app/Style.js
index ec007e674..8d1cf3c0e 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -38,7 +38,14 @@ Ext.define('Traccar.Style', {
     mapDefaultLon: -0.1275,
     mapDefaultZoom: 6,
 
-    mapRouteColor: 'rgba(21, 127, 204, 1.0)',
+    mapRouteColor: [
+        'rgba(21, 127, 204, 1.0)',
+        'rgba(109, 46, 204, 1.0)',
+        'rgba(204, 46, 162, 1.0)',
+        'rgba(204, 46, 38, 1.0)',
+        'rgba(128, 204, 46, 1.0)',
+        'rgba(46, 204, 155, 1.0)'
+    ],
     mapRouteWidth: 5,
 
     mapArrowStrokeColor: 'rgba(50, 50, 50, 1.0)',
@@ -53,7 +60,14 @@ Ext.define('Traccar.Style', {
     mapColorOnline: 'rgba(77, 250, 144, 1.0)',
     mapColorUnknown: 'rgba(250, 190, 77, 1.0)',
     mapColorOffline: 'rgba(255, 84, 104, 1.0)',
-    mapColorReport: 'rgba(21, 127, 204, 1.0)',
+    mapColorReport: [
+        'rgba(21, 127, 204, 1.0)',
+        'rgba(109, 46, 204, 1.0)',
+        'rgba(204, 46, 162, 1.0)',
+        'rgba(204, 46, 38, 1.0)',
+        'rgba(128, 204, 46, 1.0)',
+        'rgba(46, 204, 155, 1.0)'
+    ],
     mapColorOverlay: 'rgba(21, 127, 204, 0.2)',
 
     mapRadiusNormal: 9,
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index ab7461cf0..57278ce07 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -148,13 +148,15 @@ Ext.define('Traccar.view.MapController', {
         this.clearReport(store);
 
         if (data.length > 0) {
-            this.reportRoute = new ol.Feature({
-                geometry: new ol.geom.LineString([])
-            });
-            this.reportRoute.setStyle(this.getRouteStyle());
-            this.getView().getRouteSource().addFeature(this.reportRoute);
-
+            this.reportRoute = [];
             for (i = 0; i < data.length; i++) {
+                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]);
+                }
                 position = data[i];
 
                 point = ol.proj.fromLonLat([
@@ -168,25 +170,27 @@ Ext.define('Traccar.view.MapController', {
                 this.reportMarkers[position.get('id')] = marker;
                 this.getView().getReportSource().addFeature(marker);
 
-                style = this.getReportMarker();
+                style = this.getReportMarker(position.get('deviceId'));
                 style.getImage().setRotation(position.get('course') * Math.PI / 180);
                 /*style.getText().setText(
                     Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat24));*/
 
                 marker.setStyle(style);
 
-                this.reportRoute.getGeometry().appendCoordinate(point);
+                this.reportRoute[this.reportRoute.length - 1].getGeometry().appendCoordinate(point);
             }
 
-            this.getView().getMapView().fit(this.reportRoute.getGeometry(), this.getView().getMap().getSize());
+            this.getView().getMapView().fit(this.reportRoute[0].getGeometry(), this.getView().getMap().getSize());
         }
     },
 
     clearReport: function (store) {
-        var key;
+        var key, i;
 
         if (this.reportRoute) {
-            this.getView().getRouteSource().removeFeature(this.reportRoute);
+            for (i = 0; i < this.reportRoute.length; i++) {
+                this.getView().getRouteSource().removeFeature(this.reportRoute[i]);
+            }
             this.reportRoute = null;
         }
 
@@ -200,10 +204,14 @@ Ext.define('Traccar.view.MapController', {
         }
     },
 
-    getRouteStyle: function () {
+    getRouteStyle: function (deviceId) {
+        var index = 0;
+        if (deviceId !== undefined) {
+            index = deviceId % Traccar.Style.mapRouteColor.length;
+        }
         return new ol.style.Style({
             stroke: new ol.style.Stroke({
-                color: Traccar.Style.mapRouteColor,
+                color: Traccar.Style.mapRouteColor[index],
                 width: Traccar.Style.mapRouteWidth
             })
         });
@@ -241,9 +249,13 @@ Ext.define('Traccar.view.MapController', {
             Traccar.Style.mapRadiusNormal, color);
     },
 
-    getReportMarker: function () {
+    getReportMarker: function (deviceId) {
+        var index = 0;
+        if (deviceId !== undefined) {
+            index = deviceId % Traccar.Style.mapRouteColor.length;
+        }
         return this.getMarkerStyle(
-            Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport);
+            Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport[index]);
     },
 
     resizeMarker: function (style, radius) {
diff --git a/web/app/view/Report.js b/web/app/view/Report.js
index 7bcfdcb52..9c1d635f7 100644
--- a/web/app/view/Report.js
+++ b/web/app/view/Report.js
@@ -44,12 +44,11 @@ Ext.define('Traccar.view.Report', {
         xtype: 'tbtext',
         html: Strings.reportDevice
     }, {
-        xtype: 'combobox',
+        xtype: 'tagfield',
         reference: 'deviceField',
         store: 'Devices',
         valueField: 'id',
         displayField: 'name',
-        typeAhead: true,
         queryMode: 'local'
     }, '-', {
         xtype: 'tbtext',