Latest block design updates.

frontend/src/app/components/time-since/time-since.component.ts

@@ -2,12 +2,12 @@ import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDet
 
 @Component({
   selector: 'app-time-since',
-  template: `{{ time | timeSince : trigger }}`,
+  template: `{{ text }}`,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TimeSinceComponent implements OnInit, OnDestroy {
   interval: number;
-  trigger = 0;
+  text: string;
 
   @Input() time: number;
   @Input() fastRender = false;
@@ -17,8 +17,9 @@ export class TimeSinceComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
+    this.text = this.calculate();
     this.interval = window.setInterval(() => {
-      this.trigger++;
+      this.text = this.calculate();
       this.ref.markForCheck();
     }, 1000 * (this.fastRender ? 1 : 60));
   }
@@ -27,4 +28,33 @@ export class TimeSinceComponent implements OnInit, OnDestroy {
     clearInterval(this.interval);
   }
 
+  calculate() {
+    const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000);
+    if (seconds < 60) {
+      return '< 1 min';
+    }
+    const intervals = {
+        year: 31536000,
+        month: 2592000,
+        week: 604800,
+        day: 86400,
+        hour: 3600,
+        minute: 60,
+        second: 1
+    };
+    let counter;
+    for (const i in intervals) {
+      if (intervals.hasOwnProperty(i)) {
+        counter = Math.floor(seconds / intervals[i]);
+        if (counter > 0) {
+          if (counter === 1) {
+              return counter + ' ' + i; // singular (1 day ago)
+          } else {
+              return counter + ' ' + i + 's'; // plural (2 days ago)
+          }
+        }
+      }
+    }
+  }
+
 }