mempool/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts

77 lines
2.4 KiB
TypeScript
Raw Normal View History

import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { BisqApiService } from '../bisq-api.service';
2020-08-02 19:20:38 +07:00
import { switchMap, map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
2020-07-13 21:46:25 +07:00
import { SeoService } from 'src/app/services/seo.service';
import { ActivatedRoute, Router } from '@angular/router';
@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,
})
export class BisqBlocksComponent implements OnInit {
2020-08-02 19:20:38 +07:00
blocks$: Observable<[BisqBlock[], number]>;
page = 1;
itemsPerPage: number;
contentSpace = window.innerHeight - (165 + 75);
fiveItemsPxSize = 250;
loadingItems: number[];
isLoading = true;
2020-07-19 13:46:30 +07:00
// @ts-ignore
paginationSize: 'sm' | 'lg' = 'md';
paginationMaxSize = 10;
constructor(
private bisqApiService: BisqApiService,
2020-07-13 21:46:25 +07:00
private seoService: SeoService,
private route: ActivatedRoute,
private router: Router,
private cd: ChangeDetectorRef,
) { }
ngOnInit(): void {
2020-08-12 14:04:04 +07:00
this.seoService.setTitle('Blocks');
this.itemsPerPage = Math.max(Math.round(this.contentSpace / this.fiveItemsPxSize) * 5, 10);
this.loadingItems = Array(this.itemsPerPage);
2020-07-19 13:46:30 +07:00
if (document.body.clientWidth < 768) {
this.paginationSize = 'sm';
this.paginationMaxSize = 3;
}
this.blocks$ = this.route.queryParams
.pipe(
map((queryParams) => {
if (queryParams.page) {
const newPage = parseInt(queryParams.page, 10);
this.page = newPage;
this.cd.markForCheck();
return newPage;
}
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)]),
);
}
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;
}
pageChange(page: number) {
this.router.navigate([], {
queryParams: { page: page },
queryParamsHandling: 'merge',
});
}
}