mhop/fhem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added parsing of jsonlist contents to dynamically setup menus and contents

Browse Source 
git-svn-id: https://fhem.svn.sourceforge.net/svnroot/fhem/trunk/fhem@2844 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
johannnes
2013-03-02 17:19:06 +00:00
parent 06e1371165
commit ca7eaa98b0
6 changed files with 268 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
www/frontend/CHANGED
View File

@@ -1,5 +1,6 @@
Update vom 2.3.2012 Update vom 2.3.2012
* Auslesen der verfügbaren Geräte / FHEM-Komponenten und Darstellung im Menü
* Kommandozeile hinzugefügt, inkl Speichern in der fhem.cfg * Kommandozeile hinzugefügt, inkl Speichern in der fhem.cfg
* Shutdown und Restart Button für FHEM hinzugefügt * Shutdown und Restart Button für FHEM hinzugefügt
* Icons * Icons

7
www/frontend/controls_frontend.txt
View File

@@ -40,13 +40,14 @@ DIR www/frontend/lib/ext-4.1.1a/images/gray/tip
UPD 2013-03-01_05:44:48 49099 FHEM/93_DbLog.pm UPD 2013-03-01_05:44:48 49099 FHEM/93_DbLog.pm
UPD 2013-02-25_08:13:15 499 www/frontend/index.html UPD 2013-02-25_08:13:15 499 www/frontend/index.html
UPD 2013-02-27_07:20:39 236 www/frontend/README.txt UPD 2013-02-27_07:20:39 236 www/frontend/README.txt
UPD 2013-03-02_01:26:28 1763 www/frontend/app/app.js UPD 2013-03-02_04:42:03 1856 www/frontend/app/app.js
UPD 2013-03-01_05:43:56 20350 www/frontend/app/view/LineChartPanel.js UPD 2013-03-01_05:43:56 20350 www/frontend/app/view/LineChartPanel.js
UPD 2013-03-02_01:42:33 9490 www/frontend/app/view/Viewport.js UPD 2013-03-02_06:13:13 7826 www/frontend/app/view/Viewport.js
UPD 2013-03-02_06:11:57 4269 www/frontend/app/view/DevicePanel.js
UPD 2013-03-01_05:43:56 2503 www/frontend/app/view/TableDataGridPanel.js UPD 2013-03-01_05:43:56 2503 www/frontend/app/view/TableDataGridPanel.js
UPD 2013-03-01_05:43:55 1310 www/frontend/app/view/LineChartView.js UPD 2013-03-01_05:43:55 1310 www/frontend/app/view/LineChartView.js
UPD 2013-03-01_05:42:32 41591 www/frontend/app/controller/ChartController.js UPD 2013-03-01_05:42:32 41591 www/frontend/app/controller/ChartController.js
UPD 2013-03-02_01:44:22 8479 www/frontend/app/controller/MainController.js UPD 2013-03-02_06:14:02 10733 www/frontend/app/controller/MainController.js
UPD 2013-03-01_05:43:32 202 www/frontend/app/model/ReadingsModel.js UPD 2013-03-01_05:43:32 202 www/frontend/app/model/ReadingsModel.js
UPD 2013-03-01_05:43:32 338 www/frontend/app/model/SavedChartsModel.js UPD 2013-03-01_05:43:32 338 www/frontend/app/model/SavedChartsModel.js
UPD 2013-03-01_05:43:31 674 www/frontend/app/model/ChartModel.js UPD 2013-03-01_05:43:31 674 www/frontend/app/model/ChartModel.js

7
www/frontend/www/frontend/app/app.js
View File

