2 files changed, 72 insertions, 6 deletions

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 () {