<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">
</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>
--- /dev/null
+<%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 ? '∨' : '∧'). '</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;
+ }
+}
+</&>