@@ -34,10 +34,10 @@ Ext.application({
url: url, url: url,
success: function(response){ success: function(response){
Ext.getBody().unmask(); Ext.getBody().unmask();
var json = Ext.decode(response.responseText); FHEM.info = Ext.decode(response.responseText);
FHEM.version = json.Results[0].devices[0].ATTR.version; FHEM.version = FHEM.info.Results[0].devices[0].ATTR.version;
Ext.each(json.Results, function(result) { Ext.each(FHEM.info.Results, function(result) {
//TODO: get more specific here... //TODO: get more specific here...
if (result.list === "DbLog" && result.devices[0].NAME) { if (result.list === "DbLog" && result.devices[0].NAME) {
FHEM.dblogname = result.devices[0].NAME; FHEM.dblogname = result.devices[0].NAME;
@@ -47,6 +47,7 @@ Ext.application({
Ext.Msg.alert("Error", "Could not find a DbLog Configuration. Do you have DbLog already running?"); Ext.Msg.alert("Error", "Could not find a DbLog Configuration. Do you have DbLog already running?");
} else { } else {
Ext.create("FHEM.view.Viewport"); Ext.create("FHEM.view.Viewport");
// further configuration of viewport starts in maincontroller
} }
}, },
failure: function() { failure: function() {

93
www/frontend/www/frontend/app/controller/MainController.js
View File

@@ -3,6 +3,9 @@
*/ */
Ext.define('FHEM.controller.MainController', { Ext.define('FHEM.controller.MainController', {
extend: 'Ext.app.Controller', extend: 'Ext.app.Controller',
requires: [
'FHEM.view.DevicePanel'
],
refs: [ refs: [
{ {
@@ -13,6 +16,10 @@ Ext.define('FHEM.controller.MainController', {
selector: 'text[name=statustextfield]', selector: 'text[name=statustextfield]',
ref: 'statustextfield' //this.getStatustextfield() ref: 'statustextfield' //this.getStatustextfield()
}, },
{
selector: 'panel[name=westaccordionpanel]',
ref: 'westaccordionpanel' //this.getWestaccordionpanel()
},
{ {
selector: 'panel[name=culpanel]', selector: 'panel[name=culpanel]',
ref: 'culpanel' //this.getCulpanel() ref: 'culpanel' //this.getCulpanel()
@@ -60,23 +67,71 @@ Ext.define('FHEM.controller.MainController', {
/** /**
* load the FHEM devices and state on viewport render completion * load the FHEM devices and state on viewport render completion
*/ */
viewportRendered: function(){ viewportRendered: function() {
var me = this;
if (Ext.isDefined(FHEM.version)) { if (Ext.isDefined(FHEM.version)) {
var sp = this.getStatustextfield(); var sp = this.getStatustextfield();
sp.setText(FHEM.version); sp.setText(FHEM.version);
} }
// var cp = me.getCulpanel(); //setup west accordion
// if (result.list === "CUL") { var wp = this.getWestaccordionpanel();
// var culname = result.devices[0].NAME;
// cp.add( Ext.each(FHEM.info.Results, function(result) {
// { if (result.list && !Ext.isEmpty(result.list)) {
// xtype: 'text', var panelToAdd = Ext.create('Ext.panel.Panel', {
// text: culname 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'
}
}
});
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);
}
wp.add(panelToAdd);
}
});
}, },
/** /**
@@ -245,13 +300,11 @@ Ext.define('FHEM.controller.MainController', {
//restarting the frontend //restarting the frontend
window.location.reload(); window.location.reload();
} else { } else {
console.log("fail..");
me.retryConnect(); me.retryConnect();
} }
}, },
failure: function() { failure: function() {
console.log("failure..");
me.retryConnect(); me.retryConnect();
} }
}); });
@@ -261,11 +314,21 @@ Ext.define('FHEM.controller.MainController', {
}, },
/**
*
*/
hideCenterPanels: function() {
var panels = Ext.ComponentQuery.query('panel[region=center]');
Ext.each(panels, function(panel) {
panel.hide();
});
},
/** /**
* *
*/ */
showLineChartPanel: function() { showLineChartPanel: function() {
Ext.ComponentQuery.query('panel[name=tabledatagridpanel]')[0].hide(); this.hideCenterPanels();
Ext.ComponentQuery.query('panel[name=linechartpanel]')[0].show(); Ext.ComponentQuery.query('panel[name=linechartpanel]')[0].show();
}, },
@@ -273,7 +336,7 @@ Ext.define('FHEM.controller.MainController', {
* *
*/ */
showDatabaseTablePanel: function() { showDatabaseTablePanel: function() {
Ext.ComponentQuery.query('panel[name=linechartpanel]')[0].hide(); this.hideCenterPanels();
Ext.ComponentQuery.query('panel[name=tabledatagridpanel]')[0].show(); Ext.ComponentQuery.query('panel[name=tabledatagridpanel]')[0].show();
} }

144
www/frontend/www/frontend/app/view/DevicePanel.js Normal file
View File

@@ -0,0 +1,144 @@
/**
* A Panel containing device specific information
*/
Ext.define('FHEM.view.DevicePanel', {
extend: 'Ext.panel.Panel',
alias : 'widget.devicepanel',
/**
*
*/
title: null,
/**
*
*/
region: 'center',
/**
*
*/
record: null,
/**
* init function
*/
initComponent: function() {
var me = this;
me.items = [{
xtype: 'panel',
autoScroll: true,
name: 'container'
}];
me.callParent(arguments);
var devicedata = [];
Ext.iterate(me.record.raw, function(key, value) {
if (key !== 'ATTR' && key !== 'attrs' && key !== 'sets' && key !== 'READINGS') {
var obj = {
key: key,
value: value
};
devicedata.push(obj);
}
});
if (devicedata.length > 0) {
var devicedatastore = Ext.create('Ext.data.Store', {
fields: ['key', 'value'],
data: devicedata,
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
var devicedatagrid = {
xtype: 'grid',
title: 'Device Data',
//hideHeaders: true,
columns: [
{
header: 'KEY',
dataIndex: 'key',
width: '49%'
},
{
header: 'VALUE',
dataIndex: 'value',
width: '49%'
}
],
store: devicedatastore
};
me.down('panel[name=container]').add(devicedatagrid);
}
var readingcollection = me.record.raw.READINGS;
if (readingcollection && !Ext.isEmpty(readingcollection) && readingcollection.length > 0) {
var readingsdata = [];
Ext.each(readingcollection, function(readings) {
Ext.each(readings, function(reading) {
Ext.iterate(reading, function(key, value) {
if (key !== "measured") {
var obj = {
key: key,
value: value,
measured: ''
};
readingsdata.push(obj);
} else {
// as the measured time belongs to the last dataset, we merge it..
readingsdata[readingsdata.length - 1].measured = value;
}
});
});
});
var devicereadingsstore = Ext.create('Ext.data.Store', {
fields: ['key', 'value', 'measured'],
data: readingsdata,
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
var devicereadingsgrid = {
xtype: 'grid',
title: 'Device Readings',
columns: [
{
header: 'KEY',
dataIndex: 'key',
width: '33%'
},
{
header: 'VALUE',
dataIndex: 'value',
width: '33%'
},
{
header: 'MEASURED',
dataIndex: 'measured',
width: '33%'
}
],
store: devicereadingsstore
};
me.down('panel[name=container]').add(devicereadingsgrid);
}
}
});

105
www/frontend/www/frontend/app/view/Viewport.js
View File

@@ -87,14 +87,11 @@ Ext.define('FHEM.view.Viewport', {
region: 'west', region: 'west',
title: 'Navigation', title: 'Navigation',
width: 200, width: 200,
autoScroll: true,
xtype: 'panel', xtype: 'panel',
name: 'westaccordionpanel',
layout: 'accordion', layout: 'accordion',
items: [ items: [
{
xtype: 'panel',
name: 'culpanel',
title: 'CUL'
},
{ {
xtype: 'panel', xtype: 'panel',
title: 'LineChart', title: 'LineChart',
@@ -126,76 +123,46 @@ Ext.define('FHEM.view.Viewport', {
} }
] ]
}, },
// {
// xtype: 'panel',
// title: 'BarChart',
// name: 'barchartpanel',
// layout: 'fit',
// collapsed: false,
// items: [
// {
// xtype: 'grid',
// columns: [
// {
// header: 'Saved Charts',
// dataIndex: 'VALUE',
// width: '80%'
// },
// {
// xtype:'actioncolumn',
// name: 'savedchartsactioncolumn',
// width:'15%',
// items: [{
// icon: 'lib/ext-4.1.1a/images/gray/dd/drop-no.gif',
// tooltip: 'Delete'
// }]
// }
// ],
// store: Ext.create('FHEM.store.SavedChartsStore', {}),
// name: 'savedchartsgrid'
//
// }
// ]
// },
{ {
xtype: 'panel', xtype: 'panel',
title: 'Database Tables', title: 'Database Tables',
name: 'tabledataaccordionpanel' name: 'tabledataaccordionpanel'
},
{
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'
} }
// {
// 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'
// }
] ]
}, { },
{
xtype: 'panel', xtype: 'panel',
region: 'south', region: 'south',
title: 'Status', title: 'Status',