From: Thierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Date: Mon, 12 Jan 2009 10:46:45 +0000 (+0000)
Subject: the basics for client-side filtering + a few tweaks
X-Git-Tag: PLEWWW-4.3-1~127
X-Git-Url: http://git.onelab.eu/?a=commitdiff_plain;h=945cd4f1c71dccb891b2da9465bc36b2adc37205;p=plewww.git

the basics for client-side filtering + a few tweaks
---

diff --git a/planetlab/css/demo.css b/planetlab/css/demo.css
index 3273576..8ef0d3d 100644
--- a/planetlab/css/demo.css
+++ b/planetlab/css/demo.css
@@ -153,12 +153,6 @@ td.lft
         {
         text-align:left;
         }
-tr.alt
-        {
-        background: #F5FAFA;
-        color: #797268;
-        }
-
 /* Poor old Internet Explorer 6 has a bug that means we can't use background images for the table rows
    as it trys to download the image each and every time that it is used (which means a 1000 row table
    will produce 1000 http requests for the image in question) */
diff --git a/planetlab/css/plc_paginate.css b/planetlab/css/plc_paginate.css
index d1d83cc..9755912 100644
--- a/planetlab/css/plc_paginate.css
+++ b/planetlab/css/plc_paginate.css
@@ -1,3 +1,5 @@
+/* $Id */
+
 /* Pagination list styles */
 ul.fdtablePaginater
         {
diff --git a/planetlab/css/plc_table.css b/planetlab/css/plc_table.css
index 59d6683..db13bb2 100644
--- a/planetlab/css/plc_table.css
+++ b/planetlab/css/plc_table.css
@@ -1,3 +1,4 @@
+/* $Id$ */
 table.plc_table
         {
         width: auto;
@@ -63,3 +64,10 @@ table thead th.reverseSort a
         color:#000;
         text-decoration:none;
         }
+/* rows with odd index */
+tr.alt
+        {
+        background: #F5FAFA;
+        color: #797268;
+        }
+
diff --git a/planetlab/js/plc_filter.js b/planetlab/js/plc_filter.js
new file mode 100644
index 0000000..dedf01f
--- /dev/null
+++ b/planetlab/js/plc_filter.js
@@ -0,0 +1,37 @@
+/* $Id$ */
+
+/* set or clear the ' invisibleRow' in the tr's classname, according to visible */
+function plc_row_set_classname (row,visible) {
+  var cn=row.className;
+  /* clear */
+  cn=cn.replace(" invisibleRow","");
+  if (! visible) cn += " invisibleRow";
+  row.className=cn;
+}
+
+/* scan the table, and mark as visible the rows that have at least one cell that contains the pattern */
+function plc_filter_table(table_id,pattern_id) {
+  var 
+    rows=document.getElementById(table_id).getElementsByTagName("tbody")[0].rows,
+    patterns=document.getElementById(pattern_id).value.split(" "),
+    row_index, row, cells,cell_index,cell,visible;
+  
+  for (row_index = 0; row=rows[row_index]; row_index++) {
+    
+    /* xxx deal with empty patterns and whitespaces */
+    if (patterns.length == 0) {
+      visible=true;
+    } else {
+      visible=false;
+      cells=row.cells;
+      for (cell_index = 0; cell=cells[cell_index]; cell_index++) {
+	for (var i in patterns) {
+	  pattern=patterns[i];
+	  if (cell.innerHTML.match(pattern)) visible=true;
+	}
+      }
+    }
+    plc_row_set_classname(row,visible);
+  }
+  tablePaginater.init(table_id);
+}
diff --git a/planetlab/js/plc_functions.js b/planetlab/js/plc_functions.js
index d96af22..a293320 100644
--- a/planetlab/js/plc_functions.js
+++ b/planetlab/js/plc_functions.js
@@ -1,3 +1,4 @@
+/* $Id$ */
 
 function addLoadEvent(func) {
   if (!document.getElementById | !document.getElementsByTagName) return;
diff --git a/planetlab/js/plc_paginate.js b/planetlab/js/plc_paginate.js
index fcfe00a..32b44a1 100644
--- a/planetlab/js/plc_paginate.js
+++ b/planetlab/js/plc_paginate.js
@@ -1,3 +1,5 @@
+/* $Id$ */
+
 function displayTextInfo (opts,tablename) {
 
   if(!("currentPage" in opts)) { return; }
@@ -13,3 +15,4 @@ function displayTextInfo (opts,tablename) {
   b.appendChild(p);
 }
 
+
diff --git a/planetlab/nodes/newindex.php b/planetlab/nodes/newindex.php
index d3a5853..b382bc5 100644
--- a/planetlab/nodes/newindex.php
+++ b/planetlab/nodes/newindex.php
@@ -33,6 +33,7 @@ $header_tablesort_js='
 <script type="text/javascript" src="/planetlab/tablesort/customsort.js"></script>
 <script type="text/javascript" src="/planetlab/tablesort/paginate.js"></script>
 <script type="text/javascript" src="/planetlab/js/plc_paginate.js"></script>
+<script type="text/javascript" src="/planetlab/js/plc_filter.js"></script>
 ';
 
 $header_tablesort_css='
@@ -58,6 +59,12 @@ if (empty($tablesize)) $tablesize=25;
 
 ?>
 
+<script type"text/javascript">
+function nodesTextInfo (opts) {
+  displayTextInfo (opts,"nodes");
+}
+</script>
+
 <div class="plc_filter">
 <form method=get action='newindex.php'>
 <table>
@@ -70,7 +77,7 @@ if (empty($tablesize)) $tablesize=25;
 </tr>
 
 <tr>
-<th><label for='nodepattern'>Hostname </label></th>
+<th><label for='nodepattern'>Hostname (server-side pattern)</label></th>
 <td><input type='text' id='nodepattern' name='nodepattern' 
      size=40 value='<?php print $nodepattern; ?>'/></td>
 <td><input type=submit value='Go' /></td>
@@ -144,6 +151,14 @@ foreach ($sites as $site) {
 
 ?>
 
+<div id='tmp'>
+  <form> 
+  <label> client-side pattern </label> 
+    <input type='text' id='filter_text' size=15 onchange='plc_filter_table("nodes","filter_text");'/>
+  <input type='button' name='tmpbutton' value='click' onclick='plc_filter_table("nodes","filter_text");' />
+</form>
+</div>
+
 <div class="fdtablePaginaterWrap" id="nodes-fdtablePaginaterWrapTop"><p></p></div>
 
 <table id="nodes" cellpadding="0" cellspacing="0" border="0" 
@@ -161,12 +176,6 @@ class="plc_table sortable-onload-3r rowstyle-alt colstyle-alt no-arrow paginatio
 </thead>
 <tbody>
 
-<script type"text/javascript">
-function nodesTextInfo (opts) {
-  displayTextInfo (opts,"nodes");
-}
-</script>
-
 <?php
 
   $fake1=1; $fake2=3.14;