* Charts nun im Tree

* Tree sortierbar
  * Kontextmenü im Tree
  * Iframe für FHEM Frontend
  * Rest siehe Thread im Forum

git-svn-id: https://svn.fhem.de/fhem/trunk/fhem@3367 2b470e98-0d58-463d-a4d8-8e2adae1ed80

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

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-30_11:46:54 83500 www/frontend/app/controller/ChartController.js
-UPD 2013-06-27_09:34:52 13004 www/frontend/app/controller/MainController.js
+UPD 2013-06-30_11:46:54 18379 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 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

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]': {
+            'menuitem[name=deletechartfromcontext]': {
-                cellclick: this.loadsavedchart
-            },
-            'actioncolumn[name=savedchartsactioncolumn]': {
                 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:<br><br>" + 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 (record.raw.data && record.raw.data.TYPE && record.raw.data.TYPE === "savedchart") {
-        if (cellIndex === 0) {
+            var name = record.raw.data.NAME,
-            var name = record.get('NAME'),
+                chartdata = record.raw.data.VALUE;
-                chartdata = record.get('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: <br>" + rawchartdata);
+                Ext.Msg.alert("Error", "The Chart could not be loaded! RawChartdata was: <br>" + 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:<br><br>" + 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:<br><br>" + 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'),
+            chartid = menu.record.raw.data.ID;
-            chart = this.getChart();
         
         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:<br><br>" + 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:<br><br>" + 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:<br><br>" + 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:<br><br>" + json.msg);
+                                    } else {
+                                        Ext.Msg.alert("Error", "The new position could not be saved!");
+                                    }
+                                }
+                            });
+                        }
+                        
+                    });
+                }
+            });
+        }
     }
 });

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]': {
+            'panel[name=fhemaccordion]': {
-                expand: this.showLineChartPanel
+                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
+        this.setupTree(false);
-        var wp = this.getWestaccordionpanel(),
+    },
-            rootNode = { text:"root", expanded: true, children: []};
     
+    /**
+     * setup west accordion / treepanel
+     */
+    setupTree: function(unsorted) {
+        var me = this,
+            rootNode = { text:"root", expanded: true, children: []},
+            oldRootNode = me.getMaintreepanel().getRootNode();
+        
+        //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);
+            
+            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);
+        });
     },
     
     /**
@@ -336,13 +418,58 @@ Ext.define('FHEM.controller.MainController', {
         });
     },
     
+    /**
+     * 
+     */
+    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 {
+            this.showDevicePanel(treeview, rec);
+        }
+    },
+    
+    /**
+     * 
+     */
+    showFHEMPanel: function() {
+        var panel = {
+            xtype: 'panel',
+            title: 'FHEM',
+            region: 'center',
+            layout: 'fit',
+            hidden: false,
+            items : [
+                {
+                    xtype : 'component',
+                    autoEl : {
+                        tag : 'iframe',
+                        src : '../../fhem?'
+                    }
+                }
+            ]
+        };
+        this.destroyCenterPanels();
+        this.getMainviewport().add(panel);
+    },
+    
     /**
      * 
      */
     showDevicePanel: function(view, record) {
         
+        if (record.raw.leaf === true) {
             var title;
-        if (record.raw.ATTR && record.raw.ATTR.alias && !Ext.isEmpty(record.raw.ATTR.alias)) {
+            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;
@@ -369,6 +496,7 @@ Ext.define('FHEM.controller.MainController', {
                 duration: 500,
                 remove: false
             });
+        }
         
     },
     

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;

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);
+}

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. <br> 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": []
-                                    }
+                                    },
-                                }
+                                    tbar: [
-                            ]
+                                        { 
+                                            xtype: 'button', 
+                                            name: 'unsortedtree',
+                                            toggleGroup: 'treeorder',
+                                            allowDepress: false,
+                                            text: 'Unsorted'
                                         },
                                         { 
-                            xtype: 'panel',
+                                            xtype: 'button', 
-                            title: 'LineChart',
+                                            name: 'sortedtree',
-                            name: 'linechartaccordionpanel',
+                                            toggleGroup: 'treeorder',
-                            autoScroll: true,
+                                            allowDepress: false,
-                            layout: 'fit',
+                                            text: 'Order by Room',
-                            items: [
+                                            pressed: true
-                                {
-                                    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'
-                                             }]
                                         }
                                     ],
-                                    store: Ext.create('FHEM.store.SavedChartsStore', {}),
+                                    listeners: {
-                                    name: 'savedchartsgrid'
+                                        '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. <br> Specify your queries by selecting a specific device, reading and timerange.'
                         }
                     ]
                 }, 

www/frontend/www/frontend/index.html

@@ -20,7 +20,8 @@
     </p>
     
     <link rel="stylesheet" type="text/css" href="lib/ext-4.2.0.663/ext-theme-gray-all.css" />
-    <script type="text/javascript" src="lib/ext-4.2.0.663/ext-all.js"></script>
+    <link rel="stylesheet" type="text/css" href="app/resources/application.css" />
+    <script type="text/javascript" src="lib/ext-4.2.0.663/ext-all-debug.js"></script>
     <script type="text/javascript" src="app/userconfig.js"></script>
     <script type="text/javascript" src="app/app.js"></script>