From 80e4ceda5a1e461ef3e1cef729cdc081d66ed265 Mon Sep 17 00:00:00 2001 From: johannnes <> Date: Sun, 30 Jun 2013 09:54:30 +0000 Subject: [PATCH] =?UTF-8?q?=20=20*=20Charts=20nun=20im=20Tree=20=20=20*=20?= =?UTF-8?q?Tree=20sortierbar=20=20=20*=20Kontextmen=C3=BC=20im=20Tree=20?= =?UTF-8?q?=20=20*=20Iframe=20f=C3=BCr=20FHEM=20Frontend=20=20=20*=20Rest?= =?UTF-8?q?=20siehe=20Thread=20im=20Forum?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit git-svn-id: https://svn.fhem.de/fhem/trunk@3367 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/www/frontend/CHANGED | 6 + fhem/www/frontend/controls_frontend.txt | 12 +- .../app/controller/ChartController.js | 179 ++++++++++--- .../frontend/app/controller/MainController.js | 240 ++++++++++++++---- .../app/controller/TableDataController.js | 2 +- .../frontend/app/resources/application.css | 3 + .../app/resources/icons/chart_bar.png | Bin 0 -> 541 bytes .../www/frontend/app/view/Viewport.js | 103 +++++--- fhem/www/frontend/www/frontend/index.html | 3 +- 9 files changed, 419 insertions(+), 129 deletions(-) create mode 100644 fhem/www/frontend/www/frontend/app/resources/application.css create mode 100644 fhem/www/frontend/www/frontend/app/resources/icons/chart_bar.png diff --git a/fhem/www/frontend/CHANGED b/fhem/www/frontend/CHANGED index fe792f9f7..09aad71c9 100644 --- a/fhem/www/frontend/CHANGED +++ b/fhem/www/frontend/CHANGED @@ -1,3 +1,9 @@ +Update vom 30.6.2013 + * Charts nun im Tree + * Tree sortierbar + * Kontextmenü im Tree + * Iframe für FHEM Frontend + * Rest siehe Thread im Forum Update vom 27.6.2013 * "Database Tables" können jetzt über Zeit und Parameter konkretisiert werden * Bug aus Zeitsprüngen entfernt, damit zwischen Monatswechsel Datum korrekt angezeigt wird diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt index 6defdfe6f..44d5b59ef 100644 --- a/fhem/www/frontend/controls_frontend.txt +++ b/fhem/www/frontend/controls_frontend.txt @@ -29,7 +29,7 @@ DIR www/frontend/lib/ext-4.2.0.663/images/window DIR www/frontend/lib/ext-4.2.0.663/images/grid DIR www/frontend/lib/ext-4.2.0.663/images/util DIR www/frontend/lib/ext-4.2.0.663/images/util/splitter -UPD 2013-04-26_05:06:42 899 www/frontend/index.html +UPD 2013-06-30_11:46:26 988 www/frontend/index.html UPD 2013-04-01_07:03:30 260475 www/frontend/lib/ext-4.2.0.663/ext-theme-gray-all.css UPD 2013-04-01_07:03:30 1434875 www/frontend/lib/ext-4.2.0.663/ext-all.js UPD 2013-04-01_07:03:33 1981 www/frontend/lib/ext-4.2.0.663/images/tools/tools-sprites-trans.gif @@ -263,6 +263,7 @@ UPD 2013-04-03_07:27:17 781 www/frontend/app/resources/icons/accept.png UPD 2013-03-02_01:53:05 626 www/frontend/app/resources/icons/readme.txt UPD 2013-04-03_07:27:17 715 www/frontend/app/resources/icons/delete.png UPD 2013-03-02_01:53:05 755 www/frontend/app/resources/icons/database_save.png +UPD 2013-06-30_11:47:24 541 www/frontend/app/resources/icons/chart_bar.png UPD 2013-03-02_01:53:05 395 www/frontend/app/resources/icons/resultset_next.png UPD 2013-03-02_01:53:05 700 www/frontend/app/resources/icons/stop.png UPD 2013-04-03_07:27:17 345 www/frontend/app/resources/icons/arrow_left.png @@ -270,15 +271,16 @@ UPD 2013-03-02_01:53:05 770 www/frontend/app/resources/icons/database_refresh.pn UPD 2013-03-02_01:53:05 524 www/frontend/app/resources/icons/resultset_last.png UPD 2013-04-03_07:27:17 733 www/frontend/app/resources/icons/add.png UPD 2013-04-03_07:27:17 389 www/frontend/app/resources/icons/resultset_previous.png +UPD 2013-06-30_11:47:12 101 www/frontend/app/resources/application.css UPD 2013-06-27_09:34:38 2201 www/frontend/app/app.js UPD 2013-05-01_05:10:56 27200 www/frontend/app/view/LineChartPanel.js UPD 2013-04-28_02:00:20 1205 www/frontend/app/view/ChartGridPanel.js UPD 2013-04-03_07:26:40 15793 www/frontend/app/view/DevicePanel.js -UPD 2013-05-01_05:10:56 8782 www/frontend/app/view/Viewport.js +UPD 2013-06-30_11:47:44 11076 www/frontend/app/view/Viewport.js UPD 2013-06-27_09:35:22 10042 www/frontend/app/view/TableDataGridPanel.js -UPD 2013-06-27_09:34:51 77454 www/frontend/app/controller/ChartController.js -UPD 2013-06-27_09:34:52 13004 www/frontend/app/controller/MainController.js -UPD 2013-06-27_09:34:52 5414 www/frontend/app/controller/TableDataController.js +UPD 2013-06-30_11:46:54 83500 www/frontend/app/controller/ChartController.js +UPD 2013-06-30_11:46:54 18379 www/frontend/app/controller/MainController.js +UPD 2013-06-30_11:46:54 5415 www/frontend/app/controller/TableDataController.js UPD 2013-04-01_07:04:35 202 www/frontend/app/model/ReadingsModel.js UPD 2013-04-01_07:04:36 338 www/frontend/app/model/SavedChartsModel.js UPD 2013-04-01_07:04:34 11535 www/frontend/app/model/ChartModel.js diff --git a/fhem/www/frontend/www/frontend/app/controller/ChartController.js b/fhem/www/frontend/www/frontend/app/controller/ChartController.js index e46d8c160..66cdc8b56 100644 --- a/fhem/www/frontend/www/frontend/app/controller/ChartController.js +++ b/fhem/www/frontend/www/frontend/app/controller/ChartController.js @@ -60,15 +60,14 @@ Ext.define('FHEM.controller.ChartController', { selector: 'linechartpanel toolbar', ref: 'linecharttoolbar' //this.getLinecharttoolbar() }, - { - selector: 'grid[name=savedchartsgrid]', - ref: 'savedchartsgrid' //this.getSavedchartsgrid() - }, { selector: 'grid[name=chartdata]', ref: 'chartdatagrid' //this.getChartdatagrid() + }, + { + selector: 'panel[name=maintreepanel]', + ref: 'maintreepanel' //this.getMaintreepanel() } - ], /** @@ -91,14 +90,19 @@ Ext.define('FHEM.controller.ChartController', { 'button[name=resetchartform]': { click: this.resetFormFields }, - 'grid[name=savedchartsgrid]': { - cellclick: this.loadsavedchart - }, - 'actioncolumn[name=savedchartsactioncolumn]': { + 'menuitem[name=deletechartfromcontext]': { click: this.deletechart }, + 'menuitem[name=renamechartfromcontext]': { + click: this.renamechart + }, + 'treepanel[name=maintreepanel]': { + itemclick: this.loadsavedchart + }, + 'treeview': { + drop: this.movenodeintree + }, 'grid[name=chartdata]': { -// itemmouseenter: this.highlightRecordInChart itemclick: this.highlightRecordInChart }, 'panel[name=chartpanel]': { @@ -511,7 +515,8 @@ Ext.define('FHEM.controller.ChartController', { var existingwins = Ext.ComponentQuery.query('window[name=statisticswin]'), matchfound = false, - lastwin; + lastwin, + win; if (existingwins.length > 0) { Ext.each(existingwins, function(existingwin) { lastwin = existingwin; @@ -522,7 +527,7 @@ Ext.define('FHEM.controller.ChartController', { } }); if (!matchfound) { - var win = Ext.create('Ext.window.Window', { + win = Ext.create('Ext.window.Window', { width: winwidth, height: winheight, html: html, @@ -535,7 +540,7 @@ Ext.define('FHEM.controller.ChartController', { win.showAt(chart.getWidth() - 145, lastwin.getPosition()[1] + lastwin.getHeight()); } } else { - var win = Ext.create('Ext.window.Window', { + win = Ext.create('Ext.window.Window', { width: winwidth, height: winheight, html: html, @@ -1161,6 +1166,19 @@ Ext.define('FHEM.controller.ChartController', { saveChartData: function() { var me = this; + + //get available foldernames +// var rootNode = me.getMaintreepanel().getRootNode(), +// folderArray = []; +// rootNode.cascadeBy(function(node) { +// if (node.get('leaf') === false) { +// if (node.get('text') !== 'root') { +// folderArray.push(node.get('text')); +// } +// } +// }); +// console.log(folderArray); + Ext.Msg.prompt("Select a name", "Enter a name to save the Chart", function(action, savename) { if (action === "ok" && !Ext.isEmpty(savename)) { //replacing spaces in name @@ -1301,7 +1319,7 @@ Ext.define('FHEM.controller.ChartController', { chart.setLoading(false); var json = Ext.decode(response.responseText); if (json.success === "true" || json.data && json.data.length === 0) { - me.getSavedchartsgrid().getStore().load(); + me.getMaintreepanel().fireEvent("treeupdated"); Ext.Msg.alert("Success", "Chart successfully saved!"); } else if (json.msg) { Ext.Msg.alert("Error", "The Chart could not be saved, error Message is:

