Fix routes for /mining - Share blockchain component instances - remove animations

This commit is contained in:
nymkappa 2022-02-17 17:10:20 +09:00
parent 538ae3b757
commit 7761e75d4c
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
8 changed files with 21 additions and 40 deletions

View File

@ -59,6 +59,10 @@ let routes: Routes = [
path: 'mempool-block/:id',
component: MempoolBlockComponent
},
{
path: 'mining',
component: MiningDashboardComponent,
},
],
},
{
@ -73,10 +77,6 @@ let routes: Routes = [
path: 'mining/pools',
component: PoolRankingComponent,
},
{
path: 'mining',
component: MiningDashboardComponent,
},
{
path: 'mining/pool/:poolId',
component: PoolComponent,
@ -159,6 +159,10 @@ let routes: Routes = [
path: 'mempool-block/:id',
component: MempoolBlockComponent
},
{
path: 'mining',
component: MiningDashboardComponent,
},
],
},
{
@ -173,10 +177,6 @@ let routes: Routes = [
path: 'mining/pools',
component: PoolRankingComponent,
},
{
path: 'mining',
component: MiningDashboardComponent,
},
{
path: 'mining/pool/:poolId',
component: PoolComponent,
@ -253,6 +253,10 @@ let routes: Routes = [
path: 'mempool-block/:id',
component: MempoolBlockComponent
},
{
path: 'mining',
component: MiningDashboardComponent,
},
],
},
{
@ -267,10 +271,6 @@ let routes: Routes = [
path: 'mining/pools',
component: PoolRankingComponent,
},
{
path: 'mining',
component: MiningDashboardComponent,
},
{
path: 'mining/pool/:poolId',
component: PoolComponent,

View File

@ -21,7 +21,7 @@
</div>
<div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></div>
</div>
<div class="" *ngIf="miningInfo === true">
<div class="" *ngIf="showMiningInfo === true">
<a class="badge badge-primary" [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">
{{ block.extras.pool.name}}</a>
</div>

View File

@ -12,7 +12,7 @@ import { BlockExtended } from 'src/app/interfaces/node-api.interface';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlockchainBlocksComponent implements OnInit, OnDestroy {
@Input() miningInfo: boolean = false;
@Input() showMiningInfo: boolean = false;
specialBlocks = specialBlocks;
network = '';
blocks: BlockExtended[] = [];

View File

@ -1,8 +1,8 @@
<div class="text-center" class="blockchain-wrapper animate" #container [class]="stateService.blockShifted ? 'move-left' : ''">
<div class="text-center" class="blockchain-wrapper animate" #container>
<div class="position-container {{ network }}">
<span>
<app-mempool-blocks></app-mempool-blocks>
<app-blockchain-blocks [miningInfo]="miningInfo"></app-blockchain-blocks>
<app-blockchain-blocks [showMiningInfo]="showMiningInfo"></app-blockchain-blocks>
<div id="divider"></div>
</span>
</div>

View File

@ -1,4 +1,4 @@
import { Component, OnInit, ChangeDetectionStrategy, Input, ViewChild, ElementRef } from '@angular/core';
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { StateService } from 'src/app/services/state.service';
@Component({
@ -8,8 +8,7 @@ import { StateService } from 'src/app/services/state.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlockchainComponent implements OnInit {
@Input() miningInfo: boolean = false;
@ViewChild('container') container: ElementRef;
showMiningInfo: boolean = false;
network: string;
constructor(
@ -18,15 +17,5 @@ export class BlockchainComponent implements OnInit {
ngOnInit() {
this.network = this.stateService.network;
setTimeout(() => {
if (this.miningInfo) {
this.container.nativeElement.className += ' move-left';
this.stateService.blockShifted = true;
} else if (this.stateService.blockShifted) {
this.container.nativeElement.className = this.container.nativeElement.className.replace(' move-left', '');
this.stateService.blockShifted = false;
}
}, 250);
}
}

View File

@ -1,11 +1,5 @@
<!-- lastest blocks -->
<div id="blockchain-container" class="fade-border" dir="ltr" #blockchainContainer>
<app-blockchain [miningInfo]=true></app-blockchain>
</div>
<div class="container-xl">
<div class="row row-cols-1 row-cols-md-2 mt-3">
<!-- pool distribution -->
@ -26,8 +20,6 @@
<app-difficulty-chart [widget]=true></app-difficulty-chart>
<div class=""><a href="" [routerLink]="['/mining/difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
<!-- <app-difficulty [showProgress]=false [showHalving]=true></app-difficulty>
Imagine more stuff down there -->
</div>
</div>
</div>

View File

@ -1,9 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mining-dashboard',
templateUrl: './mining-dashboard.component.html',
styleUrls: ['./mining-dashboard.component.scss']
styleUrls: ['./mining-dashboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MiningDashboardComponent implements OnInit {

View File

@ -100,7 +100,6 @@ export class StateService {
keyNavigation$ = new Subject<KeyboardEvent>();
blockScrolling$: Subject<boolean> = new Subject<boolean>();
public blockShifted: boolean = false;
constructor(
@Inject(PLATFORM_ID) private platformId: any,