Finish campaign navigation behavior and load

api/routes/campaigns.js

@@ -24,6 +24,26 @@ const campaigns = new express.Router();
 
 // routes **********************
 campaigns.route('/')
+         .get((req, res, next) => {
+           CampaignModel.find({}, {}, {
+             sort: {
+               timestamp: 'desc',
+             },
+           }, (err, items) => {
+             if (err) {
+               err.status = codes.servererror;
+               return next(err);
+             }
+             if (items && items.length > 0) {
+               res.locals.items = items;
+             } else {
+               res.locals.items = [];
+             }
+             res.locals.processed = true;
+             next();
+           });
+         })
+
          .post(apiAuthenticationMiddleware, checkMT, (req, res, next) => {
            const campaign = new CampaignModel(req.body);
            // timestamp and default are set automatically by Mongoose Schema Validation

static/src/app/services/logs/campaign.service.ts

@@ -13,6 +13,11 @@ export class CampaignService {
   }
 
   getAllCampaigns() {
+    return this.http.get(this.config.apiCampaignPath)
+               .map(res => res.json());
+  }
+
+  getAllCampaignsWithWars() {
     return this.http.get(this.config.apiWarPath)
                .map(res => res.json());
   }

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

@@ -30,7 +30,6 @@
 }
 
 .campaign-entry {
-  width: fit-content;
   border: 1px solid #dadada;
   min-width: 20%;
   padding: 15px;

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

@@ -9,27 +9,15 @@
   <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 class="campaign-entry"
+       *ngFor="let campaign of campaigns"
+       (click)="selectCampaign(campaign._id)">
+    {{campaign.title}}
   </div>
 </div>
 
 <div class="scroll-btn scroll-btn-right"
+     *ngIf="isRightScrollVisible"
      (mouseenter)="setRepeater(10)"
      (mouseleave)="clearRepeater()">
   <mat-icon svgIcon="chevron-right"></mat-icon>

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

@@ -1,4 +1,7 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
+import {CampaignService} from '../../../services/logs/campaign.service';
+import {Campaign} from '../../../models/model-interfaces';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'campaign-navigation',
@@ -7,23 +10,50 @@ import {Component, ElementRef, ViewChild} from '@angular/core';
 })
 export class CampaignNavigationComponent {
 
+  campaigns: Campaign[];
+
   @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
 
   isLeftScrollVisible = false;
 
+  isRightScrollVisible = true;
+
   repeater;
 
-  constructor() {
+  constructor(private campaignService: CampaignService,
+              private route: ActivatedRoute,
+              private router: Router) {
+  }
+
+  ngOnInit() {
+    this.campaignService.getAllCampaigns().subscribe((campaigns) => {
+      this.campaigns = campaigns;
+      this.isRightScrollVisible = campaigns.length > 4;
+    })
   }
 
   public scrollList(scrollValue: number): void {
+    const prevScrollLeftValue = this.panel.nativeElement.scrollLeft;
+
     this.panel.nativeElement.scrollLeft += scrollValue;
-    if (this.panel.nativeElement.scrollLeft > 0) {
-      this.isLeftScrollVisible = true
+
+    const updatedScrollLeftValue = this.panel.nativeElement.scrollLeft;
+
+    if (scrollValue < 0) {
+      this.isRightScrollVisible = true;
+    }
+
+    if (updatedScrollLeftValue > 0) {
+      if (prevScrollLeftValue === updatedScrollLeftValue) {
+        this.isRightScrollVisible = false;
+        this.clearRepeater();
+      }
+      this.isLeftScrollVisible = true;
     } else {
       this.isLeftScrollVisible = false;
       this.clearRepeater();
     }
+
   }
 
   setRepeater(value: number) {
@@ -33,4 +63,9 @@ export class CampaignNavigationComponent {
   clearRepeater() {
     clearInterval(this.repeater)
   }
+
+  selectCampaign(campaignId) {
+    console.log(campaignId)
+    this.router.navigate([{outlets: {'primary': ['/campaign', campaignId]}}], {relativeTo: this.route});
+  }
 }

static/src/app/statistic/campaign/highscore/highscore.component.ts

@@ -45,7 +45,8 @@ export class StatisticHighScoreComponent implements OnInit {
           if (this.campaignService.campaigns) {
             this.initData();
           } else {
-            this.campaignService.getAllCampaigns().subscribe(campaigns => {
+            this.campaignService.getAllCampaignsWithWars().subscribe(campaigns => {
+              this.campaignService.campaigns = campaigns;
               this.initData();
             });
           }

static/src/app/statistic/campaign/overview/stats-overview.component.ts

@@ -50,7 +50,7 @@ export class StatisticOverviewComponent implements OnInit {
           if (this.campaignService.campaigns) {
             this.initWars(this.campaignService.campaigns);
           } else {
-            this.campaignService.getAllCampaigns().subscribe(campaigns => {
+            this.campaignService.getAllCampaignsWithWars().subscribe(campaigns => {
               this.initWars(campaigns);
             });
           }

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

@@ -27,7 +27,7 @@ export class WarListComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.campaignService.getAllCampaigns().subscribe((items) => {
+    this.campaignService.getAllCampaignsWithWars().subscribe((items) => {
       const subPathWar = 'war/';
       const subPathOverview = 'overview/';
       this.campaignService.campaigns = items;