api/models/user.js

@@ -13,7 +13,9 @@ const UserSchema = new Schema({
     type: Number,
     get: v => Math.round(v),
     set: v => Math.round(v),
-    default: 0
+    default: 0,
+    min: 0,
+    max: 22
   },
   squadId: {
     type: mongoose.Schema.Types.ObjectId,

api/resource/decoration/.keep

@@ -1 +0,0 @@
- 

api/resource/rank/.keep

@@ -1 +0,0 @@
- 

api/resource/squad/.keep

@@ -1 +0,0 @@
- 

api/routes/squads.js

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

api/routes/users.js

@@ -171,61 +171,6 @@ users.route('/:id')
     })
   })
 
-  .put(apiAuthenticationMiddleware, (req, res,next) => {
-    // first check that the given element id is the same as the URL id
-    if (!req.body || req.body._id !== req.params.id) {
-      // the URL does not fit the given element
-      var err = new Error('id of PATCH resource and send JSON body are not equal ' + req.params.id + " " + req.body._id);
-      err.status = codes.notfound;
-      next(err);
-      return; // prevent node to process this function further after next() has finished.
-    }
-    // main difference of PUT and PATCH is that PUT expects all data in request: checked by using the schema
-    var video = new UserModel(req.body);
-    UserModel.findById(req.params.id, req.body, {new: true}, function (err, item) {
-      // with parameter {new: true} the TweetNModel will return the new and changed object from the DB and not the old one.
-      if (err) {
-        err.status = codes.wrongrequest;
-        return next(err);
-      }
-      else if (!item) {
-        err = new Error("item not found");
-        err.status = codes.notfound;
-        return next(err);
-      }
-      //  optional task 3b: check that version is still accurate
-      else if (video.__v !== item.__v) {
-        err = new Error("version outdated. Meanwhile update on item happened. Please GET resource again")
-        err.status = codes.conflict;
-        return next(err);
-      }
-      // now update all fields in DB item with body data in variable video
-      for (var field in UserModel.schema.paths) {
-        if ((field !== '_id') && (field !== '__v')) {
-          // this includes undefined. is important to reset attributes that are missing in req.body
-          item.set(field, video[field]);
-        }
-      }
-
-      // optional task 3: update updatedAt and increase version
-      item.updatedAt = new Date();
-      item.increment(); // this sets __v++
-      item.save(function (err) {
-        if (!err) {
-          res.locals.items = item;
-        } else {
-          err.status = codes.wrongrequest;
-          err.message += ' in fields: ' + Object.getOwnPropertyNames(err.errors);
-        }
-        getExtendedUser(item, next, (extUser) => {
-          res.locals.items = extUser;
-          res.locals.processed = true;
-          return next();
-        })
-      });
-    })
-  })
-
   .delete(apiAuthenticationMiddleware, (req, res, next) => {
     UserModel.findByIdAndRemove(req.params.id, (err, item) => {
       if (err) {
@@ -296,7 +241,7 @@ let getExtendedUser = (user, next, callback) => {
         })
       })
     } else {
-      extUser.rank = {level: user.rankLvl};
+      extUser.rank = null;
       addAwards(extUser).then(() => {
         callback(extUser);
       })

static/src/app/app.component.css

@@ -20,5 +20,5 @@ li {
 
 .left {
   float: left;
-  width: calc(100% - 400px);
+  width: calc(100% - 300px);
 }

static/src/app/services/http-client.ts

@@ -39,13 +39,6 @@ export class HttpClient {
     });
   }
 
-  put(url, data) {
-    let headers = this.createAuthorizationHeader();
-    return this.http.put(url, data, {
-      headers: headers
-    });
-  }
-
   patch(url, data) {
     let headers = this.createAuthorizationHeader();
     return this.http.patch(url, data, {

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

@@ -48,7 +48,7 @@ export class UserService {
   }
 
   updateUser(user) {
-    return this.http.put(this.config.apiUrl + this.config.apiUserPath + user._id, user)
+    return this.http.patch(this.config.apiUrl + this.config.apiUserPath + user._id, user)
       .map(res => res.json())
       .do(savedUser => {
         const action = {type: EDIT, data: savedUser};

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

@@ -1,23 +0,0 @@
-.decoration-preview {
-  background-color: white;
-  padding: 5px;
-}
-
-.trash {
-  cursor: pointer;
-}
-
-.table {
-  overflow-wrap: break-word;
-  table-layout: fixed;
-}
-
-.table-container {
-  overflow-x: auto;
-  width: 250%;
-  margin-top: 50px
-}
-
-h3 {
-  margin-bottom: 20px;
-}

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

@@ -1,95 +0,0 @@
-<form #form="ngForm" class="overview">
-  <h3>Teilnehmer auszeichnen</h3>
-
-  <div class="form-group">
-    <label for="decoration">Auszeichnung</label>
-    <select class="form-control"
-            name="decoration"
-            id="decoration"
-            #decorationField
-            (change)="toggleDecoPreview(decoDescription, decorationField.value, decoPreview)"
-            [ngModel]="undefined"
-            required
-            style="min-width: 200px;">
-      <option *ngFor="let deco of decorations" [value]="deco._id">
-        {{deco.fraction == 'BLUFOR'? 'NATO' : 'CSAT'}}: {{deco.name}}
-      </option>
-    </select>
-
-    <show-error text="Auszeichnung" path="decoration"></show-error>
-  </div>
-
-  <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
-    <div class="div-table-col content-s">
-      &nbsp;
-    </div>
-    <div class="div-table-col content-m-flex decoration-preview" style="border-radius: 15px 0px 0px 15px;">
-      <img class="center-block" #decoPreview>
-    </div>
-    <div class="div-table-col content-l decoration-preview"
-         style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
-      &nbsp;
-    </div>
-    <div class="div-table-col content-s">
-      &nbsp;
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label for="reason">Begründung</label>
-    <textarea class="form-control center-block" name="reason" [ngModel]="undefined" required
-              id="reason" placeholder="Begründung eingeben..." rows="3" #awardTextArea></textarea>
-    <show-error text="Begründung" path="reason"></show-error>
-  </div>
-
-
-  <button id="cancel"
-          (click)="cancel()"
-          class="btn btn-default">
-    Abbrechen
-  </button>
-
-  <button id="save"
-          (click)="addAwarding(decorationField, awardTextArea, decoPreview, decoDescription)"
-          class="btn btn-default"
-          [disabled]="!form.valid">
-    Bestätigen
-  </button>
-
-  <div class="table-container">
-    <table class="table table-hover table-striped">
-      <thead>
-      <tr>
-        <th class="col-sm-1">Bild</th>
-        <th class="col-sm-2">Bezeichnung</th>
-        <th class="col-sm-3">Begründung</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 user.awards">
-      <tr>
-        <td class="table-cell-id" *ngIf="award.decorationId.isMedal">
-          <img height="40px" src="resource/decoration/{{award.decorationId._id}}.png">
-        </td>
-        <td class="table-cell-id" *ngIf="!award.decorationId.isMedal">
-          <img width="60px" src="resource/decoration/{{award.decorationId._id}}.png">
-        </td>
-        <td>
-          {{award.decorationId.name}}
-        </td>
-        <td>
-          {{award.reason}}
-        </td>
-        <td class="text-right">
-          <a class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</a>
-        </td>
-        <td class="text-center">
-          <span class="glyphicon glyphicon-trash trash" title="Löschen" (click)="deleteAwarding(award._id)"></span>
-        </td>
-      </tr>
-      </tbody>
-    </table>
-  </div>
-
-</form>

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

@@ -1,165 +0,0 @@
-import {Component, ViewChild} from "@angular/core";
-import {ActivatedRoute, Router} from "@angular/router";
-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";
-
-
-@Component({
-  templateUrl: './user-award.component.html',
-  styleUrls: ['./user-award.component.css', '../../style/new-entry-form.css'],
-})
-export class UserAwardComponent {
-
-  @ViewChild(NgForm) form: NgForm;
-
-  subscription: Subscription;
-
-  showSuccessLabel = false;
-
-  user: User = {};
-
-  decorations: Decoration[];
-
-  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;
-    });
-  }
-
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-  }
-
-  saveUser(rankLevel) {
-    const updateObject = {
-      _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});
-        })
-    }
-  }
-
-
-  toggleDecoPreview(descriptionField, decorationId, image) {
-    this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children
-
-    const description = this.decorations.find(
-      decoration => decoration._id === decorationId
-    ).description;
-
-    image.src = 'resource/decoration/' + decorationId + '.png';
-    descriptionField.innerHTML = description;
-
-  }
-
-  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.user._id,
-        "decorationId": decorationId,
-        "reason": reason,
-        "date": Date.now()
-      };
-      this.awardingService.addAwarding(award).subscribe(() => {
-        this.awardingService.getUserAwardings(this.user._id)
-          .map((res) => res.json())
-          .subscribe(awards => {
-            this.user.awards = awards;
-            this.decoPreviewDisplay = 'none';
-            decorationField.value = undefined;
-            reasonField.value = '';
-            previewImage.src = '';
-            descriptionField.innerHTML = '';
-            this.showSuccessLabel = true;
-            setTimeout(() => {
-              this.showSuccessLabel = false;
-            }, 2000)
-          })
-      })
-    }
-  }
-
-
-  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-list/user-item.component.css

