opt-cc/static/src/app/army/army-member/army-member.component.ts

import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
import {Award, User} from '../../models/model-interfaces';
import {ActivatedRoute, Router} from '@angular/router';
import {UserService} from '../../services/army-management/user.service';
import {Subscription} from 'rxjs/Subscription';
import {RouteConfig} from '../../app.config';
import {AwardingService} from '../../services/army-management/awarding.service';
import {Fraction} from '../../utils/fraction.enum';
import {DOCUMENT, Location} from '@angular/common';
import {CSSHelpers} from '../../utils/global.helpers';

@Component({
  selector: 'army-member',
  templateUrl: './army-member.component.html',
  styleUrls: ['./army-member.component.css']
})
export class ArmyMemberComponent implements OnInit, OnDestroy {

  subscription: Subscription;

  user: User = {};

  awards: Award[] = [];

  signatureUrl;

  isCopied = false;

  readonly fraction = Fraction;

  constructor(private router: Router,
              private route: ActivatedRoute,
              private userService: UserService,
              private awardingService: AwardingService,
              private location: Location,
              @Inject(DOCUMENT) private document) {
  }

  ngOnInit() {
    // set background image css
    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));

    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.signatureUrl = window.location.origin + '/resource/signature/' + user._id + '.png';
                              this.awardingService.getUserAwardings(user._id).subscribe((awards => {
                                this.awards = awards;
                              }));
                            });
  };

  ngOnDestroy() {
    if (this.router.url !== '/' + RouteConfig.overviewPath) {
      this.document.getElementById('right').setAttribute('style', '');
    }
  }

  backToOverview() {
    this.location.back();
  }
}