From 9f7ab96b8403d3e3cafdd32bea11a277d1a6b2c1 Mon Sep 17 00:00:00 2001 From: Mario Mejia Date: Sat, 16 Jun 2018 22:07:53 -0500 Subject: [PATCH 1/4] web-ui: added color effect on newest blocks (fixes #20) --- .../latest-blocks/latest-blocks.component.css | 9 +++++++ .../latest-blocks.component.html | 2 +- .../latest-blocks/latest-blocks.component.ts | 27 +++++++++++++++++++ 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/web-ui/src/app/components/latest-blocks/latest-blocks.component.css b/web-ui/src/app/components/latest-blocks/latest-blocks.component.css index e69de29b..4a01dc94 100644 --- a/web-ui/src/app/components/latest-blocks/latest-blocks.component.css +++ b/web-ui/src/app/components/latest-blocks/latest-blocks.component.css @@ -0,0 +1,9 @@ +.latest-block { + animation: blinker 1s linear; +} + +@keyframes blinker { + 50% { + background-color: #D4FFD4; + } +} diff --git a/web-ui/src/app/components/latest-blocks/latest-blocks.component.html b/web-ui/src/app/components/latest-blocks/latest-blocks.component.html index b68e5269..39389d59 100644 --- a/web-ui/src/app/components/latest-blocks/latest-blocks.component.html +++ b/web-ui/src/app/components/latest-blocks/latest-blocks.component.html @@ -26,7 +26,7 @@

{{'message.loadingLatestBlocks' | translate}}

- + {{item.height}} diff --git a/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts b/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts index 8e6d1cdf..447d3346 100644 --- a/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts +++ b/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts @@ -26,6 +26,8 @@ import { ErrorService } from '../../services/error.service'; export class LatestBlocksComponent implements OnInit, OnDestroy { blocks: Block[]; + private totalNewestBlocks: number; + private latestBlock: Block; private subscription$: Subscription; constructor( @@ -70,9 +72,30 @@ export class LatestBlocksComponent implements OnInit, OnDestroy { } private onBlockRetrieved(response: Block[]) { + this.countNewestBlocks(response); + this.latestBlock = response[0]; this.blocks = response; } + private countNewestBlocks(newBlocks: Block[]) { + if (!this.blocks) { + return; + } + + const lastestBlockHash: string = this.latestBlock.hash; + let totalNewBlocks = 0; + + for (let i = 0; i < newBlocks.length; i++) { + if (newBlocks[i].hash === lastestBlockHash) { + break; + } + + totalNewBlocks++; + } + + this.totalNewestBlocks = totalNewBlocks; + } + private onError(response: any) { this.errorService.renderServerErrors(null, response); } @@ -92,4 +115,8 @@ export class LatestBlocksComponent implements OnInit, OnDestroy { age(block: Block): string { return ''; } + + isBlockRecent(index: number): boolean { + return index < this.totalNewestBlocks; + } } From d02621f9a944830c705dd40e616da3c004c72fda Mon Sep 17 00:00:00 2001 From: Mario Mejia Date: Sun, 17 Jun 2018 15:12:17 -0500 Subject: [PATCH 2/4] observations fix --- .../latest-blocks.component.html | 2 +- .../latest-blocks/latest-blocks.component.ts | 27 +++++-------------- 2 files changed, 8 insertions(+), 21 deletions(-) diff --git a/web-ui/src/app/components/latest-blocks/latest-blocks.component.html b/web-ui/src/app/components/latest-blocks/latest-blocks.component.html index 39389d59..aa8b691c 100644 --- a/web-ui/src/app/components/latest-blocks/latest-blocks.component.html +++ b/web-ui/src/app/components/latest-blocks/latest-blocks.component.html @@ -26,7 +26,7 @@

{{'message.loadingLatestBlocks' | translate}}

- + {{item.height}} diff --git a/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts b/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts index 447d3346..12cc4c31 100644 --- a/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts +++ b/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts @@ -26,8 +26,7 @@ import { ErrorService } from '../../services/error.service'; export class LatestBlocksComponent implements OnInit, OnDestroy { blocks: Block[]; - private totalNewestBlocks: number; - private latestBlock: Block; + private newBlocks: Block[]; private subscription$: Subscription; constructor( @@ -72,28 +71,16 @@ export class LatestBlocksComponent implements OnInit, OnDestroy { } private onBlockRetrieved(response: Block[]) { - this.countNewestBlocks(response); - this.latestBlock = response[0]; + this.newBlocks = this.getNewBlocks(response); this.blocks = response; } - private countNewestBlocks(newBlocks: Block[]) { + private getNewBlocks(newBlocks: Block[]): Block[] { if (!this.blocks) { - return; + return []; } - const lastestBlockHash: string = this.latestBlock.hash; - let totalNewBlocks = 0; - - for (let i = 0; i < newBlocks.length; i++) { - if (newBlocks[i].hash === lastestBlockHash) { - break; - } - - totalNewBlocks++; - } - - this.totalNewestBlocks = totalNewBlocks; + return newBlocks.filter(newBlock => newBlock.height > this.blocks[0].height); } private onError(response: any) { @@ -116,7 +103,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy { return ''; } - isBlockRecent(index: number): boolean { - return index < this.totalNewestBlocks; + isBlockRecent(item: Block): boolean { + return this.newBlocks.some(newBlock => newBlock.height === item.height); } } From 7a9a8dfe49de3c9fab1a6e31181e0d1653681c01 Mon Sep 17 00:00:00 2001 From: Mario Mejia Date: Sun, 17 Jun 2018 17:30:31 -0500 Subject: [PATCH 3/4] web-ui: retrieve latest block before updating with new blocks --- .../latest-blocks/latest-blocks.component.ts | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts b/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts index 12cc4c31..3de98cf3 100644 --- a/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts +++ b/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts @@ -26,7 +26,7 @@ import { ErrorService } from '../../services/error.service'; export class LatestBlocksComponent implements OnInit, OnDestroy { blocks: Block[]; - private newBlocks: Block[]; + private latestBlockHeight: number; private subscription$: Subscription; constructor( @@ -71,18 +71,10 @@ export class LatestBlocksComponent implements OnInit, OnDestroy { } private onBlockRetrieved(response: Block[]) { - this.newBlocks = this.getNewBlocks(response); + this.latestBlockHeight = this.blocks ? this.blocks[0].height : 0; this.blocks = response; } - private getNewBlocks(newBlocks: Block[]): Block[] { - if (!this.blocks) { - return []; - } - - return newBlocks.filter(newBlock => newBlock.height > this.blocks[0].height); - } - private onError(response: any) { this.errorService.renderServerErrors(null, response); } @@ -104,6 +96,6 @@ export class LatestBlocksComponent implements OnInit, OnDestroy { } isBlockRecent(item: Block): boolean { - return this.newBlocks.some(newBlock => newBlock.height === item.height); + return item.height > this.latestBlockHeight; } } From 922b2c7b24f82c13671021b6a192fce4f38371d3 Mon Sep 17 00:00:00 2001 From: Mario Mejia Date: Sun, 17 Jun 2018 17:57:01 -0500 Subject: [PATCH 4/4] web-ui: var initialization and aplication of reduce function on latest-blocks view --- .../app/components/latest-blocks/latest-blocks.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts b/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts index 3de98cf3..fbb7858b 100644 --- a/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts +++ b/web-ui/src/app/components/latest-blocks/latest-blocks.component.ts @@ -25,8 +25,8 @@ import { ErrorService } from '../../services/error.service'; }) export class LatestBlocksComponent implements OnInit, OnDestroy { - blocks: Block[]; - private latestBlockHeight: number; + blocks: Block[] = []; + private latestBlockHeight = 0; private subscription$: Subscription; constructor( @@ -71,7 +71,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy { } private onBlockRetrieved(response: Block[]) { - this.latestBlockHeight = this.blocks ? this.blocks[0].height : 0; + this.latestBlockHeight = this.blocks.reduce((max, block) => Math.max(block.height, max), 0); this.blocks = response; }