opt-cc/static/src/app/statistic/war/war-list/war-list.component.ts

import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Campaign, War} from '../../../models/model-interfaces';
import {WarService} from '../../../services/logs/war.service';
import {LoginService} from '../../../services/app-user-service/login-service';
import {CampaignService} from '../../../services/logs/campaign.service';
import {RouteConfig} from '../../../app.config';
import {TranslateService} from '@ngx-translate/core';

@Component({
  selector: 'war-list',
  templateUrl: './war-list.component.html',
  styleUrls: ['./war-list.component.css']
})
export class WarListComponent implements OnChanges {

  @Input() campaign: Campaign;

  @Input() collapsed: boolean;

  selectedWarId: string | number;

  changeCount = 0;

  toolTipTranslation = {};

  readonly highscore = 'HIGHSCORE';

  constructor(private warService: WarService,
              private campaignService: CampaignService,
              public loginService: LoginService,
              private router: Router,
              private route: ActivatedRoute,
              private translate: TranslateService) {
    ['stats.sidebar.overview',
      'stats.sidebar.highscore',
      'stats.sidebar.battles'].forEach(i18n => {
      this.translate.get(i18n).subscribe((translated) => {
        this.toolTipTranslation[i18n] = translated;
      })
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    if (this.changeCount <= 1) {
      this.changeCount++;
      const url = this.router.url;
      const subPathWar = 'war/';
      const subPathHighscore = 'highscore/';
      const subPathOverview = 'overview/';

      if (url.endsWith(RouteConfig.statsPath) || url.includes(subPathOverview)) {
        this.selectOverview(this.campaign._id);
      } else {
        const idFetchPattern = /right:.*\/(.*)\)$/;
        const id = idFetchPattern.exec(url);
        if (id.length === 2) {
          if (url.includes(subPathWar)) {
            this.selectWar(id[1]);
          } else if (url.includes(subPathHighscore)) {
            this.selectHighscore(id[1]);
          }
        }
      }
    } else if (changes.campaign) {
      this.selectOverview(this.campaign._id);
    }
  }

  selectNewCampaign() {
    this.selectedWarId = null;
    this.router.navigate([{outlets: {'right': ['campaign']}}], {relativeTo: this.route});
  }

  selectWar(warId) {
    if (this.selectedWarId !== warId) {
      this.selectedWarId = warId;
      this.router.navigate([{outlets: {'right': ['war', warId]}}], {relativeTo: this.route});
    }
  }

  selectOverview(campaignId) {
    if (this.selectedWarId !== campaignId) {
      this.selectedWarId = campaignId;
      this.router.navigate([{outlets: {'right': ['overview', campaignId]}}], {relativeTo: this.route});
    }
  }

  selectHighscore(campaignId) {
    if (this.selectedWarId !== campaignId + this.highscore) {
      this.selectedWarId = campaignId + this.highscore;
      this.router.navigate([{outlets: {'right': ['highscore', campaignId]}}], {relativeTo: this.route});
    }
  }

  selectNewWar() {
    this.selectedWarId = null;
    this.router.navigate([{outlets: {'right': ['submit-war']}}], {relativeTo: this.route});
  }

  editWar(warId) {
    this.selectedWarId = warId;
    this.router.navigate([{outlets: {'right': ['submit-war', warId]}}], {relativeTo: this.route});
  }

  deleteWar(war: War) {
    this.translate.get('stats.sidebar.battle.manage.delete.confirm', {title: war.title})
        .subscribe((confirmQuestion: string) => {
          if (confirm(confirmQuestion)) {
            this.warService.deleteWar(war._id)
                .subscribe((res) => {
                  if (this.selectedWarId === war._id) {
                    this.selectOverview('all');
                  }
                  this.campaign.wars.splice(this.campaign.wars.indexOf(war), 1);
                });
          }
        });
  }
}