Implement point selection logic

2 files changed, 68 insertions, 50 deletions

diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js
index 8b9a34b28..7d1d2c186 100644
--- a/web/app/view/map/MapController.js
+++ b/web/app/view/map/MapController.js
@@ -51,8 +51,17 @@ Ext.define('Traccar.view.map.MapController', {
 
                     // TODO check if exists and update
                     var store = Ext.getStore('LiveData');
-                    store.add(Ext.create('Traccar.model.Position', data[i]));
-                    //store.commitChanges(); need for update?
+
+                    var found = store.query('deviceId', data[i].deviceId);
+                    if (found.getCount() > 0) {
+                        var model = found.first();
+                        model.set(data[i]);
+
+                        //store.commitChanges(); need for update?
+
+                    } else {
+                        store.add(Ext.create('Traccar.model.Position', data[i]));
+                    }
 
                     var geometry = new ol.geom.Point(ol.proj.fromLonLat([
                         data[i].longitude,
@@ -62,10 +71,12 @@ Ext.define('Traccar.view.map.MapController', {
                     if (data[i].deviceId in this.liveData) {
                         this.liveData[data[i].deviceId].setGeometry(geometry);
                     } else {
+                        var style = this.getMarkerStyle(styles.map_live_radius, styles.map_live_color);
                         var marker = new ol.Feature({
-                            geometry: geometry
+                            geometry: geometry,
+                            originalStyle: style
                         });
-                        marker.setStyle(this.getMarkerStyle(styles.map_live_radius, styles.map_live_color));
+                        marker.setStyle(style);
                         this.getView().vectorSource.addFeature(marker);
                         this.liveData[data[i].deviceId] = marker;
                     }
@@ -125,12 +136,22 @@ Ext.define('Traccar.view.map.MapController', {
         
         var index;
         var positions = [];
+        this.reportRoutePoints = {};
 
         for (index = 0; index < data.getCount(); index++) {
-            positions.push(ol.proj.fromLonLat([
+            var point = ol.proj.fromLonLat([
                 data.getAt(index).data.longitude,
                 data.getAt(index).data.latitude
-            ]));
+            ]);
+            positions.push(point);
+
+            var style = this.getMarkerStyle(styles.map_report_radius, styles.map_report_color);
+            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({
@@ -139,14 +160,10 @@ Ext.define('Traccar.view.map.MapController', {
         this.reportRoute.setStyle(this.getLineStyle());
         vectorSource.addFeature(this.reportRoute);
 
-        this.reportRoutePoints = [];
-        for (index = 0; index < positions.length; index++) {
-            var feature = new ol.Feature({
-                geometry: new ol.geom.Point(positions[index])
-            });
-            feature.setStyle(this.getMarkerStyle(styles.map_report_radius, styles.map_report_color));
-            this.reportRoutePoints.push(feature);
-            vectorSource.addFeature(feature);
+        for (var key in this.reportRoutePoints) {
+            if (this.reportRoutePoints.hasOwnProperty(key)) {
+                vectorSource.addFeature(this.reportRoutePoints[key]);
+            }
         }
     },
 
@@ -156,39 +173,42 @@ Ext.define('Traccar.view.map.MapController', {
         
         vectorSource.removeFeature(this.reportRoute);
 
-        for (index = 0; index < this.reportRoutePoints.length; index++) {
-            vectorSource.removeFeature(this.reportRoutePoints[index]);
+        for (var key in this.reportRoutePoints) {
+            if (this.reportRoutePoints.hasOwnProperty(key)) {
+                vectorSource.removeFeature(this.reportRoutePoints[key]);
+            }
         }
-        this.reportRoutePoints = [];
+
+        this.reportRoutePoints = {};
     },
 
-    selectPosition: function(position) {
-        if (this.currentPosition === undefined) {
-            this.currentPosition = new ol.Feature();
-            this.currentPosition.setStyle(this.getMarkerStyle(styles.map_select_radius, styles.map_select_color));
-            this.getView().vectorSource.addFeature(this.currentPosition);
+    selectPosition: function(feature) {
+        if (this.currentFeature !== undefined) {
+            this.currentFeature.setStyle(this.currentFeature.get('originalStyle'));
         }
 
-        var point = ol.proj.fromLonLat([
-            position.get('longitude'), position.get('latitude')
-        ]);
-
-        this.currentPosition.setGeometry(new ol.geom.Point(point));
+        feature.setStyle(this.getMarkerStyle(styles.map_select_radius, styles.map_select_color));
 
         var pan = ol.animation.pan({
             duration: styles.map_delay,
             source: this.getView().mapView.getCenter()
         });
         this.getView().map.beforeRender(pan);
-        this.getView().mapView.setCenter(point);
+        this.getView().mapView.setCenter(feature.getGeometry().getCoordinates());
+
+        this.currentFeature = feature;
     },
 
     selectDevice: function(device) {
-        console.log(device); // DELME
+        if (this.liveData[device.get('id')] !== undefined) {
+            this.selectPosition(this.liveData[device.get('id')]);
+        }
     },
 
     selectReport: function(position) {
-        this.selectPosition(position);
+        if (this.reportRoutePoints[position.get('id')] !== undefined) {
+            this.selectPosition(this.reportRoutePoints[position.get('id')]);
+        }
     }
 
 });
diff --git a/web/app/view/state/StateController.js b/web/app/view/state/StateController.js
index be1d713f1..15f0639ba 100644
--- a/web/app/view/state/StateController.js
+++ b/web/app/view/state/StateController.js
@@ -45,41 +45,39 @@ Ext.define('Traccar.view.state.StateController', {
         'protocol': strings.state_protocol
     },
 
-    selectDevice: function(device) {
-        var position = {
-            "fixTime":"2012-01-02T01:50:00",
-            "longitude":130.0,
-            "latitude":60.0,
-            "valid":true,
-            "altitude":0.0,
-            "speed":0.0,
-            "course":0.0,
-            "deviceId":1,
-            "other":"<info><status>84-20</status></info>",
-            "deviceTime":"2012-01-02T01:50:00",
-            "id":29,
-            "protocol":"gotop"
-        };
+    updatePosition: function(position) {
 
         var store = Ext.getStore('Parameters');
         store.removeAll();
 
-        for (var key in position) {
-            if (position.hasOwnProperty(key) && this.keys[key] !== undefined) {
+        for (var key in position.data) {
+            if (position.data.hasOwnProperty(key) && this.keys[key] !== undefined) {
                 store.add(Ext.create('Traccar.model.Parameter', {
                     name: this.keys[key],
-                    value: position[key]
+                    value: position.get(key)
                 }));
             }
         }
     },
 
+    selectDevice: function(device) {
+        this.deviceId = device.get('id');
+        var found = Ext.getStore('LiveData').query('deviceId', this.deviceId);
+        if (found.getCount() > 0) {
+            this.updatePosition(found.first());
+        }
+    },
+
     add: function(store, data) {
-        console.log(data);
+        if (this.deviceId === data[0].get('deviceId')) {
+            this.updatePosition(data[0]);
+        }
     },
 
     update: function(store, data) {
-        console.log(data);
+        if (this.deviceId === data[0].get('deviceId')) {
+            this.updatePosition(data[0]);
+        }
     }
 
 });