hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
static/src/app/app.component.html
View File

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

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

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

36
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css Normal file
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;
}

37
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html Normal file
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>

37
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts Normal file
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)
}
}

9
static/src/app/statistic/stats.routing.ts
View File

@ -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 = [{
@ -24,6 +25,11 @@ export const statsRoutes: Routes = [{
}
]
},
{
path: 'top',
component: CampaignNavigationComponent,
outlet: 'top'
},
{
path: 'overview/:id',
component: StatisticOverviewComponent,
@ -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];