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

import {Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
import {War} from '../../../models/model-interfaces';
import {Fraction} from '../../../utils/fraction.enum';
import {PlayerUtils} from '../../../utils/player-utils';
import {saveAs} from 'file-saver/FileSaver';
import {MatSort} from '@angular/material';
import {SortUtils} from '../../../utils/sort-utils';
import {TranslateService} from '@ngx-translate/core';
import {FractionHelpers} from '../../../utils/global.helpers';

@Component({
  selector: 'cc-scoreboard',
  templateUrl: './scoreboard.component.html',
  styleUrls: ['./scoreboard.component.scss']
})
export class ScoreboardComponent implements OnChanges {

  readonly fraction = Fraction;

  readonly fractionHelpers = FractionHelpers;

  @Input() war: War;

  @Input() fractionFilterSelected: string;

  @Input() isSmallLayout: boolean;

  @Output() playerTabSwitch = new EventEmitter();

  tableHead = PlayerUtils.attributeDisplayNames;

  isSteamUUID = PlayerUtils.isSteamUUID;

  rows = [];

  sortedRows = [];

  currentSort = new MatSort();

  displayedColumns = this.tableHead.map(head => head.prop);

  constructor(private elRef: ElementRef,
              private translate: TranslateService) {
    this.displayedColumns.push('interact');
  }

  selectPlayerDetail(view: number, player) {
    this.playerTabSwitch.emit({
      view: view,
      player: player
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['isSmallLayout'] && changes['isSmallLayout'].previousValue !== changes['isSmallLayout'].currentValue) {
      const colIdxFraction = this.displayedColumns.findIndex(c => c === 'fraction');
      if (this.isSmallLayout) {
        this.displayedColumns.splice(colIdxFraction, 1);
      } else if (colIdxFraction === -1) {
        this.displayedColumns.splice(1, 0, 'fraction');
      }
    }

    if (changes.war) {
      changes.war.currentValue.players
             .filter(player => !player.initalized)
             .forEach(player => {
               // meters to kilometer or fill with null, since optional
               player.travelDistance = player.travelDistance ? Math.round(player.travelDistance / 1000) : 0;
               player.driverDistance = player.driverDistance ? Math.round(player.driverDistance / 1000) : 0;
               // mark initialized to avoid processing again on navigation
               player.initalized = true;
             });

      this.rows = changes.war.currentValue.players;
      this.currentSort.active = 'kill';
      this.sortScoreboardData(this.currentSort);
//      this.elRef.nativeElement
//          .querySelector('.datatable-body')
//          .scrollTo(0, 0);
    }
    if (changes.fractionFilterSelected) {
      this.filterPlayersByFraction(this.fractionFilterSelected);
    }
  }

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

  sortScoreboardData(sort: MatSort) {
    if (sort) {
      this.currentSort = sort;
    }
    const data = this.rows.slice();
    if (!sort.active || sort.direction === '') {
      this.sortedRows = data;
      return;
    }

    this.sortedRows = data.sort((a, b) => {
      const isAsc = sort.direction === 'desc';
      const sortProperty = sort.active;
      return SortUtils.compare(a[sortProperty], b[sortProperty], isAsc);
    });
  }

  exportCSV() {
    let csvOut = '';
    for (let i = 0; i < this.tableHead.length; i++) {
      this.translate.get(this.tableHead[i].head).subscribe((translated) => {
        csvOut += translated;
        if (i !== this.tableHead.length - 1) {
          csvOut += ',';
        }
      });
    }
    for (let j = 0; j < this.war.players.length; j++) {
      const player = this.war.players[j];
      csvOut += '\r\n';
      csvOut += '"' + player.name + '",';
      csvOut += player.fraction + ',';
      csvOut += player.kill + ',';
      csvOut += player.friendlyFire + ',';
      csvOut += player.revive + ',';
      csvOut += player.flagTouch + ',';
      csvOut += player.vehicleLight + ',';
      csvOut += player.vehicleHeavy + ',';
      csvOut += player.vehicleAir + ',';
      csvOut += player.travelDistance + ',';
      csvOut += player.driverDistance + ',';
      csvOut += player.death + ',';
      csvOut += player.respawn;
    }

    const blob = new Blob([csvOut], {type: 'text/plain'});
    saveAs(blob, this.war.title.toLowerCase().replace(' ', '_').concat('.csv'));
  }
}