From 150fa00840417145fcab5d974f88a49d8e3eb3af Mon Sep 17 00:00:00 2001 From: johannnes <> Date: Sat, 2 Mar 2013 17:19:06 +0000 Subject: [PATCH] added parsing of jsonlist contents to dynamically setup menus and contents git-svn-id: https://svn.fhem.de/fhem/trunk@2844 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/www/frontend/CHANGED | 1 + fhem/www/frontend/controls_frontend.txt | 7 +- fhem/www/frontend/www/frontend/app/app.js | 7 +- .../frontend/app/controller/MainController.js | 95 ++++++++++-- .../www/frontend/app/view/DevicePanel.js | 144 ++++++++++++++++++ .../www/frontend/app/view/Viewport.js | 105 +++++-------- 6 files changed, 268 insertions(+), 91 deletions(-) create mode 100644 fhem/www/frontend/www/frontend/app/view/DevicePanel.js diff --git a/fhem/www/frontend/CHANGED b/fhem/www/frontend/CHANGED index 9b13c8805..de2f32765 100644 --- a/fhem/www/frontend/CHANGED +++ b/fhem/www/frontend/CHANGED @@ -1,5 +1,6 @@ Update vom 2.3.2012 +* Auslesen der verfügbaren Geräte / FHEM-Komponenten und Darstellung im Menü * Kommandozeile hinzugefügt, inkl Speichern in der fhem.cfg * Shutdown und Restart Button für FHEM hinzugefügt * Icons diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt index fd7bae483..ff9042d3c 100644 --- a/fhem/www/frontend/controls_frontend.txt +++ b/fhem/www/frontend/controls_frontend.txt @@ -40,13 +40,14 @@ DIR www/frontend/lib/ext-4.1.1a/images/gray/tip UPD 2013-03-01_05:44:48 49099 FHEM/93_DbLog.pm UPD 2013-02-25_08:13:15 499 www/frontend/index.html UPD 2013-02-27_07:20:39 236 www/frontend/README.txt -UPD 2013-03-02_01:26:28 1763 www/frontend/app/app.js +UPD 2013-03-02_04:42:03 1856 www/frontend/app/app.js UPD 2013-03-01_05:43:56 20350 www/frontend/app/view/LineChartPanel.js -UPD 2013-03-02_01:42:33 9490 www/frontend/app/view/Viewport.js +UPD 2013-03-02_06:13:13 7826 www/frontend/app/view/Viewport.js +UPD 2013-03-02_06:11:57 4269 www/frontend/app/view/DevicePanel.js UPD 2013-03-01_05:43:56 2503 www/frontend/app/view/TableDataGridPanel.js UPD 2013-03-01_05:43:55 1310 www/frontend/app/view/LineChartView.js UPD 2013-03-01_05:42:32 41591 www/frontend/app/controller/ChartController.js -UPD 2013-03-02_01:44:22 8479 www/frontend/app/controller/MainController.js +UPD 2013-03-02_06:14:02 10733 www/frontend/app/controller/MainController.js UPD 2013-03-01_05:43:32 202 www/frontend/app/model/ReadingsModel.js UPD 2013-03-01_05:43:32 338 www/frontend/app/model/SavedChartsModel.js UPD 2013-03-01_05:43:31 674 www/frontend/app/model/ChartModel.js diff --git a/fhem/www/frontend/www/frontend/app/app.js b/fhem/www/frontend/www/frontend/app/app.js index d7e158896..897582662 100644 --- a/fhem/www/frontend/www/frontend/app/app.js +++ b/fhem/www/frontend/www/frontend/app/app.js @@ -34,10 +34,10 @@ Ext.application({ url: url, success: function(response){ Ext.getBody().unmask(); - var json = Ext.decode(response.responseText); - FHEM.version = json.Results[0].devices[0].ATTR.version; + FHEM.info = Ext.decode(response.responseText); + FHEM.version = FHEM.info.Results[0].devices[0].ATTR.version; - Ext.each(json.Results, function(result) { + Ext.each(FHEM.info.Results, function(result) { //TODO: get more specific here... if (result.list === "DbLog" && result.devices[0].NAME) { FHEM.dblogname = result.devices[0].NAME; @@ -47,6 +47,7 @@ Ext.application({ Ext.Msg.alert("Error", "Could not find a DbLog Configuration. Do you have DbLog already running?"); } else { Ext.create("FHEM.view.Viewport"); + // further configuration of viewport starts in maincontroller } }, failure: function() { diff --git a/fhem/www/frontend/www/frontend/app/controller/MainController.js b/fhem/www/frontend/www/frontend/app/controller/MainController.js index 9faff8f35..74eb4f52d 100644 --- a/fhem/www/frontend/www/frontend/app/controller/MainController.js +++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js @@ -3,6 +3,9 @@ */ Ext.define('FHEM.controller.MainController', { extend: 'Ext.app.Controller', + requires: [ + 'FHEM.view.DevicePanel' + ], refs: [ { @@ -13,6 +16,10 @@ Ext.define('FHEM.controller.MainController', { selector: 'text[name=statustextfield]', ref: 'statustextfield' //this.getStatustextfield() }, + { + selector: 'panel[name=westaccordionpanel]', + ref: 'westaccordionpanel' //this.getWestaccordionpanel() + }, { selector: 'panel[name=culpanel]', ref: 'culpanel' //this.getCulpanel() @@ -60,23 +67,71 @@ Ext.define('FHEM.controller.MainController', { /** * load the FHEM devices and state on viewport render completion */ - viewportRendered: function(){ + viewportRendered: function() { + + var me = this; if (Ext.isDefined(FHEM.version)) { var sp = this.getStatustextfield(); sp.setText(FHEM.version); } -// var cp = me.getCulpanel(); -// if (result.list === "CUL") { -// var culname = result.devices[0].NAME; -// cp.add( -// { -// xtype: 'text', -// text: culname -// } -// ); -// } + //setup west accordion + var wp = this.getWestaccordionpanel(); + + 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' + } + } + }); + + 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); + } + wp.add(panelToAdd); + } + }); }, /** @@ -245,13 +300,11 @@ Ext.define('FHEM.controller.MainController', { //restarting the frontend window.location.reload(); } else { - console.log("fail.."); me.retryConnect(); } }, failure: function() { - console.log("failure.."); me.retryConnect(); } }); @@ -260,12 +313,22 @@ Ext.define('FHEM.controller.MainController', { task.delay(1000); }, - + + /** + * + */ + hideCenterPanels: function() { + var panels = Ext.ComponentQuery.query('panel[region=center]'); + Ext.each(panels, function(panel) { + panel.hide(); + }); + }, + /** * */ showLineChartPanel: function() { - Ext.ComponentQuery.query('panel[name=tabledatagridpanel]')[0].hide(); + this.hideCenterPanels(); Ext.ComponentQuery.query('panel[name=linechartpanel]')[0].show(); }, @@ -273,7 +336,7 @@ Ext.define('FHEM.controller.MainController', { * */ showDatabaseTablePanel: function() { - Ext.ComponentQuery.query('panel[name=linechartpanel]')[0].hide(); + this.hideCenterPanels(); Ext.ComponentQuery.query('panel[name=tabledatagridpanel]')[0].show(); } diff --git a/fhem/www/frontend/www/frontend/app/view/DevicePanel.js b/fhem/www/frontend/www/frontend/app/view/DevicePanel.js new file mode 100644 index 000000000..5174a749a --- /dev/null +++ b/fhem/www/frontend/www/frontend/app/view/DevicePanel.js @@ -0,0 +1,144 @@ +/** + * A Panel containing device specific information + */ +Ext.define('FHEM.view.DevicePanel', { + extend: 'Ext.panel.Panel', + alias : 'widget.devicepanel', + + /** + * + */ + title: null, + + /** + * + */ + region: 'center', + + /** + * + */ + record: null, + + /** + * init function + */ + initComponent: function() { + + var me = this; + + me.items = [{ + xtype: 'panel', + autoScroll: true, + name: 'container' + }]; + + me.callParent(arguments); + + var devicedata = []; + + Ext.iterate(me.record.raw, function(key, value) { + if (key !== 'ATTR' && key !== 'attrs' && key !== 'sets' && key !== 'READINGS') { + var obj = { + key: key, + value: value + }; + + devicedata.push(obj); + } + }); + + if (devicedata.length > 0) { + var devicedatastore = Ext.create('Ext.data.Store', { + fields: ['key', 'value'], + data: devicedata, + proxy: { + type: 'memory', + reader: { + type: 'json' + } + } + }); + var devicedatagrid = { + xtype: 'grid', + title: 'Device Data', + //hideHeaders: true, + columns: [ + { + header: 'KEY', + dataIndex: 'key', + width: '49%' + }, + { + header: 'VALUE', + dataIndex: 'value', + width: '49%' + } + ], + store: devicedatastore + }; + me.down('panel[name=container]').add(devicedatagrid); + } + + var readingcollection = me.record.raw.READINGS; + if (readingcollection && !Ext.isEmpty(readingcollection) && readingcollection.length > 0) { + + var readingsdata = []; + Ext.each(readingcollection, function(readings) { + Ext.each(readings, function(reading) { + Ext.iterate(reading, function(key, value) { + + if (key !== "measured") { + var obj = { + key: key, + value: value, + measured: '' + }; + readingsdata.push(obj); + } else { + // as the measured time belongs to the last dataset, we merge it.. + readingsdata[readingsdata.length - 1].measured = value; + } + + }); + }); + }); + + var devicereadingsstore = Ext.create('Ext.data.Store', { + fields: ['key', 'value', 'measured'], + data: readingsdata, + proxy: { + type: 'memory', + reader: { + type: 'json' + } + } + }); + var devicereadingsgrid = { + xtype: 'grid', + title: 'Device Readings', + columns: [ + { + header: 'KEY', + dataIndex: 'key', + width: '33%' + }, + { + header: 'VALUE', + dataIndex: 'value', + width: '33%' + }, + { + header: 'MEASURED', + dataIndex: 'measured', + width: '33%' + } + ], + store: devicereadingsstore + }; + me.down('panel[name=container]').add(devicereadingsgrid); + } + + } + +}); diff --git a/fhem/www/frontend/www/frontend/app/view/Viewport.js b/fhem/www/frontend/www/frontend/app/view/Viewport.js index d482cb61d..9caf48284 100644 --- a/fhem/www/frontend/www/frontend/app/view/Viewport.js +++ b/fhem/www/frontend/www/frontend/app/view/Viewport.js @@ -87,14 +87,11 @@ Ext.define('FHEM.view.Viewport', { region: 'west', title: 'Navigation', width: 200, + autoScroll: true, xtype: 'panel', + name: 'westaccordionpanel', layout: 'accordion', items: [ - { - xtype: 'panel', - name: 'culpanel', - title: 'CUL' - }, { xtype: 'panel', title: 'LineChart', @@ -126,76 +123,46 @@ Ext.define('FHEM.view.Viewport', { } ] }, -// { -// xtype: 'panel', -// title: 'BarChart', -// name: 'barchartpanel', -// layout: 'fit', -// collapsed: false, -// items: [ -// { -// xtype: 'grid', -// columns: [ -// { -// header: 'Saved Charts', -// dataIndex: 'VALUE', -// width: '80%' -// }, -// { -// xtype:'actioncolumn', -// name: 'savedchartsactioncolumn', -// width:'15%', -// items: [{ -// icon: 'lib/ext-4.1.1a/images/gray/dd/drop-no.gif', -// tooltip: 'Delete' -// }] -// } -// ], -// store: Ext.create('FHEM.store.SavedChartsStore', {}), -// name: 'savedchartsgrid' -// -// } -// ] -// }, { xtype: 'panel', title: 'Database Tables', name: 'tabledataaccordionpanel' - }, - { - 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' } +// { +// 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' +// } ] - }, { + }, + { xtype: 'panel', region: 'south', title: 'Status',