summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html38
-rw-r--r--jarmon.js28
2 files changed, 50 insertions, 16 deletions
diff --git a/index.html b/index.html
index 3d4a302..7e0ac97 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
<script type="text/javascript" src="http://javascriptrrd.cvs.sourceforge.net/viewvc/*checkout*/javascriptrrd/v0/src/lib/binaryXHR.js?revision=1.5&content-type=text%2Fplain"></script>
<script type="text/javascript" src="http://javascriptrrd.cvs.sourceforge.net/viewvc/*checkout*/javascriptrrd/v0/src/lib/rrdFile.js?revision=1.8&content-type=text%2Fplain"></script>
- <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.2/all/jquery.tools.min.js"></script>
+ <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.3/all/jquery.tools.min.js"></script>
<script type="text/javascript" src="jarmon.js"></script>
<script type="text/javascript" src="docs/jarmon_example_recipes.js"></script>
@@ -110,16 +110,28 @@
}
$(function() {
- // Add dhtml calendars to the date input fields
- /*
- $(":date").dateinput({format: 'mmm dd yyyy', max: +1});
- $(":date[name=startTime]").data("dateinput").change(function() {
- $(":date[name=endTime]").data("dateinput").setMin(this.getValue(), true);
- });
- $(":date[name=endTime]").data("dateinput").change(function() {
- $(":date[name=startTime]").data("dateinput").setMax(this.getValue(), true);
- });
- */
+
+ // Add dhtml calendars to the date input fields
+ $(".timerange_control.custom input")
+ .dateinput({
+ 'format': 'dd mmm yyyy 00:00:00',
+ 'max': +1,
+ 'css': {'input': 'jquerytools_date'}})
+ .bind('onBeforeShow', function(e) {
+ $(this).data('dateinput').setValue(new Date(this.value));
+ });
+ $(".timerange_control.custom input").bind('onHide',
+ function(e) {
+ $(this).trigger('change');
+ });
+
+ $(":date[name=from_custom]").data("dateinput").change(function() {
+ $(":date[name=to_custom]").data("dateinput").setMin(this.getValue(), true);
+ });
+ $(":date[name=to_custom]").data("dateinput").change(function() {
+ $(":date[name=from_custom]").data("dateinput").setMax(this.getValue(), true);
+ });
+
// Setup dhtml tabs
$(".css-tabs").tabs(".css-panes > div", {history: true});
@@ -141,8 +153,8 @@
<form>
<div>
<span class="timerange_control custom">
- <input name="from_custom" type="date" />
- <input name="to_custom" type="date" />
+ <input name="from_custom" type="text" />
+ <input name="to_custom" type="text" />
</span>
<span class="timerange_control standard">
<select name="from_standard">
diff --git a/jarmon.js b/jarmon.js
index d5a6f28..c9fbdde 100644
--- a/jarmon.js
+++ b/jarmon.js
@@ -108,6 +108,7 @@ jarmon.localTimeFormatter = function (v, axis) {
return $.plot.formatDate(d, fmt, axis.options.monthNames);
};
+
/**
* A wrapper around an instance of javascriptrrd.RRDFile which provides a
* convenient way to query the RRDFile based on time range, RRD data source (DS)
@@ -654,6 +655,24 @@ jarmon.ChartCoordinator = function(ui) {
}
});
+ // Update the time ranges and redraw charts when the custom datetime inputs
+ // are changed
+ this.ui.find('[name="from_custom"]').bind('change',
+ function(e) {
+ self.ui.find('[name="from_standard"]').val('custom');
+ var tzoffset = parseInt(self.ui.find('[name="tzoffset"]').val());
+ self.setTimeRange(new Date(this.value + ' UTC').getTime() - tzoffset, null);
+ self.update();
+ }
+ );
+ this.ui.find('[name="to_custom"]').bind('change',
+ function(e) {
+ self.ui.find('[name="from_standard"]').val('custom');
+ var tzoffset = parseInt(self.ui.find('[name="tzoffset"]').val());
+ self.setTimeRange(null, new Date(this.value + ' UTC').getTime() - tzoffset);
+ self.update();
+ }
+ );
// Populate a list of tzoffset options
var label, val;
options = this.ui.find('select[name="tzoffset"]');
@@ -791,9 +810,12 @@ jarmon.ChartCoordinator.prototype.setTimeRange = function(from, to) {
* @param startTime: The start time I{Date}
* @param endTime: The end time I{Date}
**/
-
- this.ui.find('[name="from"]').val(from);
- this.ui.find('[name="to"]').val(to);
+ if(from != null) {
+ this.ui.find('[name="from"]').val(from);
+ }
+ if(to != null) {
+ this.ui.find('[name="to"]').val(to);
+ }
};
jarmon.ChartCoordinator.prototype.init = function() {