Start map controller refactoring

4 files changed, 127 insertions, 71 deletions

diff --git a/web/app/controller/Root.js b/web/app/controller/Root.js
index b4ab06b82..94f3234d1 100644
--- a/web/app/controller/Root.js
+++ b/web/app/controller/Root.js
@@ -85,5 +85,34 @@ Ext.define('Traccar.controller.Root', {
         } else {
             Ext.create('widget.main');
         }
+        this.asyncUpdate(true);
+    },
+
+    asyncUpdate: function (first) {
+        Ext.Ajax.request({
+            scope: this,
+            url: '/api/async',
+            params: {
+                first: first
+            },
+            callback: Traccar.app.getErrorHandler(this, function (options, success, response) {
+                var i, store, deviceStore, data;
+                if (success) {
+                    store = Ext.getStore('LatestPositions');
+                    deviceStore = Ext.getStore('Devices');
+                    data = Ext.decode(response.responseText).data;
+
+                    for (i = 0; i < data.length; i++) {
+                        var found = store.findRecord('deviceId', data[i].deviceId, 0, false, false, true);
+                        if (found) {
+                            found.set(data[i]);
+                        } else {
+                            store.add(Ext.create('Traccar.model.Position', data[i]));
+                        }
+                    }
+                    this.asyncUpdate(false);
+                }
+            })
+        });
     }
 });
