Merge pull request #196 from Senyoret1/Date-format

Change timestamps format and timezone

src/app/app.module.ts

@@ -27,6 +27,8 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { AppTranslateLoader } from 'app/app.translate-loader';
 import { GenericHeaderComponent } from 'app/components/layout/generic-header/generic-header.component';
 import { GenericFooterComponent } from 'app/components/layout/generic-footer/generic-footer.component';
+import { ExplorerDatePipe } from 'app/pipes/explorer-date.pipe';
+import { DatePipe } from '@angular/common';
 
 
 const ROUTES = [
@@ -93,6 +95,7 @@ const ROUTES = [
     RichlistComponent,
     UnspentOutputsComponent,
     CopyButtonComponent,
+    ExplorerDatePipe,
   ],
   imports: [
     BrowserModule,
@@ -110,7 +113,8 @@ const ROUTES = [
   providers: [
     ApiService,
     ExplorerService,
-    {provide: RouteReuseStrategy, useClass: AppReuseStrategy}
+    {provide: RouteReuseStrategy, useClass: AppReuseStrategy},
+    DatePipe,
   ],
   bootstrap: [AppComponent]
 })

src/app/components/pages/address-detail/address-detail.component.html

@@ -38,7 +38,7 @@ <h2 class="-xs-only">{{ 'addressDetail.title' | translate }}</h2>
           </div>
         </div>
       </div>
-      <div class="col-md-2 col-sm-12 -date"><div class="-row"><span class="-xs-sm-only">{{ 'txBoxes.date' | translate }}:<br/></span>{{ transaction ? (transaction.timestamp * 1000 | date: 'short') : loadingMsg }}</div></div>
+      <div class="col-md-2 col-sm-12 -date"><div class="-row"><span class="-xs-sm-only">{{ 'txBoxes.date' | translate }}:<br/></span>{{ transaction ? (transaction.timestamp | explorerDate) : loadingMsg }}</div></div>
     </div>
   </div>
 

src/app/components/pages/block-details/block-details.component.html

@@ -2,7 +2,7 @@
   <h2>{{ 'blockDetails.title' | translate }}</h2>
   <div class="element-details">
     <div class="-row"><span>{{ 'blockDetails.height' | translate }}</span><br class="-xs-only" /><div> {{ block ? block.id : loadingMsg }} </div></div>
-    <div class="-row"><span>{{ 'blockDetails.timestamp' | translate }}</span><br class="-xs-only" /><div> {{ block ? ((block.timestamp * 1000) | date: 'short') : loadingMsg }} </div></div>
+    <div class="-row"><span>{{ 'blockDetails.timestamp' | translate }}</span><br class="-xs-only" /><div> {{ block ? (block.timestamp | explorerDate) : loadingMsg }} </div></div>
     <div class="-row"><span>{{ 'blockDetails.size' | translate }}</span><br class="-xs-only" /><div> {{ block ? (block.size | number) + ' bytes' : loadingMsg }} </div></div>
     <div class="-row"><span>{{ 'blockDetails.hash' | translate }}</span><br class="-xs-only" /><div> <a [routerLink]="'/app/block/' + block.id" class="-link" *ngIf="block">{{ block.hash }}</a> <copy-button [text]="block.hash" *ngIf="block"></copy-button> <span *ngIf="!block">{{ loadingMsg }}</span> </div></div>
     <div class="-row"><span>{{ 'blockDetails.parentHash' | translate }}</span><br class="-xs-only" /><div> <a [routerLink]="'/app/block/' + (block.id-1)" class="-link" *ngIf="block && block.id != 0">{{ block.parent_hash }}</a> <copy-button [text]="block.parent_hash" *ngIf="block && block.id != 0"></copy-button> <span *ngIf="block && block.id == 0">{{ 'blockDetails.withoutParent' | translate }}</span> <span *ngIf="!block">{{ loadingMsg }}</span> </div></div>

src/app/components/pages/blocks/blocks.component.html

@@ -34,7 +34,7 @@ <h2 class="-xs-only">{{ 'blocks.blocksTitle' | translate }}</h2>
   </div>
   <a class="-row" *ngFor="let block of blocks" [routerLink]="'/app/block/' + block.id">
     <div class="row">
-      <div class="col-sm-2 col-xs-4">{{ block.timestamp * 1000 | date:'short' }}</div>
+      <div class="col-sm-2 col-xs-4">{{ block.timestamp | explorerDate }}</div>
       <div class="col-sm-2 col-xs-4 -gray">{{ block.id }}</div>
       <div class="col-sm-2 col-xs-4 -gray">{{ block.transactions.length }}</div>
       <div class="col-sm-6 -fix-left -not-xs">{{ block.hash }}</div>

src/app/components/pages/transaction-detail/transaction-detail.component.html

@@ -2,7 +2,7 @@
   <h2>{{ 'transactionDetail.title' | translate }}</h2>
   <div class="element-details">
     <div class="-row"><span>{{ 'transactionDetail.status' | translate }}</span><br class="-xs-only" /><div> {{ transaction ? (transaction.status ? ('transactionDetail.confirmed' | translate) : ('transactionDetail.unconfirmed' | translate)) : loadingMsg }} </div></div>
-    <div class="-row"><span>{{ 'transactionDetail.timestamp' | translate }}</span><br class="-xs-only" /><div> {{ transaction ? (transaction.timestamp * 1000 | date: 'short') : loadingMsg }} </div></div>
+    <div class="-row"><span>{{ 'transactionDetail.timestamp' | translate }}</span><br class="-xs-only" /><div> {{ transaction ? (transaction.timestamp | explorerDate) : loadingMsg }} </div></div>
     <div class="-row"><span>{{ 'transactionDetail.size' | translate }}</span><br class="-xs-only" /><div> {{ transaction ? (transaction.length | number) + ' bytes' : loadingMsg }} </div></div>
     <div class="-row"><span>{{ 'transactionDetail.block' | translate }}</span><br class="-xs-only" /><div> {{ transaction ? transaction.block : loadingMsg }} </div></div>
   </div>
@@ -27,7 +27,7 @@ <h2>{{ 'transactionDetail.title' | translate }}</h2>
           <div *ngIf="transaction === undefined">{{ loadingMsg }}</div>
         </div>
       </div>
-      <div class="col-md-4 col-sm-12 -date"><div class="-row"><span class="-xs-sm-only">{{ 'txBoxes.date' | translate }}:<br/></span>{{ transaction ? (transaction.timestamp * 1000 | date: 'short') : loadingMsg }}</div></div>
+      <div class="col-md-4 col-sm-12 -date"><div class="-row"><span class="-xs-sm-only">{{ 'txBoxes.date' | translate }}:<br/></span>{{ transaction ? (transaction.timestamp | explorerDate) : loadingMsg }}</div></div>
     </div>
   </div>
 

src/app/components/pages/unconfirmed-transactions/unconfirmed-transactions.component.html

@@ -3,8 +3,8 @@ <h2>{{ 'unconfirmedTx.title' | translate }}</h2>
   <div class="element-details">
     <div class="-row"><span>{{ 'unconfirmedTx.quantity' | translate }}</span><br class="-xs-only" /><div> {{ transactions ? (transactions.length > 0 ? transactions.length : ('unconfirmedTx.withoutTransactions' | translate)) : loadingMsg }} </div></div>
     <div class="-row"><span>{{ 'unconfirmedTx.size' | translate }}</span><br class="-xs-only" /><div> {{ transactions ? (transactions.length > 0 ? (totalSize | number) + ' bytes' : ('unconfirmedTx.withoutTransactions' | translate)) : loadingMsg }} </div></div>
-    <div class="-row"><span>{{ 'unconfirmedTx.newest' | translate }}</span><br class="-xs-only" /><div> {{ transactions ? (transactions.length > 0 ? (mostRecent | date: 'short') : ('unconfirmedTx.withoutTransactions' | translate)) : loadingMsg }} </div></div>
-    <div class="-row"><span>{{ 'unconfirmedTx.oldest' | translate }}</span><br class="-xs-only" /><div> {{ transactions ? (transactions.length > 0 ? (leastRecent | date: 'short') : ('unconfirmedTx.withoutTransactions' | translate)) : loadingMsg }} </div></div>
+    <div class="-row"><span>{{ 'unconfirmedTx.newest' | translate }}</span><br class="-xs-only" /><div> {{ transactions ? (transactions.length > 0 ? (mostRecent | explorerDate:false) : ('unconfirmedTx.withoutTransactions' | translate)) : loadingMsg }} </div></div>
+    <div class="-row"><span>{{ 'unconfirmedTx.oldest' | translate }}</span><br class="-xs-only" /><div> {{ transactions ? (transactions.length > 0 ? (leastRecent | explorerDate:false) : ('unconfirmedTx.withoutTransactions' | translate)) : loadingMsg }} </div></div>
   </div>
 </div>
 
@@ -27,7 +27,7 @@ <h2>{{ 'unconfirmedTx.title' | translate }}</h2>
           <div *ngIf="transaction === undefined">{{ loadingMsg }}</div>
         </div>
       </div>
-      <div class="col-md-4 col-sm-12 -date"><div class="-row"><span class="-xs-sm-only">{{ 'txBoxes.firstSeen' | translate }}:<br/></span>{{ transaction ? (transaction.timestamp * 1000 | date: 'short') : loadingMsg }}</div></div>
+      <div class="col-md-4 col-sm-12 -date"><div class="-row"><span class="-xs-sm-only">{{ 'txBoxes.firstSeen' | translate }}:<br/></span>{{ transaction ? (transaction.timestamp | explorerDate:false) : loadingMsg }}</div></div>
     </div>
   </div>
 

src/app/components/pages/unspent-outputs/unspent-outputs.component.html

@@ -26,7 +26,7 @@ <h2>{{ 'unspentOutputs.title' | translate }}</h2>
             <div><a [routerLink]="'/app/transaction/' + output.src_tx">{{ output.src_tx }}</a><copy-button [text]="output.src_tx"></copy-button></div>
           </div>
         </div>
-        <div class="col-md-3 col-sm-12 -date"><div class="-row"><span class="-xs-sm-only">{{ 'unspentOutputs.date' | translate }}:<br/></span>{{ output.time * 1000 | date: 'short' }}</div></div>
+        <div class="col-md-3 col-sm-12 -date"><div class="-row"><span class="-xs-sm-only">{{ 'unspentOutputs.date' | translate }}:<br/></span>{{ output.time | explorerDate }}</div></div>
       </div>
     </div>
 

src/app/pipes/explorer-date.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { ExplorerDatePipe } from "app/pipes/explorer-date.pipe";
+
+describe('ExplorerDatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new ExplorerDatePipe(null);
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/explorer-date.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Transaction } from '../app.datatypes';
+import { DatePipe } from '@angular/common';
+
+@Pipe({
+  name: 'explorerDate',
+})
+export class ExplorerDatePipe implements PipeTransform {
+
+  constructor(private datePipe: DatePipe) {
+  }
+
+  transform(value: any, unixDateInSeconds = true): string {
+    value = unixDateInSeconds ? value * 1000 : value;
+    return this.datePipe.transform(value, 'yyyy-MM-dd HH:mm:ss', 'UTC');
+  }
+}