73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, OnChanges, ChangeDetectorRef } from '@angular/core';
|
|
import { firstValueFrom, Subscription } from 'rxjs';
|
|
import { StateService } from '../../services/state.service';
|
|
|
|
@Component({
|
|
selector: 'app-clockchain',
|
|
templateUrl: './clockchain.component.html',
|
|
styleUrls: ['./clockchain.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
|
|
@Input() width: number = 300;
|
|
@Input() height: number = 60;
|
|
|
|
mempoolBlocks: number = 3;
|
|
blockchainBlocks: number = 6;
|
|
blockWidth: number = 50;
|
|
dividerStyle;
|
|
|
|
network: string;
|
|
timeLtrSubscription: Subscription;
|
|
timeLtr: boolean = this.stateService.timeLtr.value;
|
|
ltrTransitionEnabled = false;
|
|
connectionStateSubscription: Subscription;
|
|
loadingTip: boolean = true;
|
|
connected: boolean = true;
|
|
|
|
constructor(
|
|
public stateService: StateService,
|
|
private cd: ChangeDetectorRef,
|
|
) {}
|
|
|
|
ngOnInit() {
|
|
this.ngOnChanges();
|
|
|
|
this.network = this.stateService.network;
|
|
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
|
|
this.timeLtr = !!ltr;
|
|
});
|
|
this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
|
|
this.connected = (state === 2);
|
|
});
|
|
firstValueFrom(this.stateService.chainTip$).then(() => {
|
|
this.loadingTip = false;
|
|
});
|
|
}
|
|
|
|
ngOnChanges() {
|
|
this.blockWidth = Math.floor(7 * this.height / 12);
|
|
this.mempoolBlocks = Math.floor(((this.width / 2) - (this.blockWidth * 0.32)) / (1.24 * this.blockWidth));
|
|
this.blockchainBlocks = this.mempoolBlocks;
|
|
this.dividerStyle = {
|
|
width: '2px',
|
|
height: `${this.height}px`,
|
|
};
|
|
this.cd.markForCheck();
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.timeLtrSubscription.unsubscribe();
|
|
this.connectionStateSubscription.unsubscribe();
|
|
}
|
|
|
|
trackByPageFn(index: number, item: { index: number }) {
|
|
return item.index;
|
|
}
|
|
|
|
toggleTimeDirection() {
|
|
this.ltrTransitionEnabled = true;
|
|
this.stateService.timeLtr.next(!this.timeLtr);
|
|
}
|
|
}
|