From 6ac4fc5a663c1c1e5c4aeb9476c04f3e68782425 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sat, 21 Jul 2018 12:03:50 +0200
Subject: [PATCH] Add and connect new page for rank/decoration trace

---
 static/src/app/app.module.ts                  |  4 +-
 .../decoration-overview.component.css         |  8 ++--
 .../decoration-overview.component.html        | 21 +++++----
 .../decoration-overview.component.ts          |  7 +++
 .../decoration-panel.component.css            |  1 +
 .../decoration-panel.component.html           |  2 +-
 .../decoration-panel.component.ts             |  9 ++--
 static/src/app/pub/public.module.ts           |  3 +-
 static/src/app/pub/public.routing.ts          |  8 +++-
 .../rank-overview/rank-overview.component.css |  1 +
 .../rank-overview.component.html              |  4 +-
 .../rank-overview/rank-overview.component.ts  |  9 +++-
 .../trace-overview.component.css              |  0
 .../trace-overview.component.html             |  0
 .../trace-overview.component.ts               | 46 +++++++++++++++++++
 .../app/services/army-service/army.service.ts |  1 -
 .../army-service/data-trace.service.ts        | 16 +++++++
 17 files changed, 116 insertions(+), 24 deletions(-)
 create mode 100644 static/src/app/pub/trace-overview/trace-overview.component.css
 create mode 100644 static/src/app/pub/trace-overview/trace-overview.component.html
 create mode 100644 static/src/app/pub/trace-overview/trace-overview.component.ts
 create mode 100644 static/src/app/services/army-service/data-trace.service.ts

diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts
index 5c8f9c6..c92e571 100644
--- a/static/src/app/app.module.ts
+++ b/static/src/app/app.module.ts
@@ -26,6 +26,7 @@ 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,
@@ -51,7 +52,8 @@ import {MatSnackBarModule} from '@angular/material';
     routingProviders,
     CookieService,
     SnackBarService,
-    SpinnerService
+    SpinnerService,
+    DataTraceService,
   ],
   declarations: [
     AppComponent,
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 5c1c52a..5dfee0c 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.css
+++ b/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 {
@@ -29,12 +29,12 @@ h1, h3 {
   float: left;
   width: 50%;
   padding-right:81px;
-  margin-bottom: 135px;
+  margin-bottom: 70px;
 }
 
 .fraction-right {
   float: right;
   width: 50%;
   padding-left:81px;
-  margin-bottom: 135px;
+  margin-bottom: 70px;
 }
diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.html b/static/src/app/pub/decoration-overview/decoration-overview.component.html
index 6c36c11..4d95372 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.html
+++ b/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>
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 470d04d..e06d9a6 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
@@ -7,6 +7,7 @@ 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({
@@ -29,6 +30,7 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
   constructor(private router: Router,
               private route: ActivatedRoute,
               private decorationService: DecorationService,
+              private dataTraceService: DataTraceService,
               @Inject(DOCUMENT) private document) {
   }
 
@@ -45,6 +47,11 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
         });
   };
 
+  select(decoration: Decoration) {
+    this.dataTraceService.setData(decoration);
+    this.router.navigate(['../find'], {relativeTo: this.route});
+  }
+
   ngOnDestroy() {
     if (!this.router.url.includes(RouteConfig.overviewPath)) {
       this.document.getElementById('right').setAttribute('style', '');
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 0bf1ca2..189a0ea 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
@@ -6,6 +6,7 @@
   padding: 0;
   overflow: hidden;
   float: left;
+  cursor: pointer;
 }
 
 .decoration-card:hover {
diff --git a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html
index 592bc22..4886e5d 100644
--- a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html
+++ b/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}}"
diff --git a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts
index 15229e9..c702f30 100644
--- a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts
+++ b/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);
   }
 }
diff --git a/static/src/app/pub/public.module.ts b/static/src/app/pub/public.module.ts
index 428b60b..8afb257 100644
--- a/static/src/app/pub/public.module.ts
+++ b/static/src/app/pub/public.module.ts
@@ -6,11 +6,12 @@ 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]
+  providers: [DecorationService, RankService, DataTraceService]
 })
 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 1ea1d84..2d88614 100644
