FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-01-31 12:49:34 +00:00
Code Issues Releases Wiki Activity

added parsing of jsonlist contents to dynamically setup menus and contents

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

1
fhem/www/frontend/CHANGED
View File

@ -1,5 +1,6 @@
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
* Shutdown und Restart Button für FHEM hinzugefügt
* Icons

7
fhem/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-02-25_08:13:15 499 www/frontend/index.html
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-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: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-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 338 www/frontend/app/model/SavedChartsModel.js
UPD 2013-03-01_05:43:31 674 www/frontend/app/model/ChartModel.js

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

@ -34,10 +34,10 @@ Ext.application({
url: url,
success: function(response){
Ext.getBody().unmask();
var json = Ext.decode(response.responseText);
FHEM.version = json.Results[0].devices[0].ATTR.version;
FHEM.info = Ext.decode(response.responseText);
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...
if (result.list === "DbLog" && 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?");
} else {
Ext.create("FHEM.view.Viewport");
// further configuration of viewport starts in maincontroller
}
},
failure: function() {

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

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

144
fhem/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
fhem/www/frontend/www/frontend/app/view/Viewport.js
View File

@ -87,14 +87,11 @@ Ext.define('FHEM.view.Viewport', {
region: 'west',
title: 'Navigation',
width: 200,
autoScroll: true,
xtype: 'panel',
name: 'westaccordionpanel',
layout: 'accordion',
items: [
{
xtype: 'panel',
name: 'culpanel',
title: 'CUL'
},
{
xtype: 'panel',
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',
title: 'Database Tables',
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',
region: 'south',
title: 'Status',