From a134f31fc89960535fb028a445868722927516a3 Mon Sep 17 00:00:00 2001 From: johannnes <> Date: Sat, 16 Mar 2013 17:08:14 +0000 Subject: [PATCH] implemented a tree for device selection git-svn-id: https://svn.fhem.de/fhem/trunk@2928 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/www/frontend/CHANGED | 1 + fhem/www/frontend/controls_frontend.txt | 6 +- .../frontend/app/controller/MainController.js | 89 ++++++++----------- .../www/frontend/app/view/DevicePanel.js | 4 +- .../www/frontend/app/view/Viewport.js | 60 ++++++------- 5 files changed, 70 insertions(+), 90 deletions(-) diff --git a/fhem/www/frontend/CHANGED b/fhem/www/frontend/CHANGED index f179a913c..5fb830989 100644 --- a/fhem/www/frontend/CHANGED +++ b/fhem/www/frontend/CHANGED @@ -1,5 +1,6 @@ Update vom 16.3.2013 * Implementation einer clientseitigen Generalisierung + * Implementation eines Trees im linken Bereich des Frontends, über den Geräte gesichtet und gewählt werden können Update vom 8.3.2013 * Erweiterung der Charts - Anzeige und Speicherung von dynamischen Zeiträumen (Woche, Tag,...) * Bugfixes in der Darstellung der gespeicherten Farben eines Charts diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt index 98152ebb6..6ac532bb6 100644 --- a/fhem/www/frontend/controls_frontend.txt +++ b/fhem/www/frontend/controls_frontend.txt @@ -43,12 +43,12 @@ UPD 2013-03-06_11:11:22 236 www/frontend/README.txt UPD 2013-03-08_01:44:54 613 www/frontend/app/userconfig.js UPD 2013-03-06_11:11:22 1856 www/frontend/app/app.js UPD 2013-03-16_06:58:22 25147 www/frontend/app/view/LineChartPanel.js -UPD 2013-03-06_11:11:22 7826 www/frontend/app/view/Viewport.js -UPD 2013-03-06_11:11:22 4269 www/frontend/app/view/DevicePanel.js +UPD 2013-03-16_06:15:53 7586 www/frontend/app/view/Viewport.js +UPD 2013-03-16_06:15:46 4279 www/frontend/app/view/DevicePanel.js UPD 2013-03-06_11:11:22 2503 www/frontend/app/view/TableDataGridPanel.js UPD 2013-03-06_11:11:22 1310 www/frontend/app/view/LineChartView.js UPD 2013-03-16_06:58:22 50691 www/frontend/app/controller/ChartController.js -UPD 2013-03-16_06:15:36 10876 www/frontend/app/controller/MainController.js +UPD 2013-03-16_11:15:36 10115 www/frontend/app/controller/MainController.js UPD 2013-03-06_11:11:22 202 www/frontend/app/model/ReadingsModel.js UPD 2013-03-06_11:11:22 338 www/frontend/app/model/SavedChartsModel.js UPD 2013-03-16_06:58:22 1809 www/frontend/app/model/ChartModel.js diff --git a/fhem/www/frontend/www/frontend/app/controller/MainController.js b/fhem/www/frontend/www/frontend/app/controller/MainController.js index 9376c7b03..b5c4287bb 100644 --- a/fhem/www/frontend/www/frontend/app/controller/MainController.js +++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js @@ -21,8 +21,8 @@ Ext.define('FHEM.controller.MainController', { ref: 'westaccordionpanel' //this.getWestaccordionpanel() }, { - selector: 'panel[name=culpanel]', - ref: 'culpanel' //this.getCulpanel() + selector: 'panel[name=maintreepanel]', + ref: 'maintreepanel' //this.getMaintreepanel() }, { selector: 'textfield[name=commandfield]', @@ -45,6 +45,9 @@ Ext.define('FHEM.controller.MainController', { 'panel[name=tabledataaccordionpanel]': { expand: this.showDatabaseTablePanel }, + 'treepanel[name=maintreepanel]': { + itemclick: this.showDevicePanel + }, 'textfield[name=commandfield]': { specialkey: this.checkCommand }, @@ -73,65 +76,51 @@ Ext.define('FHEM.controller.MainController', { if (Ext.isDefined(FHEM.version)) { var sp = this.getStatustextfield(); - sp.setText(FHEM.version + "; Frontend Version: 0.2 - 2013-03-16"); + sp.setText(FHEM.version + "; Frontend Version: 0.3 - 2013-03-16"); } - //setup west accordion - var wp = this.getWestaccordionpanel(); + //setup west accordion / treepanel + var wp = this.getWestaccordionpanel(), + rootNode = { text:"root", expanded: true, children: []}; Ext.each(FHEM.info.Results, function(result) { + if (result.list && !Ext.isEmpty(result.list)) { - var panelToAdd = Ext.create('Ext.panel.Panel', { - name: result.list, - title: result.list, - autoScroll: true, - items: [] - }); if (result.devices && result.devices.length > 0) { - //creating a store holding fhem devices - var deviceStore = Ext.create('Ext.data.Store', { - fields:['NAME'], - data: result.devices, - proxy: { - type: 'memory', - reader: { - type: 'json', - root: 'devices' - } - } - }); + node = {text: result.list, expanded: true, children: []}; - var devicesgrid = { - xtype: 'grid', - hideHeaders: true, - columns: [ - { - dataIndex: 'NAME', - width: '95%' - } - ], - store: deviceStore, - listeners: { - itemclick: function(gridview, record) { - var panel = { - xtype: 'devicepanel', - title: record.raw.NAME, - region: 'center', - layout: 'fit', - record: record - }; - me.hideCenterPanels(); - me.getMainviewport().add(panel); - } - } - }; - - panelToAdd.add(devicesgrid); + Ext.each(result.devices, function(device) { + + var subnode = {text: device.NAME, leaf: true, data: device}; + node.children.push(subnode); + + }, this); + } else { + node = {text: result.list, leaf: true}; } - wp.add(panelToAdd); + + rootNode.children.push(node); + } }); + + this.getMaintreepanel().setRootNode(rootNode); + }, + + /** + * + */ + showDevicePanel: function(view, record) { + var panel = { + xtype: 'devicepanel', + title: record.raw.NAME, + region: 'center', + layout: 'fit', + record: record + }; + this.hideCenterPanels(); + this.getMainviewport().add(panel); }, /** diff --git a/fhem/www/frontend/www/frontend/app/view/DevicePanel.js b/fhem/www/frontend/www/frontend/app/view/DevicePanel.js index 5174a749a..81baccdbf 100644 --- a/fhem/www/frontend/www/frontend/app/view/DevicePanel.js +++ b/fhem/www/frontend/www/frontend/app/view/DevicePanel.js @@ -37,7 +37,7 @@ Ext.define('FHEM.view.DevicePanel', { var devicedata = []; - Ext.iterate(me.record.raw, function(key, value) { + Ext.iterate(me.record.raw.data, function(key, value) { if (key !== 'ATTR' && key !== 'attrs' && key !== 'sets' && key !== 'READINGS') { var obj = { key: key, @@ -80,7 +80,7 @@ Ext.define('FHEM.view.DevicePanel', { me.down('panel[name=container]').add(devicedatagrid); } - var readingcollection = me.record.raw.READINGS; + var readingcollection = me.record.raw.data.READINGS; if (readingcollection && !Ext.isEmpty(readingcollection) && readingcollection.length > 0) { var readingsdata = []; diff --git a/fhem/www/frontend/www/frontend/app/view/Viewport.js b/fhem/www/frontend/www/frontend/app/view/Viewport.js index 9caf48284..a429093d1 100644 --- a/fhem/www/frontend/www/frontend/app/view/Viewport.js +++ b/fhem/www/frontend/www/frontend/app/view/Viewport.js @@ -86,18 +86,39 @@ Ext.define('FHEM.view.Viewport', { }, { region: 'west', title: 'Navigation', - width: 200, + width: 270, autoScroll: true, + resizable: true, xtype: 'panel', name: 'westaccordionpanel', layout: 'accordion', items: [ + { + xtype: 'panel', + title: 'FHEM Devices', + name: 'devicesaccordion', + collapsed: false, + autoScroll: true, + items: [ + { + xtype: 'treepanel', + name: 'maintreepanel', + rootVisible: false, + root: { + "text": "Root", + "expanded": + "true", + "children": [] + } + } + ] + }, { xtype: 'panel', title: 'LineChart', name: 'linechartaccordionpanel', + autoScroll: true, layout: 'fit', - collapsed: false, items: [ { xtype: 'grid', @@ -126,40 +147,9 @@ Ext.define('FHEM.view.Viewport', { { xtype: 'panel', title: 'Database Tables', - name: 'tabledataaccordionpanel' + name: 'tabledataaccordionpanel', + autoScroll: true } -// { -// xtype: 'panel', -// title: 'Unsorted' -// }, -// { -// xtype: 'panel', -// title: 'Everything' -// }, -// { -// xtype: 'panel', -// title: 'Wiki' -// }, -// { -// xtype: 'panel', -// title: 'Details' -// }, -// { -// xtype: 'panel', -// title: 'Definition...' -// }, -// { -// xtype: 'panel', -// title: 'Edit files' -// }, -// { -// xtype: 'panel', -// title: 'Select style' -// }, -// { -// xtype: 'panel', -// title: 'Event monitor' -// } ] }, {