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

import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Award, Decoration, User} from '../../models/model-interfaces';
import {NgForm} from '@angular/forms';
import {AwardingService} from '../../services/army-management/awarding.service';
import {DecorationService} from '../../services/army-management/decoration.service';
import {UserService} from '../../services/army-management/user.service';
import {LoginService} from '../../services/app-user-service/login-service';


@Component({
  templateUrl: './req-award.component.html',
  styleUrls: ['./req-award.component.css', '../../style/overview.css'],
})
export class RequestAwardComponent implements OnInit {

  @ViewChild(NgForm) form: NgForm;

  showForm = false;

  showSuccessLabel = false;

  user: User = {_id: '0'};

  decoration: Decoration = {_id: '0'};

  reason = '';

  decorations: Decoration[];

  awards: Award[];

  users: User[];

  decoPreviewDisplay = 'none';

  constructor(private router: Router,
              private route: ActivatedRoute,
              private userService: UserService,
              private awardingService: AwardingService,
              private decorationService: DecorationService,
              private loginService: LoginService) {
  }

  ngOnInit() {
    const currentUser = this.loginService.getCurrentUser();
    this.userService.findUsers('', undefined, currentUser.squad._id).subscribe(users => {
      this.users = users;
    });
    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(
        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 = {
        'userId': this.user._id,
        'decorationId': this.decoration._id,
        'reason': this.reason,
        'date': Date.now()
      };
      this.awardingService.requestAwarding(award).subscribe(() => {
        this.awardingService.getUserAwardings(this.user._id)
            .subscribe(awards => {
              this.awards = awards;
              this.decoration = {_id: '0'};
              this.reason = previewImage.src = descriptionField.innerHTML = '';
              this.decoPreviewDisplay = 'none';
              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, o2) {
    if (o1 && o2) {
      return o1._id === o2._id;
    }
  }

}