Show live data on map

5 files changed, 75 insertions, 53 deletions

diff --git a/web/app/Application.js b/web/app/Application.js
index 176e24e67..e17be1a15 100644
--- a/web/app/Application.js
+++ b/web/app/Application.js
@@ -31,7 +31,8 @@ Ext.define('Traccar.Application', {
     
     stores: [
         'Devices',
-        'Positions'
+        'Positions',
+        'LiveData'
     ],
 
     controllers: [
diff --git a/web/app/Resources.js b/web/app/Resources.js
index 19e21b07b..b7ffce571 100644
--- a/web/app/Resources.js
+++ b/web/app/Resources.js
@@ -71,6 +71,7 @@ var styles = {
     map_max_zoom: 16,
     map_report_route: 'blue',
     map_report_marker: 'blue',
+    map_live_marker: 'red',
     map_route_width: 5,
     map_marker_radius: 50
 };
diff --git a/web/app/store/LiveData.js b/web/app/store/LiveData.js
new file mode 100644
index 000000000..35731e339
--- /dev/null
+++ b/web/app/store/LiveData.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Ext.define('Traccar.store.LiveData', {
+    extend: 'Ext.data.Store',
+    model: 'Traccar.model.Position'
+});
diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js
index 8062db8e9..449293e2f 100644
--- a/web/app/view/map/Map.js
+++ b/web/app/view/map/Map.js
@@ -26,47 +26,10 @@ Ext.define('Traccar.view.map.Map', {
 
     title: strings.map_title,
     layout: 'fit',
-    
-    /*update: function() {
-        Ext.Ajax.request({
-            scope: this,
-            url: '/api/async',
-            success: function(response) {
-                var data = Ext.decode(response.responseText).data;
-                
-                var i;
-                for (i = 0; i < data.length; i++) {
-                    var iconFeature = new ol.Feature({
-                        geometry: new ol.geom.Point([30, 30])
-                    });
-                    this.vectorSource.addFeature(iconFeature);   
-                }
-                
-                this.update();
-            },
-            failure: function() {
-                // error
-            }
-        });
-    },*/
 
     listeners: {
         afterrender: function() {
 
-            var transform = this.transform;
-
-            /*var bindKey = 'AseEs0DLJhLlTNoxbNXu7DGsnnH4UoWuGue7-irwKkE3fffaClwc9q_Mr6AyHY8F';
-
-            var layer = new ol.layer.Tile({ source: new ol.source.BingMaps({
-                key: bindKey,
-                imagerySet: 'Road'
-            })});
-
-            var layer = new ol.layer.Tile({ source: new ol.source.BingMaps({
-                key: bindKey,
-                imagerySet: 'Aerial'
-            })});*/
-
             var layer = new ol.layer.Tile({ source: new ol.source.OSM({
             })});
             
@@ -86,8 +49,6 @@ Ext.define('Traccar.view.map.Map', {
                 layers: [ layer, vectorLayer ],
                 view: view
             });
-
-            //this.update();
         },
 
         resize: function() {
diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js
index 4d0a9845e..f232dbb4a 100644
--- a/web/app/view/map/MapController.js
+++ b/web/app/view/map/MapController.js
@@ -28,6 +28,46 @@ Ext.define('Traccar.view.map.MapController', {
             }
         }
     },
+    
+    init: function() {
+        this.liveData = new Object();
+        this.update();
+    },
+    
+    update: function() {
+        Ext.Ajax.request({
+            scope: this,
+            url: '/api/async',
+            success: function(response) {
+                var data = Ext.decode(response.responseText).data;
+                
+                var i;
+                for (i = 0; i < data.length; 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 marker = new ol.Feature({
+                            geometry: geometry,
+                            style: this.getLineStyle(styles.map_live_marker)
+                        });
+                        this.getView().vectorSource.addFeature(marker);
+                        this.liveData[data[i].deviceId] = marker;
+                    }
+                }
+                
+                this.update();
+            },
+            failure: function() {
+                // TODO: error
+            }
+        });
+    },
 
     getLineStyle: function(color) {
         return new ol.style.Style({
@@ -74,32 +114,31 @@ Ext.define('Traccar.view.map.MapController', {
         }
 
         this.reportRoute = new ol.Feature({
-            geometry: new ol.geom.LineString(positions)
+            geometry: new ol.geom.LineString(positions),
+            style: this.getLineStyle(styles.map_report_route)
         });
         
-        /*this.reportStart = new ol.Feature({
-            geometry: new ol.geom.Circle(positions[0], styles.map_marker_radius)
+        this.reportStart = new ol.Feature({
+            geometry: new ol.geom.Point(positions[0]),
+            style: this.getLineStyle(styles.map_report_route)
         });
         
         this.reportFinish = new ol.Feature({
-            geometry: new ol.geom.Circle(positions[positions.length - 1], styles.map_marker_radius)
-        });*/
-
-        this.reportRoute.setStyle(this.getLineStyle(styles.map_report_route));
-        //this.reportStart.setStyle(this.getLineStyle(styles.map_report_marker));
-        //this.reportFinish.setStyle(this.getLineStyle(styles.map_report_marker));
+            geometry: new ol.geom.Point(positions[positions.length - 1]),
+            style: this.getLineStyle(styles.map_report_route)
+        });
 
         vectorSource.addFeature(this.reportRoute);
-        //vectorSource.addFeature(this.reportStart);
-        //vectorSource.addFeature(this.reportFinish);
+        vectorSource.addFeature(this.reportStart);
+        vectorSource.addFeature(this.reportFinish);
     },
 
     reportClear: function() {
         var vectorSource = this.getView().vectorSource;
         
         vectorSource.removeFeature(this.reportRoute);
-        //vectorSource.removeFeature(this.reportStart);
-        //vectorSource.addFeature(this.reportFinish);
+        vectorSource.removeFeature(this.reportStart);
+        vectorSource.addFeature(this.reportFinish);
     }
 
 });