From 8e23453e603f250307e33967c212f14f9ea9b35b Mon Sep 17 00:00:00 2001
From: johannnes <>
Date: Fri, 8 Mar 2013 19:17:20 +0000
Subject: [PATCH] added dynamic time ranges to charts in display and saving
git-svn-id: https://svn.fhem.de/fhem/trunk@2872 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
fhem/www/frontend/CHANGED | 1 +
fhem/www/frontend/controls_frontend.txt | 10 +--
.../app/controller/ChartController.js | 86 ++++++++++++++++++-
.../frontend/app/controller/MainController.js | 11 ++-
.../www/frontend/app/model/ChartModel.js | 4 +-
.../www/frontend/app/view/LineChartPanel.js | 46 +++++++++-
fhem/www/frontend/www/frontend/index.html | 3 +-
7 files changed, 141 insertions(+), 20 deletions(-)
diff --git a/fhem/www/frontend/CHANGED b/fhem/www/frontend/CHANGED
index f5e84f2ca..0d0fb6ab4 100644
--- a/fhem/www/frontend/CHANGED
+++ b/fhem/www/frontend/CHANGED
@@ -1,4 +1,5 @@
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
* Implementation eine Konfigurationsdatei für den Benutzer
* Steuerung über diese Datei ermöglicht z.B. die Konversion in Charts von "on" zu 1, "closed" zu 0 usw.
diff --git a/fhem/www/frontend/controls_frontend.txt b/fhem/www/frontend/controls_frontend.txt
index f0170f545..a9ee91316 100644
--- a/fhem/www/frontend/controls_frontend.txt
+++ b/fhem/www/frontend/controls_frontend.txt
@@ -38,20 +38,20 @@ DIR www/frontend/lib/ext-4.1.1a/images/gray/util
DIR www/frontend/lib/ext-4.1.1a/images/gray/panel-header
DIR www/frontend/lib/ext-4.1.1a/images/gray/tip
UPD 2013-03-07_12:12:22 49744 FHEM/93_DbLog.pm
-UPD 2013-03-06_11:11:22 499 www/frontend/index.html
+UPD 2013-03-08_07:13:10 563 www/frontend/index.html
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-06_11:11:22 20514 www/frontend/app/view/LineChartPanel.js
+UPD 2013-03-08_06:58:48 22644 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-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-08_01:58:22 42032 www/frontend/app/controller/ChartController.js
-UPD 2013-03-06_11:11:22 10761 www/frontend/app/controller/MainController.js
+UPD 2013-03-08_06:58:22 46090 www/frontend/app/controller/ChartController.js
+UPD 2013-03-08_06:15:36 10876 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-08_01:43:31 1752 www/frontend/app/model/ChartModel.js
+UPD 2013-03-08_05:43:31 1751 www/frontend/app/model/ChartModel.js
UPD 2013-03-06_11:11:22 198 www/frontend/app/model/DeviceModel.js
UPD 2013-03-06_11:11:22 685 www/frontend/app/model/TableDataModel.js
UPD 2013-03-06_11:11:22 432 www/frontend/app/store/ChartStore.js
diff --git a/fhem/www/frontend/www/frontend/app/controller/ChartController.js b/fhem/www/frontend/www/frontend/app/controller/ChartController.js
index adb4ccbeb..cc3d211b0 100644
--- a/fhem/www/frontend/www/frontend/app/controller/ChartController.js
+++ b/fhem/www/frontend/www/frontend/app/controller/ChartController.js
@@ -260,6 +260,7 @@ Ext.define('FHEM.controller.ChartController', {
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'),
endtime = me.getEndtimepicker().getValue(),
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'),
+ dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0],
view = me.getLinechartview(),
store = me.getLinechartview().getStore(),
proxy = store.getProxy();
@@ -279,6 +280,65 @@ Ext.define('FHEM.controller.ChartController', {
//setting x-axis title
view.axes.get(1).setTitle(xaxis);
+
+ //check if timerange or dynamic time should be used
+ dynamicradio.eachBox(function(box, idx){
+ var date = new Date();
+ if (box.checked) {
+ if (box.inputValue === "year") {
+ starttime = Ext.Date.parse(date.getUTCFullYear() + "-01-01", "Y-m-d");
+ dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
+ endtime = Ext.Date.parse(date.getUTCFullYear() + 1 + "-01-01", "Y-m-d");
+ dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
+ } else if (box.inputValue === "month") {
+ starttime = Ext.Date.getFirstDateOfMonth(date);
+ dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
+ endtime = Ext.Date.getLastDateOfMonth(date);
+ dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
+ } else if (box.inputValue === "week") {
+ date.setHours(0);
+ date.setMinutes(0);
+ date.setSeconds(0);
+ //monday starts with 0 till sat with 5, sund with -1
+ var dayoffset = date.getDay() - 1,
+ monday,
+ sunday;
+ if (dayoffset >= 0) {
+ monday = Ext.Date.add(date, Ext.Date.DAY, -dayoffset);
+ } else {
+ //we have a sunday
+ monday = Ext.Date.add(date, Ext.Date.DAY, 1);
+ }
+ sunday = Ext.Date.add(monday, Ext.Date.DAY, 6);
+
+ starttime = monday;
+ dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
+ endtime = sunday;
+ dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
+
+ } else if (box.inputValue === "day") {
+ date.setHours(0);
+ date.setMinutes(0);
+ date.setSeconds(0);
+
+ starttime = date;
+ dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
+ endtime = Ext.Date.add(date, Ext.Date.DAY, 1);
+ dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
+
+ } else if (box.inputValue === "hour") {
+ date.setMinutes(0);
+ date.setSeconds(0);
+
+ starttime = date;
+ dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s');
+ endtime = Ext.Date.add(date, Ext.Date.HOUR, 1);
+ dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s');
+ } else {
+ Ext.Msg.alert("Error", "Could not setup the dynamic time.");
+ }
+ }
+ });
// set the x axis range dependent on user given timerange
view.axes.get(1).fromDate = starttime;
@@ -731,8 +791,18 @@ Ext.define('FHEM.controller.ChartController', {
dbstarttime = Ext.Date.format(starttime, 'Y-m-d_H:i:s'),
endtime = this.getEndtimepicker().getValue(),
dbendtime = Ext.Date.format(endtime, 'Y-m-d_H:i:s'),
+ dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0],
view = this.getLinechartview();
+ //setting the starttime parameter in the chartconfig to the string of the radiofield, gets parsed on load
+ if (this.getStarttimepicker().isDisabled()) {
+ dynamicradio.eachBox(function(box, idx) {
+ if (box.checked) {
+ dbstarttime = box.inputValue;
+ }
+ });
+ }
+
var jsonConfig = '{"x":"' + xaxis + '","y":"' + yaxis + '","device":"' + device + '",';
jsonConfig += '"yaxiscolorcombo":"' + yaxiscolorcombo + '","yaxisfillcheck":"' + yaxisfillcheck + '",';
jsonConfig += '"y2device":"' + y2device + '",';
@@ -871,10 +941,20 @@ Ext.define('FHEM.controller.ChartController', {
}
//convert time
- var start = chartdata.starttime.replace("_", " "),
+ var dynamicradio = Ext.ComponentQuery.query('radiogroup[name=dynamictime]')[0],
+ st = chartdata.starttime;
+ if (st === "year" || st === "month" || st === "week" || st === "day" || st === "hour") {
+ dynamicradio.eachBox(function(box, idx) {
+ if (box.inputValue === st) {
+ box.setValue(true);
+ }
+ });
+ } else {
+ var start = chartdata.starttime.replace("_", " "),
end = chartdata.endtime.replace("_", " ");
- this.getStarttimepicker().setValue(start);
- this.getEndtimepicker().setValue(end);
+ this.getStarttimepicker().setValue(start);
+ this.getEndtimepicker().setValue(end);
+ }
this.requestChartData();
this.getLinechartpanel().setTitle(name);
diff --git a/fhem/www/frontend/www/frontend/app/controller/MainController.js b/fhem/www/frontend/www/frontend/app/controller/MainController.js
index d5bb14e9a..8c7ec3e47 100644
--- a/fhem/www/frontend/www/frontend/app/controller/MainController.js
+++ b/fhem/www/frontend/www/frontend/app/controller/MainController.js
@@ -73,7 +73,7 @@ Ext.define('FHEM.controller.MainController', {
if (Ext.isDefined(FHEM.version)) {
var sp = this.getStatustextfield();
- sp.setText(FHEM.version + "; Frontend Version: 0.2");
+ sp.setText(FHEM.version + "; Frontend Version: 0.2 - 2013-03-08");
}
//setup west accordion
@@ -163,7 +163,8 @@ Ext.define('FHEM.controller.MainController', {
opacity: 0,
easing: 'easeOut',
duration: 3000,
- delay: 2000
+ delay: 2000,
+ remove: true
});
},
failure: function() {
@@ -230,7 +231,8 @@ Ext.define('FHEM.controller.MainController', {
opacity: 0,
easing: 'easeOut',
duration: 3000,
- delay: 2000
+ delay: 2000,
+ remove: true
});
}
@@ -265,7 +267,8 @@ Ext.define('FHEM.controller.MainController', {
opacity: 0,
easing: 'easeOut',
duration: 3000,
- delay: 2000
+ delay: 2000,
+ remove: true
});
},
diff --git a/fhem/www/frontend/www/frontend/app/model/ChartModel.js b/fhem/www/frontend/www/frontend/app/model/ChartModel.js
index f3ccdeea5..f08092620 100644
--- a/fhem/www/frontend/www/frontend/app/model/ChartModel.js
+++ b/fhem/www/frontend/www/frontend/app/model/ChartModel.js
@@ -41,12 +41,10 @@ Ext.define('FHEM.model.ChartModel', {
}
],
parseToNumber: function(value) {
-
if (value === "") {
return 0;
- } else if (parseFloat(value, 10) === "NaN") {
+ } else if (parseFloat(value, 10).toString().toUpperCase() === "NAN") {
if (Ext.isDefined(FHEM) && Ext.isDefined(FHEM.userconfig)) {
-
var convertednumber = 0;
Ext.iterate(FHEM.userconfig.chartkeys, function(k, v) {
if (value === k) {
diff --git a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
index 3d0fb926c..e73566e6e 100644
--- a/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
+++ b/fhem/www/frontend/www/frontend/app/view/LineChartPanel.js
@@ -386,19 +386,57 @@ Ext.define('FHEM.view.LineChartPanel', {
margin: '0 0 0 10'
},
items: [
+ {
+ xtype: 'radiofield',
+ fieldLabel: 'Timerange',
+ labelWidth: 60,
+ name: 'rb',
+ checked: true,
+ inputValue: 'timerange',
+ listeners: {
+ change: function(rb, newval, oldval) {
+ if (newval === false) {
+ rb.up().down('datefield[name=starttimepicker]').setDisabled(true);
+ rb.up().down('datefield[name=endtimepicker]').setDisabled(true);
+ } else {
+ rb.up().down('datefield[name=starttimepicker]').setDisabled(false);
+ rb.up().down('datefield[name=endtimepicker]').setDisabled(false);
+ }
+ }
+ }
+ },
{
xtype: 'datefield',
name: 'starttimepicker',
format: 'Y-m-d H:i:s',
- fieldLabel: 'Select Starttime',
- labelWidth: 90
+ fieldLabel: 'Starttime',
+ labelWidth: 70
},
{
xtype: 'datefield',
name: 'endtimepicker',
format: 'Y-m-d H:i:s',
- fieldLabel: 'Select Endtime',
- labelWidth: 90
+ fieldLabel: 'Endtime',
+ labelWidth: 70
+ },
+ {
+ xtype: 'radiogroup',
+ name: 'dynamictime',
+ fieldLabel: 'or select a dynamic time',
+ labelWidth: 140,
+ allowBlank: true,
+ defaults: {
+ labelWidth: 60,
+ padding: "0 25px 0 0",
+ checked: false
+ },
+ items: [
+ { fieldLabel: 'this year', name: 'rb', inputValue: 'year' },
+ { fieldLabel: 'this month', name: 'rb', inputValue: 'month' },
+ { fieldLabel: 'this week', name: 'rb', inputValue: 'week' },
+ { fieldLabel: 'this day', name: 'rb', inputValue: 'day' },
+ { fieldLabel: 'this hour', name: 'rb', inputValue: 'hour' }
+ ]
}
]
},
diff --git a/fhem/www/frontend/www/frontend/index.html b/fhem/www/frontend/www/frontend/index.html
index fe2dfe536..f7a212d87 100644
--- a/fhem/www/frontend/www/frontend/index.html
+++ b/fhem/www/frontend/www/frontend/index.html
@@ -4,9 +4,10 @@
- FHEM Frontend
+ Frontend
+