lukechilds
/
block-explorer
mirror of https://github.com/lukechilds/block-explorer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

web-ui: Improve TransactionDetails view

scalafmt-draft
Alexis Hernandez 7 years ago
parent
aca081e215
commit
13c86e4e7d
2 changed files with 81 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      web-ui/src/app/app.component.ts
  2. 133
      web-ui/src/app/components/transaction-details/transaction-details.component.html

3
web-ui/src/app/app.component.ts
View File

@ -90,7 +90,8 @@ export class AppComponent {
'label.merchant': 'Merchant', 'label.merchant': 'Merchant',
'label.total': 'Total', 'label.total': 'Total',
'label.summary': 'Summary', 'label.summary': 'Summary',
'label.block': 'Block' 'label.block': 'Block',
'label.transaction': 'Transaction'
}; };
} }
} }

133
web-ui/src/app/components/transaction-details/transaction-details.component.html
View File

@ -4,66 +4,91 @@
</div> </div>
<div *ngIf="transaction != null"> <div *ngIf="transaction != null">
<div class="row"> <div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.transactionId' | translate}}</label> <h2 class="col-xs-12 col-sm-12 col-md-12 col-lg-12">{{'label.transaction' | translate}}</h2>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.id}}</label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.confirmations' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.confirmations}}</label>
</div>
<!-- TODO: Add link to block view -->
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.blockhash' | translate}}</label>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">
<a routerLink="/blocks/{{transaction.blockhash}}">{{transaction.blockhash}}</a></label>
</div>
<div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.blocktime' | translate}}</label>
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{transaction.blocktime * 1000 | date:'MMMM d, y, h:mm:ss a'}}</label>
</div> </div>
<div class="row"> <div class="row">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.fee' | translate}}</label> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{getFee(transaction)}} {{'label.coinName' | translate}}</label> <table class="table table-condensed table-bordered table-striped table-hover">
</div> <thead>
<tr>
<th class="col-xs-3 col-sm-3 col-md-2 col-lg-2">{{'label.summary' | translate}}</th>
<th class="col-xs-5 col-sm-5 col-md-4 col-lg-4"></th>
</tr>
</thead>
<!-- Input --> <tbody>
<div> <tr>
<div *ngIf="transaction.input == null"> <td>{{'label.transactionId' | translate}}</td>
<div class="row"> <td>{{transaction.id}}</td>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.noInput' | translate}}</label> </tr>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.coinbase' | translate}}</label> <tr>
</div> <td>{{'label.confirmations' | translate}}</td>
</div> <td>{{transaction.confirmations}}</td>
<div *ngIf="transaction.input != null"> </tr>
<div class="row"> <tr>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.from' | translate}}</label> <td>{{'label.blockhash' | translate}}</td>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1"> <td>
<a routerLink="/addresses/{{transaction.input.address}}">{{transaction.input.address}}</a> <a routerLink="/blocks/{{transaction.blockhash}}">{{transaction.blockhash}}</a>
</label> </td>
</div> </tr>
<div class="row"> <tr>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.value' | translate}}</label> <td>{{'label.blocktime' | translate}}</td>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{transaction.input.value}} {{'label.coinName' | translate}}</label> <td>{{transaction.blocktime * 1000 | date:'MMMM d, y, h:mm:ss a'}}</td>
</div> </tr>
<tr>
<td>{{'label.fee' | translate}}</td>
<td>{{getFee(transaction)}} {{'label.coinName' | translate}}</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
<!-- Output --> <div class="row">
<div> <!-- Input -->
<div class="row"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1"><strong>{{'label.output' | translate}}</strong></label> <table class="table table-condensed table-bordered table-striped table-hover">
</div> <thead>
<div *ngFor="let item of transaction.output"> <tr *ngIf="transaction.input == null">
<div class="row"> <th class="col-xs-3 col-sm-3 col-md-2 col-lg-2">{{'label.noInput' | translate}}</th>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.to' | translate}}</label> <th class="col-xs-5 col-sm-5 col-md-4 col-lg-4"></th>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1"> </tr>
<a routerLink="/addresses/{{item.address}}">{{item.address}}</a> <tr *ngIf="transaction.input != null">
</label> <th class="col-xs-3 col-sm-3 col-md-2 col-lg-2">{{'label.from' | translate}}</th>
</div> <th class="col-xs-5 col-sm-5 col-md-4 col-lg-4"></th>
<div class="row"> </tr>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.value' | translate}}</label> </thead>
<label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{item.value}} {{'label.coinName' | translate}}</label>
</div> <tbody>
<tr *ngIf="transaction.input == null">
<td>{{'label.coinbase' | translate}}</td>
<td></td>
</tr>
<tr *ngIf="transaction.input != null">
<td>
<a routerLink="/addresses/{{transaction.input.address}}">{{transaction.input.address}}</a>
</td>
<td>{{transaction.input.value}} {{'label.coinName' | translate}}</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<!-- Output -->
<tr>
<td><strong>{{'label.output' | translate}}</strong></td>
<td></td>
</tr>
<tr *ngFor="let item of transaction.output">
<td>
<a routerLink="/addresses/{{item.address}}">{{item.address}}</a>
</td>
<td>{{item.value}} {{'label.coinName' | translate}}</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save