aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorAbyss777 <abyss@fox5.ru>2016-08-25 16:18:12 +0500
committerAbyss777 <abyss@fox5.ru>2016-08-25 16:25:26 +0500
commit3cb5cca4b8db07fa477b23c711916307ff7db427 (patch)
tree94b7a4936a2f1ef860f60b636b7296cea74c1cd2 /web
parent0a98a11fce24cde2904cadcfee3a0c9ac0044fe7 (diff)
downloadtraccar-server-3cb5cca4b8db07fa477b23c711916307ff7db427.tar.gz
traccar-server-3cb5cca4b8db07fa477b23c711916307ff7db427.tar.bz2
traccar-server-3cb5cca4b8db07fa477b23c711916307ff7db427.zip
- Enabled multiple devices for reports
- Used different colors for routes of different devices
Diffstat (limited to 'web')
-rw-r--r--web/app/Style.js18
-rw-r--r--web/app/view/MapController.js42
-rw-r--r--web/app/view/Report.js3
3 files changed, 44 insertions, 19 deletions
diff --git a/web/app/Style.js b/web/app/Style.js
index ec007e674..8d1cf3c0e 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -38,7 +38,14 @@ Ext.define('Traccar.Style', {
mapDefaultLon: -0.1275,
mapDefaultZoom: 6,
- mapRouteColor: 'rgba(21, 127, 204, 1.0)',
+ mapRouteColor: [
+ 'rgba(21, 127, 204, 1.0)',
+ 'rgba(109, 46, 204, 1.0)',
+ 'rgba(204, 46, 162, 1.0)',
+ 'rgba(204, 46, 38, 1.0)',
+ 'rgba(128, 204, 46, 1.0)',
+ 'rgba(46, 204, 155, 1.0)'
+ ],
mapRouteWidth: 5,
mapArrowStrokeColor: 'rgba(50, 50, 50, 1.0)',
@@ -53,7 +60,14 @@ Ext.define('Traccar.Style', {
mapColorOnline: 'rgba(77, 250, 144, 1.0)',
mapColorUnknown: 'rgba(250, 190, 77, 1.0)',
mapColorOffline: 'rgba(255, 84, 104, 1.0)',
- mapColorReport: 'rgba(21, 127, 204, 1.0)',
+ mapColorReport: [
+ 'rgba(21, 127, 204, 1.0)',
+ 'rgba(109, 46, 204, 1.0)',
+ 'rgba(204, 46, 162, 1.0)',
+ 'rgba(204, 46, 38, 1.0)',
+ 'rgba(128, 204, 46, 1.0)',
+ 'rgba(46, 204, 155, 1.0)'
+ ],
mapColorOverlay: 'rgba(21, 127, 204, 0.2)',
mapRadiusNormal: 9,
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index ab7461cf0..57278ce07 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -148,13 +148,15 @@ Ext.define('Traccar.view.MapController', {
this.clearReport(store);
if (data.length > 0) {
- this.reportRoute = new ol.Feature({
- geometry: new ol.geom.LineString([])
- });
- this.reportRoute.setStyle(this.getRouteStyle());
- this.getView().getRouteSource().addFeature(this.reportRoute);
-
+ this.reportRoute = [];
for (i = 0; i < data.length; i++) {
+ if (i === 0 || data[i].get('deviceId') !== data[i - 1].get('deviceId')) {
+ this.reportRoute.push(new ol.Feature({
+ geometry: new ol.geom.LineString([])
+ }));
+ this.reportRoute[this.reportRoute.length - 1].setStyle(this.getRouteStyle(data[i].get('deviceId')));
+ this.getView().getRouteSource().addFeature(this.reportRoute[this.reportRoute.length - 1]);
+ }
position = data[i];
point = ol.proj.fromLonLat([
@@ -168,25 +170,27 @@ Ext.define('Traccar.view.MapController', {
this.reportMarkers[position.get('id')] = marker;
this.getView().getReportSource().addFeature(marker);
- style = this.getReportMarker();
+ style = this.getReportMarker(position.get('deviceId'));
style.getImage().setRotation(position.get('course') * Math.PI / 180);
/*style.getText().setText(
Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat24));*/
marker.setStyle(style);
- this.reportRoute.getGeometry().appendCoordinate(point);
+ this.reportRoute[this.reportRoute.length - 1].getGeometry().appendCoordinate(point);
}
- this.getView().getMapView().fit(this.reportRoute.getGeometry(), this.getView().getMap().getSize());
+ this.getView().getMapView().fit(this.reportRoute[0].getGeometry(), this.getView().getMap().getSize());
}
},
clearReport: function (store) {
- var key;
+ var key, i;
if (this.reportRoute) {
- this.getView().getRouteSource().removeFeature(this.reportRoute);
+ for (i = 0; i < this.reportRoute.length; i++) {
+ this.getView().getRouteSource().removeFeature(this.reportRoute[i]);
+ }
this.reportRoute = null;
}
@@ -200,10 +204,14 @@ Ext.define('Traccar.view.MapController', {
}
},
- getRouteStyle: function () {
+ getRouteStyle: function (deviceId) {
+ var index = 0;
+ if (deviceId !== undefined) {
+ index = deviceId % Traccar.Style.mapRouteColor.length;
+ }
return new ol.style.Style({
stroke: new ol.style.Stroke({
- color: Traccar.Style.mapRouteColor,
+ color: Traccar.Style.mapRouteColor[index],
width: Traccar.Style.mapRouteWidth
})
});
@@ -241,9 +249,13 @@ Ext.define('Traccar.view.MapController', {
Traccar.Style.mapRadiusNormal, color);
},
- getReportMarker: function () {
+ getReportMarker: function (deviceId) {
+ var index = 0;
+ if (deviceId !== undefined) {
+ index = deviceId % Traccar.Style.mapRouteColor.length;
+ }
return this.getMarkerStyle(
- Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport);
+ Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport[index]);
},
resizeMarker: function (style, radius) {
diff --git a/web/app/view/Report.js b/web/app/view/Report.js
index 7bcfdcb52..9c1d635f7 100644
--- a/web/app/view/Report.js
+++ b/web/app/view/Report.js
@@ -44,12 +44,11 @@ Ext.define('Traccar.view.Report', {
xtype: 'tbtext',
html: Strings.reportDevice
}, {
- xtype: 'combobox',
+ xtype: 'tagfield',
reference: 'deviceField',
store: 'Devices',
valueField: 'id',
displayField: 'name',
- typeAhead: true,
queryMode: 'local'
}, '-', {
xtype: 'tbtext',