" + json.msg); @@ -1326,13 +1344,11 @@ Ext.define('FHEM.controller.ChartController', { /** * loading saved chart data and trigger the load of the chart */ - loadsavedchart: function(grid, td, cellIndex, record) { - + loadsavedchart: function(treeview, record) { var me = this; - - if (cellIndex === 0) { - var name = record.get('NAME'), - chartdata = record.get('VALUE'); + if (record.raw.data && record.raw.data.TYPE && record.raw.data.TYPE === "savedchart") { + var name = record.raw.data.NAME, + chartdata = record.raw.data.VALUE; if (typeof chartdata !== "object") { try { @@ -1498,20 +1514,63 @@ Ext.define('FHEM.controller.ChartController', { this.requestChartData(); this.getLinechartpanel().setTitle(name); } else { - Ext.Msg.alert("Error", "The Chart could not be loaded! RawChartdata was:
" + rawchartdata); + Ext.Msg.alert("Error", "The Chart could not be loaded! RawChartdata was:
" + chartdata); } } }, + /** + * Rename a chart + */ + renamechart: function(menu, e) { + var me = this, + chartid = menu.record.raw.data.ID, + oldchartname = menu.record.raw.data.NAME; + + Ext.Msg.prompt("Renaming Chart", "Enter a new name for this Chart", function(action, savename) { + if (action === "ok" && !Ext.isEmpty(savename)) { + //replacing spaces in name + savename = savename.replace(/ /g, "_"); + //replacing + in name + savename = savename.replace(/\+/g, "_"); + + var url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+renamechart+""+""+' + savename + '+' + chartid + '&XHR=1'; + + Ext.Ajax.request({ + method: 'GET', + disableCaching: false, + url: url, + success: function(response){ + var json = Ext.decode(response.responseText); + if (json && json.success === "true" || json.data && json.data.length === 0) { + me.getMaintreepanel().fireEvent("treeupdated"); + Ext.Msg.alert("Success", "Chart successfully renamed!"); + } else if (json && json.msg) { + Ext.Msg.alert("Error", "The Chart could not be renamed, error Message is:

