Add tooltips and match counts.

www/aptui/js/lists.js

@@ -17,6 +17,11 @@ $(function ()
 	    "projects"  : projlist,
 	});
 	$('#main-body').html(html);
+	// This activates the tooltip subsystem.
+	$('[data-toggle="tooltip"]').tooltip({
+	    delay: {"hide" : 500, "show" : 150},
+	    placement: 'auto',
+	});
 	InitTable("users");
 	InitTable("projects");
 
@@ -27,6 +32,7 @@ $(function ()
 		// initialize zebra
 		widgets: ["zebra"],
 	    });
+	
 	$('#search_projects_table')
 	    .tablesorter({
 		theme : 'green',
@@ -108,6 +114,11 @@ $(function ()
 	// Allows using filter_liveSearch or delayed search &
 	// pressing escape to cancel the search
 	$.tablesorter.filter.bindSearch(table, $(searchname));
+
+	// Update the count of matches
+	table.bind('filterEnd', function(e, filter) {
+	    $('#' + name + ' .match-count').text(filter.filteredRows);
+	});
     }
 
     function UpdateUserSearch(text)
@@ -131,6 +142,7 @@ $(function ()
 	    }
 	    $('#search_users_table tbody').html(html);
 	    $('#search_users_table').trigger("update", [false]);
+	    $('#search-users .match-count').text(json.value.length);
 	};
 	var xmlthing = sup.CallServerMethod(null,
 					    "lists", "SearchUsers",
@@ -160,6 +172,7 @@ $(function ()
 	    }
 	    $('#search_projects_table tbody').html(html);
 	    $('#search_projects_table').trigger("update", [false]);
+	    $('#search-projects .match-count').text(json.value.length);
 	};
 	var xmlthing = sup.CallServerMethod(null,
 					    "lists", "SearchProjects",

www/aptui/template/lists.html

@@ -25,8 +25,20 @@
 	      <div class="tab-content">
 		<div role="tabpanel" class="tab-pane active" id="users">
 		  <div class="table-responsive">
-		    <input class='form-control search' type='search' data-column='all'
+		    <input class='form-control search' type='search'
+			   data-column='all'
 			   id='users_search' placeholder='Search'>
+		    <div class="text-center">
+		      <small>
+			There are <span class="match-count"></span> matching users.
+			<span class='glyphicon glyphicon-question-sign'
+			      data-toggle='tooltip'
+			      data-container="body"
+			      data-trigger="hover"
+			      title='Active users are either logged in or have
+				     an experiment running'></span>
+		      </small>
+		    </div>
 		    <table class='tablesorter' id='users_table'>
 		      <thead>
 			<tr>
@@ -54,6 +66,19 @@
 		  <div class="table-responsive">
 		    <input class='form-control search' type='search' data-column='all'
 			   id='projects_search' placeholder='Search'>
+		    <div class="text-center">
+		      <small>
+			There are <span class="match-count"></span>
+			matching projects.
+			<span class='glyphicon glyphicon-question-sign'
+			      data-toggle='tooltip'
+			      data-container="body"
+			      data-trigger="hover"
+			      title='Active projects are currently running an
+				     an experiment, or have in the last
+				     two months'></span>
+		      </small>
+		    </div>
 		    <table class='tablesorter' id='projects_table'>
 		      <thead>
 			<tr>
@@ -84,6 +109,11 @@
 		  <div class="table-responsive">
 		    <input class='form-control search' type='search' 
 			   id='search_users_search' placeholder='Search'>
+		    <div class="text-center">
+		      <small>
+			There are <span class="match-count">0</span> matching users.
+		      </small>
+		    </div>
 		    <table class='tablesorter'
 			   id='search_users_table'>
 		      <thead>
@@ -102,6 +132,12 @@
 		  <div class="table-responsive">
 		    <input class='form-control search' type='search' 
 			   id='search_projects_search' placeholder='Search'>
+		    <div class="text-center">
+		      <small>
+			There are <span class="match-count">0</span>
+			matching projects.
+		      </small>
+		    </div>
 		    <table class='tablesorter'
 			   id='search_projects_table'>
 		      <thead>