api/routes/users.js

@@ -91,11 +91,8 @@ users.route('/')
         return next(err);
       }
       res.status(codes.created);
-      getExtendedUser(user, next, (extUser) => {
+      res.locals.items = user;
-        res.locals.items = extUser;
+      next();
-        res.locals.processed = true;
-        return next();
-      })
     });
   })
 

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

@@ -15,10 +15,12 @@ export class ArmyComponent {
   constructor(private armyService: ArmyService) {
   }
 
+
   ngOnInit() {
     this.armyService.getArmy()
       .subscribe(army => {
         this.army = army;
+        console.log(army)
       });
   };
 }

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

@@ -20,7 +20,6 @@ export class AwardingService {
    */
   getUserAwardings(userId: string) {
     return this.http.get(this.config.apiUrl + this.config.apiAwardPath + '?userId=' + userId)
-      .map(res => res.json())
   }
 
   addAwarding(award) {

static/src/app/users/new-user/new-user.component.html

@@ -0,0 +1,27 @@
+<form #form="ngForm" class="overview">
+  <h3>Neuen Teilnehmer hinzufügen</h3>
+
+  <div class="form-group">
+    <label for="title">Name</label>
+    <input type="text" class="form-control"
+           [(ngModel)]="user.username"
+           name="title"
+           id="title"
+           required maxlength="50"/>
+
+    <show-error text="Name" path="title"></show-error>
+  </div>
+
+  <button id="cancel"
+          (click)="cancel()"
+          class="btn btn-default">
+    Abbrechen
+  </button>
+
+  <button id="save"
+          (click)="saveUser()"
+          class="btn btn-default"
+          [disabled]="!form.valid">
+    Teilnehmer hinzufügen
+  </button>
+</form>

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

@@ -0,0 +1,50 @@
+import {Component, ViewChild} from "@angular/core";
+import {ActivatedRoute, Router} from "@angular/router";
+import {NgForm} from "@angular/forms";
+import {User} from "../../models/model-interfaces";
+import {UserService} from "../../services/user-service/user.service";
+
+
+@Component({
+  templateUrl: './new-user.component.html',
+  styleUrls: ['./new-user.component.css', '../../style/new-entry-form.css']
+})
+export class CreateUserComponent {
+
+  user: User = {};
+
+  saved = false;
+
+  @ViewChild(NgForm) form: NgForm;
+
+  constructor(private route: ActivatedRoute,
+              private router: Router,
+              private userService: UserService) {
+  }
+
+  ngOnInit() {
+
+  }
+
+  saveUser() {
+    this.userService.submitUser(this.user)
+      .subscribe(user => {
+        this.saved = true;
+        this.router.navigate(['../overview', user._id], {relativeTo: this.route});
+      })
+  }
+
+  cancel() {
+    //this.location.back();
+    this.router.navigate(['/cc-users']);
+    return false;
+  }
+
+  canDeactivate(): boolean {
+    if (this.saved || !this.form.dirty) {
+      return true;
+    }
+    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
+  }
+
+}

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

@@ -13,32 +13,11 @@
 }
 
 .table-container {
-  margin-top: 40px;
   overflow-x: auto;
-  width: 50%;
+  width: 250%;
-}
+  margin-top: 50px
-
-.overview {
-  position: fixed;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  width: 100%;
-  border-left: thin solid lightgrey;
-  padding-left: 50px;
-  padding-top: 20px;
-  margin-left: 10px;
-  height: 100vh;
-}
-
-.form-group {
-  width: 25%;
 }
 
 h3 {
   margin-bottom: 20px;
-  margin-left: -20px;
-}
-
-label {
-  display: block;
 }

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

@@ -56,24 +56,18 @@
     Bestätigen
   </button>
 
-  <span *ngIf="showSuccessLabel"
-        class="label label-success label-small"
-        style="margin-left: inherit">
-        Erfolgreich gespeichert
-  </span>
-
   <div class="table-container">
-    <table class="table table-hover">
+    <table class="table table-hover table-striped">
       <thead>
       <tr>
-        <th class="col-sm-1" style="width: 60px;">Bild</th>
+        <th class="col-sm-1">Bild</th>
         <th class="col-sm-2">Bezeichnung</th>
-        <th class="col-sm-2">Begründung</th>
+        <th class="col-sm-3">Begründung</th>
-        <th class="col-sm-1 text-right" style="width: 65px;">Datum</th>
+        <th class="col-sm-1 text-right">Datum</th>
         <th class="col-sm-1 text-center" style="width: 45px;"></th>
       </tr>
       </thead>
-      <tbody *ngFor="let award of awards">
+      <tbody *ngFor="let award of user.awards">
       <tr>
         <td class="table-cell-id" *ngIf="award.decorationId.isMedal">
           <img height="40px" src="resource/decoration/{{award.decorationId._id}}.png">

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

@@ -1,6 +1,9 @@
 import {Component, ViewChild} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
-import {Award, Decoration} from "../../models/model-interfaces";
+import * as model from "../../models/model-interfaces";
+import {Decoration, Squad, User} from "../../models/model-interfaces";
+import {UserService} from "../../services/user-service/user.service";
+import {Subscription} from "rxjs";
 import {NgForm} from "@angular/forms";
 import {AwardingService} from "../../services/awarding-service/awarding.service";
 import {DecorationService} from "../../services/decoration-service/decoration.service";
@@ -8,44 +11,91 @@ import {DecorationService} from "../../services/decoration-service/decoration.se
 
 @Component({
   templateUrl: './user-award.component.html',
-  styleUrls: ['./user-award.component.css'],
+  styleUrls: ['./user-award.component.css', '../../style/new-entry-form.css'],
 })
 export class UserAwardComponent {
 
   @ViewChild(NgForm) form: NgForm;
 
+  subscription: Subscription;
+
   showSuccessLabel = false;
 
-  userId: string;
+  user: User = {};
 
   decorations: Decoration[];
 
-  awards: Award[];
+  award: { decorationId: '', reason: '' };
+
+  saved = false;
 
   decoPreviewDisplay = 'none';
 
   constructor(private router: Router,
               private route: ActivatedRoute,
+              private userService: UserService,
               private awardingService: AwardingService,
               private decorationService: DecorationService) {
   }
 
   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;
+      });
+
     this.decorationService.findDecorations().subscribe(decorations => {
       this.decorations = decorations;
     });
