Worked mostly on AJAX stuff

now piwik can display tables, and subtables (example: keywords for a given search engine) like phpmyvisites does
but you can also sort by any column, search in the result set, exclude low population for any given datatable
All is done using Jquery

2 files changed, 100 insertions, 109 deletions

diff --git a/plugins/SitesManager/templates/SitesManager.js b/plugins/SitesManager/templates/SitesManager.js
index 26eb5e02f8..c107c1048b 100644
--- a/plugins/SitesManager/templates/SitesManager.js
+++ b/plugins/SitesManager/templates/SitesManager.js
@@ -65,95 +65,96 @@ function getUpdateSiteAJAX( row )
 }
 
 
-$('#addRowSite').click( function() {
-	ajaxHideError();
-	$(this).toggle();
-	
-	var numberOfRows = $('table#editSites')[0].rows.length;
-	var newRowIdNumeric = numberOfRows + 1;
-	var newRowId = 'row' + newRowIdNumeric;
-
-	$(' <tr id="'+newRowId+'">\
-			<td>'+newRowIdNumeric+'</td>\
-			<td><input id="siteadd_name" value="Name" size=10></td>\
-			<td><textarea cols=30 rows=3 id="siteadd_urls">http://siteUrl.com/\nhttp://siteUrl2.com/</textarea></td>\
-			<td><img src="plugins/UsersManager/images/ok.png" id="addsite" href="#"></td>\
-  			<td><img src="plugins/UsersManager/images/remove.png" id="cancel"></td>\
- 		</tr>')
-  			.appendTo('#editSites')
-	;
-	$('#'+newRowId).keypress( submitSiteOnEnter );
-	$('#addsite').click( function(){ $.ajax( getAddSiteAJAX($('tr#'+newRowId)) ); } );
-	$('#cancel').click(function() { ajaxHideError(); $(this).parents('tr').remove();  $('#addRowSite').toggle(); });
-
- } );
-
-// when click on deleteuser, the we ask for confirmation and then delete the user
-$('.deleteSite').click( function() {
+	$(document).ready( function() {
+	$('#addRowSite').click( function() {
 		ajaxHideError();
-		var idRow = $(this).attr('id');
-		var nameToDelete = $(this).parent().parent().find('#name').html();
-		var idsiteToDelete = $(this).parent().parent().find('#idSite').html();
-		if(confirm('Are you sure you want to delete the website "'+nameToDelete+'" (idSite = '+idsiteToDelete+')?'))
-		{
-			$.ajax( getDeleteSiteAJAX( idsiteToDelete ) );
-		}
-	}
-);
-
-var alreadyEdited = new Array;
-// when click on edituser, the cells become editable
-$('.editSite')
-	.click( function() {
+		$(this).toggle();
+		
+		var numberOfRows = $('table#editSites')[0].rows.length;
+		var newRowIdNumeric = numberOfRows + 1;
+		var newRowId = 'row' + newRowIdNumeric;
+	
+		$(' <tr id="'+newRowId+'">\
+				<td>'+newRowIdNumeric+'</td>\
+				<td><input id="siteadd_name" value="Name" size=10></td>\
+				<td><textarea cols=30 rows=3 id="siteadd_urls">http://siteUrl.com/\nhttp://siteUrl2.com/</textarea></td>\
+				<td><img src="plugins/UsersManager/images/ok.png" id="addsite" href="#"></td>\
+	  			<td><img src="plugins/UsersManager/images/remove.png" id="cancel"></td>\
+	 		</tr>')
+	  			.appendTo('#editSites')
+		;
+		$('#'+newRowId).keypress( submitSiteOnEnter );
+		$('#addsite').click( function(){ $.ajax( getAddSiteAJAX($('tr#'+newRowId)) ); } );
+		$('#cancel').click(function() { ajaxHideError(); $(this).parents('tr').remove();  $('#addRowSite').toggle(); });
+	
+	 } );
+	
+	// when click on deleteuser, the we ask for confirmation and then delete the user
+	$('.deleteSite').click( function() {
 			ajaxHideError();
 			var idRow = $(this).attr('id');
-			if(alreadyEdited[idRow]==1) return;
-			alreadyEdited[idRow] = 1;
-			$('tr#'+idRow+' .editableSite').each(
-						// make the fields editable
-						// change the EDIT button to VALID button
-						function (i,n) {
-							var contentBefore = $(n).html();
-							var idName = $(n).attr('id');
-							if(idName == 'name')
-							{
-								var contentAfter = '<input id="'+idName+'" value="'+contentBefore+'" size="10">';
-								$(n)
-									.html(contentAfter)
-									.keypress( submitSiteOnEnter );
-							}
-							if(idName == 'urls')
-							{
-								var contentAfter = '<textarea cols=30 rows=3 id="aUrls">'+contentBefore.replace(/<br>/gi,"\n")+'</textarea>';
-								$(n).html(contentAfter);
-							}
-						}
-					);
-					
-			$(this)
-				.toggle()
-				.parent()
-				.prepend( $('<img src="plugins/UsersManager/images/ok.png" id="updateSite">')
-							.click( function(){ $.ajax( getUpdateSiteAJAX( $('tr#'+idRow) ) ); } ) 
-					);
-			
-			
-			
+			var nameToDelete = $(this).parent().parent().find('#name').html();
+			var idsiteToDelete = $(this).parent().parent().find('#idSite').html();
+			if(confirm('Are you sure you want to delete the website "'+nameToDelete+'" (idSite = '+idsiteToDelete+')?'))
+			{
+				$.ajax( getDeleteSiteAJAX( idsiteToDelete ) );
+			}
 		}
-);
-
-
-$('td.editableSite')
-	.hover( function() {  
-	 	 $(this).css({ cursor: "pointer"}); 
-	  	},
-	  	function() {  
-	 	 $(this).css({ cursor: "auto"}); 
-	  	}
- 	)
- 	.click( function(){ $(this).parent().find('.editSite').click(); } )
- ;
- 
+	);
+	
+	var alreadyEdited = new Array;
+	// when click on edituser, the cells become editable
+	$('.editSite')
+		.click( function() {
+				ajaxHideError();
+				var idRow = $(this).attr('id');
+				if(alreadyEdited[idRow]==1) return;
+				alreadyEdited[idRow] = 1;
+				$('tr#'+idRow+' .editableSite').each(
+							// make the fields editable
+							// change the EDIT button to VALID button
+							function (i,n) {
+								var contentBefore = $(n).html();
+								var idName = $(n).attr('id');
+								if(idName == 'name')
+								{
+									var contentAfter = '<input id="'+idName+'" value="'+contentBefore+'" size="10">';
+									$(n)
+										.html(contentAfter)
+										.keypress( submitSiteOnEnter );
+								}
+								if(idName == 'urls')
+								{
+									var contentAfter = '<textarea cols=30 rows=3 id="aUrls">'+contentBefore.replace(/<br>/gi,"\n")+'</textarea>';
+									$(n).html(contentAfter);
+								}
+							}
+						);
+						
+				$(this)
+					.toggle()
+					.parent()
+					.prepend( $('<img src="plugins/UsersManager/images/ok.png" id="updateSite">')
+								.click( function(){ $.ajax( getUpdateSiteAJAX( $('tr#'+idRow) ) ); } ) 
+						);
+				
+				
+				
+			}
+	);
+	
+	
+	$('td.editableSite')
+		.hover( function() {  
+		 	 $(this).css({ cursor: "pointer"}); 
+		  	},
+		  	function() {  
+		 	 $(this).css({ cursor: "auto"}); 
+		  	}
+	 	)
+	 	.click( function(){ $(this).parent().find('.editSite').click(); } )
+	 ;
+});
  
 function submitSiteOnEnter(e)
 {
diff --git a/plugins/SitesManager/templates/SitesManager.tpl b/plugins/SitesManager/templates/SitesManager.tpl
index 1a464da140..759025e5d0 100644
--- a/plugins/SitesManager/templates/SitesManager.tpl
+++ b/plugins/SitesManager/templates/SitesManager.tpl
@@ -1,35 +1,27 @@
-{literal}
-<style>
-* {
-font-family:Trebuchet MS,arial,sans-serif;
-}
 
-textarea{
-	font-family: Trebuchet MS, Verdana;
-	font-size:0.85em;
-	
-}
-
-#editSites{
-	valign:top;
-}
-</style>
-{/literal}
 <script type="text/javascript" src="libs/jquery/jquery.js"></script>
 <script type="text/javascript" src="themes/default/common.js"></script>
 
+<script type="text/javascript" src="plugins/UsersManager/templates/UsersManager.js"></script>
+<script type="text/javascript" src="plugins/SitesManager/templates/SitesManager.js"></script>
+
+<link rel="stylesheet" href="themes/default/common-admin.css">
+
 <h2>Sites</h2>
 <div id="ajaxError" style="display:none"></div>
 <div id="ajaxLoading" style="display:none">Loading... <img src="themes/default/loading.gif"></div>
 
 <table id="editSites" border=1 cellpadding="10">
-    <tbody>
+    <thead>
 		<tr>
-		<td>Id</td>
-		<td>Name</td>
-		<td>URLs</td>
+		<th>Id</th>
+		<th>Name</th>
+		<th>URLs</th>
+		<th> </th>
+		<th> </th>
 		</tr>
-		
+	</thead>
+	<tbody>
 		{foreach from=$sites key=i item=site}
 		<tr id="row{$i}">
 			<td id="idSite">{$site.idsite}</td>
@@ -37,13 +29,11 @@ textarea{
 			<td id="urls" class="editableSite">{foreach from=$site.alias_urls item=url}{$url}<br>{/foreach}</td>       
 			<td><img src='plugins/UsersManager/images/edit.png' class="editSite" id="row{$i}" href='#'></td>
 		    <td><img src='plugins/UsersManager/images/remove.png' class="deleteSite" id="row{$i}" value="Delete"></td>
-		      
 		</tr>
 		{/foreach}
 		
     </tbody>
 </table>
+
 <div id="addRowSite"><img src='plugins/UsersManager/images/add.png'> <a href="#">Add a new Site</a></div>
 
-<script type="text/javascript" src="plugins/UsersManager/templates/UsersManager.js"></script>
-<script type="text/javascript" src="plugins/SitesManager/templates/SitesManager.js"></script>