Timestamp component

frontend/src/app/components/block/block.component.html

@@ -55,10 +55,7 @@
               <tr>
                 <td i18n="block.timestamp">Timestamp</td>
                 <td>
-                  &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
+                  <app-timestamp [unixTime]="block.timestamp"></app-timestamp>
-                  <div class="lg-inline">
-                    <i class="symbol">(<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>)</i>
-                  </div>
                 </td>
               </tr>
               <tr>

frontend/src/app/lightning/channel/channel.component.html

@@ -22,11 +22,11 @@
             <tbody>
               <tr>
                 <td i18n="address.total-sent">Created</td>
-                <td><app-time-since [dateString]="channel.created"></app-time-since></td>
+                <td><app-timestamp [dateString]="channel.created"></app-timestamp></td>
               </tr>
               <tr>
                 <td i18n="address.total-sent">Last update</td>
-                <td><app-time-since [dateString]="channel.updated_at"></app-time-since></td>
+                <td><app-timestamp [dateString]="channel.updated_at"></app-timestamp></td>
               </tr>
               <tr>
                 <td i18n="address.total-sent">Opening transaction</td>

frontend/src/app/lightning/node/node.component.html

@@ -43,13 +43,13 @@
               <tr>
                 <td i18n="address.total-received">First seen</td>
                 <td>
-                  <app-time-since [dateString]="node.first_seen"></app-time-since>
+                  <app-timestamp [dateString]="node.first_seen"></app-timestamp>
                 </td>
               </tr>
               <tr>
                 <td i18n="address.total-sent">Last update</td>
                 <td>
-                  <app-time-since [dateString]="node.updated_at"></app-time-since>
+                  <app-timestamp [dateString]="node.updated_at"></app-timestamp>
                 </td>
               </tr>
               <tr>

frontend/src/app/shared/components/timestamp/timestamp.component.html

@@ -0,0 +1,4 @@
+‎{{ seconds * 1000 | date:'yyyy-MM-dd HH:mm' }}
+<div class="lg-inline">
+  <i class="symbol">(<app-time-since [time]="seconds" [fastRender]="true"></app-time-since>)</i>
+</div>

frontend/src/app/shared/components/timestamp/timestamp.component.ts

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+
+@Component({
+  selector: 'app-timestamp',
+  templateUrl: './timestamp.component.html',
+  styleUrls: ['./timestamp.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TimestampComponent implements OnChanges {
+  @Input() unixTime: number;
+  @Input() dateString: string;
+
+  seconds: number;
+
+  constructor() { }
+
+  ngOnChanges(): void {
+    if (this.unixTime) {
+      this.seconds = this.unixTime;
+    } else if (this.dateString) {
+      this.seconds  = new Date(this.dateString).getTime() / 1000
+    }
+  }
+
+}

frontend/src/app/shared/shared.module.ts

@@ -76,6 +76,7 @@ import { SvgImagesComponent } from '../components/svg-images/svg-images.componen
 import { ChangeComponent } from '../components/change/change.component';
 import { SatsComponent } from './components/sats/sats.component';
 import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
+import { TimestampComponent } from './components/timestamp/timestamp.component';
 
 @NgModule({
   declarations: [
@@ -146,6 +147,7 @@ import { SearchResultsComponent } from '../components/search-form/search-results
     ChangeComponent,
     SatsComponent,
     SearchResultsComponent,
+    TimestampComponent,
   ],
   imports: [
     CommonModule,
@@ -244,6 +246,7 @@ import { SearchResultsComponent } from '../components/search-form/search-results
     ChangeComponent,
     SatsComponent,
     SearchResultsComponent,
+    TimestampComponent,
   ]
 })
 export class SharedModule {