From 3cb5cca4b8db07fa477b23c711916307ff7db427 Mon Sep 17 00:00:00 2001
From: Abyss777 <abyss@fox5.ru>
Date: Thu, 25 Aug 2016 16:18:12 +0500
Subject: - Enabled multiple devices for reports

- Used different colors for routes of different devices
---
 web/app/view/MapController.js | 42 +++++++++++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 15 deletions(-)

(limited to 'web/app/view/MapController.js')

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) {
-- 
cgit v1.2.3


From 557c4214ae6ea8663f3f85cfa5652411aaa1ea09 Mon Sep 17 00:00:00 2001
From: Abyss777 <abyss@fox5.ru>
Date: Thu, 25 Aug 2016 17:32:52 +0500
Subject: Removed array duplication

---
 web/app/Style.js              | 8 --------
 web/app/view/MapController.js | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)

(limited to 'web/app/view/MapController.js')

diff --git a/web/app/Style.js b/web/app/Style.js
index 8d1cf3c0e..2d6bfa5c3 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -60,14 +60,6 @@ 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)',
-        '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 57278ce07..bc6a5d404 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -255,7 +255,7 @@ Ext.define('Traccar.view.MapController', {
             index = deviceId % Traccar.Style.mapRouteColor.length;
         }
         return this.getMarkerStyle(
-            Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport[index]);
+            Traccar.Style.mapRadiusNormal, Traccar.Style.mapRouteColor[index]);
     },
 
     resizeMarker: function (style, radius) {
-- 
cgit v1.2.3