Add timespan switch for pool stats and load more for pool's blocks

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,

frontend/src/app/components/pool/pool.component.html

@@ -6,6 +6,46 @@
     </h1>
 
     <div class="box">
+      <div class="row">
+        <div class="col-sm">
+          <div class="card-header mb-0 mb-lg-4 pr-0">
+            <form [formGroup]="radioGroupForm" class="formRadioGroup float-right">
+              <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
+                <label ngbButtonLabel class="btn-primary btn-sm">
+                  <input ngbButton type="radio" [value]="'24h'"> 24h
+                </label>
+                <label ngbButtonLabel class="btn-primary btn-sm">
+                  <input ngbButton type="radio" [value]="'3d'"> 3D
+                </label>
+                <label ngbButtonLabel class="btn-primary btn-sm">
+                  <input ngbButton type="radio" [value]="'1w'"> 1W
+                </label>
+                <label ngbButtonLabel class="btn-primary btn-sm">
+                  <input ngbButton type="radio" [value]="'1m'"> 1M
+                </label>
+                <label ngbButtonLabel class="btn-primary btn-sm">
+                  <input ngbButton type="radio" [value]="'3m'"> 3M
+                </label>
+                <label ngbButtonLabel class="btn-primary btn-sm">
+                  <input ngbButton type="radio" [value]="'6m'"> 6M
+                </label>
+                <label ngbButtonLabel class="btn-primary btn-sm">
+                  <input ngbButton type="radio" [value]="'1y'"> 1Y
+                </label>
+                <label ngbButtonLabel class="btn-primary btn-sm">
+                  <input ngbButton type="radio" [value]="'2y'"> 2Y
+                </label>
+                <label ngbButtonLabel class="btn-primary btn-sm">
+                  <input ngbButton type="radio" [value]="'3y'"> 3Y
+                </label>
+                <label ngbButtonLabel class="btn-primary btn-sm">
+                  <input ngbButton type="radio" [value]="'all'"> ALL
+                </label>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
       <div class="row">
         <div class="col-sm">
           <table class="table table-borderless table-striped">
@@ -47,9 +87,9 @@
       <th class="d-none d-lg-block" style="width: 15%;" i18n="latest-blocks.transactions">Transactions</th>
       <th style="width: 20%;" i18n="latest-blocks.size">Size</th>
     </thead>
-    <tbody>
+    <tbody *ngIf="blocks$ | async as blocks">
       <tr *ngFor="let block of blocks">
-        <td><a [routerLink]="['/block' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
+        <td><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
         <td class="d-none d-md-block">&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
         <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
         <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>

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 { once } from 'process';
-import { map, switchMap, tap } from 'rxjs/operators';
+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<PoolStat>;
+  blocks$: Observable<BlockExtended[]>;
+
+  fromHeight: number = -1;
+  fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromHeight);
+
+  blocks: BlockExtended[] = [];
+  poolId: number = undefined;
   isLoading = false;
-
+  radioGroupForm: FormGroup;
-  poolId: number;
-  interval: string;
-
-  blocks: any[] = [];
 
   constructor(
     private apiService: ApiService,
     private route: ActivatedRoute,
     public stateService: StateService,
-  ) { }
+    private formBuilder: FormBuilder,
-
+  ) {
-  ngOnInit(): void {
+    this.radioGroupForm = this.formBuilder.group({ dateSpan: '1w' });
-    this.poolStats$ = this.route.params
+    this.radioGroupForm.controls.dateSpan.setValue('1w');
-      .pipe(
-        switchMap((params) => {
-          this.poolId = params.poolId;
-          this.interval = params.interval;
-          this.loadMore(2);
-          return this.apiService.getPoolStats$(params.poolId, params.interval ?? 'all');
-        }),
-      );
   }
 
-  loadMore(chunks = 0) {
+  ngOnInit(): void {
-    let fromHeight: number | undefined;
+    this.poolStats$ = combineLatest([
-    if (this.blocks.length > 0) {
+      this.route.params.pipe(map((params) => params.poolId)),
-      fromHeight = this.blocks[this.blocks.length - 1].height - 1;
+      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)
+    this.blocks$ = this.fromHeightSubject
-      .subscribe((blocks) => {
+      .pipe(
-        this.blocks = this.blocks.concat(blocks);
+        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;
+  loadMore() {
-        if (chunksLeft > 0) {
+    this.fromHeightSubject.next(this.blocks[this.blocks.length - 1]?.height);
-          this.loadMore(chunksLeft);
-        }
-        // this.cd.markForCheck();
-      },
-      (error) => {
-        console.log(error);
-        // this.cd.markForCheck();
-      });
   }
 
   trackByBlock(index: number, block: BlockExtended) {

frontend/src/app/services/api.service.ts

@@ -138,6 +138,10 @@ export class ApiService {
   }
 
   getPoolBlocks$(poolId: number, fromHeight: number): Observable<BlockExtended[]> {
-    return this.httpClient.get<BlockExtended[]>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool-blocks/${poolId}/${fromHeight}`);
+    if (fromHeight !== undefined) {
+      return this.httpClient.get<BlockExtended[]>(this.apiBaseUrl + this.apiBasePath +`/api/v1/mining/pool-blocks/${poolId}/${fromHeight}`);
+    } else {
+      return this.httpClient.get<BlockExtended[]>(this.apiBaseUrl + this.apiBasePath +`/api/v1/mining/pool-blocks/${poolId}`);
+    }
   }
 }