40 lines
2.2 KiB
HTML
40 lines
2.2 KiB
HTML
|
<table class="table table-borderless table-striped">
|
||
|
<thead>
|
||
|
<th>Date</th>
|
||
|
<th>Price</th>
|
||
|
<th>Amount (BTC)</th>
|
||
|
<th>Amount <ng-template [ngIf]="market">({{ market.lsymbol === 'BTC' ? market.rsymbol : market.lsymbol }})</ng-template></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 || market).rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: (trade._market || market).rsymbol }}</span></ng-container>
|
||
|
<ng-template #priceCrypto>{{ trade.price | number: '1.2-' + (trade._market || market).rprecision }} {{ (trade._market || market).rsymbol }}</ng-template>
|
||
|
</td>
|
||
|
<ng-container *ngTemplateOutlet="(trade._market || market).rsymbol === 'BTC' ? tradeVolume : tradeAmount"></ng-container>
|
||
|
<ng-container *ngTemplateOutlet="(trade._market || market).rsymbol === 'BTC' ? tradeAmount : tradeVolume"></ng-container>
|
||
|
<ng-template #tradeAmount>
|
||
|
<td>
|
||
|
<ng-container *ngIf="(trade._market || market).ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: (trade._market || market).rsymbol }}</span></ng-container>
|
||
|
<ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + (trade._market || market).lprecision }} {{ (trade._market || market).lsymbol }}</ng-template>
|
||
|
</td>
|
||
|
</ng-template>
|
||
|
<ng-template #tradeVolume>
|
||
|
<td>
|
||
|
<ng-container *ngIf="(trade._market || market).rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: (trade._market || market).rsymbol }}</span></ng-container>
|
||
|
<ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + (trade._market || market).rprecision }} {{ (trade._market || market).rsymbol }}</ng-template>
|
||
|
</td>
|
||
|
</ng-template>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
<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]"><span class="skeleton-loader"></span></td>
|
||
|
</tr>
|
||
|
</ng-template>
|