web-ui: added color effect on newest blocks (fixes wiringbits#20)

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;
+  }
+}

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; let i = index" [ngClass]="{ 'latest-block': isBlockRecent(i) }">
               <td>
                 <a routerLink="/blocks/{{item.hash}}">{{item.height}}</a>
               </td>

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;
+  }
 }