--- a/static/src/app/pub/public.routing.ts
+++ b/static/src/app/pub/public.routing.ts
@@ -4,6 +4,7 @@ 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';
 
 export const publicRoutes: Routes = [
   {
@@ -16,10 +17,15 @@ export const publicRoutes: Routes = [
     component: DecorationOverviewComponent,
     outlet: 'right'
   },
+  {
+    path: 'find',
+    component: TraceOverviewComponent,
+    outlet: 'right'
+  },
 ];
 
 export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
 
 export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent,
-  DecorationPanelComponent];
+  DecorationPanelComponent, TraceOverviewComponent];
 
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 17e3841..87f66c8 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.css
+++ b/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 {
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 53d75df..b208e7b 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.html
+++ b/static/src/app/pub/rank-overview/rank-overview.component.html
@@ -17,7 +17,7 @@
       </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>
 
@@ -37,7 +37,7 @@
       </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>
 
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 45f7989..53f59e0 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.ts
+++ b/static/src/app/pub/rank-overview/rank-overview.component.ts
@@ -3,9 +3,10 @@ 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 {AppConfig, 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({
@@ -26,6 +27,7 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
   constructor(private router: Router,
               private route: ActivatedRoute,
               private rankService: RankService,
+              private dataTraceService: DataTraceService,
               @Inject(DOCUMENT) private document) {
   }
 
@@ -41,6 +43,11 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
         });
   };
 
+  selectRow(row: Rank) {
+    this.dataTraceService.setData(row);
+    this.router.navigate(['../find'], {relativeTo: this.route});
+  }
+
 
   ngOnDestroy() {
     if (!this.router.url.includes(RouteConfig.overviewPath)) {
diff --git a/static/src/app/pub/trace-overview/trace-overview.component.css b/static/src/app/pub/trace-overview/trace-overview.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/static/src/app/pub/trace-overview/trace-overview.component.html b/static/src/app/pub/trace-overview/trace-overview.component.html
new file mode 100644
index 0000000..e69de29
diff --git a/static/src/app/pub/trace-overview/trace-overview.component.ts b/static/src/app/pub/trace-overview/trace-overview.component.ts
new file mode 100644
index 0000000..18b519b
--- /dev/null
+++ b/static/src/app/pub/trace-overview/trace-overview.component.ts
@@ -0,0 +1,46 @@
+import {Component, Inject, Input, 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 {RankService} from '../../services/army-management/rank.service';
+import {DataTraceService} from '../../services/army-service/data-trace.service';
+import {Decoration, Rank} from '../../models/model-interfaces';
+
+
+@Component({
+  selector: 'cc-trace-overview',
+  templateUrl: './trace-overview.component.html',
+  styleUrls: ['./trace-overview.component.css']
+})
+export class TraceOverviewComponent implements OnInit, OnDestroy {
+
+  traceItem: Rank | Decoration;
+
+  displayedColumns: string[] = ['picture', 'name'];
+
+  readonly fraction = Fraction;
+
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              private rankService: RankService,
+              private dataTraceService: DataTraceService,
+              @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'));
+
+    console.log(typeof this.traceItem);
+  };
+
+
+  ngOnDestroy() {
+    if (!this.router.url.includes(RouteConfig.overviewPath)) {
+      this.document.getElementById('right').setAttribute('style', '');
+    }
+  }
+}
diff --git a/static/src/app/services/army-service/army.service.ts b/static/src/app/services/army-service/army.service.ts
index cba89a5..bf2d90c 100644
--- a/static/src/app/services/army-service/army.service.ts
+++ b/static/src/app/services/army-service/army.service.ts
@@ -16,4 +16,3 @@ export class ArmyService {
   }
 
 }
-
diff --git a/static/src/app/services/army-service/data-trace.service.ts b/static/src/app/services/army-service/data-trace.service.ts
new file mode 100644
index 0000000..818e2bb
--- /dev/null
+++ b/static/src/app/services/army-service/data-trace.service.ts
@@ -0,0 +1,16 @@
+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;
+  }
+}