Replace devices grid with tree view

2 files changed, 87 insertions, 24 deletions

diff --git a/web/app/view/Devices.js b/web/app/view/Devices.js
index 5712feb81..ebe3ca195 100644
--- a/web/app/view/Devices.js
+++ b/web/app/view/Devices.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com)
+ * Copyright 2015 - 2016 Anton Tananaev (anton.tananaev@gmail.com)
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,7 +15,7 @@
  */
 
 Ext.define('Traccar.view.Devices', {
-    extend: 'Ext.grid.Panel',
+    extend: 'Ext.tree.Panel',
     xtype: 'devicesView',
 
     requires: [
@@ -25,7 +25,17 @@ Ext.define('Traccar.view.Devices', {
     ],
 
     controller: 'devices',
-    store: 'Devices',
+    rootVisible: false,
+    store: {
+        type: 'tree',
+        parentIdProperty: 'groupId',
+        proxy: {
+            type: 'memory',
+            reader: {
+                type: 'json'
+            }
+        }
+    },
 
     title: Strings.deviceTitle,
     selType: 'rowmodel',
@@ -53,10 +63,12 @@ Ext.define('Traccar.view.Devices', {
     },
 
     listeners: {
-        selectionchange: 'onSelectionChange'
+        selectionchange: 'onSelectionChange',
+        beforeselect: 'onBeforeSelect'
     },
 
     columns: [{
+        xtype: 'treecolumn',
         text: Strings.sharedName,
         dataIndex: 'name',
         flex: 1
@@ -65,19 +77,20 @@ Ext.define('Traccar.view.Devices', {
         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;
+            if (record.get('leaf')) {
+                switch (record.get('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);
             }
-            return Ext.Date.format(value, Traccar.Style.dateTimeFormat);
         }
     }]
 
diff --git a/web/app/view/DevicesController.js b/web/app/view/DevicesController.js
index 8c6c72725..4d8231d94 100644
--- a/web/app/view/DevicesController.js
+++ b/web/app/view/DevicesController.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com)
+ * Copyright 2015 - 2016 Anton Tananaev (anton.tananaev@gmail.com)
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -30,9 +30,54 @@ Ext.define('Traccar.view.DevicesController', {
                     selectDevice: 'selectDevice',
                     selectReport: 'selectReport'
                 }
+            },
+            store: {
+                '#Groups': {
+                    datachanged: 'storeUpdate',
+                    update: 'storeUpdate'
+                },
+                '#Devices': {
+                    datachanged: 'storeUpdate',
+                    update: 'storeUpdate'
+                }
             }
         }
     },
+
+    storeUpdate: function () {
+        var nodes = [];
+        Ext.getStore('Groups').each(function (record) {
+            var groupId, node = {
+                id: 'g' + record.get('id'),
+                original: record,
+                name: record.get('name')
+            };
+            groupId = record.get('groupId');
+            if (groupId !== 0) {
+                node.groupId = 'g' + groupId;
+            }
+            nodes.push(node);
+        }, this);
+        Ext.getStore('Devices').each(function (record) {
+            var groupId, node = {
+                id: 'd' + record.get('id'),
+                original: record,
+                name: record.get('name'),
+                status: record.get('status'),
+                lastUpdate: record.get('lastUpdate'),
+                leaf: true
+            };
+            groupId = record.get('groupId');
+            if (groupId !== 0) {
+                node.groupId = 'g' + groupId;
+            }
+            nodes.push(node);
+        }, this);
+        this.getView().getStore().getProxy().setData(nodes);
+        this.getView().getStore().load();
+        this.getView().expandAll();
+    },
+
     init: function () {
         var readonly = Traccar.app.getServer().get('readonly') && !Traccar.app.getUser().get('admin');
         this.lookupReference('toolbarAddButton').setVisible(!readonly);
@@ -43,7 +88,7 @@ Ext.define('Traccar.view.DevicesController', {
     onAddClick: function () {
         var device, dialog;
         device = Ext.create('Traccar.model.Device');
-        device.store = this.getView().getStore();
+        device.store = Ext.getStore('Devices');
         dialog = Ext.create('Traccar.view.DeviceDialog');
         dialog.down('form').loadRecord(device);
         dialog.show();
@@ -51,14 +96,14 @@ Ext.define('Traccar.view.DevicesController', {
 
     onEditClick: function () {
         var device, dialog;
-        device = this.getView().getSelectionModel().getSelection()[0];
+        device = this.getView().getSelectionModel().getSelection()[0].get('original');
         dialog = Ext.create('Traccar.view.DeviceDialog');
         dialog.down('form').loadRecord(device);
         dialog.show();
     },
 
     onRemoveClick: function () {
-        var device = this.getView().getSelectionModel().getSelection()[0];
+        var device = this.getView().getSelectionModel().getSelection()[0].get('original');
         Ext.Msg.show({
             title: Strings.deviceDialog,
             message: Strings.sharedRemoveConfirm,
@@ -80,7 +125,7 @@ Ext.define('Traccar.view.DevicesController', {
 
     onCommandClick: function () {
         var device, command, dialog;
-        device = this.getView().getSelectionModel().getSelection()[0];
+        device = this.getView().getSelectionModel().getSelection()[0].get('original');
         command = Ext.create('Traccar.model.Command');
         command.set('deviceId', device.get('id'));
         dialog = Ext.create('Traccar.view.CommandDialog');
@@ -89,17 +134,22 @@ Ext.define('Traccar.view.DevicesController', {
     },
 
     onSelectionChange: function (selected) {
-        var empty = selected.getCount() === 0;
+        var empty = selected.getCount() === 0 || !this.getView().getSelectionModel().getSelection()[0].get('leaf');
         this.lookupReference('toolbarEditButton').setDisabled(empty);
         this.lookupReference('toolbarRemoveButton').setDisabled(empty);
         this.lookupReference('deviceCommandButton').setDisabled(empty);
         if (!empty) {
-            this.fireEvent('selectDevice', selected.getLastSelected(), true);
+            this.fireEvent('selectDevice', selected.getLastSelected().get('original'), true);
         }
     },
 
+    onBeforeSelect: function (row, record) {
+        return record.get('leaf');
+    },
+
     selectDevice: function (device, center) {
-        this.getView().getSelectionModel().select([device], false, true);
+        var node = this.getView().getStore().getNodeById('d' + device.get('id'));
+        this.getView().getSelectionModel().select([node], false, true);
     },
 
     selectReport: function (position) {