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

Add pagination on /mining/blocks

Browse Source
This commit is contained in:
nymkappa
2022-03-11 14:54:34 +01:00
parent 0e0331d8ab
commit d8e986996f
5 changed files with 135 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/app/components/blocks-list/blocks-list.component.html
View File

@@ -7,32 +7,32 @@
<table class="table table-borderless">
<thead>
<th class="height" i18n="latest-blocks.height">Height</th>
<th class="pool" i18n="latest-blocks.mined-by">Pool</th>
<th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
<th class="mined" i18n="latest-blocks.mined">Mined</th>
<th class="pool" i18n="latest-blocks.mined-by">Pool</th>
<th class="reward text-right" i18n="latest-blocks.reward">Reward</th>
<th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
<th class="txs text-right" i18n="latest-blocks.transactions">Txs</th>
<th class="size" i18n="latest-blocks.size">Size</th>
</thead>
<tbody *ngIf="blocks$ | async as blocks">
<tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<td>
<a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height
}}</a>
</td>
<td class="timestamp">
&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
<td class="mined">
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td>
<td>
<img width="25" height="25" src="{{ block.extras.pool['logo'] }}"
onError="this.src = './resources/mining-pools/default.svg'">
<span class="pool-name"><a [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">{{
block.extras.pool.name }}</a></span>
</td>
<td class="timestamp">
&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
<td class="mined">
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td>
<td class="reward text-right">
<app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
</td>
@@ -50,51 +50,41 @@
</div>
</td>
</tr>
<ng-template [ngIf]="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tbody>
<ng-template #skeleton>
<tbody>
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]">
<td>
<span class="skeleton-loader"></span>
</td>
<td class="timestamp">
<span class="skeleton-loader"></span>
</td>
<td class="mined">
<span class="skeleton-loader"></span>
</td>
<td>
<span class="skeleton-loader"></span>
</td>
<td class="reward text-right">
<span class="skeleton-loader"></span>
</td>
<td class="fees text-right">
<span class="skeleton-loader"></span>
</td>
<td class="txs text-right">
<span class="skeleton-loader"></span>
</td>
<td class="size">
<span class="skeleton-loader"></span>
</td>
</tr>
</ng-template>
</tbody>
<tbody *ngIf="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11,12]">
<td>
<span class="skeleton-loader"></span>
</td>
<td class="timestamp">
<span class="skeleton-loader"></span>
</td>
<td class="mined">
<span class="skeleton-loader"></span>
</td>
<td>
<span class="skeleton-loader"></span>
</td>
<td class="reward text-right">
<span class="skeleton-loader"></span>
</td>
<td class="fees text-right">
<span class="skeleton-loader"></span>
</td>
<td class="txs text-right">
<span class="skeleton-loader"></span>
</td>
<td class="size">
<span class="skeleton-loader"></span>
</td>
</tr>
</tbody>
</tbody>
</ng-template>
</table>
<!-- <ngb-pagination class="pagination-container float-right" [collectionSize]="block.tx_count" [rotate]="true"
[pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page, blockTxTitle)"
[maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="false"></ngb-pagination> -->
<ngb-pagination class="pagination-container float-right mt-3" [class]="isLoading ? 'disabled' : ''" [collectionSize]="blocksCount" [rotate]="true" [maxSize]="5"
[pageSize]="15" [(page)]="page" (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
</ngb-pagination>
</div>

17
frontend/src/app/components/blocks-list/blocks-list.component.scss
View File

@@ -1,5 +1,6 @@
.container-xl {
max-width: 1400px;
padding-bottom: 0;
}
.container {
@@ -11,6 +12,15 @@
padding-bottom: 15px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}
.progress {
background-color: #2d3348;
}
.pool-name {
display: inline-block;
vertical-align: text-top;
@@ -18,7 +28,7 @@
}
.height {
width: 12%;
width: 10%;
@media (max-width: 1100px) {
width: 10%;
}
@@ -31,6 +41,7 @@
}
.mined {
width: 13%;
@media (max-width: 576px) {
display: none;
}
@@ -53,7 +64,7 @@
}
.pool {
width: 12%;
width: 17%;
}
.reward {
@@ -71,4 +82,4 @@
@media (max-width: 650px) {
width: 20%;
}
}
}

59
frontend/src/app/components/blocks-list/blocks-list.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { map, repeat, tap } from 'rxjs/operators';
import { BehaviorSubject, Observable, timer } from 'rxjs';
import { delayWhen, map, retryWhen, switchMap, tap } from 'rxjs/operators';
import { BlockExtended } from 'src/app/interfaces/node-api.interface';
import { ApiService } from 'src/app/services/api.service';
import { StateService } from 'src/app/services/state.service';
@@ -13,33 +13,52 @@ import { StateService } from 'src/app/services/state.service';
})
export class BlocksList implements OnInit {
blocks$: Observable<BlockExtended[]> = undefined
isLoading = true;
oldestBlockHeight = undefined;
fromBlockHeight = undefined;
paginationMaxSize: number;
page = 1;
blocksCount: number;
fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight);
constructor(
private apiService: ApiService,
public stateService: StateService
public stateService: StateService,
) {
}
ngOnInit(): void {
this.blocks$ = this.apiService.getBlocks$(this.oldestBlockHeight)
.pipe(
tap(blocks => {
this.isLoading = false;
}),
map(blocks => {
for (const block of blocks) {
// @ts-ignore
block.extras.pool.logo = `./resources/mining-pools/` +
block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
this.oldestBlockHeight = block.height;
}
return blocks;
}),
repeat(2),
);
this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
this.blocks$ = this.fromHeightSubject.pipe(
switchMap(() => {
this.isLoading = true;
return this.apiService.getBlocks$(this.fromBlockHeight)
.pipe(
tap(blocks => {
if (this.blocksCount === undefined) {
this.blocksCount = blocks[0].height;
}
this.isLoading = false;
}),
map(blocks => {
for (const block of blocks) {
// @ts-ignore: Need to add an extra field for the template
block.extras.pool.logo = `./resources/mining-pools/` +
block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
}
return blocks;
}),
retryWhen(errors => errors.pipe(delayWhen(() => timer(1000))))
)
})
);
}
pageChange(page: number) {
this.fromBlockHeight = this.blocksCount - (page - 1) * 15;
this.fromHeightSubject.next(this.fromBlockHeight);
}
trackByBlock(index: number, block: BlockExtended) {