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

import {Component, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {Award, Decoration} from "../../models/model-interfaces";
import {NgForm} from "@angular/forms";
import {AwardingService} from "../../services/awarding-service/awarding.service";
import {DecorationService} from "../../services/decoration-service/decoration.service";


@Component({
  templateUrl: './award-user.component.html',
  styleUrls: ['./award-user.component.css'],
})
export class AwardUserComponent {

  @ViewChild(NgForm) form: NgForm;

  showSuccessLabel = false;

  userId: string;

  decorations: Decoration[];

  awards: Award[];

  decoPreviewDisplay = 'none';

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

  ngOnInit() {

    this.decorationService.findDecorations().subscribe(decorations => {
      this.decorations = decorations;
    });

    this.route.params
      .map(params => params['id'])
      .flatMap(id => this.awardingService.getUserAwardings(id))
      .subscribe(awards => {
        this.awards = awards;
      });

    this.route.params
      .map(params => params['id'])
      .subscribe(id => this.userId = id)
  }


  toggleDecoPreview(descriptionField, decorationId, image) {
    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;
    } else {
      this.decoPreviewDisplay = 'none';
    }
  }

  addAwarding(decorationField, reasonField, previewImage, descriptionField) {
    const decorationId = decorationField.value;
    const reason = reasonField.value;
    if (decorationId && reason.length > 0) {
      const award = {
        "userId": this.userId,
        "decorationId": decorationId,
        "reason": reason,
        "date": Date.now()
      };
      this.awardingService.addAwarding(award).subscribe(() => {
        this.awardingService.getUserAwardings(this.userId)
          .subscribe(awards => {
            this.awards = awards;
            this.decoPreviewDisplay = 'none';
            decorationField.value = undefined;
            reasonField.value = previewImage.src = descriptionField.innerHTML = '';
            this.showSuccessLabel = true;
            setTimeout(() => {
              this.showSuccessLabel = false;
            }, 2000)
          })
      })
    }
  }

  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() {
    this.router.navigate(['../..'], {relativeTo: this.route});
    return false;
  }

}