Add tracing result pages for ranks/awards and connect to user detail pages

static/src/app/app.module.ts

@@ -51,7 +51,7 @@ import {MatSnackBarModule} from '@angular/material';
     routingProviders,
     CookieService,
     SnackBarService,
-    SpinnerService
+    SpinnerService,
   ],
   declarations: [
     AppComponent,

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();
   }
-
 }

static/src/app/pub/decoration-overview/decoration-overview.component.css

@@ -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: flow-root;
+  display: inline-block;
 }
 
 .fraction-global > h3 {
@@ -28,13 +28,13 @@ h1, h3 {
 .fraction-left {
   float: left;
   width: 50%;
-  padding-right:81px;
-  margin-bottom: 135px;
+  padding-right: 81px;
+  margin-bottom: 70px;
 }
 
 .fraction-right {
   float: right;
   width: 50%;
-  padding-left:81px;
-  margin-bottom: 135px;
+  padding-left: 81px;
+  margin-bottom: 70px;
 }

static/src/app/pub/decoration-overview/decoration-overview.component.html

@@ -1,24 +1,27 @@
 <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">
+                         [decoration]="decoration"
+                         (select)="select($event)">
     </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">
+                         [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)">
     </cc-decoration-panel>
   </div>
 </div>

static/src/app/pub/decoration-overview/decoration-overview.component.ts

@@ -45,6 +45,10 @@ 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', '');

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css

@@ -6,6 +6,7 @@
   padding: 0;
   overflow: hidden;
   float: left;
+  cursor: pointer;
 }
 
 .decoration-card:hover {
@@ -14,6 +15,10 @@
   box-shadow: 0 0 18px 2px #666666;
 }
 
+.decoration-description {
+  text-align: left;
+}
+
 .decoration-card:hover .decoration-description {
   background: #ffffff;
   position: relative;

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html

@@ -1,4 +1,4 @@
-<mat-card class="decoration-card">
+<mat-card class="decoration-card" (click)="selectDecoration()">
   <div class="image-head">
     <img src="resource/decoration/{{decoration._id}}.png"
          alt="{{decoration.name}}"

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 
 import {Decoration} from '../../../models/model-interfaces';
 import {Fraction} from '../../../utils/fraction.enum';
@@ -11,10 +11,13 @@ import {Fraction} from '../../../utils/fraction.enum';
 })
 export class DecorationPanelComponent {
 
-   @Input() decoration: Decoration;
+  @Input() decoration: Decoration;
+
+  @Output() select = new EventEmitter();
 
   readonly fraction = Fraction;
 
-  constructor() {
+  selectDecoration() {
+    this.select.emit(this.decoration);
   }
 }

static/src/app/pub/public.routing.ts

@@ -4,6 +4,8 @@ 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 = [
   {
@@ -16,10 +18,20 @@ 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];
+  DecorationPanelComponent, TraceOverviewComponent, RankPanelComponent];
 

static/src/app/pub/rank-overview/rank-overview.component.css

@@ -8,6 +8,7 @@ table {
 
 :host /deep/ tr.mat-row:hover {
   background: #ffffff;
+  cursor: pointer;
 }
 
 td > img {
@@ -25,6 +26,6 @@ h3 {
 }
 
 .column-container {
-  width:48%;
+  width: 48%;
   padding-bottom: 20px;
 }

static/src/app/pub/rank-overview/rank-overview.component.html

@@ -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;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></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;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
     </table>
   </div>
 

static/src/app/pub/rank-overview/rank-overview.component.ts

@@ -41,6 +41,10 @@ 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)) {

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

static/src/app/pub/rank-overview/rank-panel/rank-panel.component.html

@@ -0,0 +1,11 @@
+<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>

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);
+  }
+}

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

static/src/app/pub/trace-overview/trace-overview.component.html

@@ -0,0 +1,40 @@
+<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>

static/src/app/pub/trace-overview/trace-overview.component.ts

@@ -0,0 +1,74 @@
+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', '');
+    }
+  }
+}

static/src/app/services/army-management/rank.service.ts

@@ -37,7 +37,7 @@ export class RankService {
     return this.ranks$;
   }
 
-  getRank(id: number | string): Observable<Decoration> {
+  getRank(id: number | string): Observable<Rank> {
     return this.http.get(this.config.apiRankPath + id)
                .map(res => res.json());
   }

static/src/app/services/army-service/army.service.ts

@@ -16,4 +16,3 @@ export class ArmyService {
   }
 
 }
-

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

static/src/app/statistic/war/scoreboard/scoreboard.component.html

@@ -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}}</td>
+      <td mat-cell *matCellDef="let element">{{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</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">