Polish clocks, fix urls, make interactive

This commit is contained in:
Mononaut
2023-06-05 13:27:17 -04:00
parent 6076eeed46
commit ec0d5e0c23
14 changed files with 90 additions and 50 deletions

View File

@@ -5,8 +5,20 @@
<div class="position-container" [ngClass]="network ? network : ''" [style.top]="(height / 3) + 'px'">
<span>
<div class="blocks-wrapper">
<app-mempool-blocks [minimal]="true" [count]="mempoolBlocks" [blockWidth]="blockWidth" [spotlight]="mode === 'mempool' ? 1 : 0"></app-mempool-blocks>
<app-blockchain-blocks [minimal]="true" [count]="blockchainBlocks" [blockWidth]="blockWidth" [spotlight]="mode === 'block' ? -1 : 0"></app-blockchain-blocks>
<app-mempool-blocks
[minimal]="true"
[count]="mempoolBlocks"
[blockWidth]="blockWidth"
[spotlight]="mode === 'mempool' ? index + 1 : 0"
[getHref]="getMempoolUrl"
></app-mempool-blocks>
<app-blockchain-blocks
[minimal]="true"
[count]="blockchainBlocks"
[blockWidth]="blockWidth"
[spotlight]="mode === 'mined' ? -index - 1 : 0"
[getHref]="getMinedUrl"
></app-blockchain-blocks>
</div>
<div class="divider" [style.top]="-(height / 6) + 'px'">
<svg

View File

@@ -11,7 +11,8 @@ import { StateService } from '../../services/state.service';
export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
@Input() width: number = 300;
@Input() height: number = 60;
@Input() mode: 'mempool' | 'block';
@Input() mode: 'mempool' | 'mined';
@Input() index: number = 0;
mempoolBlocks: number = 3;
blockchainBlocks: number = 6;
@@ -70,4 +71,12 @@ export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
this.ltrTransitionEnabled = true;
this.stateService.timeLtr.next(!this.timeLtr);
}
getMempoolUrl(index): string {
return `/clock/mempool/${index}`;
}
getMinedUrl(index): string {
return `/clock/block/${index}`;
}
}