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 @@
Transactions |
Size |
-
+
- {{ block.height }} |
+ {{ block.height }} |
{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} |
|
{{ block.tx_count | number }} |
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}`);
+ }
}
}