web-ui: Add tabs to the home view

The following views are now displayed in tabs:
- Latest blocks
- Richest addresses
- Masternodes

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

@@ -7,6 +7,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AlertModule, BsDropdownModule, CollapseModule, TooltipModule, ModalModule } from 'ngx-bootstrap';
+import { TabsModule } from 'ngx-bootstrap/tabs';
 import { TranslateModule } from '@ngx-translate/core';
 import { ToastrModule } from 'ngx-toastr';
 
@@ -68,7 +69,8 @@ import { MasternodesComponent } from './components/masternodes/masternodes.compo
     HttpClientModule,
     NgHttpLoaderModule,
     TranslateModule.forRoot(),
-    NgxPaginationModule
+    NgxPaginationModule,
+    TabsModule.forRoot()
   ],
   providers: [
     AddressesService,

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

@@ -1,5 +1,16 @@
 <div>
   <app-finder></app-finder>
   <app-ticker></app-ticker>
-  <app-latest-blocks></app-latest-blocks>
+
+  <tabset class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-xs-offset-1 col-xs-10">
+    <tab heading="{{'label.latestBlocks' | translate}}" (select)="selectView('latestBlocks')">
+      <app-latest-blocks *ngIf="isSelected('latestBlocks')"></app-latest-blocks>
+    </tab>
+    <tab heading="{{'label.richestAddresses' | translate}}" (select)="selectView('richestAddresses')">
+      <app-richest-addresses *ngIf="isSelected('richestAddresses')"></app-richest-addresses>
+    </tab>
+    <tab heading="{{'label.masternodes' | translate}}" (select)="selectView('masternodes')">
+      <app-masternodes *ngIf="isSelected('masternodes')"></app-masternodes>
+    </tab>
+  </tabset>
 </div>

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

@@ -7,9 +7,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
+  currentView = 'latestBlocks';
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  selectView(view: string) {
+    this.currentView = view;
+  }
+
+  isSelected(view: string): boolean {
+    return this.currentView === view;
+  }
 }

web-ui/src/app/components/latest-blocks/latest-blocks.component.html

@@ -1,19 +1,19 @@
 <div>
   <div class="row">
-    <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
+    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <h2>{{'label.latestBlocks' | translate}}</h2>
     </div>
   </div>
 
   <div class="row" *ngIf="blocks == null">
-    <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
+    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <h4>{{'message.loadingLatestBlocks' | translate}}</h4>
     </div>
   </div>
 
   <div *ngIf="blocks != null">
     <div class="row">
-      <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
+      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
         <table class="table table-condensed table-bordered table-striped table-hover">
           <thead>
             <tr>

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

@@ -1,10 +1,10 @@
 <div>
   <div class="row">
-    <h2 class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-1'">{{'label.masternodes' | translate}}</h2>
+    <h2 class="col-xs-12 col-sm-12 col-md-12 col-lg-12">{{'label.masternodes' | translate}}</h2>
   </div>
 
   <div class="row">
-    <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
+    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <table class="table table-condensed table-bordered table-striped table-hover">
         <thead>
           <tr>

web-ui/src/app/components/richest-addresses/richest-addresses.component.html

@@ -1,10 +1,10 @@
 <div>
   <div class="row">
-    <h2 class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-1'">{{'label.richestAddresses' | translate}}</h2>
+    <h2 class="col-xs-12 col-sm-12 col-md-12 col-lg-12">{{'label.richestAddresses' | translate}}</h2>
   </div>
 
   <div class="row">
-    <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
+    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <table class="table table-condensed table-bordered table-striped table-hover">
         <thead>
           <tr>