Display 100 latest trades.

This commit is contained in:
softsimon
2021-04-23 03:49:55 +04:00
parent 5cb98b9813
commit 2d4dff6de8
5 changed files with 75 additions and 26 deletions

View File

@@ -42,13 +42,42 @@
</tbody>
</table>
<br>
<br><br>
<h2>Trade History (Last 100 trades)</h2>
<table class="table table-borderless table-striped">
<thead>
<th>Date</th>
<th>Price</th>
<th>Trade amount (BTC)</th>
<th>Trade amount</th>
</thead>
<tbody *ngIf="trades$ | async as trades; else loadingTmpl">
<tr *ngFor="let trade of trades">
<td>
{{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
</td>
<td>
<ng-container *ngIf="trade._market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: trade._market.rsymbol }}</span></ng-container>
<ng-template #priceCrypto>{{ trade.price | number: '1.2-' + trade._market.rprecision }} {{ trade._market.rsymbol }}</ng-template>
</td>
<td>
<ng-container *ngIf="trade._market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: trade._market.rsymbol }}</span></ng-container>
<ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + trade._market.rprecision }} {{ trade._market.rsymbol }}</ng-template>
</td>
<td>
<ng-container *ngIf="trade._market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: trade._market.rsymbol }}</span></ng-container>
<ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + trade._market.lprecision }} {{ trade._market.lsymbol }}</ng-template>
</td>
</tr>
</tbody>
</table>
</ng-container>
</div>
<ng-template #loadingTmpl>
<tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
<td *ngFor="let j of [1, 2, 3, 4, 5, 6]"><span class="skeleton-loader"></span></td>
<td *ngFor="let j of [1, 2, 3, 4]"><span class="skeleton-loader"></span></td>
</tr>
</ng-template>