From 5c37a631535d0e181e6e33207552146cbb98c258 Mon Sep 17 00:00:00 2001
From: Thierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Date: Tue, 13 Jan 2009 11:46:18 +0000
Subject: [PATCH] checkpoint

---
 planetlab/css/plc_table.css  | 21 ++++++++---
 planetlab/js/plc_filter.js   | 19 +++++++++-
 planetlab/js/plc_paginate.js | 43 ++++++++++++++++------
 planetlab/nodes/newindex.php | 70 ++++++++++++++++++++----------------
 4 files changed, 106 insertions(+), 47 deletions(-)

diff --git a/planetlab/css/plc_table.css b/planetlab/css/plc_table.css
index 3372d8b..cd752ad 100644
--- a/planetlab/css/plc_table.css
+++ b/planetlab/css/plc_table.css
@@ -95,9 +95,22 @@ tbody tr td:first-child
         font-weight:bold;
         }
 
-div.table_size_dialog {
-    align:left;
+td.table_flushleft {
+    text-align:left;
 }
-div.table_pattern_dialog {
-    align:right;
+td.table_flushright {
+    text-align:right;
+}
+table.table_dialogs {
+    width:100%;
+    border:1px;
+}
+.table_size_label{
+    font-weight:bold;
+}
+.table_search_label{
+    font-weight:bold;
+}
+.table_reset {
+    border:1px;
 }
diff --git a/planetlab/js/plc_filter.js b/planetlab/js/plc_filter.js
index 6688756..78b41ee 100644
--- a/planetlab/js/plc_filter.js
+++ b/planetlab/js/plc_filter.js
@@ -9,12 +9,27 @@ function plc_table_row_visible (row,visible) {
   row.className=cn;
 }
 
+/* maintain the number of matching entries in the <tbody> element's classname */
+function plc_table_tbody_matching (tbody, matching) {
+  var new_cn="matching-" + matching;
+  var cn=tbody.className;
+  if (cn.match("matching-")) {
+    cn=cn.replace(/matching-\d+/,new_cn);
+  } else {
+    cn=cn + " " + new_cn;
+  }
+  cn=cn.replace(/^ +/,"");
+  tbody.className=cn;
+}
+
 // /* scan the table, and mark as visible the rows that have at least one cell that contains the pattern */
 function plc_table_filter (table_id,pattern_id) {
-  var rows = document.getElementById(table_id).getElementsByTagName("tbody")[0].rows;
+  var tbody = document.getElementById(table_id).getElementsByTagName("tbody")[0];
+  var rows=tbody.rows;
   var pattern_text = document.getElementById(pattern_id).value;
   var row_index, row, cells, cell_index, cell, visible;
   var pattern,i;
+  var matching_entries=0;
   
   // remove whitespaces at the beginning and end
   pattern_text = pattern_text.replace(/[ \t]+$/,"");
@@ -38,7 +53,9 @@ function plc_table_filter (table_id,pattern_id) {
       }
     }
     plc_table_row_visible(row,visible);
+    if (visible) matching_entries +=1;
   }
+  plc_table_tbody_matching(tbody,matching_entries);
   tablePaginater.init(table_id);
 }
 
