Javascript sorting for query_age

diff --git a/yarrg/web/query_age b/yarrg/web/query_age
index 77d750c8c95ec2c0386b79f785111df215851e0b..28d6a5f667074203c49451d522ad55b7d9fb1254 100644 (file)
--- a/yarrg/web/query_age
+++ b/yarrg/web/query_age
@@ -78,27 +78,39 @@ $sth->execute();
 
 <h1>Market data age</h1>
 
-<table>
+<table id="ts_table">
 <tr>
 <th>Archipelago
 <th>Island
 <th>Age
 </tr>
 % my %da_ages;
-% $da_ages{'daid_loaded'}= 0;
+% my %ts_sortkeys;
+% $da_ages{'id_loaded'}= 0;
 % while ($row=$sth->fetchrow_hashref) {
-%      my $elid= "daid_$row->{'islandid'}";
+%      my $rowid= "id_$row->{'islandid'}";
+%      my $cellid= "c$rowid";
 %      my $age= $now - $row->{'timestamp'};
-%      $da_ages{$elid}= $age;
-<tr> <td><% $row->{'archipelago'} |h
- %>  <td><% $row->{'islandname'} |h
- %>  <td id="<% $elid %>"><% $prettyprint_age->($age) %> </tr>
+%      $ts_sortkeys{'0'}{$rowid}= $row->{'archipelago'};
+%      $ts_sortkeys{'1'}{$rowid}= $row->{'islandname'};
+%      $da_ages{$rowid}= $age;
+<tr id=<% $rowid %>
+   > <td><% $row->{'archipelago'} |h
+  %> <td><% $row->{'islandname'} |h
+  %> <td id="<% $cellid %>"><% $prettyprint_age->($age) %> </tr>
 % }
 </table>
 
+<& tabsort, table => 'ts_table', cols => [
+       {}, {},
+       { DoReverse => 1,
+         Numeric => 1,
+         SortKey => "da_ages[rowid]" }]
+  &>
+
 <p>
 Time since this page loaded:
-<span id="daid_loaded">(not known; times above not updating)</span>
+<span id="cid_loaded">(not known; times above not updating)</span>
 
 <form action="lookup" method="get">
 <input type=submit name=submit value="Reload">
@@ -106,25 +118,32 @@ Time since this page loaded:
 </form>
 
 <&| script &>
+  ts_sortkeys= <% to_json_protecttags(\%ts_sortkeys) %>;
   da_ages= <% to_json_protecttags(\%da_ages) %>;
 
   function da_Refresh() {
     var now= Date.now();
     debug('updating now='+now);
-    for (var elid in da_ages) {
-      var el= document.getElementById(elid);
-      var oldage= da_ages[elid];
+    for (var rowid in da_ages) {
+      var oldage= da_ages[rowid];
+      var cellid= 'c'+rowid;
+      var el= document.getElementById(cellid);
       var age= oldage + (now - da_pageload) / 1000;
-      var newhtml= <% $meta_prettyprint_age->('age','Math.floor','+') %>
+      var newhtml= <% $meta_prettyprint_age->('age','Math.floor','+') %>;
 % if ($ARGS{debug}) {
-      if (elid == 'daid_loaded')
-       debug('element elid='+elid+' oldage='+oldage+' age='+age+': '+newhtml);
+      if (cellid == 'cid_loaded')
+       debug('element rowid='+rowid+' cellid='+cellid
+               +' oldage='+oldage+' age='+age+': '+newhtml);
 % }
       el.innerHTML= newhtml;
     }
   }
 
-  window.onload= da_Refresh;
+  function all_onload() {
+    ts_onload__ts_table();
+    da_Refresh();
+  }
+  window.onload= all_onload;
   window.setInterval(da_Refresh, 10000);
 </&script>
 

diff --git a/yarrg/web/tabsort b/yarrg/web/tabsort
new file mode 100644 (file)
index 0000000..8f48b25
--- /dev/null
+++ b/yarrg/web/tabsort
@@ -0,0 +1,95 @@
+<%args>
+$table => 'ts_table'
+$sortkeys => 'ts_sortkeys'
+$cols
+</%args>
+
+<%doc>
+       NoSort
+       DoReverse
+</%doc>
+
+<&| script &>
+
+%      my $sortfn= "ts_sort__$table";
+function <% $sortfn %>(compar) {
+  debug('sorting compar='+compar);
+  var table= document.getElementById('<% $table %>');
+  var firstrow= table.getElementsByTagName('tr').item(0);
+  var tbody= firstrow.parentNode
+  var rows= tbody.childNodes
+  var newrows= new Array;
+  for (var rowix=0; rowix < rows.length; rowix++) {
+    var row= rows.item(rowix);
+    debug('process row '+rowix+' [[ '+row+' ]] id='+row.id)
+    if (!row.id) continue;
+    if (row.tagName != 'TR') continue;
+    newrows.push(row);
+  }
+  newrows.sort(compar);
+  for (var rowix=0; rowix < newrows.length; rowix++) {
+    var row= newrows[rowix];
+    debug('add row '+rowix+' [[ '+row+' ]]');
+    tbody.appendChild(row);
+  }
+}
+
+% my %add_heads;
+% foreach my $cix (0..$#$cols) {
+%      my $col= $cols->[$cix];
+%      my $thhtml= '';
+%      next if $col->{NoSort};
+
+%      my $mapfn= "ts_compar${cix}_map__$table";
+function <% $mapfn %>(rowelement) {
+  var rowid = rowelement.id;
+%      if ($col->{SortKey}) {
+  var sk = <% $col->{SortKey} %>;
+  debug('map rowid='+rowid+' sk='+sk);
+  return sk;
+%      } else {
+  return <% $sortkeys %>[<% $cix %>][rowid];
+%      }
+}
+
+%      my $comparefn= "ts_compar${cix}_cmp0__$table";
+function <% $comparefn %>(a,b) {
+  var a_key = <% $mapfn %>(a);
+  var b_key = <% $mapfn %>(b);
+%      if ($col->{Numeric}) {
+  return a_key - b_key
+%      } else {
+  if (a_key < b_key) return -1;
+  if (a_key > b_key) return +1;
+  return 0;
+%      }
+}
+
+%      foreach my $reverse (qw(0 1)) {
+%              my $tcomparefn= "ts_compar${cix}_cmp${reverse}__$table";
+%              if ($reverse) {
+%                      next unless $col->{DoReverse};
+function <% $tcomparefn %>(a,b) { return -<% $comparefn %>(a,b); }
+%              }
+%              $thhtml .= "<a href=\"javascript:$sortfn($tcomparefn)\">".
+%                              ($reverse ? '&or;' : '&and;'). '</a>';
+%      }
+%      if (length $thhtml) {
+%              $add_heads{$cix}= $thhtml;
+%      }
+% }
+
+function ts_onload__<% $table %>() {
+  var ts_add_heads= <% to_json_protecttags(\%add_heads) %>;
+  var table= document.getElementById('<% $table %>');
+  var firstth= table.getElementsByTagName('th').item(0);
+  var thlist= firstth.parentNode.getElementsByTagName('th');
+  debug('thlist='+thlist);
+  debug('thlist.item(2)=' + thlist.item(2));
+  for (var cix in ts_add_heads) {
+    var ah = ts_add_heads[cix];
+    debug('appending to cix='+cix+' ah='+ah);
+    thlist.item(cix).innerHTML += ah;
+  }
+}
+</&>