2
0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-03-03 04:36:36 +00:00

implemented a tree for device selection

git-svn-id: https://svn.fhem.de/fhem/trunk@2928 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
johannnes 2013-03-16 17:08:14 +00:00
parent af2348f212
commit a134f31fc8
5 changed files with 70 additions and 90 deletions

View File

@ -1,5 +1,6 @@
Update vom 16.3.2013
* Implementation einer clientseitigen Generalisierung
* Implementation eines Trees im linken Bereich des Frontends, über den Geräte gesichtet und gewählt werden können
Update vom 8.3.2013
* Erweiterung der Charts - Anzeige und Speicherung von dynamischen Zeiträumen (Woche, Tag,...)
* Bugfixes in der Darstellung der gespeicherten Farben eines Charts

View File

@ -43,12 +43,12 @@ UPD 2013-03-06_11:11:22 236 www/frontend/README.txt
UPD 2013-03-08_01:44:54 613 www/frontend/app/userconfig.js
UPD 2013-03-06_11:11:22 1856 www/frontend/app/app.js
UPD 2013-03-16_06:58:22 25147 www/frontend/app/view/LineChartPanel.js
UPD 2013-03-06_11:11:22 7826 www/frontend/app/view/Viewport.js
UPD 2013-03-06_11:11:22 4269 www/frontend/app/view/DevicePanel.js
UPD 2013-03-16_06:15:53 7586 www/frontend/app/view/Viewport.js
UPD 2013-03-16_06:15:46 4279 www/frontend/app/view/DevicePanel.js
UPD 2013-03-06_11:11:22 2503 www/frontend/app/view/TableDataGridPanel.js
UPD 2013-03-06_11:11:22 1310 www/frontend/app/view/LineChartView.js
UPD 2013-03-16_06:58:22 50691 www/frontend/app/controller/ChartController.js
UPD 2013-03-16_06:15:36 10876 www/frontend/app/controller/MainController.js
UPD 2013-03-16_11:15:36 10115 www/frontend/app/controller/MainController.js
UPD 2013-03-06_11:11:22 202 www/frontend/app/model/ReadingsModel.js
UPD 2013-03-06_11:11:22 338 www/frontend/app/model/SavedChartsModel.js
UPD 2013-03-16_06:58:22 1809 www/frontend/app/model/ChartModel.js

View File

@ -21,8 +21,8 @@ Ext.define('FHEM.controller.MainController', {
ref: 'westaccordionpanel' //this.getWestaccordionpanel()
},
{
selector: 'panel[name=culpanel]',
ref: 'culpanel' //this.getCulpanel()
selector: 'panel[name=maintreepanel]',
ref: 'maintreepanel' //this.getMaintreepanel()
},
{
selector: 'textfield[name=commandfield]',
@ -45,6 +45,9 @@ Ext.define('FHEM.controller.MainController', {
'panel[name=tabledataaccordionpanel]': {
expand: this.showDatabaseTablePanel
},
'treepanel[name=maintreepanel]': {
itemclick: this.showDevicePanel
},
'textfield[name=commandfield]': {
specialkey: this.checkCommand
},
@ -73,65 +76,51 @@ Ext.define('FHEM.controller.MainController', {
if (Ext.isDefined(FHEM.version)) {
var sp = this.getStatustextfield();
sp.setText(FHEM.version + "; Frontend Version: 0.2 - 2013-03-16");
sp.setText(FHEM.version + "; Frontend Version: 0.3 - 2013-03-16");
}
//setup west accordion
var wp = this.getWestaccordionpanel();
//setup west accordion / treepanel
var wp = this.getWestaccordionpanel(),
rootNode = { text:"root", expanded: true, children: []};
Ext.each(FHEM.info.Results, function(result) {
if (result.list && !Ext.isEmpty(result.list)) {
var panelToAdd = Ext.create('Ext.panel.Panel', {
name: result.list,
title: result.list,
autoScroll: true,
items: []
});
if (result.devices && result.devices.length > 0) {
//creating a store holding fhem devices
var deviceStore = Ext.create('Ext.data.Store', {
fields:['NAME'],
data: result.devices,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'devices'
}
}
});
node = {text: result.list, expanded: true, children: []};
var devicesgrid = {
xtype: 'grid',
hideHeaders: true,
columns: [
{
dataIndex: 'NAME',
width: '95%'
}
],
store: deviceStore,
listeners: {
itemclick: function(gridview, record) {
var panel = {
xtype: 'devicepanel',
title: record.raw.NAME,
region: 'center',
layout: 'fit',
record: record
};
me.hideCenterPanels();
me.getMainviewport().add(panel);
}
}
};
panelToAdd.add(devicesgrid);
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};
}
wp.add(panelToAdd);
rootNode.children.push(node);
}
});
this.getMaintreepanel().setRootNode(rootNode);
},
/**
*
*/
showDevicePanel: function(view, record) {
var panel = {
xtype: 'devicepanel',
title: record.raw.NAME,
region: 'center',
layout: 'fit',
record: record
};
this.hideCenterPanels();
this.getMainviewport().add(panel);
},
/**

View File

@ -37,7 +37,7 @@ Ext.define('FHEM.view.DevicePanel', {
var devicedata = [];
Ext.iterate(me.record.raw, function(key, value) {
Ext.iterate(me.record.raw.data, function(key, value) {
if (key !== 'ATTR' && key !== 'attrs' && key !== 'sets' && key !== 'READINGS') {
var obj = {
key: key,
@ -80,7 +80,7 @@ Ext.define('FHEM.view.DevicePanel', {
me.down('panel[name=container]').add(devicedatagrid);
}
var readingcollection = me.record.raw.READINGS;
var readingcollection = me.record.raw.data.READINGS;
if (readingcollection && !Ext.isEmpty(readingcollection) && readingcollection.length > 0) {
var readingsdata = [];

View File

@ -86,18 +86,39 @@ Ext.define('FHEM.view.Viewport', {
}, {
region: 'west',
title: 'Navigation',
width: 200,
width: 270,
autoScroll: true,
resizable: true,
xtype: 'panel',
name: 'westaccordionpanel',
layout: 'accordion',
items: [
{
xtype: 'panel',
title: 'FHEM Devices',
name: 'devicesaccordion',
collapsed: false,
autoScroll: true,
items: [
{
xtype: 'treepanel',
name: 'maintreepanel',
rootVisible: false,
root: {
"text": "Root",
"expanded":
"true",
"children": []
}
}
]
},
{
xtype: 'panel',
title: 'LineChart',
name: 'linechartaccordionpanel',
autoScroll: true,
layout: 'fit',
collapsed: false,
items: [
{
xtype: 'grid',
@ -126,40 +147,9 @@ Ext.define('FHEM.view.Viewport', {
{
xtype: 'panel',
title: 'Database Tables',
name: 'tabledataaccordionpanel'
name: 'tabledataaccordionpanel',
autoScroll: true
}
// {
// xtype: 'panel',
// title: 'Unsorted'
// },
// {
// xtype: 'panel',
// title: 'Everything'
// },
// {
// xtype: 'panel',
// title: 'Wiki'
// },
// {
// xtype: 'panel',
// title: 'Details'
// },
// {
// xtype: 'panel',
// title: 'Definition...'
// },
// {
// xtype: 'panel',
// title: 'Edit files'
// },
// {
// xtype: 'panel',
// title: 'Select style'
// },
// {
// xtype: 'panel',
// title: 'Event monitor'
// }
]
},
{