Add basic horizontal campaign navigation

static/src/app/app.component.html

@@ -105,15 +105,20 @@
 </div>
 
 <div>
-  <button mat-icon-button
+  <!--<button mat-icon-button-->
-          class="sidebar-toggle-btn"
+          <!--class="sidebar-toggle-btn"-->
-          (click)="toggleSidebar()"
+          <!--(click)="toggleSidebar()"-->
-          *ngIf="showSidebarToggleBtn">
+          <!--*ngIf="showSidebarToggleBtn">-->
-    <mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">
+    <!--<mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">-->
-    </mat-icon>
+    <!--</mat-icon>-->
-    <mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">
+    <!--<mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">-->
-    </mat-icon>
+    <!--</mat-icon>-->
-  </button>
+  <!--</button>-->
+
+
+  <div id="top">
+    <router-outlet name="top"></router-outlet>
+  </div>
 
   <div id="left"
        [style.background]="leftBackground"

static/src/app/pub/user-list-sheet/user-list-sheet.component.ts

@@ -48,7 +48,6 @@ export class UserListSheetComponent implements OnInit {
 
   selectUser(user) {
     this.bottomSheetRef.dismiss();
-    event.preventDefault();
     this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]);
   }
 }

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css

@@ -0,0 +1,36 @@
+.scroll-btn {
+  position: absolute;
+  height: 53px;
+  width: 32px;
+  cursor: pointer;
+}
+
+.scroll-btn-right {
+  top: 50px;
+  left: 98%;
+ }
+
+.campaign-horizontal-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  box-shadow: #dadada 0px 1px 5px;
+}
+
+.campaign-entry {
+  width: fit-content;
+  border: 1px solid #dadada;
+  min-width: 20%;
+  padding: 15px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 16px;
+  float:left;
+}
+
+.campaign-entry:hover {
+  background: #f9f9f9;
+}

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html

@@ -0,0 +1,37 @@
+<div class="scroll-btn"
+     *ngIf="isLeftScrollVisible"
+     (mouseenter)="setRepeater(-25)"
+     (mouseout)="clearRepeater()">
+  <mat-icon svgIcon="chevron-left"></mat-icon>
+</div>
+
+<div class="campaign-horizontal-list" #horizontalList>
+  <div class="campaign-entry">
+    Ewige Übersicht
+  </div>
+  <div class="campaign-entry">
+    Operation Schmelztiegel
+  </div>
+  <div class="campaign-entry">
+    Return to Hell in a Bowl
+  </div>
+  <div class="campaign-entry">
+    Operation Schmelztiegel
+  </div>
+  <div class="campaign-entry">
+    Return to Hell in a Bowl
+  </div>
+  <div class="campaign-entry">
+    Operation Schmelztiegel
+  </div>
+  <div class="campaign-entry">
+    Return to Hell in a Bowl
+  </div>
+</div>
+
+<div class="scroll-btn scroll-btn-right"
+     (mouseenter)="setRepeater(25)"
+     (mouseout)="clearRepeater()">
+  <mat-icon svgIcon="chevron-right"></mat-icon>
+</div>
+

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts

@@ -0,0 +1,37 @@
+import {Component, ElementRef, ViewChild} from '@angular/core';
+
+@Component({
+  selector: 'campaign-navigation',
+  templateUrl: './campaign-navigation.component.html',
+  styleUrls: ['./campaign-navigation.component.css']
+})
+export class CampaignNavigationComponent {
+
+  @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
+
+  isLeftScrollVisible = false;
+
+  repeater;
+
+  constructor() {
+  }
+
+  public scrollList(scrollValue: number): void {
+    console.log("call")
+    this.panel.nativeElement.scrollLeft += scrollValue;
+    if (this.panel.nativeElement.scrollLeft > 0) {
+      this.isLeftScrollVisible = true
+    } else {
+      this.isLeftScrollVisible = false;
+      this.clearRepeater();
+    }
+  }
+
+  setRepeater(value: number) {
+    this.repeater = setInterval(() => this.scrollList(value), 200);
+  }
+
+  clearRepeater() {
+    clearInterval(this.repeater)
+  }
+}

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

@@ -13,6 +13,7 @@ import {StatisticHighScoreComponent} from './campaign/highscore/highscore.compon
 import {WarHeaderComponent} from './war/war-header/war-header.component';
 import {WarEditComponent} from './war/war-edit/war-edit.component';
 import {LoginGuardMT} from '../login';
+import {CampaignNavigationComponent} from './campaign/campaign-navigation/campaign-navigation.component';
 
 
 export const statsRoutes: Routes = [{
@@ -23,6 +24,11 @@ export const statsRoutes: Routes = [{
       component: WarListComponent
     }
   ]
+},
+  {
+    path: 'top',
+    component: CampaignNavigationComponent,
+    outlet: 'top'
   },
   {
     path: 'overview/:id',
@@ -73,5 +79,6 @@ export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(stat
 
 export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, StatisticHighScoreComponent,
   CampaignSubmitComponent, WarListComponent, WarSubmitComponent, WarEditComponent, WarHeaderComponent,
-  ScoreboardComponent, FractionStatsComponent, CampaignPlayerDetailComponent, WarItemComponent];
+  ScoreboardComponent, FractionStatsComponent, CampaignPlayerDetailComponent, WarItemComponent,
+  CampaignNavigationComponent];