aboutsummaryrefslogtreecommitdiff
path: root/web/app
diff options
context:
space:
mode:
Diffstat (limited to 'web/app')
-rw-r--r--web/app/controller/Root.js29
-rw-r--r--web/app/view/Map.js12
-rw-r--r--web/app/view/MapController.js129
-rw-r--r--web/app/view/StateController.js28
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]);
+ }
}
}
});
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-01 15:04:39 +0000