web-ui: Display the number of masternodes

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

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>

web-ui/src/app/models/ticker.ts

@@ -4,4 +4,5 @@ export class ServerStats {
   circulatingSupply: number;
   transactions: number;
   blocks: number;
+  masternodes: number;
 }