diff --git a/planetlab/js/plc_paginate.js b/planetlab/js/plc_paginate.js
index cc74e59..68c228f 100644
--- a/planetlab/js/plc_paginate.js
+++ b/planetlab/js/plc_paginate.js
@@ -9,16 +9,39 @@ function plc_table_update_paginaters (opts,tablename) {
   var t = document.getElementById(tablename+'-fdtablePaginaterWrapTop');
   var b = document.getElementById(tablename+'-fdtablePaginaterWrapBottom');
 
+  /* get how many entries are matching:
+     opts.visibleRows only holds the contents of the current page
+     so we store the number of matching entries in the tbody's classname
+     see plc_table_tbody_matching
+  */
+  var totalMatches = opts.totalRows;
+  var tbody=document.getElementById(tablename).getElementsByTagName("tbody")[0];
+  var cn=tbody.className;
+  if (cn.match (/matching-\d+/)) {
+    totalMatches=cn.match(/matching-\d+/)[0].replace("matching-","");
+  } 
+
+  var label;
+
+  /* when there's no visible entry, the pagination code removes the wrappers */
+  if (totalMatches == 0) return;
+
+  var matches_text;
+  if (totalMatches != opts.totalRows) {
+    matches_text = totalMatches + "/" + opts.totalRows;
+  } else {
+    matches_text = opts.totalRows;
+  }
   var first = ((opts.currentPage-1) * opts.rowsPerPage) +1;
-  var last = Math.min((opts.currentPage * opts.rowsPerPage),opts.totalRows);
-  var items_text = "Items [" + first + " - " + last + "] of " + opts.totalRows;
-  var page_text = "Page " + opts.currentPage + " of " + Math.ceil(opts.totalRows / opts.rowsPerPage);
-  var label = items_text + " --- " + page_text;
+  var last = Math.min((opts.currentPage * opts.rowsPerPage),totalMatches);
+  var items_text = "Items [" + first + " - " + last + "] of " + matches_text;
+  var page_text = "Page " + opts.currentPage + " of " + Math.ceil(totalMatches / opts.rowsPerPage);
+  label = items_text + " -- " + page_text;
 
   p.className = "paginationText";    
   p.appendChild(document.createTextNode(label));
-                
-  /*  t.insertBefore(p.cloneNode(true), t.firstChild); */
+
+  t.insertBefore(p.cloneNode(true), t.firstChild);
   b.appendChild(p);
 }
 
