Refactor map and report controllers

3 files changed, 122 insertions, 138 deletions

diff --git a/web/app/Style.js b/web/app/Style.js
index 4c7028658..7fedfc7a7 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -35,15 +35,26 @@ Ext.define('Traccar.Style', {
     mapDefaultLon: -0.1275,
     mapDefaultZoom: 6,
 
-    mapMaxZoom: 19,
-    mapSelectColor: 'rgba(0, 255, 0, 1.0)',
-    mapSelectRadius: 10,
-    mapReportColor: 'rgba(0, 0, 255, 1.0)',
-    mapReportRadius: 5,
-    mapLiveColor: 'rgba(255, 0, 0, 1.0)',
-    mapLiveRadius: 7,
-    mapStrokeColor: 'rgba(50, 50, 50, 1.0)',
+    mapRouteColor: 'rgba(21, 127, 204, 1.0)',
     mapRouteWidth: 5,
-    mapMarkerStroke: 2,
+
+    mapArrowStrokeColor: 'rgba(50, 50, 50, 1.0)',
+    mapArrowStrokeWidth: 2,
+
+    mapTextColor: 'rgba(50, 50, 50, 1.0)',
+    mapTextStrokeColor: 'rgba(255, 255, 255, 1.0)',
+    mapTextStrokeWidth: 2,
+    mapTextOffset: 10,
+    mapTextFont: 'bold 12px sans-serif',
+
+    mapColorOnline: '#4DFA90',
+    mapColorUnknown: '#FABE4D',
+    mapColorOffline: '#FF5468',
+    mapColorReport: 'rgba(21, 127, 204, 1.0)',
+
+    mapRadiusNormal: 10,
+    mapRadiusSelected: 15,
+
+    mapMaxZoom: 19,
     mapDelay: 500
 });
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 59415ff73..b087cff1c 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -22,16 +22,18 @@ Ext.define('Traccar.view.MapController', {
         listen: {
             controller: {
                 '*': {
-                    reportShow: 'reportShow',
-                    reportClear: 'reportClear',
                     selectDevice: 'selectDevice',
                     selectReport: 'selectReport'
                 }
             },
             store: {
                 '#LatestPositions': {
-                    add: 'update',
-                    update: 'update'
+                    add: 'updateLatest',
+                    update: 'updateLatest'
+                },
+                '#Positions': {
+                    load: 'loadReport',
+                    clear: 'clearReport'
                 }
             }
         }
@@ -42,11 +44,13 @@ Ext.define('Traccar.view.MapController', {
         this.reportMarkers = {};
     },
 
-    update: function (store, data) {
+    updateLatest: function (store, data) {
         var i, position, geometry, deviceId, name, marker, style;
+
         if (!Ext.isArray(data)) {
             data = [data];
         }
+
         for (i = 0; i < data.length; i++) {
             position = data[i];
             deviceId = position.get('deviceId');
@@ -56,11 +60,6 @@ Ext.define('Traccar.view.MapController', {
                 position.get('latitude')
             ]));
 
-            style = this.getLatestMarker();
-            style.getImage().setRotation(position.get('course'));
-            style.getText().setText(
-                Ext.getStore('Devices').findRecord('id', deviceId, 0, false, false, true).get('name'));
-
             if (deviceId in this.latestMarkers) {
                 marker = this.latestMarkers[deviceId];
                 marker.setGeometry(geometry);
@@ -68,51 +67,77 @@ Ext.define('Traccar.view.MapController', {
                 marker = new ol.Feature(geometry);
                 this.latestMarkers[deviceId] = marker;
                 this.getView().getVectorSource().addFeature(marker);
+
+                style = this.getLatestMarker();
+                style.getImage().setRotation(position.get('course'));
+                style.getText().setText(
+                    Ext.getStore('Devices').findRecord('id', deviceId, 0, false, false, true).get('name'));
+                marker.setStyle(style);
             }
+        }
+    },
+
+    loadReport: function (store, data) {
+        var i, position, point, points, geometry, deviceId, name, marker, style;
+
+        this.clearReport(store);
+
+        this.reportRoute = new ol.Feature({
+            geometry: new ol.geom.LineString([])
+        });
+        this.reportRoute.setStyle(this.getRouteStyle());
+        this.getView().getVectorSource().addFeature(this.reportRoute);
+
+        for (i = 0; i < data.length; i++) {
+            position = data[i];
+
+            point = ol.proj.fromLonLat([
+                position.get('longitude'),
+                position.get('latitude')
+            ]);
+            geometry = new ol.geom.Point(point);
+
+            marker = new ol.Feature(geometry);
+            this.reportMarkers[position.get('id')] = marker;
+            this.getView().getVectorSource().addFeature(marker);
 
+            style = this.getReportMarker();
+            style.getImage().setRotation(position.get('course'));
+            // style.getText().setText('2000-01-01 00:00:00'); // TODO show time
             marker.setStyle(style);
+
+            this.reportRoute.getGeometry().appendCoordinate(point);
         }
     },
 
-    getLineStyle: function () {
-        return new ol.style.Style({
-            stroke: new ol.style.Stroke({
-                color: Traccar.Style.mapStrokeColor,
-                width: Traccar.Style.mapRouteWidth
-            })
-        });
+    clearReport: function (store) {
+        var vectorSource = this.getView().getVectorSource();
+
+        if (this.reportRoute) {
+            vectorSource.removeFeature(this.reportRoute);
+            this.reportRoute = null;
+        }
+
+        if (this.reportMarkers) {
+            for (var key in this.reportMarkers) {
+                if (this.reportMarkers.hasOwnProperty(key)) {
+                    vectorSource.removeFeature(this.reportMarkers[key]);
+                }
+            }
+            this.reportMarkers = {};
+        }
     },
 
-    getLatestMarker: function () {
+    getRouteStyle: function () {
         return new ol.style.Style({
-            image: new ol.style.Arrow({
-                radius: Traccar.Style.mapLiveRadius,
-                fill: new ol.style.Fill({
-                    color: Traccar.Style.mapLiveColor
-                }),
-                stroke: new ol.style.Stroke({
-                    color: Traccar.Style.mapStrokeColor,
-                    width: Traccar.Style.mapMarkerStroke
-                })//,
-                //rotation: rotation * Math.PI / 180
-            }),
-            text: new ol.style.Text({
-                textBaseline: 'bottom',
-                //text: text,
-                fill: new ol.style.Fill({
-                    color: '#000'
-                }),
-                stroke: new ol.style.Stroke({
-                    color: '#FFF',
-                    width: 2
-                }),
-                offsetY: -12,
-                font : 'bold 12px sans-serif'
+            stroke: new ol.style.Stroke({
+                color: Traccar.Style.mapRouteColor,
+                width: Traccar.Style.mapRouteWidth
             })
         });
     },
 
-    getMarkerStyle: function (radius, color, rotation, text) {
+    getMarkerStyle: function (radius, color) {
         return new ol.style.Style({
             image: new ol.style.Arrow({
                 radius: radius,
@@ -120,113 +145,66 @@ Ext.define('Traccar.view.MapController', {
                     color: color
                 }),
                 stroke: new ol.style.Stroke({
-                    color: Traccar.Style.mapStrokeColor,
-                    width: Traccar.Style.mapMarkerStroke
-                }),
-                rotation: rotation * Math.PI / 180
+                    color: Traccar.Style.mapArrowStrokeColor,
+                    width: Traccar.Style.mapArrowStrokeWidth
+                })
             }),
             text: new ol.style.Text({
                 textBaseline: 'bottom',
-                text: text,
                 fill: new ol.style.Fill({
-                    color: '#000'
+                    color: Traccar.Style.mapTextColor
                 }),
                 stroke: new ol.style.Stroke({
-                    color: '#FFF',
-                    width: 2
+                    color: Traccar.Style.mapTextStrokeColor,
+                    width: Traccar.Style.mapTextStrokeWidth
                 }),
-                offsetY: -12,
-                font : 'bold 12px sans-serif'
+                offsetY: -radius / 2 - Traccar.Style.mapTextOffset,
+                font : Traccar.Style.mapTextFont
             })
         });
     },
 
-    reportShow: function () {
-        this.reportClear();
-
-        var vectorSource = this.getView().getVectorSource();
-
-        var data = Ext.getStore('Positions').getData();
-
-        var index;
-        var positions = [];
-        this.reportRoutePoints = {};
-
-        for (index = 0; index < data.getCount(); index++) {
-            var point = ol.proj.fromLonLat([
-                data.getAt(index).data.longitude,
-                data.getAt(index).data.latitude
-            ]);
-            positions.push(point);
-
-            var style = this.getMarkerStyle(Traccar.Style.mapReportRadius, Traccar.Style.mapReportColor, data.getAt(index).data.course);
-            var feature = new ol.Feature({
-                geometry: new ol.geom.Point(positions[index]),
-                originalStyle: style
-            });
-            feature.setStyle(style);
-            this.reportRoutePoints[data.getAt(index).get('id')] = feature;
-        }
-
-        this.reportRoute = new ol.Feature({
-            geometry: new ol.geom.LineString(positions)
-        });
-        this.reportRoute.setStyle(this.getLineStyle());
-        vectorSource.addFeature(this.reportRoute);
-
-        for (var key in this.reportRoutePoints) {
-            if (this.reportRoutePoints.hasOwnProperty(key)) {
-                vectorSource.addFeature(this.reportRoutePoints[key]);
-            }
-        }
+    getLatestMarker: function () {
+        return this.getMarkerStyle(
+            Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorUnknown);
     },
 
-    reportClear: function () {
-        var vectorSource = this.getView().getVectorSource();
-
-        if (this.reportRoute !== undefined) {
-            vectorSource.removeFeature(this.reportRoute);
-            this.reportRoute = undefined;
-        }
+    getReportMarker: function () {
+        return this.getMarkerStyle(
+            Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport);
+    },
 
-        if (this.reportRoutePoints !== undefined) {
-            for (var key in this.reportRoutePoints) {
-                if (this.reportRoutePoints.hasOwnProperty(key)) {
-                    vectorSource.removeFeature(this.reportRoutePoints[key]);
-                }
-            }
-            this.reportRoutePoints = {};
-        }
+    resizeMarker: function (style, radius) {
+        return new ol.style.Style({
+            image: new ol.style.Arrow({
+                radius: radius,
+                fill: style.getImage().getFill(),
+                stroke: style.getImage().getStroke()
+            }),
+            text: style.getText()
+        });
     },
 
-    selectPosition: function (feature) {
-        if (this.currentFeature !== undefined) {
-            this.currentFeature.setStyle(this.currentFeature.get('originalStyle'));
+    selectMarker: function (marker) {
+        if (this.selectedMarker) {
+            this.selectedMarker.setStyle(
+                this.resizeMarker(this.selectedMarker.getStyle(), Traccar.Style.mapRadiusSelected));
         }
 
-        if (feature !== undefined) {
-            var name = feature.getStyle().getText().getText();
-            feature.setStyle(this.getMarkerStyle(Traccar.Style.mapSelectRadius, Traccar.Style.mapSelectColor, 0, name));
-
-            var pan = ol.animation.pan({
-                duration: Traccar.Style.mapDelay,
-                source: this.getView().getMapView().getCenter()
-            });
-            this.getView().getMap().beforeRender(pan);
-            this.getView().getMapView().setCenter(feature.getGeometry().getCoordinates());
+        if (marker) {
+            marker.setStyle(
+                this.resizeMarker(marker.getStyle(), Traccar.Style.mapRadiusSelected));
+            this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
         }
 
-        this.currentFeature = feature;
+        this.selectedMarker = marker;
     },
 
     selectDevice: function (device) {
-        //this.selectPosition(this.liveData[device.get('id')]);
+        this.selectMarker(this.latestMarkers[device.get('id')]);
     },
 
     selectReport: function (position) {
-        if (this.reportRoutePoints[position.get('id')] !== undefined) {
-            this.selectPosition(this.reportRoutePoints[position.get('id')]);
-        }
+        this.selectMarker(this.reportMarkers[position.get('id')]);
     }
-
 });
diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js
index 2badfea63..660fe786d 100644
--- a/web/app/view/ReportController.js
+++ b/web/app/view/ReportController.js
@@ -53,17 +53,12 @@ Ext.define('Traccar.view.ReportController', {
                 deviceId: deviceId,
                 from: from.toISOString(),
                 to: to.toISOString()
-            },
-            scope: this,
-            callback: function () {
-                this.fireEvent('reportShow');
             }
         });
     },
 
     onClearClick: function () {
         Ext.getStore('Positions').removeAll();
-        this.fireEvent('reportClear');
     },
 
     onSelectionChange: function (selected) {