2020-08-10 23:47:44 +07:00
|
|
|
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
2020-07-13 15:16:12 +07:00
|
|
|
import { BisqApiService } from '../bisq-api.service';
|
2020-08-02 19:20:38 +07:00
|
|
|
import { switchMap, map } from 'rxjs/operators';
|
2020-08-10 23:47:44 +07:00
|
|
|
import { Observable } from 'rxjs';
|
2020-07-13 15:16:12 +07:00
|
|
|
import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
|
2020-07-13 21:46:25 +07:00
|
|
|
import { SeoService } from 'src/app/services/seo.service';
|
2020-08-07 13:11:55 +07:00
|
|
|
import { ActivatedRoute, Router } from '@angular/router';
|
2020-07-11 00:17:13 +07:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'app-bisq-blocks',
|
|
|
|
templateUrl: './bisq-blocks.component.html',
|
2020-08-02 19:20:38 +07:00
|
|
|
styleUrls: ['./bisq-blocks.component.scss'],
|
|
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
2020-07-11 00:17:13 +07:00
|
|
|
})
|
|
|
|
export class BisqBlocksComponent implements OnInit {
|
2020-08-02 19:20:38 +07:00
|
|
|
blocks$: Observable<[BisqBlock[], number]>;
|
2020-07-13 15:16:12 +07:00
|
|
|
page = 1;
|
|
|
|
itemsPerPage: number;
|
|
|
|
contentSpace = window.innerHeight - (165 + 75);
|
|
|
|
fiveItemsPxSize = 250;
|
2020-07-15 13:10:13 +07:00
|
|
|
loadingItems: number[];
|
|
|
|
isLoading = true;
|
2020-07-19 13:46:30 +07:00
|
|
|
// @ts-ignore
|
|
|
|
paginationSize: 'sm' | 'lg' = 'md';
|
|
|
|
paginationMaxSize = 10;
|
2020-07-11 00:17:13 +07:00
|
|
|
|
2020-07-13 15:16:12 +07:00
|
|
|
constructor(
|
|
|
|
private bisqApiService: BisqApiService,
|
2020-07-13 21:46:25 +07:00
|
|
|
private seoService: SeoService,
|
2020-08-07 13:11:55 +07:00
|
|
|
private route: ActivatedRoute,
|
|
|
|
private router: Router,
|
2020-08-10 23:47:44 +07:00
|
|
|
private cd: ChangeDetectorRef,
|
2020-07-13 15:16:12 +07:00
|
|
|
) { }
|
2020-07-11 00:17:13 +07:00
|
|
|
|
|
|
|
ngOnInit(): void {
|
2020-08-12 14:04:04 +07:00
|
|
|
this.seoService.setTitle('Blocks');
|
2020-07-13 15:16:12 +07:00
|
|
|
this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
|
2020-07-15 13:10:13 +07:00
|
|
|
this.loadingItems = Array(this.itemsPerPage);
|
2020-07-19 13:46:30 +07:00
|
|
|
if (document.body.clientWidth < 768) {
|
|
|
|
this.paginationSize = 'sm';
|
|
|
|
this.paginationMaxSize = 3;
|
|
|
|
}
|
2020-07-13 15:16:12 +07:00
|
|
|
|
2020-08-07 13:11:55 +07:00
|
|
|
this.blocks$ = this.route.queryParams
|
2020-07-13 15:16:12 +07:00
|
|
|
.pipe(
|
2020-08-07 13:11:55 +07:00
|
|
|
map((queryParams) => {
|
|
|
|
if (queryParams.page) {
|
2020-08-10 23:47:44 +07:00
|
|
|
const newPage = parseInt(queryParams.page, 10);
|
|
|
|
this.page = newPage;
|
|
|
|
this.cd.markForCheck();
|
|
|
|
return newPage;
|
2020-08-07 13:11:55 +07:00
|
|
|
}
|
|
|
|
return 1;
|
|
|
|
}),
|
2020-08-02 19:20:38 +07:00
|
|
|
switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * this.itemsPerPage, this.itemsPerPage)),
|
|
|
|
map((response) => [response.body, parseInt(response.headers.get('x-total-count'), 10)]),
|
|
|
|
);
|
2020-07-13 15:16:12 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
calculateTotalOutput(block: BisqBlock): number {
|
|
|
|
return block.txs.reduce((a: number, tx: BisqTransaction) =>
|
|
|
|
a + tx.outputs.reduce((acc: number, output: BisqOutput) => acc + output.bsqAmount, 0), 0
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
trackByFn(index: number) {
|
|
|
|
return index;
|
2020-07-11 00:17:13 +07:00
|
|
|
}
|
|
|
|
|
2020-07-13 15:16:12 +07:00
|
|
|
pageChange(page: number) {
|
2020-08-07 13:11:55 +07:00
|
|
|
this.router.navigate([], {
|
|
|
|
queryParams: { page: page },
|
|
|
|
queryParamsHandling: 'merge',
|
|
|
|
});
|
2020-07-13 15:16:12 +07:00
|
|
|
}
|
2020-07-11 00:17:13 +07:00
|
|
|
}
|