Better control over the dhtml calendars

2 files changed, 73 insertions, 32 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"
diff --git a/jarmon.js b/jarmon.js
index 6b29692..2ffa942 100644
--- a/jarmon.js
+++ b/jarmon.js
@@ -717,12 +717,9 @@ jarmon.ChartCoordinator = function(ui) {
         });
     }
 
-    // Don't set a default tzoffset if one has already been added to the form
-    if(tzoffsetEl.val() === '') {
-        // Default timezone offset based on localtime
-        var tzoffset = -1 * new Date().getTimezoneOffset() * 60 * 1000;
-        tzoffsetEl.val(tzoffset);
-    }
+    // Default timezone offset based on localtime
+    var tzoffset = -1 * new Date().getTimezoneOffset() * 60 * 1000;
+    tzoffsetEl.val(tzoffset);
 
     // Update the time ranges and redraw charts when the form is submitted
     this.ui.find('[name="action"]').bind('click', function(e) {