+  }
 
-    this.route.params
+  ngOnDestroy() {
-      .map(params => params['id'])
+    this.subscription.unsubscribe();
-      .flatMap(id => this.awardingService.getUserAwardings(id))
+  }
-      .subscribe(awards => {
-        this.awards = awards;
-      });
 
-    this.route.params
+  saveUser(rankLevel) {
-      .map(params => params['id'])
+    const updateObject = {
-      .subscribe(id => this.userId = id)
+      _id: this.user._id,
+      username: this.user.username,
+      squadId: this.user.squad._id,
+      rankLvl: rankLevel
+    };
+    this.userService.updateUser(updateObject)
+      .subscribe(user => {
+        this.user = user;
+        this.showSuccessLabel = true;
+        setTimeout(() => {
+          this.showSuccessLabel = false;
+        }, 2000)
+      })
+  }
+
+
+  cancel() {
+    this.router.navigate(['../..'], {relativeTo: this.route});
+    return false;
+  }
+
+  /**
+   * compare ngValue with ngModel to assign selected element
+   */
+  equals(o1: Squad, o2: Squad) {
+    if (o1 && o2) {
+      return o1._id === o2._id;
+    }
+  }
+
+  deleteUser(confirm) {
+    if (confirm.toLowerCase() === this.user.username.toLocaleLowerCase()) {
+      this.userService.deleteUser(this.user)
+        .subscribe((res) => {
+          this.router.navigate(['../..'], {relativeTo: this.route});
+        })
+    }
   }
 
 
@@ -61,23 +111,40 @@ export class UserAwardComponent {
 
   }
 
