Show last update in the status table

4 files changed, 46 insertions, 10 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);
+        }
     }]
 
 });