From f1c1928a49d69ebf73f37b247f117fe3a6ca5399 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Tue, 17 Nov 2015 16:25:57 +1300 Subject: Update marker color based on status --- web/app/view/MapController.js | 55 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 52 insertions(+), 3 deletions(-) diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index c153ebd45..95ceb51c3 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,51 @@ Ext.define('Traccar.view.MapController', { this.reportMarkers = {}; }, + getDeviceColor: function (device) { + console.log(device.get('status')); + 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))); + } + } + }, + updateLatest: function (store, data) { var i, position, geometry, device, deviceId, marker, style; @@ -75,7 +124,7 @@ Ext.define('Traccar.view.MapController', { this.latestMarkers[deviceId] = marker; this.getView().getVectorSource().addFeature(marker); - style = this.getLatestMarker(); + style = this.getLatestMarker(this.getDeviceColor(device)); style.getText().setText(device.get('name')); marker.setStyle(style); } @@ -175,9 +224,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 () { -- cgit v1.2.3