diff --git a/fhem/www/frontend/CHANGED b/fhem/www/frontend/CHANGED index aa37b1337..88fa2d166 100644 --- a/fhem/www/frontend/CHANGED +++ b/fhem/www/frontend/CHANGED @@ -1,3 +1,7 @@ +Update vom 27.4.2013 + * Performance Verbesserungen der Charts + * Achsenkonfiguration aufgeräumt + * Achsenbeschriftung verbessert / erweitert Update vom 26.4.2013 * Testintegration von Highcharts * Neue abhängige Bibliotheken Highcharts und JQuery hinzugefügt diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt index b0b278c98..de8da3c93 100644 --- a/fhem/www/frontend/controls_frontend.txt +++ b/fhem/www/frontend/controls_frontend.txt @@ -49,15 +49,15 @@ UPD 2013-04-03_07:27:17 345 www/frontend/app/resources/icons/arrow_left.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-04-26_05:05:23 2238 www/frontend/app/app.js -UPD 2013-04-20_04:52:50 20318 www/frontend/app/view/LineChartPanel.js +UPD 2013-04-27_06:11:24 22156 www/frontend/app/view/LineChartPanel.js UPD 2013-04-26_05:05:57 22790 www/frontend/app/view/HighChartsPanel.js UPD 2013-04-20_04:52:50 1202 www/frontend/app/view/ChartGridPanel.js UPD 2013-04-03_07:26:40 15793 www/frontend/app/view/DevicePanel.js UPD 2013-04-26_05:05:57 8922 www/frontend/app/view/Viewport.js UPD 2013-04-01_07:05:14 2476 www/frontend/app/view/TableDataGridPanel.js -UPD 2013-04-20_04:52:30 62546 www/frontend/app/controller/ChartController.js +UPD 2013-04-27_06:11:02 64176 www/frontend/app/controller/ChartController.js UPD 2013-04-26_05:05:41 12806 www/frontend/app/controller/HighChartController.js -UPD 2013-04-26_05:05:41 13891 www/frontend/app/controller/MainController.js +UPD 2013-04-27_06:15:02 13892 www/frontend/app/controller/MainController.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 @@ -67,7 +67,7 @@ UPD 2013-04-01_07:04:54 432 www/frontend/app/store/ChartStore.js UPD 2013-04-01_07:04:54 451 www/frontend/app/store/SavedChartsStore.js UPD 2013-04-01_07:04:54 426 www/frontend/app/store/ReadingsStore.js UPD 2013-04-01_07:04:54 1048 www/frontend/app/store/TableDataStore.js -UPD 2013-04-01_07:04:53 414 www/frontend/app/store/DeviceStore.js +UPD 2013-04-27_06:11:13 439 www/frontend/app/store/DeviceStore.js 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 diff --git a/fhem/www/frontend/www/frontend/app/controller/ChartController.js b/fhem/www/frontend/www/frontend/app/controller/ChartController.js index 9298abdf9..0be8c9dcd 100644 --- a/fhem/www/frontend/www/frontend/app/controller/ChartController.js +++ b/fhem/www/frontend/www/frontend/app/controller/ChartController.js @@ -127,145 +127,148 @@ Ext.define('FHEM.controller.ChartController', { //show loadmask me.getLinechartpanel().setLoading(true); - //collapse chart settings - me.getChartformpanel().collapse(); + //timeout needed for loadmask to appear + window.setTimeout(function() { - //getting the necessary values - var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'), - yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'), - yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'), - yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'), - yaxesstepcheck = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]'), - yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'), - axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]'); - - var starttime = me.getStarttimepicker().getValue(), - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'), - endtime = me.getEndtimepicker().getValue(), - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'), - dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0], - chartpanel = me.getLinechartpanel(), - chart = me.getChart(); - - //cleanup chartpanel - var existingchartgrid = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0]; - if (!existingchartgrid) { - var chartdatagrid = Ext.create('FHEM.view.ChartGridPanel', { - name: 'chartgridpanel', - height: 200, - maxHeight: 200 - }); - chartpanel.add(chartdatagrid); - } else { - existingchartgrid.down('grid').getStore().removeAll(); - } - var existingchart = Ext.ComponentQuery.query('panel[name=chartpanel]')[0]; - if (!existingchart) { - var store = Ext.create('FHEM.store.ChartStore'), - proxy = store.getProxy(); - chart = me.createChart(store); - chartpanel.add(chart); - } else { - chart.getStore().removeAll(); - chart.getStore().destroy(); - //removes the store completely from chart - chart.bindStore(); - var chartstore = Ext.create('FHEM.store.ChartStore'); - chart.bindStore(chartstore); - chart.series.removeAll(); - chart.axes.get(0).setTitle(""); - } - - - //reset zoomValues - chartpanel.setLastYmax(null); - chartpanel.setLastYmin(null); - chartpanel.setLastXmax(null); - chartpanel.setLastXmin(null); - - me.maxYValue = 0; - me.minYValue = 9999999; - me.maxY2Value = 0; - me.minY2Value = 9999999; - - //check if timerange or dynamic time should be used - dynamicradio.eachBox(function(box, idx){ - var date = new Date(); - if (box.checked && stepchangecalled !== true) { - if (box.inputValue === "year") { - starttime = Ext.Date.parse(date.getUTCFullYear() + "-01-01", "Y-m-d"); - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); - endtime = Ext.Date.parse(date.getUTCFullYear() + 1 + "-01-01", "Y-m-d"); - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); - } else if (box.inputValue === "month") { - starttime = Ext.Date.getFirstDateOfMonth(date); - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); - endtime = Ext.Date.getLastDateOfMonth(date); - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); - } else if (box.inputValue === "week") { - date.setHours(0); - date.setMinutes(0); - date.setSeconds(0); - //monday starts with 0 till sat with 5, sund with -1 - var dayoffset = date.getDay() - 1, - monday, - nextmonday; - if (dayoffset >= 0) { - monday = Ext.Date.add(date, Ext.Date.DAY, -dayoffset); - } else { - //we have a sunday - monday = Ext.Date.add(date, Ext.Date.DAY, -6); - } - nextmonday = Ext.Date.add(monday, Ext.Date.DAY, 7); - - starttime = monday; - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); - endtime = nextmonday; - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); - - } else if (box.inputValue === "day") { - date.setHours(0); - date.setMinutes(0); - date.setSeconds(0); - - starttime = date; - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); - endtime = Ext.Date.add(date, Ext.Date.DAY, 1); - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); - - } else if (box.inputValue === "hour") { - date.setMinutes(0); - date.setSeconds(0); - - starttime = date; - dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); - endtime = Ext.Date.add(date, Ext.Date.HOUR, 1); - dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); - } else { - Ext.Msg.alert("Error", "Could not setup the dynamic time."); - } - me.getStarttimepicker().setValue(starttime); - me.getEndtimepicker().setValue(endtime); + //suspending complex layouts + Ext.suspendLayouts(); + + //getting the necessary values + var devices = Ext.ComponentQuery.query('combobox[name=devicecombo]'), + yaxes = Ext.ComponentQuery.query('combobox[name=yaxiscombo]'), + yaxescolorcombos = Ext.ComponentQuery.query('combobox[name=yaxiscolorcombo]'), + yaxesfillchecks = Ext.ComponentQuery.query('checkbox[name=yaxisfillcheck]'), + yaxesstepcheck = Ext.ComponentQuery.query('checkbox[name=yaxisstepcheck]'), + yaxesstatistics = Ext.ComponentQuery.query('combobox[name=yaxisstatisticscombo]'), + axissideradio = Ext.ComponentQuery.query('radiogroup[name=axisside]'); + + var starttime = me.getStarttimepicker().getValue(), + dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'), + endtime = me.getEndtimepicker().getValue(), + dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'), + dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0], + chartpanel = me.getLinechartpanel(), + chart = me.getChart(); + + //cleanup chartpanel + var existingchartgrid = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0]; + if (!existingchartgrid) { + var chartdatagrid = Ext.create('FHEM.view.ChartGridPanel', { + name: 'chartgridpanel', + height: 200, + maxHeight: 200 + }); + chartpanel.add(chartdatagrid); + } else { + existingchartgrid.down('grid').getStore().removeAll(); } - }); - - var i = 0; - Ext.each(yaxes, function(y) { - var device = devices[i].getValue(), - yaxis = yaxes[i].getValue(), - yaxiscolorcombo = yaxescolorcombos[i].getValue(), - yaxisfillcheck = yaxesfillchecks[i].checked, - yaxisstepcheck = yaxesstepcheck[i].checked, - yaxisstatistics = yaxesstatistics[i].getValue(), - axisside = axissideradio[i].getChecked()[0].getSubmitValue(); - if(yaxis === "" || yaxis === null) { - yaxis = yaxes[i].getRawValue(); + var existingchart = Ext.ComponentQuery.query('panel[name=chartpanel]')[0]; + if (!existingchart) { + var store = Ext.create('FHEM.store.ChartStore'), + proxy = store.getProxy(); + chart = me.createChart(store); + chartpanel.add(chart); + } else { + chart.getStore().removeAll(); + chart.getStore().destroy(); + //removes the store completely from chart + chart.bindStore(); + var chartstore = Ext.create('FHEM.store.ChartStore'); + chart.bindStore(chartstore); + chart.series.removeAll(); + chart.axes.get(0).setTitle(""); } - me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime); - i++; - }); - + //reset zoomValues + chartpanel.setLastYmax(null); + chartpanel.setLastYmin(null); + chartpanel.setLastXmax(null); + chartpanel.setLastXmin(null); + + me.maxYValue = 0; + me.minYValue = 9999999; + me.maxY2Value = 0; + me.minY2Value = 9999999; + + //check if timerange or dynamic time should be used + dynamicradio.eachBox(function(box, idx){ + var date = new Date(); + if (box.checked && stepchangecalled !== true) { + if (box.inputValue === "year") { + starttime = Ext.Date.parse(date.getUTCFullYear() + "-01-01", "Y-m-d"); + dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); + endtime = Ext.Date.parse(date.getUTCFullYear() + 1 + "-01-01", "Y-m-d"); + dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); + } else if (box.inputValue === "month") { + starttime = Ext.Date.getFirstDateOfMonth(date); + dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); + endtime = Ext.Date.getLastDateOfMonth(date); + dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); + } else if (box.inputValue === "week") { + date.setHours(0); + date.setMinutes(0); + date.setSeconds(0); + //monday starts with 0 till sat with 5, sund with -1 + var dayoffset = date.getDay() - 1, + monday, + nextmonday; + if (dayoffset >= 0) { + monday = Ext.Date.add(date, Ext.Date.DAY, -dayoffset); + } else { + //we have a sunday + monday = Ext.Date.add(date, Ext.Date.DAY, -6); + } + nextmonday = Ext.Date.add(monday, Ext.Date.DAY, 7); + + starttime = monday; + dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); + endtime = nextmonday; + dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); + + } else if (box.inputValue === "day") { + date.setHours(0); + date.setMinutes(0); + date.setSeconds(0); + + starttime = date; + dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); + endtime = Ext.Date.add(date, Ext.Date.DAY, 1); + dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); + + } else if (box.inputValue === "hour") { + date.setMinutes(0); + date.setSeconds(0); + + starttime = date; + dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'); + endtime = Ext.Date.add(date, Ext.Date.HOUR, 1); + dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'); + } else { + Ext.Msg.alert("Error", "Could not setup the dynamic time."); + } + me.getStarttimepicker().setValue(starttime); + me.getEndtimepicker().setValue(endtime); + } + }); + + var i = 0; + Ext.each(yaxes, function(y) { + var device = devices[i].getValue(), + yaxis = yaxes[i].getValue(), + yaxiscolorcombo = yaxescolorcombos[i].getValue(), + yaxisfillcheck = yaxesfillchecks[i].checked, + yaxisstepcheck = yaxesstepcheck[i].checked, + yaxisstatistics = yaxesstatistics[i].getValue(), + axisside = axissideradio[i].getChecked()[0].getSubmitValue(); + if(yaxis === "" || yaxis === null) { + yaxis = yaxes[i].getRawValue(); + } + + me.populateAxis(i, yaxes.length, device, yaxis, yaxiscolorcombo, yaxisfillcheck, yaxisstepcheck, axisside, yaxisstatistics, dbstarttime, dbendtime); + i++; + }); + + }, 300); }, /** @@ -277,13 +280,24 @@ Ext.define('FHEM.controller.ChartController', { var cfp = Ext.ComponentQuery.query('form[name=chartformpanel]')[0]; var cdg = Ext.ComponentQuery.query('panel[name=chartgridpanel]')[0]; - if (lcp && lcv && cfp && cdg) { - var chartheight = lcp.getHeight() - cfp.getHeight() - cdg.getHeight() - 95; - var chartwidth = lcp.getWidth() - 25; - lcv.setHeight(chartheight); - lcv.setWidth(chartwidth); - } + // disable animation as long as we resize, causes serious performance issues + lcv.animate = false; + if (lcp && lcv && cfp && cdg) { + var lcph = lcp.getHeight(), + lcpw = lcp.getWidth(), + cfph = cfp.getHeight(), + cdgh = cdg.getHeight(); + + if (lcph && lcpw && cfph && cdgh) { + var chartheight = lcph - cfph - cdgh - 95; + var chartwidth = lcpw - 25; + lcv.setHeight(chartheight); + lcv.setWidth(chartwidth); + } + } + lcv.animate = true; + lcv.redraw(); }, /** @@ -388,7 +402,7 @@ Ext.define('FHEM.controller.ChartController', { title : 'Time' } ], - animate: true, + animate: false, store: store, enableMask: true, mask: true,//'vertical',//true, //'horizontal', @@ -438,7 +452,6 @@ Ext.define('FHEM.controller.ChartController', { * creating baselines */ createBaseLine: function(index, basestart, baseend, basefill, basecolor) { - var me = this, chart = me.getChart(), store = chart.getStore(), @@ -504,9 +517,9 @@ Ext.define('FHEM.controller.ChartController', { generalizationfactor = Ext.ComponentQuery.query('combobox[name=genfactor]')[0].getValue(); if (i > 0) { - yseries = me.createSeries('VALUE' + (i + 1), yaxis, yaxisfillcheck, yaxiscolorcombo, axisside); + yseries = me.createSeries('VALUE' + (i + 1), device + " - " + yaxis, yaxisfillcheck, yaxiscolorcombo, axisside); } else { - yseries = me.createSeries('VALUE', yaxis, yaxisfillcheck, yaxiscolorcombo, axisside); + yseries = me.createSeries('VALUE', device + " - " + yaxis, yaxisfillcheck, yaxiscolorcombo, axisside); } var url; @@ -613,7 +626,7 @@ Ext.define('FHEM.controller.ChartController', { } //as we have the valuetext, we can fill the grid - //fill the grid with the data + //fill the grid with the data me.fillChartGrid(json.data, valuetext); var timestamptext; @@ -645,7 +658,7 @@ Ext.define('FHEM.controller.ChartController', { //check if we have to ues steps //if yes, create a new record with the same value as the last one //and a timestamp 1 millisecond less than the actual record to add. - // only do this, when last record is from same axis + //only do this, when last record is from same axis if(yaxisstepcheck) { if (store.last() && !Ext.isEmpty(store.last().get(valuetext)) && store.last().get(valuetext) !== "") { var lastrec = store.last(); @@ -727,7 +740,7 @@ Ext.define('FHEM.controller.ChartController', { if (me.minYValue > baseend) { me.minYValue = baseend; } - i++; + j++; }); me.doFinalChartLayout(chart); } @@ -774,13 +787,17 @@ Ext.define('FHEM.controller.ChartController', { chart.axes.get(2).fromDate = starttime; chart.axes.get(2).toDate = endtime; - chart.axes.get(2).processView(); - chart.redraw(); - me.resizeChart(); + chart.axes.get(2).processView(); + + //collapse chart settings + me.getChartformpanel().collapse(); me.getLinechartpanel().setLoading(false); + //enable animation + chart.animate = true; + }, /** @@ -788,6 +805,9 @@ Ext.define('FHEM.controller.ChartController', { */ createSeries: function(yfield, title, fill, color, axisside) { + //resuming the layout + Ext.resumeLayouts(true); + //setting axistitle and fontsize var chart = this.getChart(), axis; @@ -804,7 +824,16 @@ Ext.define('FHEM.controller.ChartController', { } else { axis.setTitle(axis.title + " / " + title); } - axis.displaySprite.attr.font = "14px Arial, Helvetica, sans-serif"; + if (axis.title.length > 80) { + axis.displaySprite.attr.font = "10px Arial, Helvetica, sans-serif"; + } else if (axis.title.length > 50) { + axis.displaySprite.attr.font = "12px Arial, Helvetica, sans-serif"; + } else if (axis.title.length > 40) { + axis.displaySprite.attr.font = "13px Arial, Helvetica, sans-serif"; + } else { + axis.displaySprite.attr.font = "14px Arial, Helvetica, sans-serif"; + } + //adding linked yfield to axis fields axis.fields.push(yfield); @@ -1344,7 +1373,7 @@ Ext.define('FHEM.controller.ChartController', { */ fillChartGrid: function(jsondata, valuetext) { if (jsondata && jsondata[0]) { - this.getChartformpanel().collapse(); + //this.getChartformpanel().collapse(); var store = this.getChartdatagrid().getStore(), columnwidth = 0, diff --git a/fhem/www/frontend/www/frontend/app/controller/MainController.js b/fhem/www/frontend/www/frontend/app/controller/MainController.js index da614ea14..881603e18 100644 --- a/fhem/www/frontend/www/frontend/app/controller/MainController.js +++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js @@ -97,7 +97,7 @@ Ext.define('FHEM.controller.MainController', { if (Ext.isDefined(FHEM.version)) { var sp = this.getStatustextfield(); - sp.setText(FHEM.version + "; Frontend Version: 0.6 - 2013-04-20"); + sp.setText(FHEM.version + "; Frontend Version: 0.61 - 2013-04-27"); } //setup west accordion / treepanel diff --git a/fhem/www/frontend/www/frontend/app/store/DeviceStore.js b/fhem/www/frontend/www/frontend/app/store/DeviceStore.js index 9c8b9b583..ec6ef27e7 100644 --- a/fhem/www/frontend/www/frontend/app/store/DeviceStore.js +++ b/fhem/www/frontend/www/frontend/app/store/DeviceStore.js @@ -8,6 +8,7 @@ Ext.define('FHEM.store.DeviceStore', { proxy: { type: 'ajax', method: 'POST', + noCache : false, url: '', //gets set by controller reader: { type: 'json', diff --git a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js index df0c6e4ee..28ba971a1 100644 --- a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js +++ b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js @@ -73,6 +73,21 @@ Ext.define('FHEM.view.LineChartPanel', { var me = this; + me.devicestore = Ext.create('FHEM.store.DeviceStore', { + proxy: { + type: 'ajax', + noCache: false, + method: 'POST', + url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getdevices&XHR=1', + reader: { + type: 'json', + root: 'data', + totalProperty: 'totalCount' + } + }, + autoLoad: true + }); + var chartSettingPanel = Ext.create('Ext.form.Panel', { title: 'Chart Settings - Click me to edit', name: 'chartformpanel', @@ -123,6 +138,7 @@ Ext.define('FHEM.view.LineChartPanel', { name: 'starttimepicker', format: 'Y-m-d H:i:s', fieldLabel: 'Starttime', + allowBlank: false, labelWidth: 70 }, { @@ -130,6 +146,7 @@ Ext.define('FHEM.view.LineChartPanel', { name: 'endtimepicker', format: 'Y-m-d H:i:s', fieldLabel: 'Endtime', + allowBlank: false, labelWidth: 70 }, { @@ -181,6 +198,24 @@ Ext.define('FHEM.view.LineChartPanel', { name: 'resetchartform', icon: 'app/resources/icons/delete.png' }, + { + xtype: 'button', + width: 110, + text: 'Add another Y-Axis', + name: 'addyaxisbtn', + handler: function(btn) { + me.createNewYAxis(); + } + }, + { + xtype: 'button', + width: 90, + text: 'Add Baseline', + name: 'addbaselinebtn', + handler: function(btn) { + me.createNewBaseLineFields(btn); + } + }, { xtype: 'radio', width: 160, @@ -269,19 +304,9 @@ Ext.define('FHEM.view.LineChartPanel', { name: 'devicecombo', fieldLabel: 'Select Device', labelWidth: 90, - store: Ext.create('FHEM.store.DeviceStore', { - proxy: { - type: 'ajax', - method: 'POST', - url: '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getdevices&XHR=1', - reader: { - type: 'json', - root: 'data', - totalProperty: 'totalCount' - } - }, - autoLoad: true - }), + store: me.devicestore, + allowBlank: false, + queryMode: 'local', displayField: 'DEVICE', valueField: 'DEVICE', listeners: { @@ -301,6 +326,7 @@ Ext.define('FHEM.view.LineChartPanel', { xtype: 'combobox', name: 'yaxiscombo', fieldLabel: 'Select Y-Axis', + allowBlank: false, disabled: true, labelWidth: 90, inputWidth: 110, @@ -408,20 +434,11 @@ Ext.define('FHEM.view.LineChartPanel', { }, { xtype: 'button', - width: 110, - text: 'Add another Y-Axis', - name: 'addyaxisbtn', + width: 60, + text: 'Remove', + name: 'removerowbtn', handler: function(btn) { - me.createNewYAxis(); - } - }, - { - xtype: 'button', - width: 90, - text: 'Add Baseline', - name: 'addbaselinebtn', - handler: function(btn) { - me.createNewBaseLineFields(btn); + me.removeRow(btn); } } ] @@ -435,54 +452,83 @@ Ext.define('FHEM.view.LineChartPanel', { * */ createNewBaseLineFields: function(btn) { + var me = this; + var itemsToAdd = [ { - xtype: 'numberfield', - fieldLabel: 'Startvalue', - name: 'basestart', - allowBlank: false, - labelWidth: 60, - width: 120 - }, - { - xtype: 'numberfield', - fieldLabel: 'Endvalue', - name: 'baseend', - allowBlank: false, - labelWidth: 60, - width: 120 - }, - { - xtype: 'combobox', - name: 'baselinecolorcombo', - fieldLabel: 'Baseline Color', - labelWidth: 100, - inputWidth: 70, - store: Ext.create('Ext.data.Store', { - fields: ['name', 'value'], - data : [ - {'name':'Blue','value':'#2F40FA'}, - {'name':'Green', 'value':'#46E01B'}, - {'name':'Orange','value':'#F0A800'}, - {'name':'Red','value':'#E0321B'}, - {'name':'Yellow','value':'#F5ED16'} + xtype: 'fieldset', + name: 'baselineowfieldset', + layout: 'column', + defaults: { + margin: '5 5 5 0' + }, + items: + [ + { + xtype: 'numberfield', + fieldLabel: 'Startvalue', + name: 'basestart', + allowBlank: false, + labelWidth: 60, + width: 120 + }, + { + xtype: 'numberfield', + fieldLabel: 'Endvalue', + name: 'baseend', + allowBlank: false, + labelWidth: 60, + width: 120 + }, + { + xtype: 'combobox', + name: 'baselinecolorcombo', + fieldLabel: 'Baseline Color', + labelWidth: 100, + inputWidth: 70, + store: Ext.create('Ext.data.Store', { + fields: ['name', 'value'], + data : [ + {'name':'Blue','value':'#2F40FA'}, + {'name':'Green', 'value':'#46E01B'}, + {'name':'Orange','value':'#F0A800'}, + {'name':'Red','value':'#E0321B'}, + {'name':'Yellow','value':'#F5ED16'} + ] + }), + displayField: 'name', + valueField: 'value', + value: '#46E01B' + }, + { + xtype: 'checkboxfield', + name: 'baselinefillcheck', + boxLabel: 'Fill' + }, + { + xtype: 'button', + width: 60, + text: 'Remove', + name: 'removebaselinebtn', + handler: function(btn) { + me.removeRow(btn); + } + } ] - }), - displayField: 'name', - valueField: 'value', - value: '#46E01B' - }, - { - xtype: 'checkboxfield', - name: 'baselinefillcheck', - boxLabel: 'Fill' } ]; - if (Ext.isDefined(btn)) { - btn.up().add(itemsToAdd); - } else { - this.down('fieldset[name=singlerowfieldset]').add(itemsToAdd); - } + Ext.ComponentQuery.query('fieldset[name=axesfieldset]')[0].add(itemsToAdd); + }, + + /** + * remove the current chart configuration row + */ + removeRow: function(btn) { + var me = this; + if (btn.name === "removerowbtn") { + me.setAxiscounter(me.getAxiscounter() - 1); + } + btn.up().destroy(); } });