see thread in forums for details

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

fhem/www/frontend/CHANGED

@@ -1,3 +1,5 @@
+Update vom 7.7.2013
+  * siehe Forumseintrag
 Update vom 30.6.2013
   * Charts nun im Tree
   * Tree sortierbar

fhem/www/frontend/controls_frontend.txt

@@ -273,13 +273,13 @@ 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-07-07_12:12:08 28202 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-07-07_12:12:08 16201 www/frontend/app/view/DevicePanel.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-30_12:31:20 83887 www/frontend/app/controller/ChartController.js
+UPD 2013-07-07_12:11:53 86984 www/frontend/app/controller/ChartController.js
-UPD 2013-06-30_11:46:54 18379 www/frontend/app/controller/MainController.js
+UPD 2013-07-07_12:11:54 18373 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

fhem/www/frontend/www/frontend/app/controller/ChartController.js

@@ -128,6 +128,12 @@ Ext.define('FHEM.controller.ChartController', {
         
         var me = this;
         
+        //hiding chart for performance reasons
+        if (me.getChart()) {
+            me.getChart().getStore().removeAll();
+            me.getChart().hide();
+        }
+        
         //show loadmask
         me.getLinechartpanel().setLoading(true);
         
@@ -292,34 +298,36 @@ Ext.define('FHEM.controller.ChartController', {
         var cfp = Ext.ComponentQuery.query('form[name=chartformpanel]')[0];
         var cdg = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0];
         
-        // disable animation as long as we resize, causes serious performance issues
+        if (lcv) {
-        lcv.animate = false;
+         // disable animation as long as we resize, causes serious performance issues
+            lcv.animate = false;
             
-        if (lcp && lcv && cfp && cdg) {
+            if (lcp && lcv && cfp && cdg) {
-            var lcph = lcp.getHeight(),
+                var lcph = lcp.getHeight(),
-                lcpw = lcp.getWidth(),
+                    lcpw = lcp.getWidth(),
-                cfph = cfp.getHeight(),
+                    cfph = cfp.getHeight(),
-                cdgh = cdg.getHeight();
+                    cdgh = cdg.getHeight();
                 
-            if (lcph && lcpw && cfph && cdgh) {
+                if (lcph && lcpw && cfph && cdgh) {
-                var chartheight = lcph - cfph - cdgh - 80;
+                    var chartheight = lcph - cfph - cdgh - 80;
-                var chartwidth = lcpw - 5;
+                    var chartwidth = lcpw - 5;
-                lcv.height = chartheight;
+                    lcv.height = chartheight;
-                lcv.width = chartwidth;
+                    lcv.width = chartwidth;
-                //render after 50ms to get component right
+                    //render after 50ms to get component right
-                window.setTimeout(function() {
+                    window.setTimeout(function() {
-                    if (lcv.series.get(0).hideAll) {
+                        if (lcv.series.get(0).hideAll) {
-                        lcv.series.get(0).hideAll();
+                            lcv.series.get(0).hideAll();
-                    }
+                        }
-                    lcv.doComponentLayout();
+                        lcv.doComponentLayout();
-                    if (lcv.series.get(0).showAll) {
+                        if (lcv.series.get(0).showAll) {
-                        lcv.series.get(0).showAll();
+                            lcv.series.get(0).showAll();
-                    }
+                        }
-                    lcv.redraw();
+                        lcv.redraw();
-                }, 50);
+                    }, 50);
+                }
             }
+            lcv.animate = true;
         }
-        lcv.animate = true;
     },
     
     /**
@@ -817,6 +825,8 @@ Ext.define('FHEM.controller.ChartController', {
                       me.generalizeChartData(generalizationfactor, i);
                   }
                   
+                  chart.series.add(yseries);
+                  
               } 
           },
           failure: function() {
@@ -824,8 +834,6 @@ Ext.define('FHEM.controller.ChartController', {
           }
         });
       
-        chart.series.add(yseries);
-        
         //check if we have added the last dataset
         if ((i + 1) === axeslength) {
             //add baselines
@@ -935,14 +943,29 @@ Ext.define('FHEM.controller.ChartController', {
         
         if (timediffhrs <= 1) {
             chart.axes.get(2).step = [Ext.Date.MINUTE, 10];
+            chart.axes.get(2).label.renderer = function(v) { 
+                return Ext.Date.format(new Date(v), "H:i:s"); 
+            };
         } else if (timediffhrs <= 24) {
             chart.axes.get(2).step = [Ext.Date.HOUR, 1];
+            chart.axes.get(2).label.renderer = function(v) { 
+                return Ext.Date.format(new Date(v), "H:i:s"); 
+            };
         } else if (timediffhrs <= 168) {
             chart.axes.get(2).step = [Ext.Date.DAY, 1];
+            chart.axes.get(2).label.renderer = function(v) { 
+                return Ext.Date.format(new Date(v), "d-m-Y"); 
+            };
         } else if (timediffhrs <= 720) {
             chart.axes.get(2).step = [Ext.Date.DAY, 7];
-        } else if (timediffhrs < 720) {
+            chart.axes.get(2).label.renderer = function(v) { 
+                return Ext.Date.format(new Date(v), "d-m-Y"); 
+            };
+        } else if (timediffhrs > 720) {
             chart.axes.get(2).step = [Ext.Date.MONTH, 1];
+            chart.axes.get(2).label.renderer = function(v) { 
+                return Ext.Date.format(new Date(v), "d-m-Y"); 
+            };
         }
         
         chart.axes.get(2).processView();
@@ -954,6 +977,8 @@ Ext.define('FHEM.controller.ChartController', {
         //enable animation
         chart.animate = true;
         
+        chart.show();
+        
     },
     
     /**
@@ -970,16 +995,24 @@ Ext.define('FHEM.controller.ChartController', {
         
         if (axisside === "left") {
             axis = chart.axes.get(0);
+            axistitle = this.getChartformpanel().down('textfield[name=leftaxistitle]').getValue();
         } else if (axisside === "right") {
             axis = chart.axes.get(1);
+            axistitle = this.getChartformpanel().down('textfield[name=rightaxistitle]').getValue();
         }
-        var currenttitle = axis.title;
         
-        if (currenttitle === "") {
+        if (axistitle && axistitle !== "") {
-            axis.setTitle(title);
+            axis.setTitle(axistitle);
         } else {
-            axis.setTitle(axis.title + " / " + title);
+            var currenttitle = axis.title;
+            
+            if (currenttitle === "") {
+                axis.setTitle(title);
+            } else {
+                axis.setTitle(axis.title + " / " + title);
+            }
         }
+        
         if (axis.title.length > 80) {
             axis.displaySprite.attr.font = "10px Arial, Helvetica, sans-serif";
         } else if (axis.title.length > 50) {
@@ -999,7 +1032,7 @@ Ext.define('FHEM.controller.ChartController', {
                 axis : axisside,
                 xField : 'TIMESTAMP',
                 yField : yfield,
-                title: title,
+                title: axis.title,
                 showInLegend: true,
                 smooth: 0,
                 highlight: true,
@@ -1113,6 +1146,8 @@ Ext.define('FHEM.controller.ChartController', {
         
         Ext.ComponentQuery.query('radiogroup[name=leftaxisconfiguration]')[0].items.items[0].setValue(true);
         Ext.ComponentQuery.query('radiogroup[name=rightaxisconfiguration]')[0].items.items[0].setValue(true);
+        this.getChartformpanel().down('textfield[name=rightaxistitle]').setValue("");
+        this.getChartformpanel().down('textfield[name=leftaxistitle]').setValue("");
     
     },
     
@@ -1167,18 +1202,6 @@ Ext.define('FHEM.controller.ChartController', {
         
         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
@@ -1231,14 +1254,24 @@ Ext.define('FHEM.controller.ChartController', {
                         yaxiscolorcombo = yaxescolorcombos[i].getDisplayValue(),
                         yaxisfillcheck = yaxesfillchecks[i].checked,
                         yaxisstepcheck = yaxesstepchecks[i].checked,
-                        axisside = axissideradio[i].getChecked()[0].getSubmitValue();
+                        yaxisstatistics = yaxesstatistics[i].getValue(),
-                        yaxisstatistics = yaxesstatistics[i].getValue();
+                        axisside = axissideradio[i].getChecked()[0].getSubmitValue(),
+                        rightaxistitle = me.getChartformpanel().down('textfield[name=rightaxistitle]').getValue(),
+                        leftaxistitle = me.getChartformpanel().down('textfield[name=leftaxistitle]').getValue();
+                    //replacing spaces in title
+                    rightaxistitle = rightaxistitle.replace(/ /g, "_");
+                    leftaxistitle = leftaxistitle.replace(/ /g, "_");
+                    //replacing + in title
+                    rightaxistitle = rightaxistitle.replace(/\+/g, "_");
+                    leftaxistitle = leftaxistitle.replace(/\+/g, "_");
                     
                     if (i === 0) {
                         jsonConfig += '"y":"' + yaxis + '","device":"' + device + '",';
                         jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",';
                         jsonConfig += '"yaxisstepcheck":"' + yaxisstepcheck + '",';
                         jsonConfig += '"yaxisside":"' + axisside + '",';
+                        jsonConfig += '"leftaxistitle":"' + leftaxistitle + '",';
+                        jsonConfig += '"rightaxistitle":"' + rightaxistitle + '",';
                         
                         if (yaxisstatistics !== "none") {
                             jsonConfig += '"yaxisstatistics":"' + yaxisstatistics + '",';
@@ -1362,6 +1395,8 @@ Ext.define('FHEM.controller.ChartController', {
             //cleanup the form before loading
             this.resetFormFields();
             
+            this.getChartformpanel().collapse();
+            
             if (chartdata && !Ext.isEmpty(chartdata)) {
                 
                 //reset y-axis max
@@ -1511,12 +1546,32 @@ Ext.define('FHEM.controller.ChartController', {
                     Ext.ComponentQuery.query('numberfield[name=rightaxismaximum]')[0].setValue(chartdata.rightaxismax);
                 }
                 
+                if (chartdata.rightaxistitle && chartdata.rightaxistitle !== "") {
+                    //replacing spaces in title
+                    var rightaxistitle = chartdata.rightaxistitle.replace(/_/g, " ");
+                    me.getChartformpanel().down('textfield[name=rightaxistitle]').setValue(rightaxistitle);
+                }
+                
+                if (chartdata.leftaxistitle && chartdata.leftaxistitle !== "") {
+                    //replacing spaces in title
+                    var leftaxistitle = chartdata.leftaxistitle.replace(/_/g, " ");
+                    me.getChartformpanel().down('textfield[name=leftaxistitle]').setValue(leftaxistitle);
+                }
+                
                 this.requestChartData();
                 this.getLinechartpanel().setTitle(name);
             } else {
                 Ext.Msg.alert("Error", "The Chart could not be loaded! RawChartdata was: <br>" + chartdata);
             }
             
+        } else if (record.raw.data.template) {
+            //seems we have clicked on a template chart, resetting the form...
+            me.resetFormFields();
+            if (me.getChart()) {
+                me.getChart().getStore().removeAll();
+                me.getChart().hide();
+                this.getChartformpanel().expand();
+            }
         }
     },
     
@@ -1760,7 +1815,7 @@ Ext.define('FHEM.controller.ChartController', {
             var rec = action.records[0],
             id = rec.raw.data.ID;
         
-            if (rec.raw.data && rec.raw.data.ID && rec.raw.data.TYPE === "savedchart") {
+            if (rec.raw.data && rec.raw.data.ID && rec.raw.data.TYPE === "savedchart" && !rec.raw.data.template) {
                 var rootNode = this.getMaintreepanel().getRootNode();
                 rootNode.cascadeBy(function(node) {
                     if (node.raw && node.raw.data && node.raw.data.ID && node.raw.data.ID === id) {

fhem/www/frontend/www/frontend/app/controller/MainController.js

@@ -79,6 +79,11 @@ Ext.define('FHEM.controller.MainController', {
         
         var me = this;
         
+        me.createFHEMPanel();
+        me.createDevicePanel();
+        me.createLineChartPanel();
+        me.createDatabaseTablePanel();
+        
         me.getMainviewport().show();
         me.getMainviewport().getEl().setOpacity(0);
         me.getMainviewport().getEl().animate({
@@ -90,7 +95,7 @@ Ext.define('FHEM.controller.MainController', {
         
         if (Ext.isDefined(FHEM.version)) {
             var sp = this.getStatustextfield();
-            sp.setText(FHEM.version + "; Frontend Version: 0.8 - 2013-06-27");
+            sp.setText(FHEM.version + "; Frontend Version: 0.9 - 2013-07-07");
         }
         
         this.setupTree(false);
@@ -204,6 +209,10 @@ Ext.define('FHEM.controller.MainController', {
                 }
             });
             
+            // at last we add a chart template to the folder which wont be saved to db and cannot be deleted
+            chartchild = {text: 'Create new Chart', leaf: true, data: {template: true}, iconCls:'x-tree-icon-leaf-chart'};
+            chartfoldernode.appendChild(chartchild);
+            
         });
     },
     
@@ -411,10 +420,10 @@ Ext.define('FHEM.controller.MainController', {
     /**
      * 
      */
-    destroyCenterPanels: function() {
+    hideCenterPanels: function() {
         var panels = Ext.ComponentQuery.query('panel[region=center]');
         Ext.each(panels, function(panel) {
-            panel.destroy();
+            panel.hide();
         });
     },
     
@@ -423,14 +432,11 @@ Ext.define('FHEM.controller.MainController', {
      */
     showDeviceOrChartPanel: function(treeview, rec) {
         var me = this;
-        if (rec.get('leaf') === true && 
+        if (rec.raw.data.template === true || rec.get('leaf') === true && 
             rec.raw.data &&
             rec.raw.data.TYPE && 
             rec.raw.data.TYPE === "savedchart") {
-                var lcp = Ext.ComponentQuery.query('linechartpanel')[0];
+                this.showLineChartPanel();
-                if (!lcp || lcp.isVisible === false) {
-                    this.showLineChartPanel();
-                }
         } else {
             this.showDevicePanel(treeview, rec);
         }
@@ -440,12 +446,22 @@ Ext.define('FHEM.controller.MainController', {
      * 
      */
     showFHEMPanel: function() {
+        var panel = Ext.ComponentQuery.query('panel[name=fhempanel]')[0];
+        this.hideCenterPanels();
+        panel.show();
+    },
+    
+    /**
+     * 
+     */
+    createFHEMPanel: function() {
         var panel = {
             xtype: 'panel',
+            name: 'fhempanel',
             title: 'FHEM',
             region: 'center',
             layout: 'fit',
-            hidden: false,
+            hidden: true,
             items : [
                 {
                     xtype : 'component',
@@ -456,7 +472,6 @@ Ext.define('FHEM.controller.MainController', {
                 }
             ]
         };
-        this.destroyCenterPanels();
         this.getMainviewport().add(panel);
     },
     
@@ -466,6 +481,7 @@ Ext.define('FHEM.controller.MainController', {
     showDevicePanel: function(view, record) {
         
         if (record.raw.leaf === true) {
+            var panel = Ext.ComponentQuery.query('devicepanel')[0];
             var title;
             if (record.raw.ATTR && 
                 record.raw.ATTR.alias && 
@@ -474,28 +490,11 @@ Ext.define('FHEM.controller.MainController', {
             } else {
                 title = record.raw.data.NAME;
             }
-            var panel = {
+            panel.setTitle(title);
-                xtype: 'devicepanel',
+            panel.record = record;
-                title: title,
-                region: 'center',
-                layout: 'fit',
-                record: record,
-                hidden: true
-            };
-            this.destroyCenterPanels();
-            this.getMainviewport().add(panel);
             
-            var createdpanel = this.getMainviewport().down('devicepanel');
+            this.hideCenterPanels();
-            
+            panel.show();
-            createdpanel.getEl().setOpacity(0);
-            createdpanel.show();
-            
-            createdpanel.getEl().animate({
-                opacity: 1, 
-                easing: 'easeIn',
-                duration: 500,
-                remove: false
-            });
         }
         
     },
@@ -503,8 +502,31 @@ Ext.define('FHEM.controller.MainController', {
     /**
      * 
      */
-    showLineChartPanel: function() {
+    createDevicePanel: function() {
+        var panel = {
+            xtype: 'devicepanel',
+            title: null,
+            region: 'center',
+            layout: 'fit',
+            record: null,
+            hidden: true
+        };
+        this.getMainviewport().add(panel);
+    },
     
+    /**
+     * 
+     */
+    showLineChartPanel: function() {
+        var panel = Ext.ComponentQuery.query('linechartpanel')[0];
+        this.hideCenterPanels();
+        panel.show();
+    },
+    
+    /**
+     * 
+     */
+    createLineChartPanel: function() {
         var panel = {
             xtype: 'linechartpanel',
             name: 'linechartpanel',
@@ -512,27 +534,13 @@ Ext.define('FHEM.controller.MainController', {
             layout: 'fit',
             hidden: true
         };
-        this.destroyCenterPanels();
         this.getMainviewport().add(panel);
-        
-        var createdpanel = this.getMainviewport().down('linechartpanel');
-        
-        createdpanel.getEl().setOpacity(0);
-        createdpanel.show();
-        
-        createdpanel.getEl().animate({
-            opacity: 1, 
-            easing: 'easeIn',
-            duration: 500,
-            remove: false
-        });
-        
     },
     
     /**
      * 
      */
-    showDatabaseTablePanel: function() {
+    createDatabaseTablePanel: function() {
         var panel = {
             xtype: 'tabledatagridpanel',
             name: 'tabledatagridpanel',
@@ -540,20 +548,17 @@ Ext.define('FHEM.controller.MainController', {
             layout: 'fit',
             hidden: true
         };
-        this.destroyCenterPanels();
         this.getMainviewport().add(panel);
         
-        var createdpanel = this.getMainviewport().down('tabledatagridpanel');
+    },
     
-        createdpanel.getEl().setOpacity(0);
+    /**
-        createdpanel.show();
+     * 
-        
+     */
-        createdpanel.getEl().animate({
+    showDatabaseTablePanel: function() {
-            opacity: 1, 
+        var panel = Ext.ComponentQuery.query('tabledatagridpanel')[0];
-            easing: 'easeIn',
+        this.hideCenterPanels();
-            duration: 500,
+        panel.show();
-            remove: false
-        });
     }
     
 });

fhem/www/frontend/www/frontend/app/view/DevicePanel.js

@@ -119,23 +119,27 @@ Ext.define('FHEM.view.DevicePanel', {
         };
         me.down('panel[name=container]').add(devicereadingsgrid);
         
-        // Stop all old tasks
+        me.on("show", function() {
-        Ext.TaskManager.stopAll();
-        
-        // Starting a task to update the device readings
-        var task = {
-            run: function(){
-                me.getDeviceData(me.record.raw.data.NAME);
-            },
-            interval: 5000 //5 seconds
-        };
-        Ext.TaskManager.start(task);
-        
-        me.on("afterrender", function() {
             me.setLoading(true);
+            
+            // Stop all old tasks
+            Ext.TaskManager.stopAll();
+            
+            //remove old controls to rerender them on devicechange
+            me.down('fieldset[name=controlfieldset]').removeAll();
+            me.down('fieldset[name=controlfieldset]').hide();
+            
+            // Starting a task to update the device readings
+            var task = {
+                run: function(){
+                    me.getDeviceData(me.record.raw.data.NAME);
+                },
+                interval: 5000 //5 seconds
+            };
+            Ext.TaskManager.start(task);
         });
         
-        me.on("destroy", function() {
+        me.on("hide", function() {
             Ext.TaskManager.stopAll();
         });
         
@@ -311,6 +315,7 @@ Ext.define('FHEM.view.DevicePanel', {
                 }
             });
         } else { // we already have controls added, just checkin the state if everything is up2date
+            
             Ext.each(controlfieldset.items.items, function(subfieldset) {
                 
                 Ext.each(subfieldset.items.items, function(item) {
@@ -338,6 +343,12 @@ Ext.define('FHEM.view.DevicePanel', {
                 });
             });
         }
+        if (controlfieldset.items.length <= 0) {
+            controlfieldset.hide();
+        } else {
+            controlfieldset.show();
+        }
+        
     },
     
     /**
@@ -418,7 +429,6 @@ Ext.define('FHEM.view.DevicePanel', {
      */
     getDeviceData: function(name) {
         var me = this;
-        
         Ext.Ajax.request({
             method: 'GET',
             disableCaching: false,

fhem/www/frontend/www/frontend/app/view/LineChartPanel.js

@@ -91,7 +91,7 @@ Ext.define('FHEM.view.LineChartPanel', {
         var chartSettingPanel = Ext.create('Ext.form.Panel', {
             title: 'Chart Settings - Click me to edit',
             name: 'chartformpanel',
-            maxHeight: 270,
+            maxHeight: 325,
             autoScroll: true,
             collapsible: true,
             titleCollapse: true,
@@ -272,6 +272,32 @@ Ext.define('FHEM.view.LineChartPanel', {
                         }
                     ]
                 }, 
+                {
+                    xtype: 'fieldset',
+                    layout: 'column',
+                    title: 'Axis Title Configuration',
+                    defaults: {
+                        margin: '0 0 5 10'
+                    },
+                    items: [
+                        {
+                            xtype: 'textfield',
+                            fieldLabel: 'Left Axis Title',
+                            name: 'leftaxistitle',
+                            allowBlank: true,
+                            labelWidth: 100,
+                            width: 340
+                        },
+                        {
+                            xtype: 'textfield',
+                            fieldLabel: 'Right Axis Title',
+                            name: 'rightaxistitle',
+                            allowBlank: true,
+                            labelWidth: 100,
+                            width: 340
+                        }
+                    ]
+                }, 
                 {
                     xtype: 'fieldset',
                     layout: 'column',