diff options
Diffstat (limited to 'web/app')
| -rw-r--r-- | web/app/Style.js | 6 | ||||
| -rw-r--r-- | web/app/controller/Root.js | 21 | ||||
| -rw-r--r-- | web/app/model/Device.js | 6 | ||||
| -rw-r--r-- | web/app/view/Devices.js | 23 | ||||
| -rw-r--r-- | web/app/view/MapController.js | 55 |
5 files changed, 98 insertions, 13 deletions
diff --git a/web/app/Style.js b/web/app/Style.js index 58ab059ad..b75503c32 100644 --- a/web/app/Style.js +++ b/web/app/Style.js @@ -48,9 +48,9 @@ Ext.define('Traccar.Style', { mapTextOffset: 10, mapTextFont: 'bold 12px sans-serif', - mapColorOnline: '#4DFA90', - mapColorUnknown: '#FABE4D', - mapColorOffline: '#FF5468', + 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)', mapRadiusNormal: 10, diff --git a/web/app/controller/Root.js b/web/app/controller/Root.js index 041e0b902..733055cdf 100644 --- a/web/app/controller/Root.js +++ b/web/app/controller/Root.js @@ -97,19 +97,32 @@ Ext.define('Traccar.controller.Root', { first: first }, callback: Traccar.app.getErrorHandler(this, function (options, success, response) { - var i, store, data, devices, positions, position; + var i, deviceStore, positionStore, data, devices, positions, device, position; if (success) { - store = Ext.getStore('LatestPositions'); + deviceStore = Ext.getStore('Devices'); + positionStore = Ext.getStore('LatestPositions'); data = Ext.decode(response.responseText).data; devices = data.devices; positions = data.positions; + for (i = 0; i < devices.length; i++) { + device = deviceStore.findRecord('id', devices[i].id, 0, false, false, true); + if (device) { + device.set({ + status: devices[i].status, + lastUpdate: devices[i].lastUpdate + }, { + dirty: false + }); + } + } + for (i = 0; i < positions.length; i++) { - position = store.findRecord('deviceId', positions[i].deviceId, 0, false, false, true); + position = positionStore.findRecord('deviceId', positions[i].deviceId, 0, false, false, true); if (position) { position.set(positions[i]); } else { - store.add(Ext.create('Traccar.model.Position', positions[i])); + positionStore.add(Ext.create('Traccar.model.Position', positions[i])); } } diff --git a/web/app/model/Device.js b/web/app/model/Device.js index e9ed1f680..983e3e62e 100644 --- a/web/app/model/Device.js +++ b/web/app/model/Device.js @@ -27,5 +27,11 @@ Ext.define('Traccar.model.Device', { }, { name: 'uniqueId', type: 'string' + }, { + name: 'status', + type: 'string' + }, { + name: 'lastUpdate', + type: 'date' }] }); diff --git a/web/app/view/Devices.js b/web/app/view/Devices.js index 9dcd76a55..128cd3be1 100644 --- a/web/app/view/Devices.js +++ b/web/app/view/Devices.js @@ -52,10 +52,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/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 () { |