diff --git a/web/app/view/Map.js b/web/app/view/Map.js
index 9a032e79f..2c73f4cc5 100644
--- a/web/app/view/Map.js
+++ b/web/app/view/Map.js
@@ -27,6 +27,18 @@ Ext.define('Traccar.view.Map', {
     title: Strings.mapTitle,
     layout: 'fit',
 
+    getMap: function () {
+        return this.map;
+    },
+
+    getMapView: function () {
+        return this.mapView;
+    },
+
+    getVectorSource: function () {
+        return this.vectorSource;
+    },
+
     listeners: {
         afterrender: function () {
             var user, server, layer, type, bingKey, vectorLayer, lat, lon, zoom;
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 7921de89f..59415ff73 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -27,65 +27,51 @@ Ext.define('Traccar.view.MapController', {
                     selectDevice: 'selectDevice',
                     selectReport: 'selectReport'
                 }
+            },
+            store: {
+                '#LatestPositions': {
+                    add: 'update',
+                    update: 'update'
+                }
             }
         }
     },
 
     init: function () {
-        this.liveData = {};
-        this.update(true);
+        this.latestMarkers = {};
+        this.reportMarkers = {};
     },
 
-    update: function (first) {
-        Ext.Ajax.request({
-            scope: this,
-            url: '/api/async',
-            params: {
-                first: first
-            },
-            success: function (response) {
-                var data = Ext.decode(response.responseText).data;
-
-                var i;
-                for (i = 0; i < data.length; i++) {
-
-                    var store = Ext.getStore('LatestPositions');
-                    var deviceStore = Ext.getStore('Devices');
-
-                    var found = store.findRecord('deviceId', data[i].deviceId, 0, false, false, true);
-                    if (found) {
-                        found.set(data[i]);
-                    } else {
-                        store.add(Ext.create('Traccar.model.Position', data[i]));
-                    }
-
-                    var geometry = new ol.geom.Point(ol.proj.fromLonLat([
-                        data[i].longitude,
-                        data[i].latitude
-                    ]));
-
-                    if (data[i].deviceId in this.liveData) {
-                        this.liveData[data[i].deviceId].setGeometry(geometry);
-                    } else {
-                        var name = deviceStore.findRecord('id', data[i].deviceId, 0, false, false, true).get('name');
-
-                        var style = this.getMarkerStyle(Traccar.Style.mapLiveRadius, Traccar.Style.mapLiveColor, data[i].course, name);
-                        var marker = new ol.Feature({
-                            geometry: geometry,
-                            originalStyle: style
-                        });
-                        marker.setStyle(style);
-                        this.getView().vectorSource.addFeature(marker);
-                        this.liveData[data[i].deviceId] = marker;
-                    }
-                }
-
-                this.update(false);
-            },
-            failure: function () {
-                // TODO: error
+    update: 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');
+
+            geometry = new ol.geom.Point(ol.proj.fromLonLat([
+                position.get('longitude'),
+                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);
+            } else {
+                marker = new ol.Feature(geometry);
+                this.latestMarkers[deviceId] = marker;
+                this.getView().getVectorSource().addFeature(marker);
             }
-        });
+
+            marker.setStyle(style);
+        }
     },
 
     getLineStyle: function () {
@@ -97,6 +83,35 @@ Ext.define('Traccar.view.MapController', {
         });
     },
 
+    getLatestMarker: 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'
+            })
+        });
+    },
+
     getMarkerStyle: function (radius, color, rotation, text) {
         return new ol.style.Style({
             image: new ol.style.Arrow({
@@ -129,7 +144,7 @@ Ext.define('Traccar.view.MapController', {
     reportShow: function () {
         this.reportClear();
 
-        var vectorSource = this.getView().vectorSource;
+        var vectorSource = this.getView().getVectorSource();
 
         var data = Ext.getStore('Positions').getData();
 
@@ -167,7 +182,7 @@ Ext.define('Traccar.view.MapController', {
     },
 
     reportClear: function () {
-        var vectorSource = this.getView().vectorSource;
+        var vectorSource = this.getView().getVectorSource();
 
         if (this.reportRoute !== undefined) {
             vectorSource.removeFeature(this.reportRoute);
@@ -195,17 +210,17 @@ Ext.define('Traccar.view.MapController', {
 
             var pan = ol.animation.pan({
                 duration: Traccar.Style.mapDelay,
-                source: this.getView().mapView.getCenter()
+                source: this.getView().getMapView().getCenter()
             });
-            this.getView().map.beforeRender(pan);
-            this.getView().mapView.setCenter(feature.getGeometry().getCoordinates());
+            this.getView().getMap().beforeRender(pan);
+            this.getView().getMapView().setCenter(feature.getGeometry().getCoordinates());
         }
 
         this.currentFeature = feature;
     },
 
     selectDevice: function (device) {
-        this.selectPosition(this.liveData[device.get('id')]);
+        //this.selectPosition(this.liveData[device.get('id')]);
     },
 
     selectReport: function (position) {
diff --git a/web/app/view/StateController.js b/web/app/view/StateController.js
index 4b8236aa7..98adb6b11 100644
--- a/web/app/view/StateController.js
+++ b/web/app/view/StateController.js
@@ -25,16 +25,16 @@ Ext.define('Traccar.view.StateController', {
                     selectDevice: 'selectDevice',
                     selectReport: 'selectReport'
                 }
+            },
+            store: {
+                '#LatestPositions': {
+                    add: 'update',
+                    update: 'update'
+                }
             }
         }
     },
 
-    init: function () {
-        var store = Ext.getStore('LatestPositions');
-        store.on('add', this.add, this);
-        store.on('update', this.update, this);
-    },
-
     keys: {
         fixTime: {
             priority: 1,
@@ -128,15 +128,15 @@ Ext.define('Traccar.view.StateController', {
         console.log(position);
     },
 
-    add: function (store, data) {
-        if (this.deviceId === data[0].get('deviceId')) {
-            this.updatePosition(data[0]);
-        }
-    },
-
     update: function (store, data) {
-        if (this.deviceId === data.get('deviceId')) {
-            this.updatePosition(data);
+        var i;
+        if (!Ext.isArray(data)) {
+            data = [data];
+        }
+        for (i = 0; i < data.length; i++) {
+            if (this.deviceId === data[i].get('deviceId')) {
+                this.updatePosition(data[0]);
+            }
         }
     }
 });