summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorRichard Wall <richard@aziz>2010-07-13 21:39:38 +0100
committerRichard Wall <richard@aziz>2010-07-13 21:39:38 +0100
commitbc3156fff165b228e6da03411d6b5a98b8f490d5 (patch)
tree1666a98d341dfb80fe303238757040591b582715 /index.html
parent32b1238c614531450edf253a9ab547519791ebfd (diff)
Better control over the dhtml calendars
Diffstat (limited to 'index.html')
-rw-r--r--index.html96
1 files changed, 70 insertions, 26 deletions
diff --git a/index.html b/index.html
index 54c9623..2c63916 100644
--- a/index.html
+++ b/index.html
@@ -100,40 +100,80 @@
}
$(function() {
+ // Download a list of available rrd files and use it to generate
+ // any viable chart recipes
+ // A static json file containing a list of rrd urls
+ $.getJSON('rrd_list.json', initialiseCharts);
+
+ // Alternatively use a dynamically generated list of rrd urls
+ //$.getJSON('rrd_finder.rpy', initialiseCharts);
// Add dhtml calendars to the date input fields
- $(".timerange_control.custom input")
+ $(".timerange_control img")
.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));
+ var classes = $(this).attr('class').split(' ');
+ var currentDate, input_selector;
+ for(var i=0; i<=classes.length; i++) {
+ input_selector = '[name="' + classes[i] + '"]';
+ // Look for a neighboring input element whose name matches the
+ // class name of this calendar
+ // Parse the value as a date if the returned date.getTime
+ // returns NaN we know it's an invalid date
+ // XXX: is there a better way to check for valid date?
+ currentDate = new Date($(this).siblings(input_selector).val());
+ if(currentDate.getTime() != NaN) {
+ $(this).data('dateinput')._input_selector = input_selector;
+ $(this).data('dateinput')._initial_val = currentDate.getTime();
+ $(this).data('dateinput').setValue(currentDate);
+ break;
+ }
+ }
+ })
+ .bind('onHide', function(e) {
+ // Called after a calendar date has been chosen by the user.
+
+ // Use the sibling selector that we generated above before opening
+ // the calendar
+ var input_selector = $(this).data('dateinput')._input_selector;
+ var oldStamp = $(this).data('dateinput')._initial_val;
+ var newDate = $(this).data('dateinput').getValue();
+ // Only update the form field if the date has changed.
+ if(oldStamp != newDate.getTime()) {
+ $(this).siblings(input_selector).val(
+ newDate.toString().split(' ').slice(1,5).join(' '));
+ // Trigger a change event which should automatically update the
+ // graphs and change the timerange drop down selector to
+ // "custom"
+ $(this).siblings(input_selector).trigger('change');
+ }
});
- $(".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});
- // Download a list of available rrd files and use it to generate
- // any viable chart recipes
+ // Avoid overlaps between the calendars
+ // XXX: This is a bit of hack, what if there's more than one set of calendar
+ // controls on a page?
+ $(".timerange_control img.from_custom").bind('onBeforeShow',
+ function() {
+ var otherVal = new Date(
+ $('.timerange_control [name="to_custom"]').val());
- // Dynamically generated list of rrd urls
- //$.getJSON('rrd_finder.rpy', initialiseCharts);
+ $(this).data('dateinput').setMax(otherVal);
+ }
+ );
+ $(".timerange_control img.to_custom").bind('onBeforeShow',
+ function() {
+ var otherVal = new Date(
+ $('.timerange_control [name="from_custom"]').val());
- // A static json file containing a list of rrd urls
- $.getJSON('rrd_list.json', initialiseCharts);
+ $(this).data('dateinput').setMin(otherVal);
+ }
+ );
+ // Setup dhtml tabs
+ $(".css-tabs").tabs(".css-panes > div", {history: true});
});
</script>
</head>
@@ -143,10 +183,14 @@
<form>
<div>
<span class="timerange_control custom">
- <input name="from_custom" type="text"
- title="Time range start - click to choose a custom start time" />
- <input name="to_custom" type="text"
- title="Time range end - click to choose a custom end time" />
+ <img src="assets/icons/calendar.png" width="16" height="16" alt="calendar" class="from_custom"
+ title="Click to choose a custom start date" />
+ <input name="from_custom" type="text" readonly="readonly"
+ title="Time range start" />
+ <img src="assets/icons/calendar.png" width="16" height="16" alt="calendar" class="to_custom"
+ title="Click to choose a custom end date" />
+ <input name="to_custom" type="text" readonly="readonly"
+ title="Time range end" />
</span>
<span class="timerange_control standard">
<select name="from_standard"