Add tabs

static/src/app/statistic/stats.module.ts

@@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module";
 import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
 import {WarService} from "../services/logs/war.service";
 import {NgxChartsModule} from "@swimlane/ngx-charts";
-import {AccordionModule, CarouselModule} from "ngx-bootstrap";
+import {AccordionModule, TabsModule} from "ngx-bootstrap";
 import {CampaignService} from "../services/logs/campaign.service";
 import {NgxDatatableModule} from "@swimlane/ngx-datatable";
 import {PlayerService} from "../services/logs/player.service";
@@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service";
 @NgModule({
   declarations: statsRoutingComponents,
   imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
-    AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule],
+    AccordionModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

static/src/app/statistic/war-detail/war-detail.component.css

@@ -1,5 +1,5 @@
 .vertical-spacer {
-  height: 100vh;
+  height: 205px;
   float: left;
   width: 4%;
 }
@@ -42,6 +42,27 @@
   color: blue;
 }
 
+/* ########### TABS ########### */
+
+:host /deep/ .nav-tabs {
+  padding-left: 35%!important;
+}
+
+:host /deep/ .nav-link {
+  background: #4b4b4b;
+  color: white;
+}
+
+:host /deep/ .nav-link:hover {
+  background: aliceblue;
+  color: #000;
+}
+
+:host /deep/ .nav-tabs>li.active>a{
+  background: #222222;
+  color: white;
+}
+
 /* ########### DATATABLE ########### */
 
 :host /deep/ .datatable-header {

static/src/app/statistic/war-detail/war-detail.component.html

@@ -1,6 +1,5 @@
 <div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
-  <div class=vertical-spacer>
-  </div>
+  <div class=vertical-spacer></div>
   <div style="overflow:hidden">
     <div style="width: 920px;min-height: 205px;">
       <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
@@ -51,7 +50,14 @@
         </form>
       </div>
     </div>
+  </div>
 
+  <tabset>
+    <tab>
+      <template tabHeading>
+        <img src="../../../assets/scoreboard-btn.png"> Scoreboard
+      </template>
+      <div class=vertical-spacer></div>
       <ngx-datatable
         [rows]="rows"
         [sorts]="[{prop: 'kill', dir: 'desc'}]"
@@ -82,7 +88,14 @@
         <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
         <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
       </ngx-datatable>
-  </div>
+    </tab>
 
+    <tab (select)="loadFractionData()">
+      <template tabHeading>
+        <img src="../../../assets/fraction-btn.png"> Fraktionen
+      </template>
+      I've got an HTML heading, and a select callback. Pretty cool!
+    </tab>
+  </tabset>
 
 </div>

static/src/app/statistic/war-detail/war-detail.component.ts

@@ -83,4 +83,8 @@ export class WarDetailComponent {
     }
   }
 
+  loadFractionData() {
+    console.log('load data from server')
+  }
+
 }