mempool/frontend/src/app/components/blockchain/blockchain.component.ts

135 lines
3.9 KiB
TypeScript
Raw Normal View History

import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
import { firstValueFrom, Subscription } from 'rxjs';
2022-09-21 17:23:45 +02:00
import { StateService } from '../../services/state.service';
2019-07-21 17:59:47 +03:00
@Component({
selector: 'app-blockchain',
templateUrl: './blockchain.component.html',
styleUrls: ['./blockchain.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
2019-07-21 17:59:47 +03:00
})
export class BlockchainComponent implements OnInit, OnDestroy, OnChanges {
@Input() pages: any[] = [];
@Input() pageIndex: number;
@Input() blocksPerPage: number = 8;
@Input() minScrollWidth: number = 0;
2023-06-14 14:33:13 -04:00
@Input() scrollableMempool: boolean = false;
@Input() containerWidth: number;
2023-06-14 14:33:13 -04:00
@Output() mempoolOffsetChange: EventEmitter<number> = new EventEmitter();
network: string;
2022-09-29 22:45:40 +00:00
timeLtrSubscription: Subscription;
timeLtr: boolean = this.stateService.timeLtr.value;
ltrTransitionEnabled = false;
2023-06-14 14:33:13 -04:00
flipping = false;
connectionStateSubscription: Subscription;
loadingTip: boolean = true;
connected: boolean = true;
2019-07-21 17:59:47 +03:00
2023-09-20 03:07:35 +00:00
dividerOffset: number | null = null;
mempoolOffset: number | null = null;
positionStyle = {
transform: "translateX(1280px)",
};
2023-06-14 14:33:13 -04:00
2019-07-21 17:59:47 +03:00
constructor(
public stateService: StateService,
2023-06-14 14:33:13 -04:00
private cd: ChangeDetectorRef,
2019-07-21 17:59:47 +03:00
) {}
2023-06-14 14:33:13 -04:00
ngOnInit(): void {
this.onResize();
this.network = this.stateService.network;
2022-09-29 22:45:40 +00:00
this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
this.timeLtr = !!ltr;
2023-09-20 03:07:35 +00:00
this.updateStyle();
2022-09-29 22:45:40 +00:00
});
this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
this.connected = (state === 2);
2023-06-14 14:33:13 -04:00
});
firstValueFrom(this.stateService.chainTip$).then(() => {
this.loadingTip = false;
});
2022-09-29 22:45:40 +00:00
}
2023-06-14 14:33:13 -04:00
ngOnDestroy(): void {
2022-09-29 22:45:40 +00:00
this.timeLtrSubscription.unsubscribe();
this.connectionStateSubscription.unsubscribe();
2022-09-29 22:45:40 +00:00
}
2023-06-14 14:33:13 -04:00
trackByPageFn(index: number, item: { index: number }): number {
return item.index;
}
2023-06-14 14:33:13 -04:00
toggleTimeDirection(): void {
this.ltrTransitionEnabled = false;
const prevOffset = this.mempoolOffset;
this.mempoolOffset = 0;
this.mempoolOffsetChange.emit(0);
2023-09-20 03:07:35 +00:00
this.updateStyle();
2023-06-14 14:33:13 -04:00
setTimeout(() => {
this.ltrTransitionEnabled = true;
this.flipping = true;
this.stateService.timeLtr.next(!this.timeLtr);
2023-09-20 03:07:35 +00:00
this.cd.markForCheck();
2023-06-14 14:33:13 -04:00
setTimeout(() => {
this.ltrTransitionEnabled = false;
this.flipping = false;
this.mempoolOffset = prevOffset;
2023-09-20 03:07:35 +00:00
this.mempoolOffsetChange.emit((this.mempoolOffset || 0));
this.updateStyle();
this.cd.markForCheck();
2023-06-14 14:33:13 -04:00
}, 1000);
}, 0);
}
onMempoolWidthChange(width): void {
if (this.flipping) {
return;
}
2023-09-20 03:07:35 +00:00
this.mempoolOffset = Math.max(0, width - (this.dividerOffset || 0));
this.updateStyle();
this.mempoolOffsetChange.emit(this.mempoolOffset);
2023-06-14 14:33:13 -04:00
}
2023-09-20 03:07:35 +00:00
updateStyle(): void {
if (this.dividerOffset == null || this.mempoolOffset == null) {
return;
}
const oldTransform = this.positionStyle.transform;
this.positionStyle = this.timeLtr ? {
transform: `translateX(calc(100vw - ${this.dividerOffset + this.mempoolOffset}px)`,
} : {
transform: `translateX(${this.dividerOffset + this.mempoolOffset}px)`,
};
if (oldTransform !== this.positionStyle.transform) {
this.cd.detectChanges();
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.containerWidth) {
this.onResize();
}
}
2023-06-14 14:33:13 -04:00
onResize(): void {
const width = this.containerWidth || window.innerWidth;
if (width >= 768) {
2023-06-14 14:33:13 -04:00
if (this.stateService.isLiquid()) {
this.dividerOffset = 420;
} else {
this.dividerOffset = width * 0.5;
2023-06-14 14:33:13 -04:00
}
} else {
if (this.stateService.isLiquid()) {
this.dividerOffset = width * 0.5;
2023-06-14 14:33:13 -04:00
} else {
this.dividerOffset = width * 0.95;
2023-06-14 14:33:13 -04:00
}
}
2023-09-20 03:07:35 +00:00
this.updateStyle();
2019-07-21 17:59:47 +03:00
}
}