web-ui: Add the Ticker view

web-ui/src/app/app.component.ts

@@ -39,6 +39,7 @@ export class AppComponent {
       'TPoS': 'Trustless Proof of Stake',
 
       // messages
+      'message.unavailable': 'Unavailable',
       'message.serverUnavailable': 'The server unavailable, please try again in a minute',
       'message.unknownErrors': 'Unknown error, please try again in a minute',
       'message.transactionNotFound': 'Transaction not found',
@@ -100,7 +101,8 @@ export class AppComponent {
       'label.transaction': 'Transaction',
       'label.height': 'Block height',
       'label.extractedBy': 'Extracted by',
-      'label.latestBlocks': 'Latest 10 blocks'
+      'label.latestBlocks': 'Latest 10 blocks',
+      'label.totalSupply': 'Total supply'
     };
   }
 }

web-ui/src/app/app.module.ts

@@ -30,6 +30,7 @@ import { FinderComponent } from './components/finder/finder.component';
 import { AddressDetailsComponent } from './components/address-details/address-details.component';
 import { BlockDetailsComponent } from './components/block-details/block-details.component';
 import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
+import { TickerComponent } from './components/ticker/ticker.component';
 
 @NgModule({
   declarations: [
@@ -41,7 +42,8 @@ import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.
     FinderComponent,
     AddressDetailsComponent,
     BlockDetailsComponent,
-    LatestBlocksComponent
+    LatestBlocksComponent,
+    TickerComponent
   ],
   imports: [
     AppRoutingModule,

web-ui/src/app/components/ticker/ticker.component.html

@@ -0,0 +1,12 @@
+<div class="row">
+  <div class="col-xs-4 col-sm-4 col-md-offset-1 col-md-3 col-lg-offset-1 col-lg-3">
+    <div class="panel panel-default">
+      <div class="panel-heading">{{'label.totalSupply' | translate}}
+      </div>
+      <div class="panel-body">
+        <span *ngIf="ticker == null">{{'message.unavailable' | translate}}}}</span>
+        <span *ngIf="ticker != null">{{ticker.totalSupply}} {{'label.coinName' | translate}}</span>
+      </div>
+    </div>
+  </div>
+</div>

web-ui/src/app/components/ticker/ticker.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TickerComponent } from './ticker.component';
+
+describe('TickerComponent', () => {
+  let component: TickerComponent;
+  let fixture: ComponentFixture<TickerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TickerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web-ui/src/app/components/ticker/ticker.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+
+import { TickerService } from '../../services/ticker.service';
+import { ServerStats } from '../../models/ticker';
+
+@Component({
+  selector: 'app-ticker',
+  templateUrl: './ticker.component.html',
+  styleUrls: ['./ticker.component.css']
+})
+export class TickerComponent implements OnInit {
+
+  ticker: ServerStats;
+
+  constructor(private tickerService: TickerService) { }
+
+  ngOnInit() {
+    this.tickerService
+      .get()
+      .subscribe(
+        response => this.onTickerRetrieved(response),
+        response => this.onError(response)
+      );
+  }
+
+  private onTickerRetrieved(ticker: ServerStats) {
+    this.ticker = ticker;
+  }
+
+  private onError(response: any) {
+    console.log(response);
+  }
+}