Replace devices grid with tree view

1 files changed, 58 insertions, 8 deletions

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