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

Infinite scroll replaces "load more" buttons.

Browse Source
This commit is contained in:
softsimon 2020-03-01 03:32:12 +07:00
parent c9b161423d
commit 90c05ccb51
11 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -25,6 +25,7 @@
"bootstrap": "^4.4.1",
"chartist": "^0.11.4",
"clipboard": "^2.0.4",
"ngx-infinite-scroll": "^8.0.1",
"qrcode": "^1.4.4",
"rxjs": "~6.5.3",
"tlite": "^0.1.9",

2
frontend/src/app/app.module.ts
View File

@ -4,6 +4,7 @@ import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbButtonsModule } from '@ng-bootstrap/ng-bootstrap';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './components/app/app.component';
@ -80,6 +81,7 @@ import { AudioService } from './services/audio.service';
ReactiveFormsModule,
BrowserAnimationsModule,
NgbButtonsModule,
InfiniteScrollModule,
],
providers: [
ElectrsApiService,

3
frontend/src/app/components/address/address.component.html
View File

@ -42,14 +42,13 @@
<h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ txCount }} transactions</h2>
<app-transactions-list [transactions]="transactions" [showConfirmations]="true"></app-transactions-list>
<app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>
<div class="text-center">
<ng-template [ngIf]="isLoadingTransactions">
<div class="spinner-border"></div>
<br><br>
</ng-template>
<button *ngIf="!isLoadingTransactions && totalConfirmedTxCount && loadedConfirmedTxCount < totalConfirmedTxCount" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
</div>
</ng-template>

3
frontend/src/app/components/address/address.component.ts
View File

@ -153,6 +153,9 @@ export class AddressComponent implements OnInit, OnDestroy {
}
loadMore() {
if (this.isLoadingTransactions || !this.totalConfirmedTxCount || this.loadedConfirmedTxCount >= this.totalConfirmedTxCount) {
return;
}
this.isLoadingTransactions = true;
this.electrsApiService.getAddressTransactionsFromHash$(this.address.address, this.lastTransactionTxId)
.subscribe((transactions: Transaction[]) => {

3
frontend/src/app/components/block/block.component.html
View File

@ -65,14 +65,13 @@
<br>
<app-transactions-list [transactions]="transactions"></app-transactions-list>
<app-transactions-list [transactions]="transactions" (loadMore)="loadMore()"></app-transactions-list>
<div class="text-center">
<ng-template [ngIf]="isLoadingTransactions">
<div class="spinner-border"></div>
<br><br>
</ng-template>
<button *ngIf="transactions?.length && transactions?.length !== block.tx_count" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
</div>
</ng-template>

4
frontend/src/app/components/block/block.component.ts
View File

@ -96,6 +96,10 @@ export class BlockComponent implements OnInit {
}
loadMore() {
if (this.isLoadingTransactions || !this.transactions.length || this.transactions.length === this.block.tx_count) {
return;
}
this.isLoadingTransactions = true;
this.electrsApiService.getBlockTransactions$(this.block.id, this.transactions.length)
.subscribe((transactions) => {

7
frontend/src/app/components/latest-blocks/latest-blocks.component.html
View File

@ -1,4 +1,4 @@
<table class="table table-borderless">
<table class="table table-borderless" [fromRoot]="true" [infiniteScrollContainer]="'body'" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
<thead>
<th style="width: 210px;">Height</th>
<th class="d-none d-md-block" style="width: 210px;">Timestamp</th>
@ -32,8 +32,3 @@
</ng-template>
</tbody>
</table>
<div class="text-center">
<br>
<button *ngIf="blocks.length" [disabled]="isLoading" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
</div>

2
frontend/src/app/components/time-since/time-since.component.ts
View File

@ -31,7 +31,7 @@ export class TimeSinceComponent implements OnInit, OnDestroy {
calculate() {
const seconds = Math.floor((+new Date() - +new Date(this.time * 1000)) / 1000);
if (seconds < 60) {
return '< 1 min';
return '< 1 minute';
}
const intervals = {
year: 31536000,

2
frontend/src/app/components/transactions-list/transactions-list.component.html
View File

@ -8,7 +8,7 @@
</ng-template>
</div>
</div>
<div class="header-bg box">
<div class="header-bg box" infiniteScroll [fromRoot]="true" [infiniteScrollContainer]="'body'" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
<div class="row">
<div class="col">
<table class="table table-borderless smaller-text table-xs" style="margin: 0;">

8
frontend/src/app/components/transactions-list/transactions-list.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, ChangeDetectorRef } from '@angular/core';
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
import { StateService } from '../../services/state.service';
import { Observable, forkJoin } from 'rxjs';
import { Block, Outspend, Transaction } from '../../interfaces/electrs.interface';
@ -15,6 +15,8 @@ export class TransactionsListComponent implements OnInit, OnChanges {
@Input() showConfirmations = false;
@Input() transactionPage = false;
@Output() loadMore = new EventEmitter();
latestBlock$: Observable<Block>;
outspends: Outspend[] = [];
@ -53,6 +55,10 @@ export class TransactionsListComponent implements OnInit, OnChanges {
});
}
onScroll() {
this.loadMore.emit();
}
getTotalTxOutput(tx: any) {
return tx.vout.map((v: any) => v.value || 0).reduce((a: number, b: number) => a + b);
}

12
frontend/yarn.lock
View File

@ -5738,6 +5738,13 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
ngx-infinite-scroll@^8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-8.0.1.tgz#95b9d7e51f8ed5ee6821889b4e4e3cfe8ddb5838"
integrity sha512-YpgkTPDNT7UCEp0GRX178V1nF+M2slCPJ2TX3CpvPZb5AR99JYwj/fNivcue5lN51oUaTySEG27qjVU73vKhjw==
dependencies:
opencollective-postinstall "^2.0.2"
nice-try@^1.0.4:
version "1.0.5"
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@ -6086,6 +6093,11 @@ open@7.0.0:
dependencies:
is-wsl "^2.1.0"
opencollective-postinstall@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
opn@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"