From 3cb5cca4b8db07fa477b23c711916307ff7db427 Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Thu, 25 Aug 2016 16:18:12 +0500 Subject: - Enabled multiple devices for reports - Used different colors for routes of different devices --- web/app/view/MapController.js | 42 +++++++++++++++++++++++++++--------------- web/app/view/Report.js | 3 +-- 2 files changed, 28 insertions(+), 17 deletions(-) (limited to 'web/app/view') 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', -- cgit v1.2.3 From 557c4214ae6ea8663f3f85cfa5652411aaa1ea09 Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Thu, 25 Aug 2016 17:32:52 +0500 Subject: Removed array duplication --- web/app/Style.js | 8 -------- web/app/view/MapController.js | 2 +- 2 files changed, 1 insertion(+), 9 deletions(-) (limited to 'web/app/view') diff --git a/web/app/Style.js b/web/app/Style.js index 8d1cf3c0e..2d6bfa5c3 100644 --- a/web/app/Style.js +++ b/web/app/Style.js @@ -60,14 +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)', - '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 57278ce07..bc6a5d404 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -255,7 +255,7 @@ Ext.define('Traccar.view.MapController', { index = deviceId % Traccar.Style.mapRouteColor.length; } return this.getMarkerStyle( - Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorReport[index]); + Traccar.Style.mapRadiusNormal, Traccar.Style.mapRouteColor[index]); }, resizeMarker: function (style, radius) { -- cgit v1.2.3