From 7d82aeb8f296a8862e9d64eda029c3184bae089b Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sat, 7 Nov 2015 21:41:51 +1300 Subject: Start map controller refactoring --- web/app/view/Map.js | 12 ++++ web/app/view/MapController.js | 129 ++++++++++++++++++++++------------------ web/app/view/StateController.js | 28 ++++----- 3 files changed, 98 insertions(+), 71 deletions(-) (limited to 'web/app/view') 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]); + } } } }); -- cgit v1.2.3