Add basic horizontal campaign navigation

pull/43/head
HardiReady 2018-07-27 07:20:57 +02:00
parent 0ef9a6aac2
commit da6037d001
6 changed files with 146 additions and 25 deletions

View File

@ -105,15 +105,20 @@
</div> </div>
<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" <div id="left"
[style.background]="leftBackground" [style.background]="leftBackground"

View File

@ -28,27 +28,26 @@ export class UserListSheetComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
if (this.data.decoration) { if (this.data.decoration) {
const itemId = this.data.decoration._id; const itemId = this.data.decoration._id;
this.decorationService.getDecoration(itemId).subscribe(decoration => { this.decorationService.getDecoration(itemId).subscribe(decoration => {
this.userService.findUsers({decorationId: decoration._id}).subscribe(users => { this.userService.findUsers({decorationId: decoration._id}).subscribe(users => {
this.users = users.filter(user => user.squadId != null); this.users = users.filter(user => user.squadId != null);
});
}); });
} else if (this.data.rank) { });
// Rank } else if (this.data.rank) {
const itemId = this.data.rank._id; // Rank
this.rankService.getRank(itemId).subscribe(rank => { const itemId = this.data.rank._id;
this.userService.findUsers({fraction: rank.fraction}).subscribe(users => { this.rankService.getRank(itemId).subscribe(rank => {
this.users = users.filter(user => user.squadId != null && user.rankLvl === rank.level); this.userService.findUsers({fraction: rank.fraction}).subscribe(users => {
}); this.users = users.filter(user => user.squadId != null && user.rankLvl === rank.level);
}); });
} });
}
} }
selectUser(user) { selectUser(user) {
this.bottomSheetRef.dismiss(); this.bottomSheetRef.dismiss();
event.preventDefault();
this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]); this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]);
} }
} }

View File

@ -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;
}

View File

@ -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>

View File

@ -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)
}
}

View File

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