moved update interval in directive

public/css/style.css

@@ -148,6 +148,7 @@ span.small-title span.small {
 }
 
 .big-info.chart .big-details {
+	display: block;
 	position: absolute;
 	top: 40px;
 }

public/js/controllers.js

@@ -63,10 +63,10 @@ netStatsApp.controller('StatsCtrl', function($scope, $filter, socket, _, toastr)
 		}
 	}
 
-	var timeout = setInterval(function ()
-	{
-		$scope.$apply();
-	}, 200);
+	// var timeout = setInterval(function ()
+	// {
+	// 	$scope.$apply();
+	// }, 200);
 
 	$scope.getNumber = function (num) {
 		return new Array(num);

public/js/directives.js

@@ -7,6 +7,49 @@ angular.module('netStatsApp.directives', [])
 			elm.text(version);
 		};
 }])
+	.directive('timeAgo', ['$interval', function($interval) {
+		function link (scope, element, attrs)
+		{
+			var timestamp,
+				timeoutId;
+
+			function updateTime() {
+				element.text(timeAgo())
+			}
+
+			function timeAgo()
+			{
+				if(timestamp === 0)
+					return '∞';
+
+				var time = (new Date()).getTime();
+				var diff = Math.floor((time - timestamp)/1000);
+
+				if(diff < 60)
+					return Math.round(diff) + ' s ago';
+
+				return moment.duration(Math.round(diff), 's').humanize() + ' ago';
+			};
+
+			scope.$watch(attrs.timeAgo, function(value) {
+				timestamp = value;
+				updateTime();
+			});
+
+			element.on('$destroy', function() {
+				$interval.cancel(timeoutId);
+			});
+
+			timeoutId = $interval(function () {
+				updateTime();
+			}, 200);
+		};
+
+		return {
+			link: link
+		};
+}])
+
 	.directive('sparkchart', function () {
 		return {
 			restrict: 'E',
@@ -22,6 +65,7 @@ angular.module('netStatsApp.directives', [])
 					attrs.$observe("data", function (newValue)
 					{
 						element.html(newValue);
+						element.addClass("big-details");
 						element.sparkline('html', {
 							type: 'bar',
 							tooltipSuffix: (attrs.tooltipsuffix || '')

views/index.jade

@@ -26,7 +26,8 @@ block content
             i.icon-time
           div.big-details-holder
             span.small-title last block
-            span.big-details {{ lastBlock | blockTimeFilter }}
+            //- span.big-details {{ lastBlock | blockTimeFilter }}
+            span.big-details(time-ago="lastBlock")
           div.clearfix
       div.col-xs-2.stat-holder
         div.big-info.avgblocktime(class="{{ avgBlockTime | avgTimeClass }}")
@@ -204,7 +205,7 @@ block content
               span.small {{node.stats.block.totalDifficulty | number}}
             td(style="padding-left: 14px;") {{node.stats.block.transactions.length || 0}}
             td(style="padding-left: 14px;") {{node.stats.block.uncles.length || 0}}
-            td(class="{{ node.stats.block.received | timeClass : node.stats.active }}") {{node.stats.block.received | blockTimeFilter }}
+            td(class="{{ node.stats.block.received | timeClass : node.stats.active }}", time-ago="node.stats.block.received")
             td(class="{{ node.stats | propagationTimeClass : bestBlock }}")
               div.propagationBox
               span {{node.stats.block.propagation | blockPropagationFilter}}