diff options
author | Rafael Guterres <guterresrafael@gmail.com> | 2015-11-21 02:13:24 -0200 |
---|---|---|
committer | Rafael Guterres <guterresrafael@gmail.com> | 2015-11-21 02:13:24 -0200 |
commit | 77cd23da84ebebcf99a97a8aef88aa9a4884ca40 (patch) | |
tree | f95fa042b4755e925be8d0c8416fcb648ea23aa3 /web/app/view | |
parent | f5a266953e53a7f1785bcb584759582621ec9de3 (diff) | |
parent | 7623704e12a3e60420c86add5cfdc18b14061752 (diff) | |
download | traccar-server-77cd23da84ebebcf99a97a8aef88aa9a4884ca40.tar.gz traccar-server-77cd23da84ebebcf99a97a8aef88aa9a4884ca40.tar.bz2 traccar-server-77cd23da84ebebcf99a97a8aef88aa9a4884ca40.zip |
Merge tananaev/master
Diffstat (limited to 'web/app/view')
-rw-r--r-- | web/app/view/Devices.js | 29 | ||||
-rw-r--r-- | web/app/view/Login.js | 2 | ||||
-rw-r--r-- | web/app/view/Main.js | 5 | ||||
-rw-r--r-- | web/app/view/Map.js | 32 | ||||
-rw-r--r-- | web/app/view/MapController.js | 79 |
5 files changed, 123 insertions, 24 deletions
diff --git a/web/app/view/Devices.js b/web/app/view/Devices.js index 9dcd76a55..21bea6980 100644 --- a/web/app/view/Devices.js +++ b/web/app/view/Devices.js @@ -42,6 +42,12 @@ Ext.define('Traccar.view.Devices', { }, { xtype: 'tbfill' }, { + id:'deviceFollowButton', + glyph: 'xf05b@FontAwesome', + tooltip: Strings.deviceFollow, + tooltipType: 'title', + enableToggle: true + }, { xtype: 'settingsMenu' }] }, @@ -52,10 +58,27 @@ Ext.define('Traccar.view.Devices', { columns: [{ text: Strings.deviceName, - dataIndex: 'name', flex: 1 + dataIndex: 'name', + flex: 1 }, { - text: Strings.deviceIdentifier, - dataIndex: 'uniqueId', flex: 1 + text: Strings.deviceLastUpdate, + dataIndex: 'lastUpdate', + flex: 1, + renderer: function (value, metaData, record) { + var status = record.get('status'); + switch (status) { + case 'online': + metaData.tdCls = 'status-color-online'; + break; + case 'offline': + metaData.tdCls = 'status-color-offline'; + break; + default: + metaData.tdCls = 'status-color-unknown'; + break; + } + return Ext.Date.format(value, Traccar.Style.dateTimeFormat); + } }] }); diff --git a/web/app/view/Login.js b/web/app/view/Login.js index 14a3fa41f..9c8187ed6 100644 --- a/web/app/view/Login.js +++ b/web/app/view/Login.js @@ -35,7 +35,7 @@ Ext.define('Traccar.view.Login', { autoEl: { tag: 'form', method: 'GET', - action: 'favicon.ico', + action: 'blank.html', target: 'submitTarget' }, diff --git a/web/app/view/Main.js b/web/app/view/Main.js index 3bd7256f7..6b4daf138 100644 --- a/web/app/view/Main.js +++ b/web/app/view/Main.js @@ -54,7 +54,10 @@ Ext.define('Traccar.view.Main', { }, { region: 'south', xtype: 'reportView', - height: Traccar.Style.reportHeight + height: Traccar.Style.reportHeight, + collapsed: true, + titleCollapse: true, + floatable: false }, { region: 'center', xtype: 'mapView', diff --git a/web/app/view/Map.js b/web/app/view/Map.js index 7d81699a3..b8c0d8dc5 100644 --- a/web/app/view/Map.js +++ b/web/app/view/Map.js @@ -35,13 +35,21 @@ Ext.define('Traccar.view.Map', { return this.mapView; }, - getVectorSource: function () { - return this.vectorSource; + getLatestSource: function () { + return this.latestSource; + }, + + getRouteSource: function () { + return this.routeSource; + }, + + getReportSource: function () { + return this.reportSource; }, listeners: { afterrender: function () { - var user, server, layer, type, bingKey, vectorLayer, lat, lon, zoom, target; + var user, server, layer, type, bingKey, latestLayer, routeLayer, reportLayer, lat, lon, zoom, target; user = Traccar.app.getUser(); server = Traccar.app.getServer(); @@ -78,9 +86,19 @@ Ext.define('Traccar.view.Map', { }); } - this.vectorSource = new ol.source.Vector({}); - vectorLayer = new ol.layer.Vector({ - source: this.vectorSource + this.latestSource = new ol.source.Vector({}); + latestLayer = new ol.layer.Vector({ + source: this.latestSource + }); + + this.routeSource = new ol.source.Vector({}); + routeLayer = new ol.layer.Vector({ + source: this.routeSource + }); + + this.reportSource = new ol.source.Vector({}); + reportLayer = new ol.layer.Vector({ + source: this.reportSource }); lat = user.get('latitude') || server.get('latitude') || Traccar.Style.mapDefaultLat; @@ -95,7 +113,7 @@ Ext.define('Traccar.view.Map', { this.map = new ol.Map({ target: this.body.dom.id, - layers: [layer, vectorLayer], + layers: [layer, routeLayer, reportLayer, latestLayer], view: this.mapView }); diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index c153ebd45..e4ce53b57 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -27,6 +27,10 @@ Ext.define('Traccar.view.MapController', { } }, store: { + '#Devices': { + add: 'updateDevice', + update: 'updateDevice' + }, '#LatestPositions': { add: 'updateLatest', update: 'updateLatest' @@ -49,6 +53,54 @@ Ext.define('Traccar.view.MapController', { this.reportMarkers = {}; }, + getDeviceColor: function (device) { + switch (device.get('status')) { + case 'online': + return Traccar.Style.mapColorOnline; + case 'offline': + return Traccar.Style.mapColorOffline; + default: + return Traccar.Style.mapColorUnknown; + } + }, + + changeMarkerColor: function (style, color) { + return new ol.style.Style({ + image: new ol.style.Arrow({ + radius: style.getImage().getRadius(), + fill: new ol.style.Fill({ + color: color + }), + stroke: style.getImage().getStroke(), + rotation: style.getImage().getRotation() + }), + text: style.getText() + }); + }, + + updateDevice: function (store, data) { + var i, device, deviceId; + + if (!Ext.isArray(data)) { + data = [data]; + } + + for (i = 0; i < data.length; i++) { + device = data[i]; + deviceId = device.get('id'); + + if (deviceId in this.latestMarkers) { + marker = this.latestMarkers[deviceId]; + marker.setStyle( + this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device))); + } + } + }, + + followSelected: function () { + return Ext.getCmp('deviceFollowButton') && Ext.getCmp('deviceFollowButton').pressed; + }, + updateLatest: function (store, data) { var i, position, geometry, device, deviceId, marker, style; @@ -73,14 +125,18 @@ Ext.define('Traccar.view.MapController', { marker = new ol.Feature(geometry); marker.set('record', device); this.latestMarkers[deviceId] = marker; - this.getView().getVectorSource().addFeature(marker); + this.getView().getLatestSource().addFeature(marker); - style = this.getLatestMarker(); + style = this.getLatestMarker(this.getDeviceColor(device)); style.getText().setText(device.get('name')); marker.setStyle(style); } marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180); + + if (marker === this.selectedMarker && this.followSelected()) { + this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); + } } }, @@ -93,7 +149,7 @@ Ext.define('Traccar.view.MapController', { geometry: new ol.geom.LineString([]) }); this.reportRoute.setStyle(this.getRouteStyle()); - this.getView().getVectorSource().addFeature(this.reportRoute); + this.getView().getRouteSource().addFeature(this.reportRoute); for (i = 0; i < data.length; i++) { position = data[i]; @@ -107,12 +163,12 @@ Ext.define('Traccar.view.MapController', { marker = new ol.Feature(geometry); marker.set('record', position); this.reportMarkers[position.get('id')] = marker; - this.getView().getVectorSource().addFeature(marker); + this.getView().getReportSource().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)); + /*style.getText().setText( + Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat));*/ marker.setStyle(style); @@ -121,18 +177,17 @@ Ext.define('Traccar.view.MapController', { }, clearReport: function (store) { - var vectorSource, key; - vectorSource = this.getView().getVectorSource(); + var key; if (this.reportRoute) { - vectorSource.removeFeature(this.reportRoute); + this.getView().getRouteSource().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.getView().getReportSource().removeFeature(this.reportMarkers[key]); } } this.reportMarkers = {}; @@ -175,9 +230,9 @@ Ext.define('Traccar.view.MapController', { }); }, - getLatestMarker: function () { + getLatestMarker: function (color) { return this.getMarkerStyle( - Traccar.Style.mapRadiusNormal, Traccar.Style.mapColorUnknown); + Traccar.Style.mapRadiusNormal, color); }, getReportMarker: function () { |