FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-04-14 09:35:29 +00:00
Code Issues Releases Wiki Activity

see thread in forums for details

Browse Source 
git-svn-id: https://svn.fhem.de/fhem/trunk@3389 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
johannnes 2013-07-07 10:15:27 +00:00
parent ba6165fd1f
commit 1f7210b60f
6 changed files with 225 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
fhem/www/frontend/CHANGED
View File

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

8
fhem/www/frontend/controls_frontend.txt
View File

@ -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-06-30_11:46:54 18379 www/frontend/app/controller/MainController.js
UPD 2013-07-07_12:11:53 86984 www/frontend/app/controller/ChartController.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

151
fhem/www/frontend/www/frontend/app/controller/ChartController.js
View File

@ -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
lcv.animate = false;
if (lcp && lcv && cfp && cdg) {
var lcph = lcp.getHeight(),
lcpw = lcp.getWidth(),
cfph = cfp.getHeight(),
cdgh = cdg.getHeight();
if (lcv) {
// disable animation as long as we resize, causes serious performance issues
lcv.animate = false;
if (lcph && lcpw && cfph && cdgh) {
var chartheight = lcph - cfph - cdgh - 80;
var chartwidth = lcpw - 5;
lcv.height = chartheight;
lcv.width = chartwidth;
//render after 50ms to get component right
window.setTimeout(function() {
if (lcv.series.get(0).hideAll) {
lcv.series.get(0).hideAll();
}
lcv.doComponentLayout();
if (lcv.series.get(0).showAll) {
lcv.series.get(0).showAll();
}
lcv.redraw();
}, 50);
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 - 80;
var chartwidth = lcpw - 5;
lcv.height = chartheight;
lcv.width = chartwidth;
//render after 50ms to get component right
window.setTimeout(function() {
if (lcv.series.get(0).hideAll) {
lcv.series.get(0).hideAll();
}
lcv.doComponentLayout();
if (lcv.series.get(0).showAll) {
lcv.series.get(0).showAll();
}
lcv.redraw();
}, 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 === "") {
axis.setTitle(title);
if (axistitle && axistitle !== "") {
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) {

123
fhem/www/frontend/www/frontend/app/controller/MainController.js
View File

@ -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];
if (!lcp || lcp.isVisible === false) {
this.showLineChartPanel();
}
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,37 +490,43 @@ Ext.define('FHEM.controller.MainController', {
} 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);
panel.setTitle(title);
panel.record = record;
var createdpanel = this.getMainviewport().down('devicepanel');
createdpanel.getEl().setOpacity(0);
createdpanel.show();
createdpanel.getEl().animate({
opacity: 1,
easing: 'easeIn',
duration: 500,
remove: false
});
this.hideCenterPanels();
panel.show();
}
},
/**
*
*/
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({
opacity: 1,
easing: 'easeIn',
duration: 500,
remove: false
});
},
/**
*
*/
showDatabaseTablePanel: function() {
var panel = Ext.ComponentQuery.query('tabledatagridpanel')[0];
this.hideCenterPanels();
panel.show();
}
});

40
fhem/www/frontend/www/frontend/app/view/DevicePanel.js
View File

@ -119,23 +119,27 @@ Ext.define('FHEM.view.DevicePanel', {
};
me.down('panel[name=container]').add(devicereadingsgrid);
// Stop all old tasks
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.on("show", 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,

28
fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
View File

@ -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',