Merge pull request #53 from maraoz/feature/human-readable-times

Feature/human readable times

app/views/includes/foot.jade

@@ -4,6 +4,7 @@
 
 //script(type='text/javascript', src='/lib/jquery/jquery.min.js')
 //script(type='text/javascript', src='/lib/bootstrap/dist/js/bootstrap.min.js')
+script(type='text/javascript', src='/lib/momentjs/moment.js')
 
 //AngularJS
 script(type='text/javascript', src='/lib/angular/angular.js')

bower.json

@@ -1,17 +1,17 @@
 {
-    "name": "Mystery",
-    "version": "0.0.1",
-    "dependencies": {
-      "angular": "latest",
-      "angular-resource": "latest",
-      "angular-cookies": "latest",
-      "angular-mocks": "latest",
-      "angular-route": "latest",
-      "bootstrap": "3.0.3",
-      "angular-bootstrap": "0.9.0",
-      "angular-ui-utils": "0.1.0",
-      "angular-qrcode": "latest",
-      "angular-animate": "latest"
-
-    }
+  "name": "Mystery",
+  "version": "0.0.1",
+  "dependencies": {
+    "angular": "latest",
+    "angular-resource": "latest",
+    "angular-cookies": "latest",
+    "angular-mocks": "latest",
+    "angular-route": "latest",
+    "bootstrap": "3.0.3",
+    "angular-bootstrap": "0.9.0",
+    "angular-ui-utils": "0.1.0",
+    "angular-qrcode": "latest",
+    "angular-animate": "latest",
+    "momentjs": "~2.5.0"
+  }
 }

package.json

@@ -61,6 +61,7 @@
     "should": "~2.1.1",
     "view-helpers": "latest",
     "socket.io": "~0.9.16",
+    "moment": "~2.5.0",
     "sinon": "~1.7.3"
   },
   "devDependencies": {

public/css/common.css

@@ -118,3 +118,54 @@ body {
 .fader.ng-enter-active {
   opacity: 1;
 }
+
+
+
+.badge {
+  padding: 1px 9px 2px;
+  font-size: 12.025px;
+  font-weight: bold;
+  white-space: nowrap;
+  color: #ffffff;
+  background-color: #999999;
+  -webkit-border-radius: 9px;
+  -moz-border-radius: 9px;
+  border-radius: 9px;
+}
+.badge:hover {
+  color: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+}
+.badge-error {
+  background-color: #b94a48;
+}
+.badge-error:hover {
+  background-color: #953b39;
+}
+.badge-warning {
+  background-color: #f89406;
+}
+.badge-warning:hover {
+  background-color: #c67605;
+}
+.badge-success {
+  background-color: #468847;
+}
+.badge-success:hover {
+  background-color: #356635;
+}
+.badge-info {
+  background-color: #3a87ad;
+}
+.badge-info:hover {
+  background-color: #2d6987;
+}
+.badge-inverse {
+  background-color: #333333;
+}
+.badge-inverse:hover {
+  background-color: #1a1a1a;
+}
+
+

public/js/controllers/index.js

@@ -21,6 +21,11 @@ angular.module('mystery.system').controller('IndexController', ['$scope', 'Globa
     $scope.blocks.unshift(block);
   });
 
+  $scope.human_since = function(time) {
+    var m = moment.unix(time);
+    return m.max().fromNow();
+  }
+
   $scope.index = function() {
     Blocks.get({
       limit: BLOCKS_DISPLAYED

public/views/index.html

@@ -3,14 +3,18 @@
     <div class="row">
       <div class="col-md-6">
         <h3> New transactions </h3>
-        <div class="alert alert-info fader" ng-repeat='tx in txs'>
-          <a href="#!/tx/{{tx.txid}}">{{tx.txid}}</a>
+        <div class="panel fader" ng-repeat='tx in txs'>
+          <a class="abreviate" href="#!/tx/{{tx.txid}}">{{tx.txid}}
+            <span class="badge badge-success">{{human_since(tx.time)}}</span>
+          </a>
         </div>
       </div>
       <div class="col-md-6">
         <h3> New blocks </h3>
-        <div class="alert alert-success fader" ng-repeat='b in blocks'>
-          <a href="#!/block/{{b.hash}}">{{b.hash}}</a>
+        <div class="panel fader" ng-repeat='b in blocks'>
+          <a href="#!/block/{{b.hash}}">{{b.hash}}
+            <span class="badge badge-success">{{human_since(b.time)}}</span>
+          </a>
         </div>
       </div>
     </div>