Mining pool detail page draft PoC

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

@@ -1,5 +1,66 @@
 <div class="container-xl">
 
-  Pool
+  <div *ngIf="poolStats$ | async as poolStats">
+    <h1>
+      {{ poolStats.pool.name }}
+    </h1>
+
+    <div class="box">
+      <div class="row">
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td>Address</td>
+                <td>{{ poolStats.pool.addresses }}</td>
+              </tr>
+              <tr>
+                <td>Coinbase Tag</td>
+                <td>{{ poolStats.pool.regexes }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td>Mined Blocks</td>
+                <td>{{ poolStats.blockCount }}</td>
+              </tr>
+              <tr>
+                <td>Empty Blocks</td>
+                <td>{{ poolStats.emptyBlocks.length }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
+    <thead>
+      <th style="width: 15%;" i18n="latest-blocks.height">Height</th>
+      <th class="d-none d-md-block" style="width: 20%;" i18n="latest-blocks.timestamp">Timestamp</th>
+      <th style="width: 20%;" i18n="latest-blocks.mined">Mined</th>
+      <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>
+      <tr *ngFor="let block of blocks">
+        <td><a [routerLink]="['/block' | relativeUrl, block.hash]" [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>
+        <td>
+          <div class="progress">
+            <div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
+            <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 
 </div>

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

@@ -1,4 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, 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';
 
 @Component({
   selector: 'app-pool',
@@ -6,9 +12,55 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./pool.component.scss']
 })
 export class PoolComponent implements OnInit {
+  poolStats$: Observable<PoolStat>;
+  isLoading = false;
+
+  poolId: number;
+  interval: string;
+
+  blocks: any[] = [];
+
   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');
+        }),
+      );
+  }
+
+  loadMore(chunks = 0) {
+    let fromHeight: number | undefined;
+    if (this.blocks.length > 0) {
+      fromHeight = this.blocks[this.blocks.length - 1].height - 1;
+    }
+
+    this.apiService.getPoolBlocks$(this.poolId, fromHeight)
+      .subscribe((blocks) => {
+        this.blocks = this.blocks.concat(blocks);
+
+        const chunksLeft = chunks - 1;
+        if (chunksLeft > 0) {
+          this.loadMore(chunksLeft);
+        }
+        // this.cd.markForCheck();
+      },
+      (error) => {
+        console.log(error);
+        // this.cd.markForCheck();
+      });
+  }
+
+  trackByBlock(index: number, block: BlockExtended) {
+    return block.height;
   }
 }