Implemented the date selector in JavaScript

This way, we can just use our internal database date format for
client-side communication as well. The calculation is now done in
a centralized place in script.js, rather than all over the place in
the Perl code.

This'll also make it possible to make the date selector more
interactive. But that doesn't have a very high priority at the moment,
the good old three-selection-boxes-thing works fine.

Current implementation has only been tested on FF3, though I doubt
other browsers will complain.

3 files changed, 50 insertions, 36 deletions

diff --git a/lib/VNDB/Handler/Releases.pm b/lib/VNDB/Handler/Releases.pm
index 32629131..5dec02ec 100644
--- a/lib/VNDB/Handler/Releases.pm
+++ b/lib/VNDB/Handler/Releases.pm
@@ -247,8 +247,7 @@ sub edit {
 
   my $vn = $rid ? $r->{vn} : [{ vid => $vid, title => $v->{title} }];
   my %b4 = !$rid ? () : (
-    (map { $_ => $r->{$_} } qw|type title original gtin catalog language website notes minage platforms patch|),
-    released  => $r->{released} =~ /^([0-9]{4})([0-9]{2})([0-9]{2})$/ ? [ $1, $2, $3 ] : [ 0, 0, 0 ],
+    (map { $_ => $r->{$_} } qw|type title original gtin catalog language website released notes minage platforms patch|),
     media     => join(',',   sort map "$_->{medium} $_->{qty}", @{$r->{media}}),
     producers => join('|||', map "$_->{id},$_->{name}", sort { $a->{id} <=> $b->{id} } @{$r->{producers}}),
   );
@@ -266,7 +265,7 @@ sub edit {
       { name => 'catalog',   required => 0, default => '', maxlength => 50 },
       { name => 'language',  enum => [ keys %{$self->{languages}} ] },
       { name => 'website',   required => 0, default => '', template => 'url' },
-      { name => 'released',  required => 0, default => 0, multi => 1, template => 'int' },
+      { name => 'released',  required => 0, default => 0, template => 'int' },
       { name => 'minage' ,   required => 0, default => -1, enum => [ keys %{$self->{age_ratings}} ] },
       { name => 'notes',     required => 0, default => '', maxlength => 10240 },
       { name => 'platforms', required => 0, default => '', multi => 1, enum => [ keys %{$self->{platforms}} ] },
@@ -277,8 +276,6 @@ sub edit {
     );
     if(!$frm->{_err}) {
       # de-serialize
-      my $released  = !$frm->{released}[0] ? 0 : $frm->{released}[0] == 9999 ? 99999999 :
-        sprintf '%04d%02d%02d',  $frm->{released}[0], $frm->{released}[1]||99, $frm->{released}[2]||99;
       my $media     = [ map [ split / / ], split /,/, $frm->{media} ];
       my $producers = [ map { /^([0-9]+)/ ? $1 : () } split /\|\|\|/, $frm->{producers} ];
       my $new_vn    = [ map { /^([0-9]+)/ ? $1 : () } split /\|\|\|/, $frm->{vn} ];
@@ -286,18 +283,17 @@ sub edit {
       $frm->{patch} = $frm->{patch} ? 1 : 0;
 
       return $self->resRedirect("/r$rid", 'post')
-        if $rid && $released == $r->{released} &&
+        if $rid &&
           (join(',', sort @{$b4{platforms}}) eq join(',', sort @{$frm->{platforms}})) &&
           (join(',', sort @$producers) eq join(',', sort map $_->{id}, @{$r->{producers}})) &&
           (join(',', sort @$new_vn) eq join(',', sort map $_->{vid}, @$vn)) &&
-          !grep !/^(released|platforms|producers|vn)$/ && $frm->{$_} ne $b4{$_}, keys %b4;
+          !grep !/^(platforms|producers|vn)$/ && $frm->{$_} ne $b4{$_}, keys %b4;
 
       my %opts = (
-        (map { $_ => $frm->{$_} } qw| type title original gtin catalog language website notes minage platforms editsum patch|),
+        (map { $_ => $frm->{$_} } qw| type title original gtin catalog language website released notes minage platforms editsum patch |),
         vn        => $new_vn,
         producers => $producers,
         media     => $media,
-        released  => $released,
       );
 
       $rev = 1;
@@ -421,23 +417,16 @@ sub browse {
     { name => 'pa', required => 0, default => 0, enum => [ 0..2 ] },
     { name => 'ma_m', required => 0, default => 0, enum => [ 0, 1 ] },
     { name => 'ma_a', required => 0, default => 0, enum => [ keys %{$self->{age_ratings}} ] },
-    { name => 'mi', required => 0, default => 0, multi => 1, template => 'int' },
-    { name => 'ma', required => 0, default => 9999, multi => 1, template => 'int' },
+    { name => 'mi', required => 0, default => 0, template => 'int' },
+    { name => 'ma', required => 0, default => 99999999, template => 'int' },
   );
   return 404 if $f->{_err};
 
-  $f->{mi}[1] ||= 0; $f->{mi}[2] ||= 0;
-  $f->{ma}[1] ||= 0; $f->{ma}[2] ||= 0;
-  my $mindate  = !$f->{mi}[0] ? 0 : $f->{mi}[0] == 9999 ? 99999999 :
-    sprintf '%04d%02d%02d',  $f->{mi}[0], $f->{mi}[1]||99, $f->{mi}[2]||99;
-  my $maxdate  = !$f->{ma}[0] ? 0 : $f->{ma}[0] == 9999 ? 99999999 :
-    sprintf '%04d%02d%02d',  $f->{ma}[0], $f->{ma}[1]||99, $f->{ma}[2]||99;
-
   my($list, $np) = $self->dbReleaseGet(
     order => $f->{s}.($f->{o}eq'd'?' DESC':' ASC'),
     page => $f->{p},
     results => 50,
-    $mindate > 0 || $maxdate < 99990000 ? (date => [ $mindate, $maxdate ]) : (),
+    $f->{mi} > 0 || $f->{ma} < 99990000 ? (date => [ $f->{mi}, $f->{ma} ]) : (),
     $f->{q} ? (search => $f->{q}) : (),
     $f->{pl}[0] ? (platforms => $f->{pl}) : (),
     $f->{ln}[0] ? (languages => $f->{ln}) : (),
@@ -447,8 +436,7 @@ sub browse {
     what => 'platforms',
   );
 
-  my $url = "/r?tp=$f->{tp};pa=$f->{pa};ma_m=$f->{ma_m};ma_a=$f->{ma_a};q=$f->{q}"
-    .";mi=$f->{mi}[0];mi=$f->{mi}[1];mi=$f->{mi}[2];ma=$f->{ma}[0];ma=$f->{ma}[1];ma=$f->{ma}[2]";
+  my $url = "/r?tp=$f->{tp};pa=$f->{pa};ma_m=$f->{ma_m};ma_a=$f->{ma_a};q=$f->{q};mi=$f->{mi};ma=$f->{ma}";
   $_&&($url .= ";ln=$_") for @{$f->{ln}};
   $_&&($url .= ";pl=$_") for @{$f->{pl}};
 
diff --git a/lib/VNDB/Util/FormHTML.pm b/lib/VNDB/Util/FormHTML.pm
index cc4f7411..ed4443cc 100644
--- a/lib/VNDB/Util/FormHTML.pm
+++ b/lib/VNDB/Util/FormHTML.pm
@@ -192,21 +192,7 @@ sub htmlFormPart {
       end;
     }
     if(/date/) {
-      Select name => $o{short}, id => $o{short}, style => 'width: 70px';
-       option value => $_, $frm->{$o{short}} && $frm->{$o{short}}[0] == $_ ? (selected => 'selected') : (),
-          !$_ ? '-year-' : $_ < 9999 ? $_ : 'TBA'
-         for (0, 1980..((localtime())[5]+1905), 9999);
-      end;
-      Select id => "$o{short}_m", name => $o{short}, style => 'width: 100px';
-       option value => $_, $frm->{$o{short}} && $frm->{$o{short}}[1] == $_ ? (selected => 'selected') : (),
-          !$_ ? '-month-' : strftime '%B', 0, 0, 0, 0, $_, 0, 0, 0
-         for(0..12);
-      end;
-      Select id => "$o{short}_d", name => $o{short}, style => 'width: 70px';
-       option value => $_, $frm->{$o{short}} && $frm->{$o{short}}[2] == $_ ? (selected => 'selected') : (),
-          !$_ ? '-day-' : $_
-         for(0..31);
-      end;
+      input type => 'hidden', id => $o{short}, name => $o{short}, value => $frm->{$o{short}}||'', class => 'dateinput';
     }
     if(/text/) {
       (my $txt = $frm->{$o{short}}||'') =~ s/&/&amp;/;
diff --git a/static/f/script.js b/static/f/script.js
index 9e87fd65..48002287 100644
--- a/static/f/script.js
+++ b/static/f/script.js
@@ -391,6 +391,40 @@ function tvsSet(lvl, lim) {
 
 
 
+/* date input */
+var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+function dtLoad(obj) {
+  var r = Math.floor(obj.value) || 0;
+  var v = [ Math.floor(r/10000), Math.floor(r/100)%100, r%100 ];
+  var i;
+  r = '<select onchange="dtSerialize(this)" style="width: 70px"><option value="0">-year-</option>';
+  for(i=1980; i<=(new Date()).getFullYear()+5; i++)
+    r += '<option value="'+i+'"'+(i == v[0] ? ' selected="selected"':'')+'>'+i+'</option>';
+  r += '<option value="9999"'+(v[0] == 9999 ? ' selected="selected"':'')+'>TBA</option>';
+  r += '</select><select onchange="dtSerialize(this)" style="width: 100px"><option value="99">-month-</option>';
+  for(i=1; i<=12; i++)
+    r += '<option value="'+i+'"'+(i == v[1] ? ' selected="selected"':'')+'>'+months[i-1]+'</option>';
+  r += '</select><select onchange="dtSerialize(this)" style="width: 70px"><option value="99">-day-</option>';
+  for(i=1; i<=31; i++)
+    r += '<option value="'+i+'"'+(i == v[2] ? ' selected="selected"':'')+'>'+i+'</option>';
+  r += '</select>';
+  v = document.createElement('div');
+  v.obj = obj;
+  v.innerHTML = r;
+  obj.parentNode.insertBefore(v, obj);
+}
+function dtSerialize(obj) {
+  obj = obj.parentNode;
+  var l = obj.getElementsByTagName('select');
+  var v = [ l[0].options[l[0].selectedIndex].value*1, l[1].options[l[1].selectedIndex].value*1, l[2].options[l[2].selectedIndex].value*1 ];
+  obj = obj.obj;
+  if(v[0] == 0) obj.value = 0;
+  else if(v[0] == 9999) obj.value = 99999999;
+  else obj.value = v[0]*10000 + v[1]*100 + (v[1]==99?99:v[2]);
+}
+
+
+
 /*  O N L O A D   E V E N T  */
 
 DOMLoad(function() {
@@ -580,6 +614,12 @@ DOMLoad(function() {
     document.body.appendChild(d);
   }
 
+  // date selector
+  l = document.getElementsByTagName('input');
+  for(i=0;i<l.length;i++)
+    if(l[i].className == 'dateinput')
+      dtLoad(l[i]);
+
   // forms.js
   if(x('relations'))
     relLoad();