113 lines
6.0 KiB
HTML
113 lines
6.0 KiB
HTML
<div class="container-xl">
|
|
|
|
<ng-container *ngIf="hlocData$ | async as hlocData; else loadingSpinner">
|
|
|
|
<ng-container *ngIf="currency$ | async as currency; else loadingSpinner">
|
|
<h1>{{ currency.market.rtype === 'crypto' ? currency.market.lname : currency.market.rname }} - {{ currency.pair }}</h1>
|
|
<div class="priceheader">
|
|
<ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData.hloc[hlocData.hloc.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
|
|
<ng-template #headerPriceCrypto>{{ hlocData.hloc[hlocData.hloc.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
|
|
</div>
|
|
|
|
<form [formGroup]="radioGroupForm" class="mb-3 radio-form">
|
|
<div class="btn-group btn-group-toggle" name="radioBasic">
|
|
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'half_hour'">
|
|
<input type="radio" [value]="'half_hour'" (click)="setFragment('half_hour')" formControlName="interval"> 30M
|
|
</label>
|
|
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'hour'">
|
|
<input type="radio" [value]="'hour'" (click)="setFragment('hour')" formControlName="interval"> 1H
|
|
</label>
|
|
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'half_day'">
|
|
<input type="radio" [value]="'half_day'" (click)="setFragment('half_day')" formControlName="interval"> 12H
|
|
</label>
|
|
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'day'">
|
|
<input type="radio" [value]="'day'" (click)="setFragment('day')" formControlName="interval"> 1D
|
|
</label>
|
|
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'week'">
|
|
<input type="radio" [value]="'week'" (click)="setFragment('week')" formControlName="interval"> 1W
|
|
</label>
|
|
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'month'">
|
|
<input type="radio" [value]="'month'" (click)="setFragment('month')" formControlName="interval"> 1M
|
|
</label>
|
|
<label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'year'">
|
|
<input type="radio" [value]="'year'" (click)="setFragment('year')" formControlName="interval"> 1Y
|
|
</label>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<div id="graphHolder">
|
|
<div class="text-center loadingChart" [hidden]="!isLoadingGraph">
|
|
<div class="spinner-border text-light"></div>
|
|
</div>
|
|
<app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<ng-container *ngIf="offers$ | async as offers; else loadingSpinner">
|
|
<div class="row row-cols-1 row-cols-md-2">
|
|
<ng-container *ngTemplateOutlet="offersList; context: { offers: offers.buys, direction: 'BUY', market: currency.market }"></ng-container>
|
|
<ng-container *ngTemplateOutlet="offersList; context: { offers: offers.sells, direction: 'SELL', market: currency.market }"></ng-container>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<br><br>
|
|
|
|
<ng-container *ngIf="trades$ | async as trades; else loadingSpinner">
|
|
<h2 i18n="Latest Trades header">Latest Trades</h2>
|
|
|
|
<app-bisq-trades [trades$]="trades$" [market]="currency.market"></app-bisq-trades>
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
</div>
|
|
|
|
|
|
<ng-template #offersList let-offers="offers" let-direction="direction", let-market="market">
|
|
<div class="col">
|
|
<h2>
|
|
<ng-template [ngIf]="direction === 'BUY'" [ngIfElse]="sellOffers" i18n="Bisq Buy Offers">Buy Offers</ng-template>
|
|
<ng-template #sellOffers i18n="Bisq Sell Offers">Sell Offers</ng-template>
|
|
</h2>
|
|
<div class="table-container">
|
|
<table class="table table-borderless table-striped">
|
|
<thead>
|
|
<th i18n>Price</th>
|
|
<th><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.lsymbol }"></ng-container></th>
|
|
<th><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.rsymbol }"></ng-container></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let offer of offers">
|
|
<td>
|
|
<ng-container *ngIf="market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ offer.price | currency: market.rsymbol }}</span></ng-container>
|
|
<ng-template #priceCrypto>{{ offer.price | number: '1.2-' + market.rprecision }} <span class="symbol">{{ market.rsymbol }}</span></ng-template>
|
|
</td>
|
|
<td>
|
|
<ng-container *ngIf="market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ offer.amount | currency: market.rsymbol }}</span></ng-container>
|
|
<ng-template #amountCrypto>{{ offer.amount | number: '1.2-' + market.lprecision }} <span class="symbol">{{ market.lsymbol }}</span></ng-template>
|
|
</td>
|
|
<td>
|
|
<ng-container *ngIf="market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ offer.volume | currency: market.rsymbol }}</span></ng-container>
|
|
<ng-template #volumeCrypto>{{ offer.volume | number: '1.2-' + market.rprecision }} <span class="symbol">{{ market.rsymbol }}</span></ng-template>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #loadingSpinner>
|
|
<br>
|
|
<br>
|
|
<div class="text-center">
|
|
<div class="spinner-border text-light"></div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-template #amount let-i i18n="Trade amount (Symbol)">Amount ({{ i }})</ng-template>
|