feature 2885: Add geoip info in the stats / history page

git-svn-id: http://piwigo.org/svn/trunk@22664 68402e56-0260-453c-a942-63ccdbb3a9ee
Piwigo · May 14, 2013 · d2c695e · d2c695e
1 parent e979634
commit d2c695e
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 5 deletions.
diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
@@ -187,6 +187,10 @@ position:relative; padding: 5px 1px 4px 5px; font-size: 13px; color: #777; }
 #adminHome:hover {background-color:#d0d0d0;}
 
 /* jQuery tooltips */
+.ui-tooltip {
+	color: #000;
+	background-color: #eee;
+}
 .cluetip-outer { border-color:#999; color: #777; background-color: #eee; }
 .cluetip-title { background-color: #ddd; }
 /* jQuery ui resizable */

diff --git a/admin/themes/default/js/jquery.geoip.js b/admin/themes/default/js/jquery.geoip.js
@@ -0,0 +1,42 @@
+
+GeoIp = {
+	cache: {},
+	pending: {},
+
+	get: function(ip, callback){
+		if (GeoIp.cache.hasOwnProperty(ip))
+			callback(GeoIp.cache[ip]);
+		else if (GeoIp.pending[ip])
+			GeoIp.pending[ip].push(callback);
+		else {
+			GeoIp.pending[ip] = [callback];
+			jQuery.ajax( {
+				url: "http://freegeoip.net/json/" + ip,
+				dataType: "json",
+				success: function(data) {
+					var res=[];
+					if (data.city) res.push(data.city);
+					if (data.region_name) res.push(data.region_name);
+					if (data.country_name) res.push(data.country_name);
+					data.fullName = res.join(", ");
+
+					GeoIp.cache[ip] = data;
+					var callbacks = GeoIp.pending[ip];
+					delete GeoIp.pending[ip];
+					for (var i=0; i<callbacks.length; i++)
+						callbacks[i].call(null, data);
+				},
+
+				error: function() {
+					var data = {ip:ip, fullName:""};
+
+					GeoIp.cache[ip] = data;
+					var callbacks = GeoIp.pending[ip];
+					delete GeoIp.pending[ip];
+					for (var i=0; i<callbacks.length; i++)
+						callbacks[i].call(null, data);
+				}
+			});
+		}
+	}
+}
diff --git a/admin/themes/default/template/history.tpl b/admin/themes/default/template/history.tpl
@@ -6,9 +6,7 @@
 	pwg_initialization_datepicker("#end_day", "#end_month", "#end_year", "#end_linked_date", null, "#start_linked_date", null);
 {/literal}{/footer_script}
 
-<div class="titrePage">
-  <h2>{'History'|@translate} {$TABSHEET_TITLE}</h2>
-</div>
+<h2>{'History'|@translate} {$TABSHEET_TITLE}</h2>
 
 <form class="filter" method="post" name="filter" action="{$F_ACTION}">
 <fieldset>
@@ -83,7 +81,7 @@
     </select>
   </label>
 
-  <input class="submit" type="submit" name="submit" value="{'Submit'|@translate}">
+  <input type="submit" name="submit" value="{'Submit'|@translate}">
 </fieldset>
 </form>
 
@@ -124,7 +122,7 @@
   <td class="hour">{$detail.DATE}</td>
   <td class="hour">{$detail.TIME}</td>
   <td>{$detail.USER}</td>
-  <td>{$detail.IP}</td>
+  <td class="IP">{$detail.IP}</td>
   <td>{$detail.IMAGE}</td>
   <td>{$detail.TYPE}</td>
   <td>{$detail.SECTION}</td>
@@ -136,3 +134,20 @@
 </table>
 
 {if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
+
+{combine_script id='jquery.geoip' load='async' path='admin/themes/default/js/jquery.geoip.js'}
+{combine_script id='jquery.ui.tooltip' load='footer'}
+
+{footer_script}{literal}
+jQuery(".IP").tooltip( {
+	items: "*",
+	/*show: {delay:0, effect:"show"},
+	hide: {delay:50, effect:"hide"},*/
+	content: function(response) {
+		var that = $(this);
+		GeoIp.get( that.text(), function(data) {
+			response( data.fullName );
+		});
+	}
+});
+{/literal}{/footer_script}
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
@@ -504,6 +504,15 @@ UL.tagSelection LI {
 }
 
 /* jQuery tooltips */
+.ui-tooltip {
+	padding: 8px;
+	position: absolute;
+	z-index: 9999;
+	max-width: 300px;
+	-webkit-box-shadow: 0 0 5px #aaa;
+	box-shadow: 0 0 5px #aaa;
+}
+
 .cluetip-outer {
 	position: relative;
 	border: 1px solid #111111;

diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css
@@ -160,6 +160,10 @@ position:relative; padding: 5px 1px 4px 5px; top:-8px; font-size: 13px; color: #
 #menubar ul.scroll { overflow-y:auto; max-height:500px;}
 
 /* jQuery tooltips */
+.ui-tooltip {
+	color: #eee;
+	background-color: #000;
+}
 .cluetip-outer { border-color: #666; color: #666; background-color: #222; }
 .cluetip-title { color: #ff3363; background-color: #111; }
 /* jQuery ui resizable */