Adding ETA, confirmed time, and other ui improvements to transaction page.

frontend/src/app/components/timespan/timespan.component.ts

@@ -0,0 +1,44 @@
+import { Component, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'app-timespan',
+  template: `{{ text }}`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TimespanComponent implements OnChanges {
+  @Input() time: number;
+  text: string;
+
+  constructor() { }
+
+  ngOnChanges() {
+    const seconds = this.time;
+    if (seconds < 60) {
+      return '< 1 minute';
+    }
+    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) {
+              this.text = counter + ' ' + i; // singular (1 day ago)
+              break;
+          } else {
+              this.text = counter + ' ' + i + 's'; // plural (2 days ago)
+              break;
+          }
+        }
+      }
+    }
+  }
+}