machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Swap BTC/Fiat columns.

Browse Source
This commit is contained in:
softsimon 2021-04-25 19:02:26 +04:00
parent 5878a2e631
commit da050ee3dc
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
6 changed files with 56 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
View File

@ -45,33 +45,7 @@
<br><br>
<h2>Latest trades</h2>
<table class="table table-borderless table-striped">
<thead>
<th>Date</th>
<th>Price</th>
<th>Trade amount</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>
<app-bisq-trades [trades$]="trades$"></app-bisq-trades>
</ng-container>
</div>

28
frontend/src/app/bisq/bisq-market/bisq-market.component.html
View File

@ -60,33 +60,7 @@
<ng-container *ngIf="trades$ | async as trades; else loadingSpinner">
<h2>Latest trades</h2>
<table class="table table-borderless table-striped">
<thead>
<th>Date</th>
<th>Price ({{ currency.market.rsymbol }})</th>
<th>Trade amount ({{ currency.market.rsymbol }})</th>
<th>Trade amount ({{ currency.market.lsymbol }})</th>
</thead>
<tbody>
<tr *ngFor="let trade of trades">
<td>
{{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
</td>
<td>
<ng-container *ngIf="currency.market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: currency.market.rsymbol }}</span></ng-container>
<ng-template #priceCrypto>{{ trade.price | number: '1.2-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
</td>
<td>
<ng-container *ngIf="currency.market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: currency.market.rsymbol }}</span></ng-container>
<ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
</td>
<td>
<ng-container *ngIf="currency.market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: currency.market.rsymbol }}</span></ng-container>
<ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + currency.market.lprecision }} {{ currency.market.lsymbol }}</ng-template>
</td>
</tr>
</tbody>
</table>
<app-bisq-trades [trades$]="trades$" [market]="currency.market"></app-bisq-trades>
</ng-container>
</ng-container>

39
frontend/src/app/bisq/bisq-trades/bisq-trades.component.html Normal file
View File

@ -0,0 +1,39 @@
<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>

0
frontend/src/app/bisq/bisq-trades/bisq-trades.component.scss Normal file
View File

13
frontend/src/app/bisq/bisq-trades/bisq-trades.component.ts Normal file
View File

@ -0,0 +1,13 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-bisq-trades',
templateUrl: './bisq-trades.component.html',
styleUrls: ['./bisq-trades.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BisqTradesComponent {
@Input() trades$: Observable<any>;
@Input() market: any;
}

2
frontend/src/app/bisq/bisq.module.ts
View File

@ -22,6 +22,7 @@ import { BisqApiService } from './bisq-api.service';
import { BisqAddressComponent } from './bisq-address/bisq-address.component';
import { BisqStatsComponent } from './bisq-stats/bisq-stats.component';
import { BsqAmountComponent } from './bsq-amount/bsq-amount.component';
import { BisqTradesComponent } from './bisq-trades/bisq-trades.component';
@NgModule({
declarations: [
@ -40,6 +41,7 @@ import { BsqAmountComponent } from './bsq-amount/bsq-amount.component';
LightweightChartsAreaComponent,
BisqDashboardComponent,
BisqMarketComponent,
BisqTradesComponent,
],
imports: [
BisqRoutingModule,