@@ -27,21 +50,19 @@ function plc_table_update_paginaters (opts,tablename) {
 function plc_table_setsize (table_id,size_id,def_size) {
   var table=document.getElementById(table_id);
   var size_area=document.getElementById(size_id);
-  var paginate=/paginate-\d+/;
   if ( ! size_area.value ) {
     size_area.value=def_size;
   }
   var size=size_area.value;
-  table.className=table.className.replace(paginate,"paginate-"+size); 
+  table.className=table.className.replace(/paginate-\d+/,"paginate-"+size); 
   tablePaginater.init(table_id);
 }
 
-function plc_table_filter_resetsize(table_id, size_id, size) {
+function plc_table_size_reset(table_id, size_id, size) {
   var table=document.getElementById(table_id);
   var size_area=document.getElementById(size_id);
-  var paginate=/paginate-\d+/;
   size_area.value=size;
-  table.className=table.className.replace(paginate,"paginate-"+size); 
+  table.className=table.className.replace(/paginate-\d+/,"paginate-"+size); 
   tablePaginater.init(table_id);
 }
   
diff --git a/planetlab/nodes/newindex.php b/planetlab/nodes/newindex.php
index 1a7fc87..6c215fb 100644
--- a/planetlab/nodes/newindex.php
+++ b/planetlab/nodes/newindex.php
@@ -42,12 +42,6 @@ $header_tablesort_css='
 <link href="/planetlab/css/plc_paginate.css" rel="stylesheet" type="text/css" />
 ';
 
-$unused='
-<script type="text/javascript" src="/planetlab/tablesort/more.js"></script>
-<link href="/planetlab/css/more.css" rel="stylesheet" type="text/css" />
-<body OnLoad="init();">
-';
-
 drupal_set_html_head($header_autocomplete_js);
 drupal_set_html_head($header_tablesort_js);
 drupal_set_html_head($header_tablesort_css);
@@ -55,8 +49,7 @@ drupal_set_html_head($header_tablesort_css);
 // -------------------- 
 $nodepattern=$_GET['nodepattern'];
 $peerscope=$_GET['peerscope'];
-$tablesize=$_GET['tablesize'];
-if (empty($tablesize)) $tablesize=25;
+$tablesize=25;
 
 ?>
 
@@ -65,7 +58,7 @@ if (empty($tablesize)) $tablesize=25;
 
 $peer_filter=array();
 
-// fetch nodes
+// fetch nodes - use nodepattern for server-side filtering
 $node_columns=array('hostname','site_id','node_id','boot_state','interface_ids','peer_id');
 if ($nodepattern) {
   $node_filter['hostname']=$nodepattern;
@@ -73,7 +66,7 @@ if ($nodepattern) {
   $node_filter=array('hostname'=>"*");
  }
 
-// peerscope
+// server-side selection on peerscope
 list ( $peer_filter, $peer_label) = plc_peer_info($api,$_GET['peerscope']);
 $node_filter=array_merge($node_filter,$peer_filter);
 
@@ -120,34 +113,36 @@ foreach ($peers as $peer) {
 ?>
 
 <!------------------------------------------------------------>
-<div class='table_size_dialog'>
-<form>
-  <label> table size </label> 
-  <input type='text' id='tablesize_text' value="<?php echo $tablesize; ?>" size=3 maxlength=3 
+<table class='table_dialogs'> <tr>
+<td class='table_flushleft'>
+<form class='table_size'>
+  <input class='table_size_input' type='text' id='tablesize_text' value="<?php echo $tablesize; ?>" 
   onkeyup='plc_table_setsize("nodes","tablesize_text", "<?php echo $tablesize; ?>" );' 
-  /> 
-  <input type='button' value='reset' src="/planetlab/icons/clear.png" 
-    onclick='plc_table_filter_resetsize("nodes","tablesize_text","999");'>
+  size=3 maxlength=3 /> 
+  <label class='table_size_label'> items per page </label>   
+  <img class='table_reset' src="/planetlab/icons/clear.png" 
+    onmousedown='plc_table_size_reset("nodes","tablesize_text","999");'>
 </form>
-</div>
-
-<div class='table_pattern_dialog'> 
-<form>
-  <label> pattern </label> 
-  <input type='text' id='filter_text' size=40 maxlength=256
-  onkeyup='plc_table_filter("nodes","filter_text");'
- />
-  <input type='button' value='reset' src="/planetlab/icons/clear.png" 
-    onclick='plc_table_filter_reset("nodes","filter_text");'>
+</td>
+
+<td class='table_flushright'> 
+<form class='table_search'>
+  <label class='table_search_label'> search </label> 
+  <input class='table_search_input' type='text' id='search_text'
+  onkeyup='plc_table_filter("nodes","search_text");'
+  size=40 maxlength=256 />
+  <img class='table_reset' src="/planetlab/icons/clear.png" 
+  onmousedown='plc_table_filter_reset("nodes","search_text");'>
 </form>
-</div>
+</td>
+</tr></table>
 
 <!------------------------------------------------------------>
 <div class="fdtablePaginaterWrap" id="nodes-fdtablePaginaterWrapTop"><p></p></div>
 
 <!------------------------------------------------------------>
 <table id="nodes" cellpadding="0" cellspacing="0" border="0" 
-class="plc_table sortable-onload-1 rowstyle-alt colstyle-alt no-arrow paginationcallback-nodesTextInfo max-pages-15 paginate-<?php print $tablesize; ?>">
+class="plc_table sortable-onload-4 rowstyle-alt colstyle-alt no-arrow paginationcallback-nodesTextInfo max-pages-15 paginate-<?php print $tablesize; ?>">
 <thead>
 <tr>
 <th class="sortable plc_table">Peer</th>
@@ -202,9 +197,11 @@ foreach ($nodes as $node) {
 </table>
 
 <div class="fdtablePaginaterWrap" id="nodes-fdtablePaginaterWrapBottom"><p></p></div>
-<p class='plc_filter_note'> Notes: Several words in pattern are combined with <em> OR </em>
 
-<br/> Hold down the shift key to select multiple columns to sort 
+<p class='plc_filter_note'> 
+Notes: Several words in pattern are combined with <em> OR </em>
+<br/> 
+Hold down the shift key to select multiple columns to sort 
 </p>
 
 <!------------------------------------------------------------>
@@ -255,3 +252,14 @@ var as = new AutoSuggest('nodepattern', options);
 </form>
 </div>
 
+<!-- trash -->
+<script type="text/javascript">
+  function foo () {
+      var tbody=document.getElementById("nodes").getElementsByTagName("tbody")[0];
+      alert ('current classname = [' + tbody.className + "]");
+    }
+</script>
+
+<hr>
+<form> <input type='button' onclick="foo()" value='debug classname'> </form>
+
-- 
2.47.0