aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2016-08-27 11:18:44 +1200
committerGitHub <noreply@github.com>2016-08-27 11:18:44 +1200
commita2b84d023a847f52bf47d29faa843523ae4ac58a (patch)
tree6844f2281b5466a4b8488edcae75d3af2b53a41a /web
parentbe87d85bd1ebb767817a268d576b5fb48fc361d8 (diff)
parent557c4214ae6ea8663f3f85cfa5652411aaa1ea09 (diff)
downloadtrackermap-server-a2b84d023a847f52bf47d29faa843523ae4ac58a.tar.gz
trackermap-server-a2b84d023a847f52bf47d29faa843523ae4ac58a.tar.bz2
trackermap-server-a2b84d023a847f52bf47d29faa843523ae4ac58a.zip
Merge pull request #2254 from Abyss777/reports_web2
Colour routes of different devices
Diffstat (limited to 'web')
-rw-r--r--web/app/Style.js10
-rw-r--r--web/app/view/MapController.js42
-rw-r--r--web/app/view/Report.js3
3 files changed, 36 insertions, 19 deletions
diff --git a/web/app/Style.js b/web/app/Style.js
index ec007e674..2d6bfa5c3 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,6 @@ 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)',
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..bc6a5d404 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.mapRouteColor[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',