" + json.msg); + } else { + Ext.Msg.alert("Error", "The Chart could not be renamed!"); + } + }, + failure: function() { + if (json && json.msg) { + Ext.Msg.alert("Error", "The Chart could not be renamed, error Message is:

" + json.msg); + } else { + Ext.Msg.alert("Error", "The Chart could not be renamed!"); + } + } + }); + + } + }); + }, + /** * Delete a chart by its id from the database */ - deletechart: function(grid, td, cellIndex, par, evt, record) { - + deletechart: function(menu, e) { var me = this, - chartid = record.get('ID'), - chart = this.getChart(); + chartid = menu.record.raw.data.ID; if (Ext.isDefined(chartid) && chartid !== "") { @@ -1532,18 +1591,24 @@ Ext.define('FHEM.controller.ChartController', { var url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+deletechart+""+""+' + chartid + '&XHR=1'; - chart.setLoading(true); - Ext.Ajax.request({ method: 'GET', disableCaching: false, url: url, success: function(response){ - chart.setLoading(false); var json = Ext.decode(response.responseText); if (json && json.success === "true" || json.data && json.data.length === 0) { - me.getSavedchartsgrid().getStore().load(); + var rootNode = me.getMaintreepanel().getRootNode(); + var deletedNode = rootNode.findChildBy(function(rec) { + if (rec.raw.data && rec.raw.data.ID === chartid) { + return true; + } + }, this, true); + if (deletedNode) { + deletedNode.destroy(); + } Ext.Msg.alert("Success", "Chart successfully deleted!"); + } else if (json && json.msg) { Ext.Msg.alert("Error", "The Chart could not be deleted, error Message is:

