From f2abedfbaa60b2fc95e3bb5eca509318cc316c27 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Thu, 10 Feb 2022 19:16:00 +0900 Subject: [PATCH] Add timespan switch for pool stats and load more for pool's blocks --- frontend/src/app/app-routing.module.ts | 12 --- .../app/components/pool/pool.component.html | 44 +++++++++- .../src/app/components/pool/pool.component.ts | 81 ++++++++++--------- frontend/src/app/services/api.service.ts | 6 +- 4 files changed, 91 insertions(+), 52 deletions(-) diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index a13bc1e54..4018ed64e 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -71,10 +71,6 @@ let routes: Routes = [ path: 'mining/pool/:poolId', component: PoolComponent, }, - { - path: 'mining/pool/:poolId/:interval', - component: PoolComponent, - }, { path: 'graphs', component: StatisticsComponent, @@ -167,10 +163,6 @@ let routes: Routes = [ path: 'mining/pool/:poolId', component: PoolComponent, }, - { - path: 'mining/pool/:poolId/:interval', - component: PoolComponent, - }, { path: 'graphs', component: StatisticsComponent, @@ -257,10 +249,6 @@ let routes: Routes = [ path: 'mining/pool/:poolId', component: PoolComponent, }, - { - path: 'mining/pool/:poolId/:interval', - component: PoolComponent, - }, { path: 'graphs', component: StatisticsComponent, diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html index 9040e4553..14f8fc924 100644 --- a/frontend/src/app/components/pool/pool.component.html +++ b/frontend/src/app/components/pool/pool.component.html @@ -6,6 +6,46 @@
+
+
+
+
+
+ + + + + + + + + + +
+
+
+
+
@@ -47,9 +87,9 @@ - + - + diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts index 8296f7520..a89c9a7b4 100644 --- a/frontend/src/app/components/pool/pool.component.ts +++ b/frontend/src/app/components/pool/pool.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs'; -import { map, switchMap, tap } from 'rxjs/operators'; +import { once } from 'process'; +import { BehaviorSubject, combineLatest, from, merge, Observable } from 'rxjs'; +import { delay, distinctUntilChanged, map, scan, startWith, switchMap, tap } from 'rxjs/operators'; import { BlockExtended, PoolStat } from 'src/app/interfaces/node-api.interface'; import { ApiService } from 'src/app/services/api.service'; import { StateService } from 'src/app/services/state.service'; @@ -13,51 +15,56 @@ import { StateService } from 'src/app/services/state.service'; }) export class PoolComponent implements OnInit { poolStats$: Observable; + blocks$: Observable; + + fromHeight: number = -1; + fromHeightSubject: BehaviorSubject = new BehaviorSubject(this.fromHeight); + + blocks: BlockExtended[] = []; + poolId: number = undefined; isLoading = false; - - poolId: number; - interval: string; - - blocks: any[] = []; + radioGroupForm: FormGroup; constructor( private apiService: ApiService, private route: ActivatedRoute, public stateService: StateService, - ) { } - - ngOnInit(): void { - this.poolStats$ = this.route.params - .pipe( - switchMap((params) => { - this.poolId = params.poolId; - this.interval = params.interval; - this.loadMore(2); - return this.apiService.getPoolStats$(params.poolId, params.interval ?? 'all'); - }), - ); + private formBuilder: FormBuilder, + ) { + this.radioGroupForm = this.formBuilder.group({ dateSpan: '1w' }); + this.radioGroupForm.controls.dateSpan.setValue('1w'); } - loadMore(chunks = 0) { - let fromHeight: number | undefined; - if (this.blocks.length > 0) { - fromHeight = this.blocks[this.blocks.length - 1].height - 1; - } + ngOnInit(): void { + this.poolStats$ = combineLatest([ + this.route.params.pipe(map((params) => params.poolId)), + this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith('1w')), + ]) + .pipe( + switchMap((params: any) => { + this.poolId = params[0]; + if (this.blocks.length === 0) { + this.fromHeightSubject.next(undefined); + } + return this.apiService.getPoolStats$(this.poolId, params[1] ?? '1w'); + }), + ); - this.apiService.getPoolBlocks$(this.poolId, fromHeight) - .subscribe((blocks) => { - this.blocks = this.blocks.concat(blocks); + this.blocks$ = this.fromHeightSubject + .pipe( + distinctUntilChanged(), + switchMap((fromHeight) => { + return this.apiService.getPoolBlocks$(this.poolId, fromHeight); + }), + tap((newBlocks) => { + this.blocks = this.blocks.concat(newBlocks); + }), + map(() => this.blocks) + ) + } - const chunksLeft = chunks - 1; - if (chunksLeft > 0) { - this.loadMore(chunksLeft); - } - // this.cd.markForCheck(); - }, - (error) => { - console.log(error); - // this.cd.markForCheck(); - }); + loadMore() { + this.fromHeightSubject.next(this.blocks[this.blocks.length - 1]?.height); } trackByBlock(index: number, block: BlockExtended) { diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index ec14d8a5d..c1d42fd50 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -138,6 +138,10 @@ export class ApiService { } getPoolBlocks$(poolId: number, fromHeight: number): Observable { - return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool-blocks/${poolId}/${fromHeight}`); + if (fromHeight !== undefined) { + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath +`/api/v1/mining/pool-blocks/${poolId}/${fromHeight}`); + } else { + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath +`/api/v1/mining/pool-blocks/${poolId}`); + } } }
Transactions Size
{{ block.height }}{{ block.height }} ‎{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} {{ block.tx_count | number }}