web-ui: added a color effect on new blocks (fixes #20)

wiringbits · Jun 17, 2018 · 590fa9f · 590fa9f
1 parent c3632db
commit 590fa9f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
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
@@ -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
@@ -26,7 +26,7 @@ <h4>{{'message.loadingLatestBlocks' | translate}}</h4>
           </thead>
 
           <tbody>
-            <tr *ngFor="let item of blocks">
+            <tr *ngFor="let item of blocks" [ngClass]="{ 'latest-block': isBlockRecent(item) }">
               <td>
                 <a routerLink="/blocks/{{item.hash}}">{{item.height}}</a>
               </td>

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
@@ -25,7 +25,8 @@ import { ErrorService } from '../../services/error.service';
 })
 export class LatestBlocksComponent implements OnInit, OnDestroy {
 
-  blocks: Block[];
+  blocks: Block[] = [];
+  private latestBlockHeight = 0;
   private subscription$: Subscription;
 
   constructor(
@@ -70,6 +71,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
   }
 
   private onBlockRetrieved(response: Block[]) {
+    this.latestBlockHeight = this.blocks.reduce((max, block) => Math.max(block.height, max), 0);
     this.blocks = response;
   }
 
@@ -92,4 +94,8 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
   age(block: Block): string {
     return '';
   }
+
+  isBlockRecent(item: Block): boolean {
+    return item.height > this.latestBlockHeight;
+  }
 }