diff options
| -rw-r--r-- | index.html | 38 | ||||
| -rw-r--r-- | jarmon.js | 28 |
2 files changed, 50 insertions, 16 deletions
@@ -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"> @@ -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() { |