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

import {Component} from "@angular/core";
import {ActivatedRoute} from "@angular/router";
import {WarService} from "../../services/war-service/war.service";
import {Player, War} from "../../models/model-interfaces";


@Component({
  selector: 'war-detail',
  templateUrl: './war-detail.component.html',
  styleUrls: ['./war-detail.component.css']
})
export class WarDetailComponent {

  war: War = {players: []};

  players: Player[] = [];

  fractionRadioSelect: string;

  playerChart: any[] = [];

  rows = [];

  columns = [];

  constructor(private route: ActivatedRoute,
              private warService: WarService) {
    Object.assign(this, this.playerChart)
  }

  ngOnInit() {
    this.route.params
      .map(params => params['id'])
      .filter(id => id != undefined)
      .flatMap(id => this.warService.getWar(id))
      .subscribe(war => {
        this.war = war;
        this.rows = war.players;
        this.playerChart = [
          {
            "name": "CSAT",
            "value": war.playersOpfor
          },
          {
            "name": "NATO",
            "value": war.playersBlufor
          }
        ];
      });

    this.columns = [
      {prop: 'name', name: 'Spieler'},
      {prop: 'fraction', name: 'Fraktion'},
      {prop: 'kill', name: 'Kills'},
      {prop: 'friendlyFire', name: 'FriendlyFire'},
      {prop: 'revive', name: 'Revive'},
      {prop: 'flagTouch', name: 'Eroberung'},
      {prop: 'death', name: 'Tod'},
      {prop: 'respawn', name: 'Respawn'}
    ];
  }

  filterPlayersByFraction(fraction: string) {
    if (fraction) {
      this.players = this.war.players.filter((player) => {
        return player.fraction === fraction;
      })
    } else {
      this.players = this.war.players;
    }
  }

}