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

add paginated virtual scrolling to blockchain blocks bar

Browse Source
This commit is contained in:
Mononaut
2022-12-27 05:28:57 -06:00
parent 7478acb445
commit b35fbbbbd9
11 changed files with 355 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/app/components/blockchain/blockchain.component.html
View File

@@ -2,10 +2,13 @@
<div class="position-container" [ngClass]="network ? network : ''">
<span>
<div class="blocks-wrapper">
<app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks>
<app-mempool-blocks [hidden]="pageIndex > 0"></app-mempool-blocks>
<app-blockchain-blocks [hidden]="pageIndex > 0"></app-blockchain-blocks>
<ng-container *ngFor="let page of pages; trackBy: trackByPageFn">
<app-blockchain-blocks [static]="true" [offset]="page.offset" [height]="page.height" [count]="blocksPerPage"></app-blockchain-blocks>
</ng-container>
</div>
<div id="divider">
<div id="divider" [hidden]="pageIndex > 0">
<button class="time-toggle" (click)="toggleTimeDirection()"><fa-icon [icon]="['fas', 'exchange-alt']" [fixedWidth]="true"></fa-icon></button>
</div>
</span>

10
frontend/src/app/components/blockchain/blockchain.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import { StateService } from '../../services/state.service';
@@ -9,6 +9,10 @@ import { StateService } from '../../services/state.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlockchainComponent implements OnInit, OnDestroy {
@Input() pages: any[] = [];
@Input() pageIndex: number;
@Input() blocksPerPage: number = 8;
network: string;
timeLtrSubscription: Subscription;
timeLtr: boolean = this.stateService.timeLtr.value;
@@ -29,6 +33,10 @@ export class BlockchainComponent implements OnInit, OnDestroy {
this.timeLtrSubscription.unsubscribe();
}
trackByPageFn(index: number, item: { height: number }) {
return item.height;
}
toggleTimeDirection() {
this.ltrTransitionEnabled = true;
this.stateService.timeLtr.next(!this.timeLtr);