From 843316242a2da8ba742ebfb00325e5ce9761b8ab Mon Sep 17 00:00:00 2001
From: Alexis Hernandez <alexis22229@gmail.com>
Date: Sun, 8 Apr 2018 00:42:36 -0500
Subject: [PATCH] web-ui: Add the Ticker view
---
web-ui/src/app/app.component.ts | 4 ++-
web-ui/src/app/app.module.ts | 4 ++-
.../components/ticker/ticker.component.css | 0
.../components/ticker/ticker.component.html | 12 +++++++
.../ticker/ticker.component.spec.ts | 25 ++++++++++++++
.../app/components/ticker/ticker.component.ts | 33 +++++++++++++++++++
6 files changed, 76 insertions(+), 2 deletions(-)
create mode 100644 web-ui/src/app/components/ticker/ticker.component.css
create mode 100644 web-ui/src/app/components/ticker/ticker.component.html
create mode 100644 web-ui/src/app/components/ticker/ticker.component.spec.ts
create mode 100644 web-ui/src/app/components/ticker/ticker.component.ts
diff --git a/web-ui/src/app/app.component.ts b/web-ui/src/app/app.component.ts
index d32e623..f819e4c 100644
--- a/web-ui/src/app/app.component.ts
+++ b/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'
};
}
}
diff --git a/web-ui/src/app/app.module.ts b/web-ui/src/app/app.module.ts
index 62cfbbc..035c5b6 100644
--- a/web-ui/src/app/app.module.ts
+++ b/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,
diff --git a/web-ui/src/app/components/ticker/ticker.component.css b/web-ui/src/app/components/ticker/ticker.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/web-ui/src/app/components/ticker/ticker.component.html b/web-ui/src/app/components/ticker/ticker.component.html
new file mode 100644
index 0000000..c9c1d59
--- /dev/null
+++ b/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>
diff --git a/web-ui/src/app/components/ticker/ticker.component.spec.ts b/web-ui/src/app/components/ticker/ticker.component.spec.ts
new file mode 100644
index 0000000..72b804f
--- /dev/null
+++ b/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();
+ });
+});
diff --git a/web-ui/src/app/components/ticker/ticker.component.ts b/web-ui/src/app/components/ticker/ticker.component.ts
new file mode 100644
index 0000000..fabeecb
--- /dev/null
+++ b/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);
+ }
+}