diff options
Diffstat (limited to 'web/app')
| -rw-r--r-- | web/app/Style.js | 18 | ||||
| -rw-r--r-- | web/app/view/MapController.js | 42 | ||||
| -rw-r--r-- | web/app/view/Report.js | 3 |
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', |