mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-03-12 16:46:35 +00:00
* 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@3367 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
johannnes
parent
c4555190f2
commit
80e4ceda5a
@ -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
|
||||
|
||||
@ -29,7 +29,7 @@ DIR www/frontend/lib/ext-4.2.0.663/images/window
|
||||
DIR www/frontend/lib/ext-4.2.0.663/images/grid
|
||||
DIR www/frontend/lib/ext-4.2.0.663/images/util
|
||||
DIR www/frontend/lib/ext-4.2.0.663/images/util/splitter
|
||||
UPD 2013-04-26_05:06:42 899 www/frontend/index.html
|
||||
UPD 2013-06-30_11:46:26 988 www/frontend/index.html
|
||||
UPD 2013-04-01_07:03:30 260475 www/frontend/lib/ext-4.2.0.663/ext-theme-gray-all.css
|
||||
UPD 2013-04-01_07:03:30 1434875 www/frontend/lib/ext-4.2.0.663/ext-all.js
|
||||
UPD 2013-04-01_07:03:33 1981 www/frontend/lib/ext-4.2.0.663/images/tools/tools-sprites-trans.gif
|
||||
@ -263,6 +263,7 @@ UPD 2013-04-03_07:27:17 781 www/frontend/app/resources/icons/accept.png
|
||||
UPD 2013-03-02_01:53:05 626 www/frontend/app/resources/icons/readme.txt
|
||||
UPD 2013-04-03_07:27:17 715 www/frontend/app/resources/icons/delete.png
|
||||
UPD 2013-03-02_01:53:05 755 www/frontend/app/resources/icons/database_save.png
|
||||
UPD 2013-06-30_11:47:24 541 www/frontend/app/resources/icons/chart_bar.png
|
||||
UPD 2013-03-02_01:53:05 395 www/frontend/app/resources/icons/resultset_next.png
|
||||
UPD 2013-03-02_01:53:05 700 www/frontend/app/resources/icons/stop.png
|
||||
UPD 2013-04-03_07:27:17 345 www/frontend/app/resources/icons/arrow_left.png
|
||||
@ -270,15 +271,16 @@ UPD 2013-03-02_01:53:05 770 www/frontend/app/resources/icons/database_refresh.pn
|
||||
UPD 2013-03-02_01:53:05 524 www/frontend/app/resources/icons/resultset_last.png
|
||||
UPD 2013-04-03_07:27:17 733 www/frontend/app/resources/icons/add.png
|
||||
UPD 2013-04-03_07:27:17 389 www/frontend/app/resources/icons/resultset_previous.png
|
||||
UPD 2013-06-30_11:47:12 101 www/frontend/app/resources/application.css
|
||||
UPD 2013-06-27_09:34:38 2201 www/frontend/app/app.js
|
||||
UPD 2013-05-01_05:10:56 27200 www/frontend/app/view/LineChartPanel.js
|
||||
UPD 2013-04-28_02:00:20 1205 www/frontend/app/view/ChartGridPanel.js
|
||||
UPD 2013-04-03_07:26:40 15793 www/frontend/app/view/DevicePanel.js
|
||||
UPD 2013-05-01_05:10:56 8782 www/frontend/app/view/Viewport.js
|
||||
UPD 2013-06-30_11:47:44 11076 www/frontend/app/view/Viewport.js
|
||||
UPD 2013-06-27_09:35:22 10042 www/frontend/app/view/TableDataGridPanel.js
|
||||
UPD 2013-06-27_09:34:51 77454 www/frontend/app/controller/ChartController.js
|
||||
UPD 2013-06-27_09:34:52 13004 www/frontend/app/controller/MainController.js
|
||||
UPD 2013-06-27_09:34:52 5414 www/frontend/app/controller/TableDataController.js
|
||||
UPD 2013-06-30_11:46:54 83500 www/frontend/app/controller/ChartController.js
|
||||
UPD 2013-06-30_11:46:54 18379 www/frontend/app/controller/MainController.js
|
||||
UPD 2013-06-30_11:46:54 5415 www/frontend/app/controller/TableDataController.js
|
||||
UPD 2013-04-01_07:04:35 202 www/frontend/app/model/ReadingsModel.js
|
||||
UPD 2013-04-01_07:04:36 338 www/frontend/app/model/SavedChartsModel.js
|
||||
UPD 2013-04-01_07:04:34 11535 www/frontend/app/model/ChartModel.js
|
||||
|
||||
@ -60,15 +60,14 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
selector: 'linechartpanel toolbar',
|
||||
ref: 'linecharttoolbar' //this.getLinecharttoolbar()
|
||||
},
|
||||
{
|
||||
selector: 'grid[name=savedchartsgrid]',
|
||||
ref: 'savedchartsgrid' //this.getSavedchartsgrid()
|
||||
},
|
||||
{
|
||||
selector: 'grid[name=chartdata]',
|
||||
ref: 'chartdatagrid' //this.getChartdatagrid()
|
||||
},
|
||||
{
|
||||
selector: 'panel[name=maintreepanel]',
|
||||
ref: 'maintreepanel' //this.getMaintreepanel()
|
||||
}
|
||||
|
||||
],
|
||||
|
||||
/**
|
||||
@ -91,14 +90,19 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
'button[name=resetchartform]': {
|
||||
click: this.resetFormFields
|
||||
},
|
||||
'grid[name=savedchartsgrid]': {
|
||||
cellclick: this.loadsavedchart
|
||||
},
|
||||
'actioncolumn[name=savedchartsactioncolumn]': {
|
||||
'menuitem[name=deletechartfromcontext]': {
|
||||
click: this.deletechart
|
||||
},
|
||||
'menuitem[name=renamechartfromcontext]': {
|
||||
click: this.renamechart
|
||||
},
|
||||
'treepanel[name=maintreepanel]': {
|
||||
itemclick: this.loadsavedchart
|
||||
},
|
||||
'treeview': {
|
||||
drop: this.movenodeintree
|
||||
},
|
||||
'grid[name=chartdata]': {
|
||||
// itemmouseenter: this.highlightRecordInChart
|
||||
itemclick: this.highlightRecordInChart
|
||||
},
|
||||
'panel[name=chartpanel]': {
|
||||
@ -511,7 +515,8 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
|
||||
var existingwins = Ext.ComponentQuery.query('window[name=statisticswin]'),
|
||||
matchfound = false,
|
||||
lastwin;
|
||||
lastwin,
|
||||
win;
|
||||
if (existingwins.length > 0) {
|
||||
Ext.each(existingwins, function(existingwin) {
|
||||
lastwin = existingwin;
|
||||
@ -522,7 +527,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
}
|
||||
});
|
||||
if (!matchfound) {
|
||||
var win = Ext.create('Ext.window.Window', {
|
||||
win = Ext.create('Ext.window.Window', {
|
||||
width: winwidth,
|
||||
height: winheight,
|
||||
html: html,
|
||||
@ -535,7 +540,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
win.showAt(chart.getWidth() - 145, lastwin.getPosition()[1] + lastwin.getHeight());
|
||||
}
|
||||
} else {
|
||||
var win = Ext.create('Ext.window.Window', {
|
||||
win = Ext.create('Ext.window.Window', {
|
||||
width: winwidth,
|
||||
height: winheight,
|
||||
html: html,
|
||||
@ -1161,6 +1166,19 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
saveChartData: function() {
|
||||
|
||||
var me = this;
|
||||
|
||||
//get available foldernames
|
||||
// var rootNode = me.getMaintreepanel().getRootNode(),
|
||||
// folderArray = [];
|
||||
// rootNode.cascadeBy(function(node) {
|
||||
// if (node.get('leaf') === false) {
|
||||
// if (node.get('text') !== 'root') {
|
||||
// folderArray.push(node.get('text'));
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// console.log(folderArray);
|
||||
|
||||
Ext.Msg.prompt("Select a name", "Enter a name to save the Chart", function(action, savename) {
|
||||
if (action === "ok" && !Ext.isEmpty(savename)) {
|
||||
//replacing spaces in name
|
||||
@ -1301,7 +1319,7 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
chart.setLoading(false);
|
||||
var json = Ext.decode(response.responseText);
|
||||
if (json.success === "true" || json.data && json.data.length === 0) {
|
||||
me.getSavedchartsgrid().getStore().load();
|
||||
me.getMaintreepanel().fireEvent("treeupdated");
|
||||
Ext.Msg.alert("Success", "Chart successfully saved!");
|
||||
} else if (json.msg) {
|
||||
Ext.Msg.alert("Error", "The Chart could not be saved, error Message is:<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 (cellIndex === 0) {
|
||||
var name = record.get('NAME'),
|
||||
chartdata = record.get('VALUE');
|
||||
if (record.raw.data && record.raw.data.TYPE && record.raw.data.TYPE === "savedchart") {
|
||||
var name = record.raw.data.NAME,
|
||||
chartdata = record.raw.data.VALUE;
|
||||
|
||||
if (typeof chartdata !== "object") {
|
||||
try {
|
||||
@ -1498,20 +1514,63 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
this.requestChartData();
|
||||
this.getLinechartpanel().setTitle(name);
|
||||
} else {
|
||||
Ext.Msg.alert("Error", "The Chart could not be loaded! RawChartdata was: <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'),
|
||||
chart = this.getChart();
|
||||
chartid = menu.record.raw.data.ID;
|
||||
|
||||
if (Ext.isDefined(chartid) && chartid !== "") {
|
||||
|
||||
@ -1532,18 +1591,24 @@ Ext.define('FHEM.controller.ChartController', {
|
||||
|
||||
var url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+deletechart+""+""+' + chartid + '&XHR=1';
|
||||
|
||||
chart.setLoading(true);
|
||||
|
||||
Ext.Ajax.request({
|
||||
method: 'GET',
|
||||
disableCaching: false,
|
||||
url: url,
|
||||
success: function(response){
|
||||
chart.setLoading(false);
|
||||
var json = Ext.decode(response.responseText);
|
||||
if (json && json.success === "true" || json.data && json.data.length === 0) {
|
||||
me.getSavedchartsgrid().getStore().load();
|
||||
var rootNode = me.getMaintreepanel().getRootNode();
|
||||
var deletedNode = rootNode.findChildBy(function(rec) {
|
||||
if (rec.raw.data && rec.raw.data.ID === chartid) {
|
||||
return true;
|
||||
}
|
||||
}, this, true);
|
||||
if (deletedNode) {
|
||||
deletedNode.destroy();
|
||||
}
|
||||
Ext.Msg.alert("Success", "Chart successfully deleted!");
|
||||
|
||||
} else if (json && json.msg) {
|
||||
Ext.Msg.alert("Error", "The Chart could not be deleted, error Message is:<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!");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -27,10 +27,6 @@ Ext.define('FHEM.controller.MainController', {
|
||||
{
|
||||
selector: 'textfield[name=commandfield]',
|
||||
ref: 'commandfield' //this.getCommandfield()
|
||||
},
|
||||
{
|
||||
selector: 'grid[name=savedchartsgrid]',
|
||||
ref: 'savedchartsgrid' //this.getSavedchartsgrid()
|
||||
}
|
||||
],
|
||||
|
||||
@ -42,14 +38,15 @@ Ext.define('FHEM.controller.MainController', {
|
||||
'viewport[name=mainviewport]': {
|
||||
afterrender: this.viewportRendered
|
||||
},
|
||||
'panel[name=linechartaccordionpanel]': {
|
||||
expand: this.showLineChartPanel
|
||||
'panel[name=fhemaccordion]': {
|
||||
expand: this.showFHEMPanel
|
||||
},
|
||||
'panel[name=tabledataaccordionpanel]': {
|
||||
expand: this.showDatabaseTablePanel
|
||||
},
|
||||
'treepanel[name=maintreepanel]': {
|
||||
itemclick: this.showDevicePanel
|
||||
itemclick: this.showDeviceOrChartPanel,
|
||||
treeupdated: this.setupTree
|
||||
},
|
||||
'textfield[name=commandfield]': {
|
||||
specialkey: this.checkCommand
|
||||
@ -65,8 +62,13 @@ Ext.define('FHEM.controller.MainController', {
|
||||
},
|
||||
'button[name=restartfhem]': {
|
||||
click: this.restartFhem
|
||||
},
|
||||
'button[name=unsortedtree]': {
|
||||
click: this.setupTree
|
||||
},
|
||||
'button[name=sortedtree]': {
|
||||
click: this.setupTree
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
@ -86,43 +88,123 @@ Ext.define('FHEM.controller.MainController', {
|
||||
remove: false
|
||||
});
|
||||
|
||||
//load the saved charts store with configured dblog name
|
||||
var store = this.getSavedchartsgrid().getStore();
|
||||
store.getProxy().url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getcharts&XHR=1';
|
||||
store.load();
|
||||
|
||||
if (Ext.isDefined(FHEM.version)) {
|
||||
var sp = this.getStatustextfield();
|
||||
sp.setText(FHEM.version + "; Frontend Version: 0.8 - 2013-06-27");
|
||||
}
|
||||
|
||||
//setup west accordion / treepanel
|
||||
var wp = this.getWestaccordionpanel(),
|
||||
rootNode = { text:"root", expanded: true, children: []};
|
||||
this.setupTree(false);
|
||||
},
|
||||
|
||||
/**
|
||||
* setup west accordion / treepanel
|
||||
*/
|
||||
setupTree: function(unsorted) {
|
||||
var me = this,
|
||||
rootNode = { text:"root", expanded: true, children: []},
|
||||
oldRootNode = me.getMaintreepanel().getRootNode();
|
||||
|
||||
Ext.each(FHEM.info.Results, function(result) {
|
||||
|
||||
if (result.list && !Ext.isEmpty(result.list)) {
|
||||
|
||||
if (result.devices && result.devices.length > 0) {
|
||||
node = {text: result.list, expanded: true, children: []};
|
||||
|
||||
Ext.each(result.devices, function(device) {
|
||||
|
||||
var subnode = {text: device.NAME, leaf: true, data: device};
|
||||
node.children.push(subnode);
|
||||
|
||||
}, this);
|
||||
} else {
|
||||
node = {text: result.list, leaf: true};
|
||||
//first cleanup
|
||||
if (oldRootNode) {
|
||||
oldRootNode.removeAll();
|
||||
}
|
||||
if (unsorted && unsorted.name === 'unsortedtree') {
|
||||
//setup the tree "unsorted"
|
||||
Ext.each(FHEM.info.Results, function(result) {
|
||||
if (result.list && !Ext.isEmpty(result.list)) {
|
||||
if (result.devices && result.devices.length > 0) {
|
||||
var blacklist = ['dummy', 'notify', 'Global', 'telnet', 'DbLog', 'FileLog', 'FHEMWEB', 'weblink'];
|
||||
if (Ext.Array.contains(blacklist, result.list)) {
|
||||
node = {text: result.list, expanded: false, children: []};
|
||||
} else {
|
||||
node = {text: result.list, expanded: true, children: []};
|
||||
}
|
||||
Ext.each(result.devices, function(device) {
|
||||
var subnode = {text: device.NAME, leaf: true, data: device};
|
||||
node.children.push(subnode);
|
||||
}, this);
|
||||
} else {
|
||||
node = {text: result.list, leaf: true};
|
||||
}
|
||||
rootNode.children.push(node);
|
||||
}
|
||||
});
|
||||
this.getMaintreepanel().setRootNode(rootNode);
|
||||
this.addChartsToTree();
|
||||
} else {
|
||||
//sort / create items by room
|
||||
me.getMaintreepanel().setRootNode(rootNode);
|
||||
var root = me.getMaintreepanel().getRootNode();
|
||||
Ext.each(FHEM.info.Results, function(result) {
|
||||
if (result.list && !Ext.isEmpty(result.list)) {
|
||||
if (result.devices && result.devices.length > 0) {
|
||||
Ext.each(result.devices, function(device) {
|
||||
if (device.ATTR && device.ATTR.room) {
|
||||
//check if room exists
|
||||
var resultnode = root.findChild("text", device.ATTR.room, true),
|
||||
subnode = {text: device.NAME, leaf: true, data: device};
|
||||
if (!resultnode) {
|
||||
//create roomfolder
|
||||
var roomfolder;
|
||||
if (device.ATTR.room !== "hidden") {
|
||||
roomfolder = {text: device.ATTR.room, leaf: false, expanded: true, children: []};
|
||||
roomfolder.children.push(subnode);
|
||||
root.appendChild(roomfolder);
|
||||
}
|
||||
} else {
|
||||
resultnode.appendChild(subnode);
|
||||
root.appendChild(resultnode);
|
||||
}
|
||||
}
|
||||
}, this);
|
||||
} else {
|
||||
node = {text: result.list, leaf: true};
|
||||
root.appendChild(node);
|
||||
}
|
||||
}
|
||||
});
|
||||
this.addChartsToTree();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
addChartsToTree: function() {
|
||||
//load the saved charts store with configured dblog name
|
||||
var me = this,
|
||||
store = Ext.create('FHEM.store.SavedChartsStore', {});
|
||||
store.getProxy().url = '../../../fhem?cmd=get+' + FHEM.dblogname + '+-+webchart+""+""+""+getcharts&XHR=1';
|
||||
store.load();
|
||||
//add the charts to the tree
|
||||
store.on("load", function() {
|
||||
var rootNode = me.getMaintreepanel().getRootNode(),
|
||||
chartfolder = {text: "Charts", expanded: true, children: []};
|
||||
rootNode.appendChild(chartfolder);
|
||||
var chartfoldernode = rootNode.findChild("text", "Charts", true);
|
||||
|
||||
rootNode.children.push(node);
|
||||
store.each(function(rec) {
|
||||
var chartchild,
|
||||
unsortedMode = Ext.ComponentQuery.query('button[name=unsortedtree]')[0].pressed;
|
||||
|
||||
}
|
||||
if (!unsortedMode && rec.raw && rec.raw.VALUE && rec.raw.VALUE.parentFolder) {
|
||||
var ownerFolder = rec.raw.VALUE.parentFolder,
|
||||
index = rec.raw.VALUE.treeIndex,
|
||||
parentNode = rootNode.findChild("text", ownerFolder, true);
|
||||
|
||||
chartchild = {text: rec.raw.NAME, leaf: true, data: rec.raw, iconCls:'x-tree-icon-leaf-chart'};
|
||||
if (parentNode === null) {
|
||||
rootNode.insertChild(index, chartchild);
|
||||
} else {
|
||||
parentNode.insertChild(index, chartchild);
|
||||
}
|
||||
} else {
|
||||
chartchild = {text: rec.raw.NAME, leaf: true, data: rec.raw, iconCls:'x-tree-icon-leaf-chart'};
|
||||
chartfoldernode.appendChild(chartchild);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
this.getMaintreepanel().setRootNode(rootNode);
|
||||
},
|
||||
|
||||
/**
|
||||
@ -339,36 +421,82 @@ Ext.define('FHEM.controller.MainController', {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
showDevicePanel: function(view, record) {
|
||||
|
||||
var title;
|
||||
if (record.raw.ATTR && record.raw.ATTR.alias && !Ext.isEmpty(record.raw.ATTR.alias)) {
|
||||
title = record.raw.data.ATTR.alias;
|
||||
showDeviceOrChartPanel: function(treeview, rec) {
|
||||
var me = this;
|
||||
if (rec.get('leaf') === true &&
|
||||
rec.raw.data &&
|
||||
rec.raw.data.TYPE &&
|
||||
rec.raw.data.TYPE === "savedchart") {
|
||||
var lcp = Ext.ComponentQuery.query('linechartpanel')[0];
|
||||
if (!lcp || lcp.isVisible === false) {
|
||||
this.showLineChartPanel();
|
||||
}
|
||||
} else {
|
||||
title = record.raw.data.NAME;
|
||||
this.showDevicePanel(treeview, rec);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
showFHEMPanel: function() {
|
||||
var panel = {
|
||||
xtype: 'devicepanel',
|
||||
title: title,
|
||||
xtype: 'panel',
|
||||
title: 'FHEM',
|
||||
region: 'center',
|
||||
layout: 'fit',
|
||||
record: record,
|
||||
hidden: true
|
||||
hidden: false,
|
||||
items : [
|
||||
{
|
||||
xtype : 'component',
|
||||
autoEl : {
|
||||
tag : 'iframe',
|
||||
src : '../../fhem?'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.destroyCenterPanels();
|
||||
this.getMainviewport().add(panel);
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
showDevicePanel: function(view, record) {
|
||||
|
||||
var createdpanel = this.getMainviewport().down('devicepanel');
|
||||
|
||||
createdpanel.getEl().setOpacity(0);
|
||||
createdpanel.show();
|
||||
|
||||
createdpanel.getEl().animate({
|
||||
opacity: 1,
|
||||
easing: 'easeIn',
|
||||
duration: 500,
|
||||
remove: false
|
||||
});
|
||||
if (record.raw.leaf === true) {
|
||||
var title;
|
||||
if (record.raw.ATTR &&
|
||||
record.raw.ATTR.alias &&
|
||||
!Ext.isEmpty(record.raw.ATTR.alias)) {
|
||||
title = record.raw.data.ATTR.alias;
|
||||
} else {
|
||||
title = record.raw.data.NAME;
|
||||
}
|
||||
var panel = {
|
||||
xtype: 'devicepanel',
|
||||
title: title,
|
||||
region: 'center',
|
||||
layout: 'fit',
|
||||
record: record,
|
||||
hidden: true
|
||||
};
|
||||
this.destroyCenterPanels();
|
||||
this.getMainviewport().add(panel);
|
||||
|
||||
var createdpanel = this.getMainviewport().down('devicepanel');
|
||||
|
||||
createdpanel.getEl().setOpacity(0);
|
||||
createdpanel.show();
|
||||
|
||||
createdpanel.getEl().animate({
|
||||
opacity: 1,
|
||||
easing: 'easeIn',
|
||||
duration: 500,
|
||||
remove: false
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
.x-tree-icon.x-tree-icon-leaf.x-tree-icon-leaf-chart {
|
||||
background-image: url(icons/chart_bar.png);
|
||||
}
|
||||
BIN
fhem/www/frontend/www/frontend/app/resources/icons/chart_bar.png
Normal file
BIN
fhem/www/frontend/www/frontend/app/resources/icons/chart_bar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 541 B |
@ -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": []
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
xtype: 'panel',
|
||||
title: 'LineChart',
|
||||
name: 'linechartaccordionpanel',
|
||||
autoScroll: true,
|
||||
layout: 'fit',
|
||||
items: [
|
||||
{
|
||||
xtype: 'grid',
|
||||
columns: [
|
||||
{
|
||||
header: 'Saved Charts',
|
||||
dataIndex: 'NAME',
|
||||
width: '80%'
|
||||
},
|
||||
{
|
||||
xtype:'actioncolumn',
|
||||
name: 'savedchartsactioncolumn',
|
||||
width:'15%',
|
||||
items: [{
|
||||
icon: 'lib/ext-4.2.0.663/images/dd/drop-no.gif',
|
||||
tooltip: 'Delete'
|
||||
}]
|
||||
}
|
||||
},
|
||||
tbar: [
|
||||
{
|
||||
xtype: 'button',
|
||||
name: 'unsortedtree',
|
||||
toggleGroup: 'treeorder',
|
||||
allowDepress: false,
|
||||
text: 'Unsorted'
|
||||
},
|
||||
{
|
||||
xtype: 'button',
|
||||
name: 'sortedtree',
|
||||
toggleGroup: 'treeorder',
|
||||
allowDepress: false,
|
||||
text: 'Order by Room',
|
||||
pressed: true
|
||||
}
|
||||
],
|
||||
store: Ext.create('FHEM.store.SavedChartsStore', {}),
|
||||
name: 'savedchartsgrid'
|
||||
|
||||
listeners: {
|
||||
'itemcontextmenu': function(scope, rec, item, index, e, eOpts) {
|
||||
e.preventDefault();
|
||||
|
||||
if (rec.raw.data.TYPE && rec.raw.data.TYPE === "savedchart") {
|
||||
var menu = Ext.ComponentQuery.query('menu[id=treecontextmenu]')[0];
|
||||
if (menu) {
|
||||
menu.destroy();
|
||||
}
|
||||
Ext.create('Ext.menu.Menu', {
|
||||
id: 'treecontextmenu',
|
||||
items: [
|
||||
{
|
||||
text: 'Delete Chart',
|
||||
name: 'deletechartfromcontext',
|
||||
record: rec
|
||||
}, '-', {
|
||||
text: 'Rename Chart',
|
||||
name: 'renamechartfromcontext',
|
||||
record: rec
|
||||
}
|
||||
]
|
||||
}).showAt(e.xy);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -161,7 +190,9 @@ Ext.define('FHEM.view.Viewport', {
|
||||
xtype: 'panel',
|
||||
title: 'Database Tables',
|
||||
name: 'tabledataaccordionpanel',
|
||||
autoScroll: true
|
||||
autoScroll: true,
|
||||
bodyPadding: '5 5 5 5',
|
||||
html: 'You can search your database here. <br> Specify your queries by selecting a specific device, reading and timerange.'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user