Add army-member detail view, modify army-overview design

api/middleware/auth-middleware.js

@@ -1,4 +1,4 @@
-"use strict"
+"use strict";
 
 const jwt = require('jsonwebtoken');
 const config = require('../config/config');

api/routes/decorations.js

@@ -31,7 +31,7 @@ decoration.route('/')
     if (req.query.q) {
       filter.name = {$regex: req.query.q, $options: 'i'}
     }
-    DecorationModel.find(filter, {}, {sort: {fraction: 'asc', sortingNumber: 'asc'}}, (err, items) => {
+    DecorationModel.find(filter, {}, {sort: {fraction: 'asc', sortingNumber: 'asc', name: 'asc'}}, (err, items) => {
       if (err) {
         err.status = codes.servererror;
         return next(err);

static/src/app/app.routing.ts

@@ -6,12 +6,12 @@ import {usersRoutes, usersRoutingComponents} from "./users/users.routing";
 import {squadsRoutes, squadsRoutingComponents} from "./squads/squads.routing";
 import {decorationsRoutes, decorationsRoutingComponents} from "./decorations/decoration.routing";
 import {ranksRoutes, ranksRoutingComponents} from "./ranks/ranks.routing";
-import {ArmyComponent} from "./army/army.component";
+import {armyRoutes, armyRoutingComponents} from "./army/army.routing";
 
 
 export const appRoutes: Routes = [
 
-  {path: 'cc-overview', component: ArmyComponent},
+  {path: 'cc-overview', children: armyRoutes},
 
   {path: 'login', component: LoginComponent},
   {path: 'cc-users', children: usersRoutes, canActivate: [LoginGuard]},
@@ -28,7 +28,7 @@ export const appRoutes: Routes = [
 
 export const appRouting = RouterModule.forRoot(appRoutes);
 
-export const routingComponents = [LoginComponent, ArmyComponent, NotFoundComponent, ...usersRoutingComponents,
+export const routingComponents = [LoginComponent, ...armyRoutingComponents , NotFoundComponent, ...usersRoutingComponents,
   ...squadsRoutingComponents, ...decorationsRoutingComponents, ...ranksRoutingComponents];
 
 export const routingProviders = [LoginGuard];

static/src/app/army/army-member.component.css

@@ -0,0 +1,39 @@
+.overview {
+  position: fixed;
+  width: 75%;
+  padding-left: 50px;
+  padding-top: 20px;
+  margin-left: 10px;
+  height: 100vh;
+}
+
+.table {
+  overflow-wrap: break-word;
+  table-layout: fixed;
+}
+
+.table-container {
+  margin-top: 10px;
+  overflow-x: auto;
+}
+
+.opfor {
+  color: firebrick;
+  margin: 40px 0 40px 0;
+  font-weight: 600
+}
+
+.blufor {
+  color: blue;
+  margin: 40px 0 40px 0;
+  font-weight: 600
+}
+
+.table-head {
+  background: #222222;
+  color: white;
+}
+
+.cell-outline {
+  outline:1px solid #D4D4D4;
+}

static/src/app/army/army-member.component.html

@@ -0,0 +1,43 @@
+<span class="btn btn-default" style="margin-top: 20px" (click)="backToOverview()">< zurück zur Übersicht</span>
+
+<div class="overview">
+
+  <h3 [ngClass]="user.squad?.fraction === 'BLUFOR' ? 'blufor' : 'opfor'">Auszeichnungen von {{user.rank?.name}}
+    {{user.username}}</h3>
+
+  <div class="pull-left" style="margin-top:20px;">
+    <div class="table-container">
+      <table class="table table-hover">
+        <thead>
+        <tr class="table-head">
+          <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
+          <th class="col-sm-2">Bezeichnung</th>
+          <th class="col-sm-2">Begründung</th>
+          <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
+        </tr>
+        </thead>
+        <tbody *ngFor="let award of user.awards">
+        <tr class="cell-outline">
+          <td class="text-center" *ngIf="award.decorationId.isMedal">
+            <img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
+          </td>
+          <td class="text-center" *ngIf="!award.decorationId.isMedal">
+            <img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
+          </td>
+          <td style="font-weight: bold">
+            {{award.decorationId.name}}
+          </td>
+          <td>
+            {{award.reason}}
+          </td>
+          <td class="text-right">
+            <span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </div>
+
+</div>

static/src/app/army/army-member.component.ts

@@ -0,0 +1,39 @@
+import {Component} from "@angular/core";
+import {User} from "../models/model-interfaces";
+import {ActivatedRoute, Router} from "@angular/router";
+import {UserService} from "../services/user-service/user.service";
+import {Subscription} from "rxjs/Subscription";
+
+
+@Component({
+  selector: 'army-member',
+  templateUrl: './army-member.component.html',
+  styleUrls: ['./army-member.component.css']
+})
+export class ArmyMemberComponent {
+
+  subscription: Subscription;
+
+  user: User = {};
+
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              private userService: UserService) {
+  }
+
+  ngOnInit() {
+    this.subscription = this.route.params
+      .map(params => params['id'])
+      .filter(id => id != undefined)
+      .flatMap(id => this.userService.getUser(id))
+      .subscribe(user => {
+        this.user = user;
+      });
+
+  };
+
+  backToOverview() {
+    this.router.navigate(['cc-overview']);
+  }
+
+}

static/src/app/army/army.component.css

@@ -15,7 +15,6 @@ img{
   border-radius: 10px;
   margin-left: 1%;
   width: auto;
-  background-color: rgba(240, 248, 255, 0.29);
   border-spacing: 5px; /* cellspacing:poor IE support for  this */
 }
 
@@ -30,3 +29,21 @@ img{
   display: table-column;
   padding: 5px 15px 5px 15px;
 }
+
+.army-head {
+  font-weight: bolder;
+  text-align: center
+}
+
+.member-link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.text-opfor {
+  color: blue;
+}
+
+.text-blufor {
+  color: firebrick;
+}

static/src/app/army/army.component.html

@@ -3,8 +3,8 @@
 <div style="width: 1000px;">
 
   <div class="div-table" style="width: 490px; float:left">
-    <h3 style="color: darkslateblue; font-weight: bolder; text-align: center;">NATO</h3>
+    <h3 class="text-blufor army-head">NATO</h3>
-    <div *ngFor="let squad of army.NATO.squads">
+    <div *ngFor="let squad of army.NATO.squads" style="outline:1px solid #D4D4D4;">
       <div class="div-table-row">
 
         <div class="div-table-col">
@@ -14,9 +14,9 @@
           <div class=" div-table-row">
             <h4>{{squad.name}}</h4>
           </div>
-          <div class=" div-table-row">
+          <div class=" div-table-row" style="padding-left: 8px">
             <div *ngFor="let member of squad.members">
-              <div>{{member.rank}} {{member.username}}</div>
+              <div class="member-link text-blufor" (click)="select(member._id)">{{member.rank}} {{member.username}}</div>
             </div>
             <br>
             <br>
@@ -31,8 +31,8 @@
   </div>
 
   <div class="div-table" style="width: 490px; float:right">
-    <h3 style="color: firebrick; font-weight: bolder; text-align: center">CSAT</h3>
+    <h3 class="text-opfor army-head">CSAT</h3>
-    <div *ngFor="let squad of army.CSAT.squads">
+    <div *ngFor="let squad of army.CSAT.squads" style="outline:1px solid #D4D4D4;">
       <div class="div-table-row">
 
         <div class="div-table-col">
@@ -44,7 +44,7 @@
           </div>
           <div class=" div-table-row">
             <div *ngFor="let member of squad.members">
-              <div>{{member.rank}} {{member.username}}</div>
+              <div class="member-link text-opfor" (click)="select(member._id)">{{member.rank}} {{member.username}}</div>
             </div>
             <br>
             <br>

static/src/app/army/army.component.ts

@@ -1,6 +1,7 @@
 import {Component} from "@angular/core";
 import {Army} from "../models/model-interfaces";
 import {ArmyService} from "../services/army-service/army.service";
+import {ActivatedRoute, Router} from "@angular/router";
 
 
 @Component({
@@ -12,7 +13,9 @@ export class ArmyComponent {
 
   army: Army = {NATO: {squads: [], memberCount: 0}, CSAT: {squads: [], memberCount: 0}};
 
-  constructor(private armyService: ArmyService) {
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              private armyService: ArmyService) {
   }
 
   ngOnInit() {
@@ -21,4 +24,9 @@ export class ArmyComponent {
         this.army = army;
       });
   };
+
+  select(memberId) {
+    this.router.navigate(['member', memberId], {relativeTo: this.route});
+  }
+
 }

static/src/app/army/army.routing.ts

@@ -0,0 +1,18 @@
+import {Routes} from "@angular/router";
+import {ArmyComponent} from "./army.component";
+import {ArmyMemberComponent} from "./army-member.component";
+
+
+export const armyRoutes: Routes = [
+  {
+    path: '',
+    component: ArmyComponent
+  },
+  {
+    path: 'member/:id',
+    component: ArmyMemberComponent,
+  }
+];
+
+export const armyRoutingComponents = [ArmyComponent, ArmyMemberComponent];
+

static/src/app/users/award-user/award-user.component.ts

@@ -10,7 +10,7 @@ import {DecorationService} from "../../services/decoration-service/decoration.se
   templateUrl: './award-user.component.html',
   styleUrls: ['./award-user.component.css'],
 })
-export class UserAwardComponent {
+export class AwardUserComponent {
 
   @ViewChild(NgForm) form: NgForm;
 

static/src/app/users/user-list/user-item.component.css

@@ -3,5 +3,5 @@
   width: 27px;
   height: 42px;
   display: block;
-  margin-right: 12px;
+  margin-right: 25px;
 }

static/src/app/users/users.routing.ts

@@ -2,7 +2,7 @@ import {Routes} from "@angular/router";
 import {UsersComponent} from "./users.component";
 import {EditUserComponent} from "./edit-user/edit-user.component";
 import {UserListComponent} from "./user-list/user-list.component";
-import {UserAwardComponent} from "./award-user/award-user.component";
+import {AwardUserComponent} from "./award-user/award-user.component";
 
 export const usersRoutes: Routes = [{
   path: '', component: UsersComponent,
@@ -25,9 +25,9 @@ export const usersRoutes: Routes = [{
   },
   {
     path: 'award/:id',
-    component: UserAwardComponent,
+    component: AwardUserComponent,
     outlet: 'right'
   }
 ];
 
-export const usersRoutingComponents = [UsersComponent, UserListComponent, EditUserComponent, UserAwardComponent];
+export const usersRoutingComponents = [UsersComponent, UserListComponent, EditUserComponent, AwardUserComponent];