From ef205ebc1dcb356d8aa83e5439c9743330a76b4d Mon Sep 17 00:00:00 2001
From: Florian Hartwich <hardi@noarch.de>
Date: Sat, 5 Aug 2017 00:05:47 +0200
Subject: [PATCH] Fix war stat view; Fix decoration selecter dropdowns

---
 .../request/award/req-award.component.html    | 11 ++---
 .../app/request/award/req-award.component.ts  | 45 +++++++++----------
 .../award-user/award-user.component.html      |  5 ++-
 .../users/award-user/award-user.component.ts  | 17 ++++---
 static/src/app/wars/war-detail.component.css  |  2 +-
 static/src/app/wars/war-detail.component.html |  4 +-
 6 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/static/src/app/request/award/req-award.component.html b/static/src/app/request/award/req-award.component.html
index eddd70c..fb0f030 100644
--- a/static/src/app/request/award/req-award.component.html
+++ b/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>
 
diff --git a/static/src/app/request/award/req-award.component.ts b/static/src/app/request/award/req-award.component.ts
index b41a02a..f61d691 100644
--- a/static/src/app/request/award/req-award.component.ts
+++ b/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,49 +41,44 @@ 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;
     });
+    this.decorationService.findDecorations('', currentUser.squad.fraction).subscribe(decorations => {
+      this.decorations = decorations;
+    });
   }
 
-  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.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) {
-    this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children
+    if (this.decoration._id !== '0') {
+      this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children
 
-    const description = this.decorations.find(
-      decoration => decoration._id === this.decoration._id
-    ).description;
-
-    image.src = 'resource/decoration/' + this.decoration._id + '.png';
-    descriptionField.innerHTML = description;
+      const description = this.decorations.find(
+        decoration => decoration._id === this.decoration._id
+      ).description;
 
+      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;
     }
diff --git a/static/src/app/users/award-user/award-user.component.html b/static/src/app/users/award-user/award-user.component.html
index cd15e9c..3c99259 100644
--- a/static/src/app/users/award-user/award-user.component.html
+++ b/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>
 
diff --git a/static/src/app/users/award-user/award-user.component.ts b/static/src/app/users/award-user/award-user.component.ts
index 248cd4d..0ab6e37 100644
--- a/static/src/app/users/award-user/award-user.component.ts
+++ b/static/src/app/users/award-user/award-user.component.ts
@@ -50,15 +50,18 @@ export class AwardUserComponent {
 
 
   toggleDecoPreview(descriptionField, decorationId, image) {
-    this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children
+    if (decorationId !== '0') {
+      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;
+      const description = this.decorations.find(
+        decoration => decoration._id === decorationId
+      ).description;
 
+      image.src = 'resource/decoration/' + decorationId + '.png';
+      descriptionField.innerHTML = description;
+    } else {
+      this.decoPreviewDisplay = 'none';
+    }
   }
 
   addAwarding(decorationField, reasonField, previewImage, descriptionField) {
diff --git a/static/src/app/wars/war-detail.component.css b/static/src/app/wars/war-detail.component.css
index 21f7ce6..bc262ad 100644
--- a/static/src/app/wars/war-detail.component.css
+++ b/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 {
diff --git a/static/src/app/wars/war-detail.component.html b/static/src/app/wars/war-detail.component.html
index 57b65a0..aa00c49 100644
--- a/static/src/app/wars/war-detail.component.html
+++ b/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">