@@ -3,6 +3,7 @@ div.user-list-entry, a.user-list-entry {
   width: 475px;
   border-radius: 2px;
   border: lightgrey solid 1px;
+  cursor: pointer;
   margin-bottom: -1px;
 }
 
@@ -10,36 +11,23 @@ div.user-list-entry, a.user-list-entry {
   background: lightgrey;
 }
 
-.icon-award {
-  background: url(../../../assets/award.png);
-  width: 18px;
-  height: 29px;
-  display: block;
-  margin-left: 12px;
-}
-
 span {
   cursor: pointer;
 }
 
 a {
-  font-size: large;
+  font-size: x-large;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 small {
   color: grey;
-  font-size: x-small;
 }
 
 .trash {
-  font-size: 19px;
+  padding-top: 18px;
-  margin-left: 12px;
+  font-size: 17px;
-  margin-top: 2px;
+  margin-left: -10px;
-}
-
-.edit {
-  font-size: 22px;
 }
 
 .selected {

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

@@ -1,20 +1,14 @@
-<div class="fade-in user-list-entry" [ngClass]="{selected : selected}">
+<div class="fade-in user-list-entry" [ngClass]="{selected : selected}" (click)="select()">
 
   <div class="row">
-    <div class="col-xs-9">
+    <div class="col-xs-11">
       <span>
-        <a (click)="select()">{{user.username}}</a>
+        <a>{{user.username}}</a>
       </span>
       <br>
       <small *ngIf="user.squad && user.squad.fraction == 'OPFOR'">CSAT - {{user.squad.name}}</small>
       <small *ngIf="user.squad && user.squad.fraction == 'BLUFOR'">NATO - {{user.squad.name}}</small>
       <small *ngIf="!user.squad">ohne Squad/Fraktion</small>
     </div>
-
-    <div class="col-xs-3">
-      <span (click)="select()" title="Bearbeiten" class="glyphicon glyphicon-pencil pull-left edit"></span>
-      <span (click)="award()" title="Auszeichnungen" class="icon-award pull-left"></span>
-      <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
-    </div>
   </div>
 </div>

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

@@ -8,7 +8,7 @@ import {User} from "../../models/model-interfaces";
   styleUrls: ['./user-item.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ['user', 'selected'],
-  outputs: ['userSelected', 'userAward', 'userDelete']
+  outputs: ['userSelected', 'userDelete']
 })
 export class UserItemComponent {
 
@@ -16,7 +16,6 @@ export class UserItemComponent {
   user: User;
 
   userSelected = new EventEmitter();
-  userAward = new EventEmitter();
   userDelete = new EventEmitter();
 
   constructor(private router: Router) {
@@ -27,10 +26,6 @@ export class UserItemComponent {
     this.userSelected.emit(this.user._id)
   }
 
-  award() {
-    this.userAward.emit(this.user._id)
-  }
-
   delete() {
     this.userDelete.emit(this.user);
   }

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

@@ -44,7 +44,6 @@
                    [user]="user"
                    (userDelete)="deleteUser(user)"
                    (userSelected)="selectUser($event)"
-                   (userAward)="awardUser($event)"
                    [selected]="user._id == selectedUserId">
     </pjm-user-item>
   </div>

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

@@ -51,23 +51,11 @@ export class UserListComponent implements OnInit {
     this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
   }
 
-  selectUser(userId: string) {
+  selectUser(userId: string | number) {
     this.selectedUserId = userId;
     this.router.navigate([{outlets: {'right': ['overview', userId]}}], {relativeTo: this.route});
   }
 
-  awardUser(userId: string) {
-    this.selectedUserId = userId;
-    this.router.navigate([{outlets: {'right': ['award', userId]}}], {relativeTo: this.route});
-  }
-
-  deleteUser(user: User) {
-    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.html

@@ -1,65 +1,200 @@
-<form #form="ngForm" class="overview">
+<div class="overview">
-  <h3>Teilnehmer editieren</h3>
+  <h3 style="margin-bottom: 25px">Teilnehmer-Details
-
+    <span *ngIf="showSuccessLabel"
-  <div class="form-group">
+          class="label label-success label-small"
-    <label for="title">Name</label>
+          style="margin-left: inherit">
-    <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>
-
-  <div class="form-group">
-    <label for="squad">Squad</label>
-    <select class="form-control"
-            name="squad"
-            id="squad"
-            [(ngModel)]="user.squad"
-            [compareWith]="equals"
-            (change)="toggleRanks()">
-      <option [value]="0">Ohne Fraktion/ Squad</option>
-      <option *ngFor="let squad of squads" [ngValue]="squad">
-        {{squad.fraction == 'BLUFOR'? 'NATO' : 'CSAT'}}: {{squad.name}}
-      </option>
-    </select>
-
-    <show-error text="Squad" path="squad"></show-error>
-  </div>
-
-  <div class="form-group" [style.display]="ranksDisplay">
-    <label for="rank">Rang</label>
-    <select class="form-control"
-            name="rank"
-            id="rank" [ngModel]="user.rank?.level"
-            #rankLevel
-            style="min-width: 200px;">
-      <option *ngFor="let rank of ranks" [value]="rank.level">{{rank.name}}</option>
-    </select>
-
-    <show-error text="Squad" path="squad"></show-error>
-  </div>
-
-  <button id="cancel"
-          (click)="cancel()"
-          class="btn btn-default">
-    Abbrechen
-  </button>
-
-  <button id="save"
-          (click)="saveUser(rankLevel.value)"
-          class="btn btn-default"
-          [disabled]="!form.valid">
-    Bestätigen
-  </button>
-
-  <span *ngIf="showSuccessLabel"
-        class="label label-success label-small"
-        style="margin-left: inherit">
         Erfolgreich gespeichert
-  </span>
+    </span>
+  </h3>
+  <div *ngIf="user">
+    <div class="col-xs-12">
 
-</form>
+
+      <div class="div-table">
+        <div class="div-table-row">
+          <div class="div-table-col content-s">
+            <label>Name:</label>
+          </div>
+          <div class="div-table-col content content-m" >
+            {{user.username}}
+          </div>
+          <div class="div-table-col content-l">
+            <input class="form-control" width="250px" placeholder="Neuer Name" #newNameInput>
+          </div>
+          <div class="div-table-col content-s">
+            <a class="pull-right btn btn-sm btn-block btn-default" (click)="update('username',newNameInput.value, newNameInput)" >Bestätigen</a>
+          </div>
+        </div>
+        <div class="div-table-row">
+          <div class="div-table-col content-s">
+            <label>Fraktion:</label>
+          </div>
+          <div class="div-table-col content-m" *ngIf="!user.squad">
+            Ohne Fraktion
+          </div>
+          <div class="div-table-col fraction-opfor content-m" *ngIf="user.squad && user.squad.fraction == 'OPFOR'">
+            CSAT
+          </div>
+          <div class="div-table-col fraction-blufor content-m" *ngIf="user.squad && user.squad.fraction == 'BLUFOR'">
+            NATO
+          </div>
+          <div class="div-table-col">
+          </div>
+        </div>
+      </div>
+
+      <hr>
+      <div class="div-table">
+        <div class="div-table-row">
+          <div class="div-table-col content-s">
+            <label>Squad:</label>
+          </div>
+          <div class="div-table-col content-m" *ngIf="!user.squad">Ohne Squad</div>
+          <div class="div-table-col content content-m" *ngIf="user.squad">{{user.squad.name}}</div>
+          <div class="div-table-col content content-l">
+            <select class="form-control" [ngModel]="user.squad?._id" style="min-width: 200px;" #squadSelector>
+              <option [value]="">---</option>
+              <option *ngFor="let squad of squads" [value]="squad._id">{{squad.fraction}}: {{squad.name}}</option>
+            </select>
+          </div>
+          <div class="div-table-col content-s">
+            <a class="pull-right btn btn-sm btn-default btn-block" (click)="update('squadId', squadSelector.value)">Bestätigen</a>
+          </div>
+        </div>
+      </div>
+
+      <hr>
+      <div class="div-table">
+        <div class="div-table-row">
+          <div class="div-table-col content-s">
+            <label>Rang:</label>
+          </div>
+          <div class="div-table-col content-m" *ngIf="!user.rank">Ohne Rang</div>
+          <div class="div-table-col content-m content" *ngIf="user.rank">{{user.rank.name}}</div>
+          <div class="div-table-col content-l" *ngIf="user.rank"><img src="resource/rank/{{user.rank._id}}.png" class="center-block"></div>
+          <div class="div-table-col content-s" *ngIf="user.rank">
+            <a class="btn btn-sm btn-default btn-block pull-right" (click)="update('rankLvl', user.rank.level + 1)">
+              Befördern
+            </a>
+            <br><br>
+            <a class="btn btn-sm btn-default btn-block pull-right" (click)="update('rankLvl', user.rank.level - 1)">
+              Degradieren
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <hr>
+      <div class="div-table">
+        <!--row 1 - label and dropdown-->
+        <div class="div-table-row">
+          <div class="div-table-col content-s">
+            <label style="white-space: pre-wrap">Auszeichnung
+verleihen:</label>
+          </div>
+          <div class="div-table-col content-m">
+            <select #decoSelector class="form-control" [ngModel]="undefined" style="min-width: 200px"
+                    (change)="toggleDecoPreview(decoDescription, decoSelector.value, decoPreview)">
+              <option *ngFor="let deco of decorations" [value]="deco._id">{{deco.fraction}}: {{deco.name}}</option>
+            </select>
+          </div>
+          <div class="div-table-col content-l">
+            &nbsp;
+          </div>
+        </div>
+       <!--row 2 - decoration preview-->
+        <div class="div-table-row" [style.display]="decoPreviewDisplay">
+          <div class="div-table-col content-s">
+            &nbsp;
+          </div>
+          <div class="div-table-col content-m-flex decoration-preview" style="border-radius: 15px 0px 0px 15px;">
+            <img class="center-block" #decoPreview>
+          </div>
+          <div class="div-table-col content-l decoration-preview" style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
+            &nbsp;
+          </div>
+          <div class="div-table-col content-s">
+            &nbsp;
+          </div>
+        </div>
+        <!--row 3 - input and submit-->
+        <div class="div-table-row">
+          <div class="div-table-col content-s">
+            &nbsp;
+          </div>
+          <div class="div-table-col content-xxl">
+            <textarea class="form-control center-block" placeholder="Begründung eingeben..." rows="3" #awardTextArea></textarea>
+          </div>
+          <div class="div-table-col content-s">
+            <a class="pull-right btn btn-sm btn-default btn-block" style="position: relative; bottom: -40px;"
+               (click)="addAwarding(decoSelector, awardTextArea, decoPreview, decoDescription)">
+              Bestätigen</a>
+          </div>
+        </div>
+      </div>
+
+      <hr>
+      <label style="margin-left: calc(8% + 15px);">Auszeichnungen:</label>
+      <div class="div-table table-bordered" style="min-width: 852px; border-collapse: collapse;">
+        <div class="div-table-row table-bordered">
+          <div class="div-table-col div-table-head content-xs">
+            Bild
+          </div>
+          <div class="div-table-col div-table-head content-m">
+            Bezeichnung
+          </div>
+          <div class="div-table-col div-table-head content-xl">
+            Begründung
+          </div>
+          <div class="div-table-col div-table-head content-xs">
+            Datum
+          </div>
+          <div class="div-table-col content-xs">
+            &nbsp;
+          </div>
+        </div>
+        <div class="div-table-row table-bordered"*ngFor="let award of user.awards">
+          <div class="div-table-col content-xs" *ngIf="award.decorationId.isMedal">
+            <img height="40px" src="resource/decoration/{{award.decorationId._id}}.png">
+          </div>
+          <div class="div-table-col content-xs" *ngIf="!award.decorationId.isMedal">
+            <img width="60px" src="resource/decoration/{{award.decorationId._id}}.png">
+          </div>
+
+          <div class="div-table-col content-m">
+            {{award.decorationId.name}}
+          </div>
+          <div class="div-table-col content-xl">
+            {{award.reason}}
+          </div>
+          <div class="div-table-col content-xs">
+            {{award.date | date: 'dd.MM.yyyy'}}
+          </div>
+          <div class="div-table-col content-xs">
+            <span title="Löschen" (click)="deleteAwarding(award._id)" class="pull-right btn glyphicon glyphicon-trash trash"></span>
+          </div>
+        </div>
+      </div>
+
+      <hr>
+      <div class="div-table">
+        <div class="div-table-row">
+          <div class="div-table-col content-s">
+            <label>Löschen:</label>
+          </div>
+          <div class="div-table-col content-l" align="center">
+            <input class="form-control" #confirmInput placeholder="Teilnehmernamen zur Bestätigung eingeben" style="width:320px">
+          </div>
+          <div class="div-table-col content-s">
+            &nbsp;
+          </div>
+          <div class="div-table-col content-m">
+            <a class="pull-right btn btn-sm btn-block btn-default" (click)="deleteUser(confirmInput.value)" >Teilnehmer Löschen</a>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>

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

@@ -1,124 +1,87 @@
-import {Component, ViewChild} from "@angular/core";
+import {Component} 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 {Decoration, Squad, User} from "../../models/model-interfaces";
 import {UserService} from "../../services/user-service/user.service";
 import {SquadService} from "../../services/squad-service/squad.service";
-import {RankService} from "../../services/rank-service/rank.service";
+import {DecorationService} from "../../services/decoration-service/decoration.service";
-import {Subscription} from "rxjs";
+import {AwardingService} from "../../services/awarding-service/awarding.service";
-import {NgForm} from "@angular/forms";
 
 
 @Component({
   templateUrl: './user-overview.component.html',
-  styleUrls: ['./user-overview.component.css', '../../style/new-entry-form.css'],
+  styleUrls: ['./user-overview.component.css', '../../style/overview.css'],
 })
 export class UserOverviewComponent {
 
-  @ViewChild(NgForm) form: NgForm;
-
-  subscription: Subscription;
-
   id: string;
 
   model = model;
 
   showSuccessLabel = false;
 
-  ranksDisplay = 'none';
+  decoPreviewDisplay = 'none';
 
-  user: User = {squad: {}};
+  user: User;
 
-  squads: Squad[] = [];
+  squads: Squad[];
 
-  ranks: Rank[] = [];
+  decorations: Decoration[];
-
-  saved = false;
 
   constructor(private router: Router,
               private route: ActivatedRoute,
               private userService: UserService,
               private squadService: SquadService,
-              private rankService: RankService) {
+              private decorationService: DecorationService,
+              private awardingService: AwardingService) {
   }
 
   ngOnInit() {
-
+    this.route.params.subscribe((params) => {
-    this.subscription = this.route.params
+      this.userService.getUser(params['id']).subscribe(user => {
-      .map(params => params['id'])
-      .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';
-        } else {
-          this.rankService.findRanks('', user.squad.fraction).subscribe(ranks => {
-            this.ranks = ranks;
-            this.ranksDisplay = 'block';
-          });
-        }
         this.user = user;
       });
+    });
 
     this.squadService.findSquads().subscribe(squads => {
       this.squads = squads;
     });
+
+    this.decorationService.findDecorations().subscribe(decorations => {
+      this.decorations = decorations;
+    });
   }
 
-  ngOnDestroy() {
+  toggleDecoPreview(descriptionField, decorationId, image) {
-    this.subscription.unsubscribe();
+    this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children
+
+    const description = this.decorations.find(
+      decoration => decoration._id === decorationId
+    ).description;
+
+    image.src = 'resource/decoration/' + decorationId + '.png';
+    descriptionField.innerHTML = description;
+
   }
 
-  toggleRanks() {
+  update(attrName, value, inputField?) {
-    if (this.user.squad != '0') {
+    if (attrName === 'squadId' && value === '---') {
-      this.rankService.findRanks('', this.user.squad.fraction).subscribe(
+      value = null;
-        ranks => {
-          this.ranks = ranks;
-          this.ranksDisplay = 'block';
-        }
-      );
-    } else {
-      this.ranksDisplay = 'none';
     }
-  }
+    if (value !== '' && (attrName !== 'rankLvl' || attrName === 'rankLvl' && value >= 0 && value <= 22)) {
-
+      const updateObject = {_id: this.user._id};
-  saveUser(rankLevel) {
+      updateObject[attrName] = value;
-    const updateObject = {
+      this.userService.updateUser(updateObject)
-      _id: this.user._id,
+        .subscribe(user => {
-      username: this.user.username,
+          this.user = user;
-      rankLvl: rankLevel,
+          if (inputField) {
-      squadId: null
+            inputField.value = '';
-    };
+          }
-    if (this.user.squad._id !== '0') {
+          this.showSuccessLabel = true;
-      updateObject.squadId = this.user.squad._id
+          setTimeout(() => {
-    }
+            this.showSuccessLabel = false;
-    this.userService.updateUser(updateObject)
+          }, 2000)
-      .subscribe(user => {
+        })
-        if (!user.squad) {
-          user.squad = '0';
-        }
-        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;
     }
   }
 
@@ -131,11 +94,47 @@ export class UserOverviewComponent {
     }
   }
 
-  canDeactivate(): boolean {
+  deleteAwarding(awardingId) {
-    if (this.saved || !this.form.dirty) {
+    this.awardingService.deleteAwarding(awardingId).subscribe((res) => {
-      return true;
+      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.user._id,
+        "decorationId": decorationId,
+        "reason": reason,
+        "date": Date.now()
+      };
+      this.awardingService.addAwarding(award).subscribe(() => {
+        this.awardingService.getUserAwardings(this.user._id)
+          .map((res) => res.json())
+          .subscribe(awards => {
+            this.user.awards = awards;
+            this.decoPreviewDisplay = 'none';
+            decorationField.value = undefined;
+            reasonField.value = '';
+            previewImage.src = '';
+            descriptionField.innerHTML = '';
+            this.showSuccessLabel = true;
+            setTimeout(() => {
+              this.showSuccessLabel = false;
+            }, 2000)
+          })
+      })
     }
-    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
   }
 
 }

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

@@ -3,7 +3,6 @@ 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 = [{
   path: '', component: UsersComponent,
@@ -23,12 +22,6 @@ export const usersRoutes: Routes = [{
     path: 'overview/:id',
     component: UserOverviewComponent,
     outlet: 'right'
-  },
+  }];
-  {
-    path: 'award/:id',
-    component: UserAwardComponent,
-    outlet: 'right'
-  }
-];
 
-export const usersRoutingComponents = [UsersComponent, UserListComponent, UserOverviewComponent, CreateUserComponent, UserAwardComponent];
+export const usersRoutingComponents = [UsersComponent, UserListComponent, UserOverviewComponent, CreateUserComponent];