diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index c92e571..401b2fb 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -26,7 +26,6 @@ import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.ser import {HttpClientModule} from '@angular/common/http'; import {SpinnerService} from './services/user-interface/spinner/spinner.service'; import {MatSnackBarModule} from '@angular/material'; -import {DataTraceService} from './services/army-service/data-trace.service'; @NgModule({ imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule, @@ -53,7 +52,6 @@ import {DataTraceService} from './services/army-service/data-trace.service'; CookieService, SnackBarService, SpinnerService, - DataTraceService, ], declarations: [ AppComponent, diff --git a/static/src/app/army/army-member/army-member.component.ts b/static/src/app/army/army-member/army-member.component.ts index 0777808..a8d5124 100644 --- a/static/src/app/army/army-member/army-member.component.ts +++ b/static/src/app/army/army-member/army-member.component.ts @@ -6,10 +6,9 @@ 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} from '@angular/common'; +import {DOCUMENT, Location} from '@angular/common'; import {CSSHelpers} from '../../utils/global.helpers'; - @Component({ selector: 'army-member', templateUrl: './army-member.component.html', @@ -33,6 +32,7 @@ export class ArmyMemberComponent implements OnInit, OnDestroy { private route: ActivatedRoute, private userService: UserService, private awardingService: AwardingService, + private location: Location, @Inject(DOCUMENT) private document) { } @@ -61,7 +61,6 @@ export class ArmyMemberComponent implements OnInit, OnDestroy { } backToOverview() { - this.router.navigate([RouteConfig.overviewPath]); + this.location.back(); } - } diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.css b/static/src/app/pub/decoration-overview/decoration-overview.component.css index 5dfee0c..c7d4078 100644 --- a/static/src/app/pub/decoration-overview/decoration-overview.component.css +++ b/static/src/app/pub/decoration-overview/decoration-overview.component.css @@ -28,13 +28,13 @@ h1, h3 { .fraction-left { float: left; width: 50%; - padding-right:81px; + padding-right: 81px; margin-bottom: 70px; } .fraction-right { float: right; width: 50%; - padding-left:81px; + padding-left: 81px; margin-bottom: 70px; } diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.ts b/static/src/app/pub/decoration-overview/decoration-overview.component.ts index e06d9a6..74cd180 100644 --- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts +++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts @@ -7,7 +7,6 @@ import {CSSHelpers} from '../../utils/global.helpers'; import {RouteConfig} from '../../app.config'; import {Decoration} from '../../models/model-interfaces'; import {DecorationService} from '../../services/army-management/decoration.service'; -import {DataTraceService} from '../../services/army-service/data-trace.service'; @Component({ @@ -30,7 +29,6 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy { constructor(private router: Router, private route: ActivatedRoute, private decorationService: DecorationService, - private dataTraceService: DataTraceService, @Inject(DOCUMENT) private document) { } @@ -48,8 +46,7 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy { }; select(decoration: Decoration) { - this.dataTraceService.setData(decoration); - this.router.navigate(['../find'], {relativeTo: this.route}); + this.router.navigate(['../find/award', decoration._id], {relativeTo: this.route}); } ngOnDestroy() { diff --git a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css index 189a0ea..ac859f5 100644 --- a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css +++ b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css @@ -15,6 +15,10 @@ box-shadow: 0 0 18px 2px #666666; } +.decoration-description { + text-align: left; +} + .decoration-card:hover .decoration-description { background: #ffffff; position: relative; diff --git a/static/src/app/pub/public.module.ts b/static/src/app/pub/public.module.ts index 8afb257..428b60b 100644 --- a/static/src/app/pub/public.module.ts +++ b/static/src/app/pub/public.module.ts @@ -6,12 +6,11 @@ import {pubRouterModule, pubRoutingComponents} from './public.routing'; import {DecorationService} from '../services/army-management/decoration.service'; import {MatTableModule} from '@angular/material/table'; import {MatCardModule} from '@angular/material/card'; -import {DataTraceService} from '../services/army-service/data-trace.service'; @NgModule({ declarations: pubRoutingComponents, imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, pubRouterModule], - providers: [DecorationService, RankService, DataTraceService] + providers: [DecorationService, RankService] }) export class PublicModule { static routes = pubRouterModule; diff --git a/static/src/app/pub/public.routing.ts b/static/src/app/pub/public.routing.ts index 2d88614..918c161 100644 --- a/static/src/app/pub/public.routing.ts +++ b/static/src/app/pub/public.routing.ts @@ -5,6 +5,7 @@ import {DecorationOverviewComponent} from './decoration-overview/decoration-over 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,7 +19,12 @@ export const publicRoutes: Routes = [ outlet: 'right' }, { - path: 'find', + path: 'find/rank/:id', + component: TraceOverviewComponent, + outlet: 'right' + }, + { + path: 'find/award/:id', component: TraceOverviewComponent, outlet: 'right' }, @@ -27,5 +33,5 @@ export const publicRoutes: Routes = [ export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes); export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent, - DecorationPanelComponent, TraceOverviewComponent]; + DecorationPanelComponent, TraceOverviewComponent, RankPanelComponent]; diff --git a/static/src/app/pub/rank-overview/rank-overview.component.css b/static/src/app/pub/rank-overview/rank-overview.component.css index 87f66c8..64dbb07 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.css +++ b/static/src/app/pub/rank-overview/rank-overview.component.css @@ -26,6 +26,6 @@ h3 { } .column-container { - width:48%; + width: 48%; padding-bottom: 20px; } diff --git a/static/src/app/pub/rank-overview/rank-overview.component.html b/static/src/app/pub/rank-overview/rank-overview.component.html index b208e7b..c7f792a 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.html +++ b/static/src/app/pub/rank-overview/rank-overview.component.html @@ -7,12 +7,12 @@ - + - + @@ -27,13 +27,13 @@
Rankabzeichen Rankabzeichen Name Name {{element.name}}
- + - - + + diff --git a/static/src/app/pub/rank-overview/rank-overview.component.ts b/static/src/app/pub/rank-overview/rank-overview.component.ts index 53f59e0..86c9139 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.ts +++ b/static/src/app/pub/rank-overview/rank-overview.component.ts @@ -3,10 +3,9 @@ import {ActivatedRoute, Router} from '@angular/router'; import {DOCUMENT} from '@angular/common'; import {Fraction} from '../../utils/fraction.enum'; import {CSSHelpers} from '../../utils/global.helpers'; -import {AppConfig, RouteConfig} from '../../app.config'; +import {RouteConfig} from '../../app.config'; import {Rank} from '../../models/model-interfaces'; import {RankService} from '../../services/army-management/rank.service'; -import {DataTraceService} from '../../services/army-service/data-trace.service'; @Component({ @@ -27,7 +26,6 @@ export class RankOverviewComponent implements OnInit, OnDestroy { constructor(private router: Router, private route: ActivatedRoute, private rankService: RankService, - private dataTraceService: DataTraceService, @Inject(DOCUMENT) private document) { } @@ -43,9 +41,8 @@ export class RankOverviewComponent implements OnInit, OnDestroy { }); }; - selectRow(row: Rank) { - this.dataTraceService.setData(row); - this.router.navigate(['../find'], {relativeTo: this.route}); + selectRow(rank: Rank) { + this.router.navigate(['../find/rank', rank._id], {relativeTo: this.route}); } diff --git a/static/src/app/pub/rank-overview/rank-panel/rank-panel.component.css b/static/src/app/pub/rank-overview/rank-panel/rank-panel.component.css new file mode 100644 index 0000000..aa22681 --- /dev/null +++ b/static/src/app/pub/rank-overview/rank-panel/rank-panel.component.css @@ -0,0 +1,30 @@ +.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; +} diff --git a/static/src/app/pub/rank-overview/rank-panel/rank-panel.component.html b/static/src/app/pub/rank-overview/rank-panel/rank-panel.component.html new file mode 100644 index 0000000..69816f0 --- /dev/null +++ b/static/src/app/pub/rank-overview/rank-panel/rank-panel.component.html @@ -0,0 +1,11 @@ + + +
+ {{rank.name}} +
+
+ {{rank.name}} +
+
+
diff --git a/static/src/app/pub/rank-overview/rank-panel/rank-panel.component.ts b/static/src/app/pub/rank-overview/rank-panel/rank-panel.component.ts new file mode 100644 index 0000000..03b93f1 --- /dev/null +++ b/static/src/app/pub/rank-overview/rank-panel/rank-panel.component.ts @@ -0,0 +1,21 @@ +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); + } +} diff --git a/static/src/app/pub/trace-overview/trace-overview.component.css b/static/src/app/pub/trace-overview/trace-overview.component.css index e69de29..64ce27a 100644 --- a/static/src/app/pub/trace-overview/trace-overview.component.css +++ b/static/src/app/pub/trace-overview/trace-overview.component.css @@ -0,0 +1,37 @@ +.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; +} diff --git a/static/src/app/pub/trace-overview/trace-overview.component.html b/static/src/app/pub/trace-overview/trace-overview.component.html index e69de29..2ad81fb 100644 --- a/static/src/app/pub/trace-overview/trace-overview.component.html +++ b/static/src/app/pub/trace-overview/trace-overview.component.html @@ -0,0 +1,40 @@ +
+

Alle aktiven Teilnehmer mit {{isRank ? 'Rang' : 'Auszeichnung'}}

+ +
+ + +
+
+ + +
+ +
+
Rankabzeichen Rankabzeichen Name {{element.name}} Name{{element.name}}
+ + + + + + + + + + + + + + + + + + +
Name{{element.username}}Fraktion + {{element.squadId.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} + Squad{{element.squadId.name}}
+ + diff --git a/static/src/app/pub/trace-overview/trace-overview.component.ts b/static/src/app/pub/trace-overview/trace-overview.component.ts index 20b030d..96c8b64 100644 --- a/static/src/app/pub/trace-overview/trace-overview.component.ts +++ b/static/src/app/pub/trace-overview/trace-overview.component.ts @@ -1,12 +1,13 @@ -import {Component, Inject, Input, OnDestroy, OnInit} from '@angular/core'; +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 {DataTraceService} from '../../services/army-service/data-trace.service'; -import {Decoration, Rank} from '../../models/model-interfaces'; +import {DecorationService} from '../../services/army-management/decoration.service'; @Component({ @@ -16,36 +17,54 @@ import {Decoration, Rank} from '../../models/model-interfaces'; }) export class TraceOverviewComponent implements OnInit, OnDestroy { - traceItem: Rank | Decoration; + traceItem: Rank | Decoration = {}; - displayedColumns: string[] = ['picture', 'name']; + 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 dataTraceService: DataTraceService, + private decorationService: DecorationService, @Inject(DOCUMENT) private document) { - this.traceItem = this.dataTraceService.getData(); } 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.traceItem.hasOwnProperty('isMedal')) { - // Decoration - const decorationItem = this.traceItem - console.log("DECORATION"); - } else if (this.traceItem.hasOwnProperty('level')) { - // Rank - const rankItem = this.traceItem - console.log("RANK"); - } + 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)) { diff --git a/static/src/app/services/army-management/rank.service.ts b/static/src/app/services/army-management/rank.service.ts index 595f7f1..f704a46 100644 --- a/static/src/app/services/army-management/rank.service.ts +++ b/static/src/app/services/army-management/rank.service.ts @@ -37,7 +37,7 @@ export class RankService { return this.ranks$; } - getRank(id: number | string): Observable { + getRank(id: number | string): Observable { return this.http.get(this.config.apiRankPath + id) .map(res => res.json()); } diff --git a/static/src/app/services/army-service/data-trace.service.ts b/static/src/app/services/army-service/data-trace.service.ts deleted file mode 100644 index 818e2bb..0000000 --- a/static/src/app/services/army-service/data-trace.service.ts +++ /dev/null @@ -1,16 +0,0 @@ -import {Injectable} from '@angular/core'; -import {Decoration, Rank} from '../../models/model-interfaces'; - -@Injectable() -export class DataTraceService { - - data: Rank | Decoration = {}; - - setData(data: Rank | Decoration) { - this.data = data; - } - - getData(): Rank | Decoration { - return this.data; - } -} diff --git a/static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.ts b/static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.ts index 9ac834a..68b58bd 100644 --- a/static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.ts +++ b/static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.ts @@ -113,5 +113,4 @@ export class CampaignPlayerDetailComponent implements OnInit { navigateBack() { this.switchTab.emit(0); } - } diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html index 0adaf7d..c5b0e10 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html @@ -16,7 +16,7 @@ {{tableHead[1].head}} - {{element.fraction}} + {{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} @@ -25,7 +25,7 @@ matTooltip="{{column.head}}" alt="{{column.head}}"> - {{element[column.prop]}} + {{element[column.prop]}}