" + json.msg); } else { @@ -1552,7 +1617,6 @@ Ext.define('FHEM.controller.ChartController', { btn.up().up().destroy(); }, failure: function() { - chart.setLoading(false); if (json && json.msg) { Ext.Msg.alert("Error", "The Chart could not be deleted, error Message is:

" + json.msg); } else { @@ -1683,5 +1747,60 @@ Ext.define('FHEM.controller.ChartController', { this.getChart().redraw(); } } + }, + + /** + * handling the moving of nodes in tree, saving new position of saved charts in db + */ + movenodeintree: function(treeview, action, collidatingrecord) { + var rec = action.records[0], + id = rec.raw.data.ID; + + if (rec.raw.data && rec.raw.data.ID && rec.raw.data.TYPE === "savedchart") { + var rootNode = this.getMaintreepanel().getRootNode(); + rootNode.cascadeBy(function(node) { + if (node.raw && node.raw.data && node.raw.data.ID && node.raw.data.ID === id) { + //updating whole folder to get indexes right + Ext.each(node.parentNode.childNodes, function(node) { + var ownerfolder = node.parentNode.data.text, + index = node.parentNode.indexOf(node); + + + if (node.raw.data && node.raw.data.ID && node.raw.data.VALUE) { + var chartid = node.raw.data.ID, + chartconfig = node.raw.data.VALUE; + chartconfig.parentFolder = ownerfolder; + chartconfig.treeIndex = index; + var encodedchartconfig = Ext.encode(chartconfig), + url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+updatechart+""+""+' + chartid + '+' + encodedchartconfig + '&XHR=1'; + + Ext.Ajax.request({ + method: 'GET', + disableCaching: false, + url: url, + success: function(response){ + var json = Ext.decode(response.responseText); + if (json && json.success === "true" || json.data && json.data.length === 0) { + //be quiet + } else if (json && json.msg) { + Ext.Msg.alert("Error", "The new position could not be saved, error Message is:

" + json.msg); + } else { + Ext.Msg.alert("Error", "The new position could not be saved!"); + } + }, + failure: function() { + if (json && json.msg) { + Ext.Msg.alert("Error", "The new position could not be saved, error Message is:

