From d807d128612d61178178e2288fb4e396c6a03bae Mon Sep 17 00:00:00 2001
From: Alexis Hernandez <alexis22229@gmail.com>
Date: Sun, 22 Apr 2018 16:00:33 -0500
Subject: [PATCH] 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                        |  4 +++-
 web-ui/src/app/components/home/home.component.html  | 13 ++++++++++++-
 web-ui/src/app/components/home/home.component.ts    |  9 +++++++++
 .../latest-blocks/latest-blocks.component.html      |  6 +++---
 .../masternodes/masternodes.component.html          |  4 ++--
 .../richest-addresses.component.html                |  4 ++--
 6 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/web-ui/src/app/app.module.ts b/web-ui/src/app/app.module.ts
index b30bf06..05769b6 100644
--- a/web-ui/src/app/app.module.ts
+++ b/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,
diff --git a/web-ui/src/app/components/home/home.component.html b/web-ui/src/app/components/home/home.component.html
index c4bd937..0c716ee 100644
--- a/web-ui/src/app/components/home/home.component.html
+++ b/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>
diff --git a/web-ui/src/app/components/home/home.component.ts b/web-ui/src/app/components/home/home.component.ts
index 33fd770..61e9620 100644
--- a/web-ui/src/app/components/home/home.component.ts
+++ b/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;
+  }
 }
diff --git a/web-ui/src/app/components/latest-blocks/latest-blocks.component.html b/web-ui/src/app/components/latest-blocks/latest-blocks.component.html
index 93a5131..bbdf9f0 100644
--- a/web-ui/src/app/components/latest-blocks/latest-blocks.component.html
+++ b/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>
diff --git a/web-ui/src/app/components/masternodes/masternodes.component.html b/web-ui/src/app/components/masternodes/masternodes.component.html
index aa1cb3c..552f8da 100644
--- a/web-ui/src/app/components/masternodes/masternodes.component.html
+++ b/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>
diff --git a/web-ui/src/app/components/richest-addresses/richest-addresses.component.html b/web-ui/src/app/components/richest-addresses/richest-addresses.component.html
index 6979f5e..9507c4b 100644
--- a/web-ui/src/app/components/richest-addresses/richest-addresses.component.html
+++ b/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>