Fix war stat view; Fix decoration selecter dropdowns

static/src/app/request/award/req-award.component.html

@@ -8,7 +8,7 @@
             id="user"
             [(ngModel)]="user"
             [compareWith]="equals"
-            (change)="toggleUser(decoPreview, decoDescription)"
+            (change)="toggleUser()"
             required>
       <option [ngValue]="{_id: '0'}">Auswählen...</option>
       <option *ngFor="let user of users" [ngValue]="user">
@@ -18,14 +18,16 @@
   </div>
 
 
-  <div class="form-group" *ngIf="showForm">
+  <div class="form-group">
     <label for="decoration">Auszeichnung</label>
     <select class="form-control"
             name="decoration"
             id="decoration"
             [(ngModel)]="decoration"
+            [compareWith]="equals"
             (change)="toggleDecoPreview(decoDescription, decoPreview)"
             required>
+      <option [ngValue]="{_id: '0'}">Auswählen...</option>
       <option *ngFor="let deco of decorations" [ngValue]="deco">
         {{deco.name}}
       </option>
@@ -42,7 +44,7 @@
     </div>
   </div>
 
-  <div class="form-group" *ngIf="showForm">
+  <div class="form-group">
     <label for="reason">Begründung</label>
     <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
               id="reason" placeholder="Begründung eingeben..." rows="3" ></textarea>
@@ -57,8 +59,7 @@
   <button id="save"
           (click)="addAwarding(decoPreview, decoDescription)"
           class="btn btn-default"
-          *ngIf="showForm"
-          [disabled]="!form.valid">
+          [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
     Bestätigen
   </button>
 

static/src/app/request/award/req-award.component.ts

@@ -21,7 +21,7 @@ export class RequestAwardComponent {
 
   user: User = {_id: '0'};
 
-  decoration: Decoration = null;
+  decoration: Decoration = {_id: '0'};
 
   reason: string = '';
 
@@ -41,35 +41,28 @@ export class RequestAwardComponent {
   }
 
   ngOnInit() {
-    let currentUser = JSON.parse(localStorage.getItem('currentUser'));
-    // show only current users squad members
+    const currentUser = JSON.parse(localStorage.getItem('currentUser'));
     this.userService.findUsers('', undefined, currentUser.squad._id).subscribe(users => {
       this.users = users;
     });
-  }
-
-  toggleUser(previewImage, decoDescription) {
-    if (this.user._id != '0') {
-      this.decoration = null;
-      if (previewImage && decoDescription) {
-        previewImage.src = decoDescription.innerHTML = '';
-      }
-      this.decorationService.findDecorations('', this.user.squad.fraction).subscribe(decorations => {
+    this.decorationService.findDecorations('', currentUser.squad.fraction).subscribe(decorations => {
       this.decorations = decorations;
     });
+  }
 
+  toggleUser() {
+    if (this.user._id !== '0') {
       this.awardingService.getUserAwardings(this.user._id).subscribe(awards => {
         this.awards = awards;
       });
-
       this.showForm = true;
     } else {
       this.showForm = false;
     }
   }
 
-
   toggleDecoPreview(descriptionField, image) {
+    if (this.decoration._id !== '0') {
       this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children
 
       const description = this.decorations.find(
@@ -78,12 +71,14 @@ export class RequestAwardComponent {
 
       image.src = 'resource/decoration/' + this.decoration._id + '.png';
       descriptionField.innerHTML = description;
-
+    } else {
+      this.decoPreviewDisplay = 'none';
+    }
   }
 
   addAwarding(previewImage, descriptionField) {
     if (this.decoration._id && this.reason.length > 0) {
-      const award : Award = {
+      const award: Award = {
         "userId": this.user._id,
         "decorationId": this.decoration._id,
         "reason": this.reason,
@@ -93,7 +88,7 @@ export class RequestAwardComponent {
         this.awardingService.getUserAwardings(this.user._id)
           .subscribe(awards => {
             this.awards = awards;
-            this.decoration = null;
+            this.decoration = {_id: '0'};
             this.reason = previewImage.src = descriptionField.innerHTML = '';
             this.decoPreviewDisplay = 'none';
             this.showSuccessLabel = true;
@@ -113,7 +108,7 @@ export class RequestAwardComponent {
   /**
    * compare ngValue with ngModel to assign selected element
    */
-  equals(o1: User, o2: User) {
+  equals(o1, o2) {
     if (o1 && o2) {
       return o1._id === o2._id;
     }

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

@@ -8,9 +8,10 @@
             id="decoration"
             #decorationField
             (change)="toggleDecoPreview(decoDescription, decorationField.value, decoPreview)"
-            [ngModel]="undefined"
+            [ngModel]="0"
             required
             style="min-width: 200px;">
+      <option [value]="0">Auswählen...</option>
       <option *ngFor="let deco of decorations" [value]="deco._id">
         {{deco.fraction == 'BLUFOR'? 'NATO' : deco.fraction == 'OPFOR'? 'CSAT' : 'Global'}}: {{deco.name}}
       </option>
@@ -52,7 +53,7 @@
   <button id="save"
           (click)="addAwarding(decorationField, awardTextArea, decoPreview, decoDescription)"
           class="btn btn-default"
-          [disabled]="!form.valid">
+          [disabled]="decorationField.value === '0' || !form.valid">
     Bestätigen
   </button>
 

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

@@ -50,6 +50,7 @@ export class AwardUserComponent {
 
 
   toggleDecoPreview(descriptionField, decorationId, image) {
+    if (decorationId !== '0') {
       this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children
 
       const description = this.decorations.find(
@@ -58,7 +59,9 @@ export class AwardUserComponent {
 
       image.src = 'resource/decoration/' + decorationId + '.png';
       descriptionField.innerHTML = description;
-
+    } else {
+      this.decoPreviewDisplay = 'none';
+    }
   }
 
   addAwarding(decorationField, reasonField, previewImage, descriptionField) {

static/src/app/wars/war-detail.component.css

@@ -22,7 +22,7 @@
 .scoreboard-table-container {
   min-width: 920px;
   max-width: 920px;
-  margin-left: 10%
+  margin-left: 5%
 }
 
 .table-container {

static/src/app/wars/war-detail.component.html

@@ -1,6 +1,6 @@
 <div class="overview" xmlns="http://www.w3.org/1999/html">
 
-  <div style="margin-left: 5%; min-height: 248px;">
+  <div style="margin-left: 5%; min-height: 263px;">
     <h2>{{war.title}} - Schlacht vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
     <h3 class="pull-left">
       <h4>Endpunktestand:</h4>
@@ -53,7 +53,7 @@
     </div>
   </div>
 
-  <div class="pull-left" style="margin-top:20px;">
+  <div class="pull-left">
     <div class="table-container scoreboard-table-container">
       <table class="table table-hover" [mfData]="players" #mf="mfDataTable" [(mfSortBy)]="sortBy"
              [(mfSortOrder)]="sortOrder">