Polish clocks, fix urls, make interactive

frontend/src/app/components/clock/clock-mempool.component.html

@@ -1 +0,0 @@
-<app-clock mode="mempool"></app-clock>

frontend/src/app/components/clock/clock-mempool.component.ts

@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-clock-mempool',
-  templateUrl: './clock-mempool.component.html',
-})
-export class ClockMempoolComponent {}

frontend/src/app/components/clock/clock-mined.component.html

@@ -1 +0,0 @@
-<app-clock mode="block"></app-clock>

frontend/src/app/components/clock/clock-mined.component.ts

@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-clock-mined',
-  templateUrl: './clock-mined.component.html',
-})
-export class ClockMinedComponent {}

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

@@ -1,14 +1,19 @@
 <div class="clock-wrapper" [style]="wrapperStyle">
   <div class="clockchain-bar" [style.height]="chainHeight + 'px'">
     <div class="clockchain">
-      <app-clockchain [width]="chainWidth" [height]="chainHeight" [mode]="mode"></app-clockchain>
+      <app-clockchain
+        [width]="chainWidth"
+        [height]="chainHeight"
+        [mode]="mode"
+        [index]="blockIndex"
+      ></app-clockchain>
     </div>
   </div>
   <div class="clock-face">
     <app-clock-face [size]="clockSize">
       <div class="block-wrapper">
-        <ng-container *ngIf="block && block.height >= 0">
-          <ng-container *ngIf="mode === 'block'; else mempoolMode;">
+        <ng-container *ngIf="blocks && blocks.length">
+          <ng-container *ngIf="mode === 'mined'; else mempoolMode;">
             <div class="block-cube">
               <div class="side top"></div>
               <div class="side bottom"></div>
@@ -20,12 +25,12 @@
           </ng-container>
           <ng-template #mempoolMode>
             <div class="block-sizer" [style]="blockSizerStyle">
-              <app-mempool-block-overview [index]="0" [pixelAlign]="true"></app-mempool-block-overview>
+              <app-mempool-block-overview [index]="blockIndex" [pixelAlign]="true"></app-mempool-block-overview>
             </div>
           </ng-template>
           <div class="fader"></div>
           <div class="title-wrapper">
-            <h1 class="block-height">{{ block.height }}</h1>
+            <h1 class="block-height">{{ blocks[mode === 'mempool' ? 0 : blockIndex].height }}</h1>
           </div>
         </ng-container>
       </div>
@@ -42,13 +47,13 @@
       <p class="label" i18n="clock.priority-rate|priority fee rate">priority rate</p>
       <p *ngIf="recommendedFees$ | async as recommendedFees;" i18n="shared.sat-vbyte|sat/vB">{{ recommendedFees.fastestFee }} sat/vB</p>
     </div>
-    <div *ngIf="mode !== 'mempool' && block" class="stats bottom left">
-      <p [innerHTML]="block.size | bytes: 2"></p>
+    <div *ngIf="mode !== 'mempool' && blocks?.length" class="stats bottom left">
+      <p [innerHTML]="blocks[blockIndex].size | bytes: 2"></p>
       <p class="label" i18n="clock.block-size">block size</p>
     </div>
-    <div *ngIf="mode !== 'mempool' && block" class="stats bottom right">
+    <div *ngIf="mode !== 'mempool' && blocks?.length" class="stats bottom right">
       <p class="force-wrap">
-        <ng-container *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
+        <ng-container *ngTemplateOutlet="blocks[blockIndex].tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: blocks[blockIndex].tx_count | number}"></ng-container>
         <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} <span class="label">transaction</span></ng-template>
         <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} <span class="label">transactions</span></ng-template>
       </p>

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

@@ -1,10 +1,11 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Input, OnInit } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, of, switchMap, tap } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { BlockExtended } from '../../interfaces/node-api.interface';
 import { WebsocketService } from '../../services/websocket.service';
 import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interface';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 
 @Component({
   selector: 'app-clock',
@@ -13,12 +14,14 @@ import { ActivatedRoute } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ClockComponent implements OnInit {
-  @Input() mode: 'block' | 'mempool' = 'block';
   hideStats: boolean = false;
+  mode: 'mempool' | 'mined' = 'mined';
+  blockIndex: number;
+  pageSubscription: Subscription;
   blocksSubscription: Subscription;
   recommendedFees$: Observable<Recommendedfees>;
   mempoolInfo$: Observable<MempoolInfo>;
-  block: BlockExtended;
+  blocks: BlockExtended[] = [];
   clockSize: number = 300;
   chainWidth: number = 384;
   chainHeight: number = 60;
@@ -41,6 +44,8 @@ export class ClockComponent implements OnInit {
     public stateService: StateService,
     private websocketService: WebsocketService,
     private route: ActivatedRoute,
+    private router: Router,
+    private relativeUrlPipe: RelativeUrlPipe,
     private cd: ChangeDetectorRef,
   ) {
     this.route.queryParams.subscribe((params) => {
@@ -57,14 +62,40 @@ export class ClockComponent implements OnInit {
     this.blocksSubscription = this.stateService.blocks$
       .subscribe(([block]) => {
         if (block) {
-          this.block = block;
-          this.blockStyle = this.getStyleForBlock(this.block);
-          this.cd.markForCheck();
+          this.blocks.unshift(block);
+          this.blocks = this.blocks.slice(0, 16);
+          if (this.blocks[this.blockIndex]) {
+            this.blockStyle = this.getStyleForBlock(this.blocks[this.blockIndex]);
+            this.cd.markForCheck();
+          }
         }
       });
 
     this.recommendedFees$ = this.stateService.recommendedFees$;
     this.mempoolInfo$ = this.stateService.mempoolInfo$;
+
+    this.pageSubscription = this.route.paramMap.pipe(
+      switchMap((params: ParamMap) => {
+        const rawMode: string = params.get('mode');
+        const mode = rawMode === 'mempool' ? 'mempool' : 'mined';
+        const index: number = Number.parseInt(params.get('index'));
+        if (mode !== rawMode || index < 0 || isNaN(index)) {
+          this.router.navigate([this.relativeUrlPipe.transform('/clock'), mode, index || 0]);
+        }
+        return of({
+          mode,
+          index,
+        });
+      }),
+      tap((page: { mode: 'mempool' | 'mined', index: number }) => {
+        this.mode = page.mode;
+        this.blockIndex = page.index || 0;
+        if (this.blocks[this.blockIndex]) {
+          this.blockStyle = this.getStyleForBlock(this.blocks[this.blockIndex]);
+          this.cd.markForCheck();
+        }
+      })
+    ).subscribe();
   }
 
   getStyleForBlock(block: BlockExtended) {