aboutsummaryrefslogtreecommitdiff
path: root/web/app/view/MapController.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/app/view/MapController.js')
-rw-r--r--web/app/view/MapController.js291
1 files changed, 154 insertions, 137 deletions
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index b53e46671..c153ebd45 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -22,197 +22,214 @@ Ext.define('Traccar.view.MapController', {
listen: {
controller: {
'*': {
- reportShow: 'reportShow',
- reportClear: 'reportClear',
selectDevice: 'selectDevice',
selectReport: 'selectReport'
}
+ },
+ store: {
+ '#LatestPositions': {
+ add: 'updateLatest',
+ update: 'updateLatest'
+ },
+ '#Positions': {
+ load: 'loadReport',
+ clear: 'clearReport'
+ }
+ },
+ component: {
+ '#': {
+ selectFeature: 'selectFeature'
+ }
}
}
},
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.query('deviceId', data[i].deviceId);
- if (found.getCount() > 0) {
- found.first().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.query('id', data[i].deviceId).first().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;
- }
- }
+ updateLatest: function (store, data) {
+ var i, position, geometry, device, deviceId, marker, style;
- this.update(false);
- },
- failure: function () {
- // TODO: error
+ if (!Ext.isArray(data)) {
+ data = [data];
+ }
+
+ for (i = 0; i < data.length; i++) {
+ position = data[i];
+ deviceId = position.get('deviceId');
+ device = Ext.getStore('Devices').findRecord('id', deviceId, 0, false, false, true);
+
+ geometry = new ol.geom.Point(ol.proj.fromLonLat([
+ position.get('longitude'),
+ position.get('latitude')
+ ]));
+
+ if (deviceId in this.latestMarkers) {
+ marker = this.latestMarkers[deviceId];
+ marker.setGeometry(geometry);
+ } else {
+ marker = new ol.Feature(geometry);
+ marker.set('record', device);
+ this.latestMarkers[deviceId] = marker;
+ this.getView().getVectorSource().addFeature(marker);
+
+ style = this.getLatestMarker();
+ style.getText().setText(device.get('name'));
+ marker.setStyle(style);
}
+
+ marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180);
+ }
+ },
+
+ loadReport: function (store, data) {
+ var i, position, point, geometry, marker, style;
+
+ this.clearReport(store);
+
+ this.reportRoute = new ol.Feature({
+ geometry: new ol.geom.LineString([])
});
+ this.reportRoute.setStyle(this.getRouteStyle());
+ this.getView().getVectorSource().addFeature(this.reportRoute);
+
+ for (i = 0; i < data.length; i++) {
+ position = data[i];
+
+ point = ol.proj.fromLonLat([
+ position.get('longitude'),
+ position.get('latitude')
+ ]);
+ geometry = new ol.geom.Point(point);
+
+ marker = new ol.Feature(geometry);
+ marker.set('record', position);
+ this.reportMarkers[position.get('id')] = marker;
+ this.getView().getVectorSource().addFeature(marker);
+
+ style = this.getReportMarker();
+ style.getImage().setRotation(position.get('course') * Math.PI / 180);
+ style.getText().setText(
+ Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat));
+
+ marker.setStyle(style);
+
+ this.reportRoute.getGeometry().appendCoordinate(point);
+ }
},
- getLineStyle: function () {
+ clearReport: function (store) {
+ var vectorSource, key;
+ vectorSource = this.getView().getVectorSource();
+
+ if (this.reportRoute) {
+ vectorSource.removeFeature(this.reportRoute);
+ this.reportRoute = null;
+ }
+
+ if (this.reportMarkers) {
+ for (key in this.reportMarkers) {
+ if (this.reportMarkers.hasOwnProperty(key)) {
+ vectorSource.removeFeature(this.reportMarkers[key]);
+ }
+ }
+ this.reportMarkers = {};
+ }
+ },
+
+ getRouteStyle: function () {
return new ol.style.Style({
stroke: new ol.style.Stroke({
- color: Traccar.Style.mapStrokeColor,
+ color: Traccar.Style.mapRouteColor,
width: Traccar.Style.mapRouteWidth
})
});
},
- getMarkerStyle: function (radius, color, rotation, text) {
+ getMarkerStyle: function (radius, color) {
return new ol.style.Style({
- image: new ol.style.RegularShape({
- points: 3,
+ image: new ol.style.Arrow({
radius: radius,
fill: new ol.style.Fill({
color: color
}),
stroke: new ol.style.Stroke({
- color: Traccar.Style.mapStrokeColor,
- width: Traccar.Style.mapMarkerStroke
- }),
- rotation: rotation * Math.PI / 180
+ color: Traccar.Style.mapArrowStrokeColor,
+ width: Traccar.Style.mapArrowStrokeWidth
+ })
}),
text: new ol.style.Text({
textBaseline: 'bottom',
- text: text,
fill: new ol.style.Fill({
- color: '#000'
+ color: Traccar.Style.mapTextColor
}),
stroke: new ol.style.Stroke({
- color: '#FFF',
- width: 2
+ color: Traccar.Style.mapTextStrokeColor,
+ width: Traccar.Style.mapTextStrokeWidth
}),
- offsetY: -12,
- font : 'bold 12px sans-serif'
+ offsetY: -radius / 2 - Traccar.Style.mapTextOffset,
+ font : Traccar.Style.mapTextFont
})
});
},
- reportShow: function () {
- this.reportClear();
-
- var vectorSource = this.getView().vectorSource;
-
- var data = Ext.getStore('Positions').getData();
-
- var index;
- var positions = [];
- this.reportRoutePoints = {};
+ getLatestMarker: function () {
+ return this.getMarkerStyle(
+ Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorUnknown);
+ },
- for (index = 0; index < data.getCount(); index++) {
- var point = ol.proj.fromLonLat([
- data.getAt(index).data.longitude,
- data.getAt(index).data.latitude
- ]);
- positions.push(point);
-
- var style = this.getMarkerStyle(Traccar.Style.mapReportRadius, Traccar.Style.mapReportColor, data.getAt(index).data.course);
- 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;
- }
+ getReportMarker: function () {
+ return this.getMarkerStyle(
+ Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport);
+ },
- this.reportRoute = new ol.Feature({
- geometry: new ol.geom.LineString(positions)
+ resizeMarker: function (style, radius) {
+ return new ol.style.Style({
+ image: new ol.style.Arrow({
+ radius: radius,
+ fill: style.getImage().getFill(),
+ stroke: style.getImage().getStroke(),
+ rotation: style.getImage().getRotation()
+ }),
+ text: style.getText()
});
- this.reportRoute.setStyle(this.getLineStyle());
- vectorSource.addFeature(this.reportRoute);
-
- for (var key in this.reportRoutePoints) {
- if (this.reportRoutePoints.hasOwnProperty(key)) {
- vectorSource.addFeature(this.reportRoutePoints[key]);
- }
- }
},
- reportClear: function () {
- var vectorSource = this.getView().vectorSource;
-
- if (this.reportRoute !== undefined) {
- vectorSource.removeFeature(this.reportRoute);
- this.reportRoute = undefined;
+ selectMarker: function (marker, center) {
+ if (this.selectedMarker) {
+ this.selectedMarker.setStyle(
+ this.resizeMarker(this.selectedMarker.getStyle(), Traccar.Style.mapRadiusNormal));
}
- if (this.reportRoutePoints !== undefined) {
- for (var key in this.reportRoutePoints) {
- if (this.reportRoutePoints.hasOwnProperty(key)) {
- vectorSource.removeFeature(this.reportRoutePoints[key]);
- }
+ if (marker) {
+ marker.setStyle(
+ this.resizeMarker(marker.getStyle(), Traccar.Style.mapRadiusSelected));
+ if (center) {
+ this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
}
- this.reportRoutePoints = {};
- }
- },
-
- selectPosition: function (feature) {
- if (this.currentFeature !== undefined) {
- this.currentFeature.setStyle(this.currentFeature.get('originalStyle'));
}
- if (feature !== undefined) {
- var name = feature.getStyle().getText().getText();
- feature.setStyle(this.getMarkerStyle(Traccar.Style.mapSelectRadius, Traccar.Style.mapSelectColor, 0, name));
-
- var pan = ol.animation.pan({
- duration: Traccar.Style.mapDelay,
- source: this.getView().mapView.getCenter()
- });
- this.getView().map.beforeRender(pan);
- this.getView().mapView.setCenter(feature.getGeometry().getCoordinates());
- }
+ this.selectedMarker = marker;
+ },
- this.currentFeature = feature;
+ selectDevice: function (device, center) {
+ this.selectMarker(this.latestMarkers[device.get('id')], center);
},
- selectDevice: function (device) {
- this.selectPosition(this.liveData[device.get('id')]);
+ selectReport: function (position, center) {
+ this.selectMarker(this.reportMarkers[position.get('id')], center);
},
- selectReport: function (position) {
- if (this.reportRoutePoints[position.get('id')] !== undefined) {
- this.selectPosition(this.reportRoutePoints[position.get('id')]);
+ selectFeature: function (feature) {
+ var record = feature.get('record');
+ if (record) {
+ if (record instanceof Traccar.model.Device) {
+ this.fireEvent('selectDevice', record, false);
+ } else {
+ this.fireEvent('selectReport', record, false);
+ }
}
}
-
});