" + json.msg); + } else { + Ext.Msg.alert("Error", "The new position could not be saved!"); + } + } + }); + } + + }); + } + }); + } } }); \ No newline at end of file diff --git a/fhem/www/frontend/www/frontend/app/controller/MainController.js b/fhem/www/frontend/www/frontend/app/controller/MainController.js index cc2a2f44b..1484b0b26 100644 --- a/fhem/www/frontend/www/frontend/app/controller/MainController.js +++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js @@ -27,10 +27,6 @@ Ext.define('FHEM.controller.MainController', { { selector: 'textfield[name=commandfield]', ref: 'commandfield' //this.getCommandfield() - }, - { - selector: 'grid[name=savedchartsgrid]', - ref: 'savedchartsgrid' //this.getSavedchartsgrid() } ], @@ -42,14 +38,15 @@ Ext.define('FHEM.controller.MainController', { 'viewport[name=mainviewport]': { afterrender: this.viewportRendered }, - 'panel[name=linechartaccordionpanel]': { - expand: this.showLineChartPanel + 'panel[name=fhemaccordion]': { + expand: this.showFHEMPanel }, 'panel[name=tabledataaccordionpanel]': { expand: this.showDatabaseTablePanel }, 'treepanel[name=maintreepanel]': { - itemclick: this.showDevicePanel + itemclick: this.showDeviceOrChartPanel, + treeupdated: this.setupTree }, 'textfield[name=commandfield]': { specialkey: this.checkCommand @@ -65,8 +62,13 @@ Ext.define('FHEM.controller.MainController', { }, 'button[name=restartfhem]': { click: this.restartFhem + }, + 'button[name=unsortedtree]': { + click: this.setupTree + }, + 'button[name=sortedtree]': { + click: this.setupTree } - }); }, @@ -86,43 +88,123 @@ Ext.define('FHEM.controller.MainController', { remove: false }); - //load the saved charts store with configured dblog name - var store = this.getSavedchartsgrid().getStore(); - store.getProxy().url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getcharts&XHR=1'; - store.load(); - if (Ext.isDefined(FHEM.version)) { var sp = this.getStatustextfield(); sp.setText(FHEM.version + "; Frontend Version: 0.8 - 2013-06-27"); } - //setup west accordion / treepanel - var wp = this.getWestaccordionpanel(), - rootNode = { text:"root", expanded: true, children: []}; + this.setupTree(false); + }, + + /** + * setup west accordion / treepanel + */ + setupTree: function(unsorted) { + var me = this, + rootNode = { text:"root", expanded: true, children: []}, + oldRootNode = me.getMaintreepanel().getRootNode(); - Ext.each(FHEM.info.Results, function(result) { - - if (result.list && !Ext.isEmpty(result.list)) { - - if (result.devices && result.devices.length > 0) { - node = {text: result.list, expanded: true, children: []}; - - 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}; + //first cleanup + if (oldRootNode) { + oldRootNode.removeAll(); + } + if (unsorted && unsorted.name === 'unsortedtree') { + //setup the tree "unsorted" + Ext.each(FHEM.info.Results, function(result) { + if (result.list && !Ext.isEmpty(result.list)) { + if (result.devices && result.devices.length > 0) { + var blacklist = ['dummy', 'notify', 'Global', 'telnet', 'DbLog', 'FileLog', 'FHEMWEB', 'weblink']; + if (Ext.Array.contains(blacklist, result.list)) { + node = {text: result.list, expanded: false, children: []}; + } else { + node = {text: result.list, expanded: true, children: []}; + } + 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}; + } + rootNode.children.push(node); } + }); + this.getMaintreepanel().setRootNode(rootNode); + this.addChartsToTree(); + } else { + //sort / create items by room + me.getMaintreepanel().setRootNode(rootNode); + var root = me.getMaintreepanel().getRootNode(); + Ext.each(FHEM.info.Results, function(result) { + if (result.list && !Ext.isEmpty(result.list)) { + if (result.devices && result.devices.length > 0) { + Ext.each(result.devices, function(device) { + if (device.ATTR && device.ATTR.room) { + //check if room exists + var resultnode = root.findChild("text", device.ATTR.room, true), + subnode = {text: device.NAME, leaf: true, data: device}; + if (!resultnode) { + //create roomfolder + var roomfolder; + if (device.ATTR.room !== "hidden") { + roomfolder = {text: device.ATTR.room, leaf: false, expanded: true, children: []}; + roomfolder.children.push(subnode); + root.appendChild(roomfolder); + } + } else { + resultnode.appendChild(subnode); + root.appendChild(resultnode); + } + } + }, this); + } else { + node = {text: result.list, leaf: true}; + root.appendChild(node); + } + } + }); + this.addChartsToTree(); + } + }, + + /** + * + */ + addChartsToTree: function() { + //load the saved charts store with configured dblog name + var me = this, + store = Ext.create('FHEM.store.SavedChartsStore', {}); + store.getProxy().url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getcharts&XHR=1'; + store.load(); + //add the charts to the tree + store.on("load", function() { + var rootNode = me.getMaintreepanel().getRootNode(), + chartfolder = {text: "Charts", expanded: true, children: []}; + rootNode.appendChild(chartfolder); + var chartfoldernode = rootNode.findChild("text", "Charts", true); - rootNode.children.push(node); + store.each(function(rec) { + var chartchild, + unsortedMode = Ext.ComponentQuery.query('button[name=unsortedtree]')[0].pressed; - } + if (!unsortedMode && rec.raw && rec.raw.VALUE && rec.raw.VALUE.parentFolder) { + var ownerFolder = rec.raw.VALUE.parentFolder, + index = rec.raw.VALUE.treeIndex, + parentNode = rootNode.findChild("text", ownerFolder, true); + + chartchild = {text: rec.raw.NAME, leaf: true, data: rec.raw, iconCls:'x-tree-icon-leaf-chart'}; + if (parentNode === null) { + rootNode.insertChild(index, chartchild); + } else { + parentNode.insertChild(index, chartchild); + } + } else { + chartchild = {text: rec.raw.NAME, leaf: true, data: rec.raw, iconCls:'x-tree-icon-leaf-chart'}; + chartfoldernode.appendChild(chartchild); + } + }); + }); - - this.getMaintreepanel().setRootNode(rootNode); }, /** @@ -339,36 +421,82 @@ Ext.define('FHEM.controller.MainController', { /** * */ - showDevicePanel: function(view, record) { - - var title; - if (record.raw.ATTR && record.raw.ATTR.alias && !Ext.isEmpty(record.raw.ATTR.alias)) { - title = record.raw.data.ATTR.alias; + showDeviceOrChartPanel: function(treeview, rec) { + var me = this; + if (rec.get('leaf') === true && + rec.raw.data && + rec.raw.data.TYPE && + rec.raw.data.TYPE === "savedchart") { + var lcp = Ext.ComponentQuery.query('linechartpanel')[0]; + if (!lcp || lcp.isVisible === false) { + this.showLineChartPanel(); + } } else { - title = record.raw.data.NAME; + this.showDevicePanel(treeview, rec); } + }, + + /** + * + */ + showFHEMPanel: function() { var panel = { - xtype: 'devicepanel', - title: title, + xtype: 'panel', + title: 'FHEM', region: 'center', layout: 'fit', - record: record, - hidden: true + hidden: false, + items : [ + { + xtype : 'component', + autoEl : { + tag : 'iframe', + src : '../../fhem?' + } + } + ] }; this.destroyCenterPanels(); this.getMainviewport().add(panel); + }, + + /** + * + */ + showDevicePanel: function(view, record) { - var createdpanel = this.getMainviewport().down('devicepanel'); - - createdpanel.getEl().setOpacity(0); - createdpanel.show(); - - createdpanel.getEl().animate({ - opacity: 1, - easing: 'easeIn', - duration: 500, - remove: false - }); + if (record.raw.leaf === true) { + var title; + if (record.raw.ATTR && + record.raw.ATTR.alias && + !Ext.isEmpty(record.raw.ATTR.alias)) { + title = record.raw.data.ATTR.alias; + } else { + title = record.raw.data.NAME; + } + var panel = { + xtype: 'devicepanel', + title: title, + region: 'center', + layout: 'fit', + record: record, + hidden: true + }; + this.destroyCenterPanels(); + this.getMainviewport().add(panel); + + var createdpanel = this.getMainviewport().down('devicepanel'); + + createdpanel.getEl().setOpacity(0); + createdpanel.show(); + + createdpanel.getEl().animate({ + opacity: 1, + easing: 'easeIn', + duration: 500, + remove: false + }); + } }, diff --git a/fhem/www/frontend/www/frontend/app/controller/TableDataController.js b/fhem/www/frontend/www/frontend/app/controller/TableDataController.js index 1ec5f8090..3f6717fb4 100644 --- a/fhem/www/frontend/www/frontend/app/controller/TableDataController.js +++ b/fhem/www/frontend/www/frontend/app/controller/TableDataController.js @@ -121,7 +121,7 @@ Ext.define('FHEM.controller.TableDataController', { } else { url += operation.start + "+"; } - url += operation.limit + "&XHR=1" + url += operation.limit + "&XHR=1"; if (operation.request) { operation.request.url = url; diff --git a/fhem/www/frontend/www/frontend/app/resources/application.css b/fhem/www/frontend/www/frontend/app/resources/application.css new file mode 100644 index 000000000..3acbca5d7 --- /dev/null +++ b/fhem/www/frontend/www/frontend/app/resources/application.css @@ -0,0 +1,3 @@ +.x-tree-icon.x-tree-icon-leaf.x-tree-icon-leaf-chart { + background-image: url(icons/chart_bar.png); +} \ No newline at end of file diff --git a/fhem/www/frontend/www/frontend/app/resources/icons/chart_bar.png b/fhem/www/frontend/www/frontend/app/resources/icons/chart_bar.png new file mode 100644 index 0000000000000000000000000000000000000000..9051fbc609b92b15af9be410e368b7adc20283b8 GIT binary patch literal 541 zcmV+&0^V&qIn(Wzh!))n z^W^$!aM&X3bCX~Vo|JLOLCb!-`g!yN7b-yh!|sbVZ|M~fElQAyiB?lO%sjz z7TJ==TTk%_A{ znxkIa+E~RC#EKF{U0G~y<6)R9(uCp7&f7|JN}RHwEO@{EgbF~D3a1<@ip|9yZb^6$ fo@6A$W#9P^w2GuX0-m@}00000NkvXXu0mjfB69Bi literal 0 HcmV?d00001 diff --git a/fhem/www/frontend/www/frontend/app/view/Viewport.js b/fhem/www/frontend/www/frontend/app/view/Viewport.js index 0a3793528..2124a0dd1 100644 --- a/fhem/www/frontend/www/frontend/app/view/Viewport.js +++ b/fhem/www/frontend/www/frontend/app/view/Viewport.js @@ -99,61 +99,90 @@ Ext.define('FHEM.view.Viewport', { }, { region: 'west', title: 'Navigation', - width: 270, + width: 300, autoScroll: true, resizable: true, xtype: 'panel', name: 'westaccordionpanel', - layout: 'accordion', + layout: { + type: 'accordion' + }, items: [ { xtype: 'panel', - title: 'FHEM Devices', + title: 'FHEM', + name: 'fhemaccordion', + collapsed: true, + bodyPadding: '5 5 5 5', + html: 'You can see and use the original FHEM Frontend here.
If you make changes to your config, it may be neccessary to reload this page to get the updated information.' + }, + { + xtype: 'panel', + title: 'Charts / Devices / Rooms', name: 'devicesaccordion', + width: '90%', collapsed: false, - autoScroll: true, +// autoScroll: true, + overflowY: 'auto', + bodyPadding: '2 2 2 2', items: [ { xtype: 'treepanel', name: 'maintreepanel', + border: false, rootVisible: false, + viewConfig: { + plugins: { ptype: 'treeviewdragdrop' } + }, root: { "text": "Root", "expanded": "true", "children": [] - } - } - ] - }, - { - xtype: 'panel', - title: 'LineChart', - name: 'linechartaccordionpanel', - autoScroll: true, - layout: 'fit', - items: [ - { - xtype: 'grid', - columns: [ - { - header: 'Saved Charts', - dataIndex: 'NAME', - width: '80%' - }, - { - xtype:'actioncolumn', - name: 'savedchartsactioncolumn', - width:'15%', - items: [{ - icon: 'lib/ext-4.2.0.663/images/dd/drop-no.gif', - tooltip: 'Delete' - }] - } + }, + tbar: [ + { + xtype: 'button', + name: 'unsortedtree', + toggleGroup: 'treeorder', + allowDepress: false, + text: 'Unsorted' + }, + { + xtype: 'button', + name: 'sortedtree', + toggleGroup: 'treeorder', + allowDepress: false, + text: 'Order by Room', + pressed: true + } ], - store: Ext.create('FHEM.store.SavedChartsStore', {}), - name: 'savedchartsgrid' - + listeners: { + 'itemcontextmenu': function(scope, rec, item, index, e, eOpts) { + e.preventDefault(); + + if (rec.raw.data.TYPE && rec.raw.data.TYPE === "savedchart") { + var menu = Ext.ComponentQuery.query('menu[id=treecontextmenu]')[0]; + if (menu) { + menu.destroy(); + } + Ext.create('Ext.menu.Menu', { + id: 'treecontextmenu', + items: [ + { + text: 'Delete Chart', + name: 'deletechartfromcontext', + record: rec + }, '-', { + text: 'Rename Chart', + name: 'renamechartfromcontext', + record: rec + } + ] + }).showAt(e.xy); + } + } + } } ] }, @@ -161,7 +190,9 @@ Ext.define('FHEM.view.Viewport', { xtype: 'panel', title: 'Database Tables', name: 'tabledataaccordionpanel', - autoScroll: true + autoScroll: true, + bodyPadding: '5 5 5 5', + html: 'You can search your database here.
Specify your queries by selecting a specific device, reading and timerange.' } ] }, diff --git a/fhem/www/frontend/www/frontend/index.html b/fhem/www/frontend/www/frontend/index.html index c18983019..9638fe68c 100644 --- a/fhem/www/frontend/www/frontend/index.html +++ b/fhem/www/frontend/www/frontend/index.html @@ -20,7 +20,8 @@

- + +