[GNUnet-SVN] r14538 - in gauger: . css

[gnunet]

Author: bartpolot
Date: 2011-02-25 01:48:46 +0100 (Fri, 25 Feb 2011)
New Revision: 14538

Modified:
   gauger/css/style.css
   gauger/template.php
Log:
Added instant search for the metric section


Modified: gauger/css/style.css
===================================================================
--- gauger/css/style.css        2011-02-24 23:19:18 UTC (rev 14537)
+++ gauger/css/style.css        2011-02-25 00:48:46 UTC (rev 14538)
@@ -32,6 +32,7 @@
 
 h2 {
     font-size:          120%;
+    margin-bottom:      5px;
 }
 
 h3 {
@@ -128,6 +129,14 @@
     margin-right:       5px;
 }
 
+#instant_search {
+    width:              135px;
+    height:             14px;
+    border:             0px;
+    font-size:          90%;
+    margin-bottom:      5px;
+}
+
 .metric_category_header {
     background:         #D3D3D3;
     padding:            1px 1px 1px 5px;

Modified: gauger/template.php
===================================================================
--- gauger/template.php 2011-02-24 23:19:18 UTC (rev 14537)
+++ gauger/template.php 2011-02-25 00:48:46 UTC (rev 14538)
@@ -34,6 +34,10 @@
 
 
         <script type="text/javascript">
+
+        var inst_search;
+        var last_search = "";
+
         $(function() {
                 $( ".slider-range" ).slider({
                         range: true,
@@ -205,6 +209,20 @@
                 $( ".metric_category_header" ).click(function () {
                     $(this).parents(".metric").find("ul").toggle();
                 });
+                $( "#instant_search" 
).each(function(){this.value="Search...";});
+                $( "#instant_search" ).focus(function(){
+                    if(this.value=="Search..."){
+                        this.value="";
+                    }
+                    inst_search = setInterval(monitor_search, 200);
+                    monitor_search();
+                });
+                $( "#instant_search" ).blur(function(){
+                    if(this.value==""){
+                        this.value="Search...";
+                    }
+                    clearInterval(inst_search);
+                });
         });
 
         function get_command(element) {
@@ -212,6 +230,19 @@
             document.location = url + "&raw_cmd=true";
         }
 
+        function monitor_search() {
+            text = $( "#instant_search" ).val();
+            if(text == last_search) return;
+            last_search = text;
+            $( "#metrics li" ).each(function(){
+               if($(this).text().indexOf(text) == -1){
+                     $(this).hide();
+               } else {
+                     $(this).show();
+               }
+            });
+        }
+
         function debug(param) {
             $( "#debug" ).html($( "#debug" ).html() + param + ' ');
         }
@@ -236,6 +267,7 @@
             </ul>
             <div id="metrics">
             <h2>Metrics</h2>
+            <input id="instant_search"></input>
             <?php foreach ($metrics_c as $category => $counters): ?>
                 <div class="metric">
                 <div class="metric_category_header">
@@ -273,7 +305,7 @@
                 <a target="_blank" href="https://gnunet.org/svn/gauger";>SVN 
repository</a> |
             </p>
         </div>
-        <script>
+        <script type="text/javascript">
             <?php if(get_param('category')): ?>
              $(" #metrics ul ").not("#<?php echo get_param('category') 
?>").hide();
             <?php endif; ?>