Finish campaign navigation behavior and load

pull/43/head
HardiReady 2018-07-28 16:04:38 +02:00
parent b93830993b
commit b2d18e5cd0
8 changed files with 73 additions and 25 deletions

View File

@ -24,6 +24,26 @@ const campaigns = new express.Router();
// routes ********************** // routes **********************
campaigns.route('/') 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) => { .post(apiAuthenticationMiddleware, checkMT, (req, res, next) => {
const campaign = new CampaignModel(req.body); const campaign = new CampaignModel(req.body);
// timestamp and default are set automatically by Mongoose Schema Validation // timestamp and default are set automatically by Mongoose Schema Validation
@ -45,7 +65,7 @@ campaigns.route('/')
campaigns.route('/:id') campaigns.route('/:id')
.get(idValidator, (req, res, next) => { .get(idValidator, (req, res, next) => {
return genericGetById(req, res, next, CampaignModel); return genericGetById(req, res, next, CampaignModel);
}) })
.patch(apiAuthenticationMiddleware, checkMT, (req, res, next) => { .patch(apiAuthenticationMiddleware, checkMT, (req, res, next) => {

View File

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

View File

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

View File

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

View File

@ -1,4 +1,7 @@
import {Component, ElementRef, ViewChild} from '@angular/core'; 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({ @Component({
selector: 'campaign-navigation', selector: 'campaign-navigation',
@ -7,23 +10,50 @@ import {Component, ElementRef, ViewChild} from '@angular/core';
}) })
export class CampaignNavigationComponent { export class CampaignNavigationComponent {
campaigns: Campaign[];
@ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>; @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
isLeftScrollVisible = false; isLeftScrollVisible = false;
isRightScrollVisible = true;
repeater; 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 { public scrollList(scrollValue: number): void {
const prevScrollLeftValue = this.panel.nativeElement.scrollLeft;
this.panel.nativeElement.scrollLeft += scrollValue; 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 { } else {
this.isLeftScrollVisible = false; this.isLeftScrollVisible = false;
this.clearRepeater(); this.clearRepeater();
} }
} }
setRepeater(value: number) { setRepeater(value: number) {
@ -33,4 +63,9 @@ export class CampaignNavigationComponent {
clearRepeater() { clearRepeater() {
clearInterval(this.repeater) clearInterval(this.repeater)
} }
selectCampaign(campaignId) {
console.log(campaignId)
this.router.navigate([{outlets: {'primary': ['/campaign', campaignId]}}], {relativeTo: this.route});
}
} }

View File

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

View File

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

View File

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