+  deleteAwarding(awardingId) {
+    this.awardingService.deleteAwarding(awardingId).subscribe((res) => {
+      this.awardingService.getUserAwardings(this.user._id)
+        .map((res) => res.json())
+        .subscribe((awards) => {
+          this.user.awards = awards;
+          this.showSuccessLabel = true;
+          setTimeout(() => {
+            this.showSuccessLabel = false;
+          }, 2000)
+        })
+    })
+  }
+
   addAwarding(decorationField, reasonField, previewImage, descriptionField) {
     const decorationId = decorationField.value;
     const reason = reasonField.value;
     if (decorationId && reason.length > 0) {
       const award = {
-        "userId": this.userId,
+        "userId": this.user._id,
         "decorationId": decorationId,
         "reason": reason,
         "date": Date.now()
       };
       this.awardingService.addAwarding(award).subscribe(() => {
-        this.awardingService.getUserAwardings(this.userId)
+        this.awardingService.getUserAwardings(this.user._id)
+          .map((res) => res.json())
           .subscribe(awards => {
-            this.awards = awards;
+            this.user.awards = awards;
             this.decoPreviewDisplay = 'none';
             decorationField.value = undefined;
-            reasonField.value = previewImage.src = descriptionField.innerHTML = '';
+            reasonField.value = '';
+            previewImage.src = '';
+            descriptionField.innerHTML = '';
             this.showSuccessLabel = true;
             setTimeout(() => {
               this.showSuccessLabel = false;
@@ -87,22 +154,12 @@ export class UserAwardComponent {
     }
   }
 
-  deleteAwarding(awardingId) {
-    this.awardingService.deleteAwarding(awardingId).subscribe((res) => {
-      this.awardingService.getUserAwardings(this.userId)
-        .subscribe((awards) => {
-          this.awards = awards;
-          this.showSuccessLabel = true;
-          setTimeout(() => {
-            this.showSuccessLabel = false;
-          }, 2000)
-        })
-    })
-  }
 
-  cancel() {
+  canDeactivate(): boolean {
-    this.router.navigate(['../..'], {relativeTo: this.route});
+    if (this.saved || !this.form.dirty) {
-    return false;
+      return true;
+    }
+    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
   }
 
 }

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

@@ -48,8 +48,7 @@ export class UserListComponent implements OnInit {
   }
 
   openNewUserForm() {
-    this.selectedUserId = null;
+    this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
-    this.router.navigate([{outlets: {'right': ['overview']}}], {relativeTo: this.route});
   }
 
   selectUser(userId: string) {
@@ -63,12 +62,11 @@ export class UserListComponent implements OnInit {
   }
 
   deleteUser(user: User) {
-    if (confirm('Soll der Teilnehmer ' + user.username + ' wirklich gelöscht werden?')) {
     this.userService.deleteUser(user)
       .subscribe((res) => {
+
       })
   }
-  }
 
   filterUsersByFraction(query = '', fractionFilter) {
     this.users$ = this.userService.findUsers(query, fractionFilter);

static/src/app/users/user-overview/user-overview.component.css

@@ -0,0 +1,4 @@
+.decoration-preview {
+  background-color: white;
+  padding: 5px;
+}

static/src/app/users/user-overview/user-overview.component.html

@@ -1,6 +1,5 @@
 <form #form="ngForm" class="overview">
-  <h3 *ngIf="user._id">Teilnehmer editieren</h3>
+  <h3>Teilnehmer editieren</h3>
-  <h3 *ngIf="!user._id">Neuen Teilnehmer hinzufügen</h3>
 
   <div class="form-group">
     <label for="title">Name</label>

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

@@ -1,5 +1,6 @@
 import {Component, ViewChild} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
+import * as model from "../../models/model-interfaces";
 import {Rank, Squad, User} from "../../models/model-interfaces";
 import {UserService} from "../../services/user-service/user.service";
 import {SquadService} from "../../services/squad-service/squad.service";
@@ -18,11 +19,15 @@ export class UserOverviewComponent {
 
   subscription: Subscription;
 
+  id: string;
+
+  model = model;
+
   showSuccessLabel = false;
 
   ranksDisplay = 'none';
 
-  user: User = {username: '', squad: '0', rank: {level: 0}};
+  user: User = {squad: {}};
 
   squads: Squad[] = [];
 
@@ -44,6 +49,7 @@ export class UserOverviewComponent {
       .filter(id => id != undefined)
       .flatMap(id => this.userService.getUser(id))
       .subscribe(user => {
+        console.log(user.squad)
         if (!user.squad) {
           user.squad = "0";
           this.ranksDisplay = 'none';
@@ -88,8 +94,6 @@ export class UserOverviewComponent {
     if (this.user.squad._id !== '0') {
       updateObject.squadId = this.user.squad._id
     }
-
-    if (this.user._id) {
     this.userService.updateUser(updateObject)
       .subscribe(user => {
         if (!user.squad) {
@@ -101,18 +105,11 @@ export class UserOverviewComponent {
           this.showSuccessLabel = false;
         }, 2000)
       })
-    } else {
-      this.userService.submitUser(updateObject)
-        .subscribe(user => {
-          this.router.navigate(['..'], {relativeTo: this.route});
-          return true;
-        })
-    }
   }
 
 
   cancel() {
-    this.router.navigate([this.user._id ? '../..' : '..'], {relativeTo: this.route});
+    this.router.navigate(['../..'], {relativeTo: this.route});
     return false;
   }
 
@@ -125,6 +122,15 @@ export class UserOverviewComponent {
     }
   }
 
+  deleteUser(confirm) {
+    if (confirm.toLowerCase() === this.user.username.toLocaleLowerCase()) {
+      this.userService.deleteUser(this.user)
+        .subscribe((res) => {
+          this.router.navigate(['../..'], {relativeTo: this.route});
+        })
+    }
+  }
+
   canDeactivate(): boolean {
     if (this.saved || !this.form.dirty) {
       return true;

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

@@ -2,6 +2,7 @@ import {Routes} from "@angular/router";
 import {UsersComponent} from "./users.component";
 import {UserOverviewComponent} from "./user-overview/user-overview.component";
 import {UserListComponent} from "./user-list/user-list.component";
+import {CreateUserComponent} from "./new-user/new-user.component";
 import {UserAwardComponent} from "./user-award/user-award.component";
 
 export const usersRoutes: Routes = [{
@@ -14,8 +15,8 @@ export const usersRoutes: Routes = [{
   ]
 },
   {
-    path: 'overview',
+    path: 'new',
-    component: UserOverviewComponent,
+    component: CreateUserComponent,
     outlet: 'right'
   },
   {
@@ -30,4 +31,4 @@ export const usersRoutes: Routes = [{
   }
 ];
 
-export const usersRoutingComponents = [UsersComponent, UserListComponent, UserOverviewComponent, UserAwardComponent];
+export const usersRoutingComponents = [UsersComponent, UserListComponent, UserOverviewComponent, CreateUserComponent, UserAwardComponent];