From 76baaf001803f97960a42bece67f34a1e53fb7d6 Mon Sep 17 00:00:00 2001
From: Alexis Hernandez <alexis22229@gmail.com>
Date: Sat, 14 Apr 2018 00:27:11 -0500
Subject: [PATCH] web-ui: Display the number of masternodes

---
 web-ui/src/app/app.component.ts               |  3 ++-
 .../components/ticker/ticker.component.html   | 23 ++++++++++++++-----
 web-ui/src/app/models/ticker.ts               |  1 +
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/web-ui/src/app/app.component.ts b/web-ui/src/app/app.component.ts
index 36849e5..1bad17f 100644
--- a/web-ui/src/app/app.component.ts
+++ b/web-ui/src/app/app.component.ts
@@ -107,7 +107,8 @@ export class AppComponent {
       'label.totalSupply': 'Total supply',
       'label.circulatingSupply': 'Circulating supply',
       'label.blocks': 'Blocks',
-      'label.richestAddresses': 'Richest addresses'
+      'label.richestAddresses': 'Richest addresses',
+      'label.masternodes': 'Masternodes'
     };
   }
 }
diff --git a/web-ui/src/app/components/ticker/ticker.component.html b/web-ui/src/app/components/ticker/ticker.component.html
index 4323f84..70f4a39 100644
--- a/web-ui/src/app/components/ticker/ticker.component.html
+++ b/web-ui/src/app/components/ticker/ticker.component.html
@@ -5,8 +5,8 @@
         <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>
+          <span *ngIf="ticker == null || ticker.totalSupply == null">{{'message.unavailable' | translate}}</span>
+          <span *ngIf="ticker != null && ticker.totalSupply != null">{{ticker.totalSupply}} {{'label.coinName' | translate}}</span>
         </div>
       </div>
     </div>
@@ -16,8 +16,8 @@
         <div class="panel-heading">{{'label.circulatingSupply' | translate}}
         </div>
         <div class="panel-body">
-          <span *ngIf="ticker == null">{{'message.unavailable' | translate}}}}</span>
-          <span *ngIf="ticker != null">{{ticker.circulatingSupply}} {{'label.coinName' | translate}}</span>
+          <span *ngIf="ticker == null || ticker.circulatingSupply == null">{{'message.unavailable' | translate}}</span>
+          <span *ngIf="ticker != null && ticker.circulatingSupply != null">{{ticker.circulatingSupply}} {{'label.coinName' | translate}}</span>
         </div>
       </div>
     </div>
@@ -27,7 +27,7 @@
         <div class="panel-heading">{{'label.transactions' | translate}}
         </div>
         <div class="panel-body">
-          <span *ngIf="ticker == null">{{'message.unavailable' | translate}}}}</span>
+          <span *ngIf="ticker == null">{{'message.unavailable' | translate}}</span>
           <span *ngIf="ticker != null">{{ticker.transactions}}</span>
         </div>
       </div>
@@ -38,10 +38,21 @@
         <div class="panel-heading">{{'label.blocks' | translate}}
         </div>
         <div class="panel-body">
-          <span *ngIf="ticker == null">{{'message.unavailable' | translate}}}}</span>
+          <span *ngIf="ticker == null">{{'message.unavailable' | translate}}</span>
           <span *ngIf="ticker != null">{{ticker.blocks}}</span>
         </div>
       </div>
     </div>
+
+    <div class="col-xs-4 col-sm-4 col-md-3 col-lg-3">
+      <div class="panel panel-default">
+        <div class="panel-heading">{{'label.masternodes' | translate}}
+        </div>
+        <div class="panel-body">
+          <span *ngIf="ticker == null || ticker.masternodes == null">{{'message.unavailable' | translate}}</span>
+          <span *ngIf="ticker != null && ticker.masternodes != null">{{ticker.masternodes}}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/web-ui/src/app/models/ticker.ts b/web-ui/src/app/models/ticker.ts
index f29f8e1..a7602d4 100644
--- a/web-ui/src/app/models/ticker.ts
+++ b/web-ui/src/app/models/ticker.ts
@@ -4,4 +4,5 @@ export class ServerStats {
   circulatingSupply: number;
   transactions: number;
   blocks: number;
+  masternodes: number;
 }