Compare commits
No commits in common. "78cc61232ba2ec0e5920d01bb7e4b5d584a10b12" and "ed87dd5df18fedee9151a7afa8f85219ed3d7d90" have entirely different histories.
78cc61232b
...
ed87dd5df1
|
@ -51,7 +51,7 @@ import {MatSnackBarModule} from '@angular/material';
|
|||
routingProviders,
|
||||
CookieService,
|
||||
SnackBarService,
|
||||
SpinnerService,
|
||||
SpinnerService
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
|
|
|
@ -6,9 +6,10 @@ import {Subscription} from 'rxjs/Subscription';
|
|||
import {RouteConfig} from '../../app.config';
|
||||
import {AwardingService} from '../../services/army-management/awarding.service';
|
||||
import {Fraction} from '../../utils/fraction.enum';
|
||||
import {DOCUMENT, Location} from '@angular/common';
|
||||
import {DOCUMENT} from '@angular/common';
|
||||
import {CSSHelpers} from '../../utils/global.helpers';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'army-member',
|
||||
templateUrl: './army-member.component.html',
|
||||
|
@ -32,7 +33,6 @@ export class ArmyMemberComponent implements OnInit, OnDestroy {
|
|||
private route: ActivatedRoute,
|
||||
private userService: UserService,
|
||||
private awardingService: AwardingService,
|
||||
private location: Location,
|
||||
@Inject(DOCUMENT) private document) {
|
||||
}
|
||||
|
||||
|
@ -61,6 +61,7 @@ export class ArmyMemberComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
backToOverview() {
|
||||
this.location.back();
|
||||
this.router.navigate([RouteConfig.overviewPath]);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -13,12 +13,12 @@ h1, h3 {
|
|||
.decoration-overview-container {
|
||||
max-width: 1782px;
|
||||
min-width: 927px;
|
||||
margin:auto;
|
||||
position: relative;
|
||||
margin: auto auto 25px;
|
||||
}
|
||||
|
||||
.fraction-global {
|
||||
display: inline-block;
|
||||
display: flow-root;
|
||||
}
|
||||
|
||||
.fraction-global > h3 {
|
||||
|
@ -28,13 +28,13 @@ h1, h3 {
|
|||
.fraction-left {
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding-right: 81px;
|
||||
margin-bottom: 70px;
|
||||
padding-right:81px;
|
||||
margin-bottom: 135px;
|
||||
}
|
||||
|
||||
.fraction-right {
|
||||
float: right;
|
||||
width: 50%;
|
||||
padding-left: 81px;
|
||||
margin-bottom: 70px;
|
||||
padding-left:81px;
|
||||
margin-bottom: 135px;
|
||||
}
|
||||
|
|
|
@ -1,27 +1,24 @@
|
|||
<div class="decoration-overview-container">
|
||||
<h1>Übersicht über alle Auszeichnungen</h1>
|
||||
|
||||
<div class="fraction-global">
|
||||
<h3>Global</h3>
|
||||
<cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
|
||||
[decoration]="decoration">
|
||||
</cc-decoration-panel>
|
||||
</div>
|
||||
|
||||
<div class="fraction-left">
|
||||
<h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
|
||||
<cc-decoration-panel *ngFor="let decoration of decorationsBlufor"
|
||||
[decoration]="decoration"
|
||||
(select)="select($event)">
|
||||
[decoration]="decoration">
|
||||
</cc-decoration-panel>
|
||||
</div>
|
||||
|
||||
<div class="fraction-right">
|
||||
<h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
|
||||
<cc-decoration-panel *ngFor="let decoration of decorationsOpfor"
|
||||
[decoration]="decoration"
|
||||
(select)="select($event)">
|
||||
</cc-decoration-panel>
|
||||
</div>
|
||||
|
||||
<div class="fraction-global">
|
||||
<h3>Global</h3>
|
||||
<cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
|
||||
[decoration]="decoration"
|
||||
(select)="select($event)">
|
||||
[decoration]="decoration">
|
||||
</cc-decoration-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -45,10 +45,6 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
|
|||
});
|
||||
};
|
||||
|
||||
select(decoration: Decoration) {
|
||||
this.router.navigate(['../find/award', decoration._id], {relativeTo: this.route});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (!this.router.url.includes(RouteConfig.overviewPath)) {
|
||||
this.document.getElementById('right').setAttribute('style', '');
|
||||
|
|
|
@ -6,7 +6,6 @@
|
|||
padding: 0;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.decoration-card:hover {
|
||||
|
@ -15,10 +14,6 @@
|
|||
box-shadow: 0 0 18px 2px #666666;
|
||||
}
|
||||
|
||||
.decoration-description {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.decoration-card:hover .decoration-description {
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<mat-card class="decoration-card" (click)="selectDecoration()">
|
||||
<mat-card class="decoration-card">
|
||||
<div class="image-head">
|
||||
<img src="resource/decoration/{{decoration._id}}.png"
|
||||
alt="{{decoration.name}}"
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {Component, Input} from '@angular/core';
|
||||
|
||||
import {Decoration} from '../../../models/model-interfaces';
|
||||
import {Fraction} from '../../../utils/fraction.enum';
|
||||
|
@ -11,13 +11,10 @@ import {Fraction} from '../../../utils/fraction.enum';
|
|||
})
|
||||
export class DecorationPanelComponent {
|
||||
|
||||
@Input() decoration: Decoration;
|
||||
|
||||
@Output() select = new EventEmitter();
|
||||
@Input() decoration: Decoration;
|
||||
|
||||
readonly fraction = Fraction;
|
||||
|
||||
selectDecoration() {
|
||||
this.select.emit(this.decoration);
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,8 +4,6 @@ import {ModuleWithProviders} from '@angular/core';
|
|||
import {DecorationOverviewComponent} from './decoration-overview/decoration-overview.component';
|
||||
import {PublicComponent} from './public.component';
|
||||
import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
|
||||
import {TraceOverviewComponent} from './trace-overview/trace-overview.component';
|
||||
import {RankPanelComponent} from './rank-overview/rank-panel/rank-panel.component';
|
||||
|
||||
export const publicRoutes: Routes = [
|
||||
{
|
||||
|
@ -18,20 +16,10 @@ export const publicRoutes: Routes = [
|
|||
component: DecorationOverviewComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
{
|
||||
path: 'find/rank/:id',
|
||||
component: TraceOverviewComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
{
|
||||
path: 'find/award/:id',
|
||||
component: TraceOverviewComponent,
|
||||
outlet: 'right'
|
||||
},
|
||||
];
|
||||
|
||||
export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
|
||||
|
||||
export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent,
|
||||
DecorationPanelComponent, TraceOverviewComponent, RankPanelComponent];
|
||||
DecorationPanelComponent];
|
||||
|
||||
|
|
|
@ -8,7 +8,6 @@ table {
|
|||
|
||||
:host /deep/ tr.mat-row:hover {
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
td > img {
|
||||
|
@ -26,6 +25,6 @@ h3 {
|
|||
}
|
||||
|
||||
.column-container {
|
||||
width: 48%;
|
||||
width:48%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
|
|
@ -7,17 +7,17 @@
|
|||
<table mat-table [dataSource]="ranksBlufor" class="mat-elevation-z8">
|
||||
|
||||
<ng-container matColumnDef="picture">
|
||||
<th mat-header-cell *matHeaderCellDef> Rankabzeichen</th>
|
||||
<th mat-header-cell *matHeaderCellDef> Rankabzeichen </th>
|
||||
<td mat-cell *matCellDef="let element"><img src="resource/rank/{{element._id}}.png"></td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Name</th>
|
||||
<th mat-header-cell *matHeaderCellDef> Name </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.name}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
@ -27,17 +27,17 @@
|
|||
<table mat-table [dataSource]="ranksOpfor" class="pull-right mat-elevation-z8">
|
||||
|
||||
<ng-container matColumnDef="picture">
|
||||
<th mat-header-cell *matHeaderCellDef> Rankabzeichen</th>
|
||||
<th mat-header-cell *matHeaderCellDef> Rankabzeichen </th>
|
||||
<td mat-cell *matCellDef="let element"><img src="resource/rank/{{element._id}}.png"></td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Name</th>
|
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td>
|
||||
<th mat-header-cell *matHeaderCellDef> Name </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.name}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -41,10 +41,6 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
|
|||
});
|
||||
};
|
||||
|
||||
selectRow(rank: Rank) {
|
||||
this.router.navigate(['../find/rank', rank._id], {relativeTo: this.route});
|
||||
}
|
||||
|
||||
|
||||
ngOnDestroy() {
|
||||
if (!this.router.url.includes(RouteConfig.overviewPath)) {
|
||||
|
|
|
@ -1,30 +0,0 @@
|
|||
.rank-card {
|
||||
background: rgba(255, 255, 255, 0.87);
|
||||
width: 275px;
|
||||
height: 160px;
|
||||
margin: 6px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rank-card:hover {
|
||||
background: #ffffff;
|
||||
overflow: visible;
|
||||
box-shadow: 0 0 18px 2px #666666;
|
||||
}
|
||||
|
||||
.rank-image {
|
||||
float: left;
|
||||
padding: 20px 20px 20px 25px;
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
width: 169px;
|
||||
height: 100%;
|
||||
display: table-cell;
|
||||
padding-top: 36%;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
|
@ -1,11 +0,0 @@
|
|||
<mat-card class="rank-card" (click)="selectRank()">
|
||||
<mat-card-content>
|
||||
<div class="rank-image">
|
||||
<img src="resource/rank/{{rank._id}}.png"
|
||||
alt="{{rank.name}}">
|
||||
</div>
|
||||
<div class="rank-name">
|
||||
{{rank.name}}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
|
@ -1,21 +0,0 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {Rank} from '../../../models/model-interfaces';
|
||||
import {Fraction} from '../../../utils/fraction.enum';
|
||||
|
||||
@Component({
|
||||
selector: 'cc-rank-panel',
|
||||
templateUrl: './rank-panel.component.html',
|
||||
styleUrls: ['./rank-panel.component.css']
|
||||
})
|
||||
export class RankPanelComponent {
|
||||
|
||||
@Input() rank: Rank;
|
||||
|
||||
@Output() select = new EventEmitter();
|
||||
|
||||
readonly fraction = Fraction;
|
||||
|
||||
selectRank() {
|
||||
this.select.emit(this.rank);
|
||||
}
|
||||
}
|
|
@ -1,37 +0,0 @@
|
|||
.tracer-container {
|
||||
text-align: center;
|
||||
max-width: 1100px;
|
||||
min-width: 800px;
|
||||
position: relative;
|
||||
margin: auto auto 25px;
|
||||
height: calc(100vh - 95px);
|
||||
}
|
||||
|
||||
.show-panel {
|
||||
display: inline-block;
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
.decoration-show-panel {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.user-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
table.mat-table {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
table.mat-table:hover {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
:host /deep/ tr.mat-row:hover {
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
|
@ -1,40 +0,0 @@
|
|||
<div class="tracer-container">
|
||||
<h1>Alle aktiven Teilnehmer mit {{isRank ? 'Rang' : 'Auszeichnung'}}</h1>
|
||||
|
||||
<div class="show-panel"
|
||||
*ngIf="isRank">
|
||||
<cc-rank-panel [rank]="traceItem">
|
||||
</cc-rank-panel>
|
||||
</div>
|
||||
<div class="show-panel decoration-show-panel"
|
||||
*ngIf="!isRank">
|
||||
<cc-decoration-panel [decoration]="traceItem">
|
||||
</cc-decoration-panel>
|
||||
</div>
|
||||
|
||||
<div class="user-table-container">
|
||||
<table mat-table [dataSource]="users" class="mat-elevation-z8">
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef>Name</th>
|
||||
<td mat-cell *matCellDef="let element">{{element.username}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="fraction">
|
||||
<th mat-header-cell *matHeaderCellDef>Fraktion</th>
|
||||
<td mat-cell *matCellDef="let element"
|
||||
[style.color]="traceItem.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR :fraction.COLOR_OPFOR">
|
||||
{{element.squadId.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="squadName">
|
||||
<th mat-header-cell *matHeaderCellDef>Squad</th>
|
||||
<td mat-cell *matCellDef="let element">{{element.squadId.name}}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectUser(row)"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
|
@ -1,74 +0,0 @@
|
|||
import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {DOCUMENT} from '@angular/common';
|
||||
import {Fraction} from '../../utils/fraction.enum';
|
||||
import {CSSHelpers} from '../../utils/global.helpers';
|
||||
import {RouteConfig} from '../../app.config';
|
||||
import {Decoration, Rank, User} from '../../models/model-interfaces';
|
||||
import {UserService} from '../../services/army-management/user.service';
|
||||
import {RankService} from '../../services/army-management/rank.service';
|
||||
import {DecorationService} from '../../services/army-management/decoration.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'cc-trace-overview',
|
||||
templateUrl: './trace-overview.component.html',
|
||||
styleUrls: ['./trace-overview.component.css']
|
||||
})
|
||||
export class TraceOverviewComponent implements OnInit, OnDestroy {
|
||||
|
||||
traceItem: Rank | Decoration = {};
|
||||
|
||||
users: User[];
|
||||
|
||||
isRank = true;
|
||||
|
||||
displayedColumns: string[] = ['name', 'fraction', 'squadName'];
|
||||
|
||||
readonly fraction = Fraction;
|
||||
|
||||
constructor(private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private userService: UserService,
|
||||
private rankService: RankService,
|
||||
private decorationService: DecorationService,
|
||||
@Inject(DOCUMENT) private document) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// set background image css
|
||||
this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
|
||||
this.route.params.subscribe(params => {
|
||||
const itemId = params.id;
|
||||
|
||||
if (this.router.url.includes('find/award/')) {
|
||||
// Award
|
||||
this.isRank = false;
|
||||
console.log(itemId);
|
||||
this.decorationService.getDecoration(itemId).subscribe(decoration => {
|
||||
this.traceItem = decoration;
|
||||
console.log(decoration)
|
||||
});
|
||||
} else if (this.router.url.includes('find/rank/')) {
|
||||
// Rank
|
||||
this.isRank = true;
|
||||
this.rankService.getRank(itemId).subscribe(rank => {
|
||||
this.traceItem = rank;
|
||||
this.userService.findUsers('', rank.fraction).subscribe(users => {
|
||||
this.users = users.filter(user => user.rankLvl === rank.level);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
selectUser(user) {
|
||||
this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (!this.router.url.includes(RouteConfig.overviewPath)) {
|
||||
this.document.getElementById('right').setAttribute('style', '');
|
||||
}
|
||||
}
|
||||
}
|
|
@ -37,7 +37,7 @@ export class RankService {
|
|||
return this.ranks$;
|
||||
}
|
||||
|
||||
getRank(id: number | string): Observable<Rank> {
|
||||
getRank(id: number | string): Observable<Decoration> {
|
||||
return this.http.get(this.config.apiRankPath + id)
|
||||
.map(res => res.json());
|
||||
}
|
||||
|
|
|
@ -16,3 +16,4 @@ export class ArmyService {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -113,4 +113,5 @@ export class CampaignPlayerDetailComponent implements OnInit {
|
|||
navigateBack() {
|
||||
this.switchTab.emit(0);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<ng-container matColumnDef="{{tableHead[1].prop}}">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head}}</th>
|
||||
<td mat-cell *matCellDef="let element">{{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</td>
|
||||
<td mat-cell *matCellDef="let element"> {{element.fraction}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
|
||||
|
@ -25,7 +25,7 @@
|
|||
matTooltip="{{column.head}}"
|
||||
alt="{{column.head}}">
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">{{element[column.prop]}}</td>
|
||||
<td mat-cell *matCellDef="let element"> {{element[column.prop]}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="interact">
|
||||
|
|
Loading…
Reference in New Issue