From 525d5b80d792e742e6d101ce85531294f5dc5300 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Sat, 12 Mar 2016 01:09:25 +1300 Subject: Replace devices grid with tree view --- web/app/view/Devices.js | 45 ++++++++++++++++---------- web/app/view/DevicesController.js | 66 ++++++++++++++++++++++++++++++++++----- 2 files changed, 87 insertions(+), 24 deletions(-) (limited to 'web/app/view') 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) { -- cgit v1.2.3