machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/UX: Fix blockchain-blocks skeleton. (#697)

Browse Source 
* Fix blockchain-blocks skeleton.

* Fix blockchain skeleton background.

* Fix mempool blockchain skeleton.

* Add e2e testing.
Add tsconfig.
Fix mempool fit to screen.

* Fix wrong return.
Fix e2e testing.

* Fix blockchainblocks connectionstate.
Add init action to websocket mock.
Add e2e testing for droping websock connection.

* Ref e2e code for websocket connection.
Fix blockchain blocks skeleton.

* Fix state connections.
Remove .only e2e tests.

* Fix mempool blocks skeleton.

* Add fit screen to empty blocks.
This commit is contained in:
Miguel Medeiros
2021-08-08 21:43:03 -03:00
committed by GitHub
parent 35d4abcc25
commit 6dffbd40f3
8 changed files with 139 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@@ -1,5 +1,5 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
import { Subscription } from 'rxjs';
import { Observable, Subscription } from 'rxjs';
import { Block } from 'src/app/interfaces/electrs.interface';
import { StateService } from 'src/app/services/state.service';
import { Router } from '@angular/router';
@@ -13,17 +13,18 @@ import { Router } from '@angular/router';
export class BlockchainBlocksComponent implements OnInit, OnDestroy {
network = '';
blocks: Block[] = this.mountEmptyBlocks();
blocks: Block[] = [];
emptyBlocks: Block[] = this.mountEmptyBlocks();
markHeight: number;
blocksSubscription: Subscription;
networkSubscription: Subscription;
tabHiddenSubscription: Subscription;
markBlockSubscription: Subscription;
isLoadingWebsocketSubscription: Subscription;
loadingBlocks$: Observable<boolean>;
blockStyles = [];
emptyBlockStyles = [];
interval: any;
tabHidden = false;
loadingBlocks = false;
arrowVisible = false;
arrowLeftPx = 30;
@@ -45,11 +46,10 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
) { }
ngOnInit() {
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
this.isLoadingWebsocketSubscription = this.stateService.isLoadingWebSocket$.subscribe((loading) => this.loadingBlocks = loading);
this.emptyBlocks.forEach((b) => this.emptyBlockStyles.push(this.getStyleForEmptyBlock(b)));
this.loadingBlocks$ = this.stateService.isLoadingWebSocket$;
this.networkSubscription = this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.tabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
this.blocksSubscription = this.stateService.blocks$
.subscribe(([block, txConfirmed]) => {
if (this.blocks.some((b) => b.height === block.height)) {
@@ -75,15 +75,13 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.moveArrowToPosition(true, false);
}
if (!this.loadingBlocks) {
this.blockStyles = [];
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
setTimeout(() => {
this.blockStyles = [];
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
setTimeout(() => {
this.blockStyles = [];
this.blocks.forEach((b) => this.blockStyles.push(this.getStyleForBlock(b)));
this.cd.markForCheck();
}, 50);
}
this.cd.markForCheck();
}, 50);
if (this.blocks.length === this.stateService.env.KEEP_BLOCKS_AMOUNT) {
this.blocksFilled = true;
@@ -129,7 +127,6 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
this.networkSubscription.unsubscribe();
this.tabHiddenSubscription.unsubscribe();
this.markBlockSubscription.unsubscribe();
this.isLoadingWebsocketSubscription.unsubscribe();
clearInterval(this.interval);
}
@@ -186,9 +183,24 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
)`,
};
}
getStyleForEmptyBlock(block: Block) {
let addLeft = 0;
if (block.stage === 1) {
block.stage = 2;
addLeft = -205;
}
return {
left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
background: "#2d3348",
};
}
mountEmptyBlocks() {
const emptyBlocks = [];
for (let i = 0; i < 9; i++) {
for (let i = 0; i < 8; i++) {
emptyBlocks.push({
id: '',
height: 0,