opt-cc/static/src/app/statistic/war/war-header/war-header.component.html

<div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
  <div class="war-header-container">
    <div class="pull-left head-field" style="width: 250px">
      <h4>{{'stats.scoreboard.standings' | translate}}</h4>
      <span [style.color]="fraction.COLOR_BLUFOR" style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
      <span style="font-size: x-large">|</span>
      <span [style.color]="fraction.COLOR_OPFOR" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
    </div>

    <div class="pull-left head-field " style="padding-left: 100px;">
      <h4 class="pull-left" style="margin-bottom: 0;">{{'stats.scoreboard.participants' | translate}}</h4>
      <ngx-charts-pie-chart
        class="pull-left"
        [view]="[120, 120]"
        [scheme]="colorScheme"
        [results]="playerChart"
        [legend]="false"
        [explodeSlices]="false"
        [labels]="false"
        [doughnut]="false"
        [gradient]="false">
      </ngx-charts-pie-chart>
    </div>

    <div class="pull-left " style="padding-left: 100px; padding-top:15px">
      <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">
        {{'stats.scoreboard.show.logs' | translate}}
      </a>
    </div>
  </div>

  <ul class="nav nav-tabs">
    <li class="nav-item" [ngClass]="{active :tab === 0}" (click)="switchTab(0)">
      <a class="nav-link">
        <mat-icon svgIcon="stats-scoreboard"></mat-icon>
        {{'stats.scoreboard.tab.scoreboard' | translate}}
      </a>
    </li>
    <li class="nav-item" [ngClass]="{active :tab === 1}" (click)="switchTab(1)">
      <a class="nav-link">
        <mat-icon svgIcon="stats-fraction" style="stroke:#666666"></mat-icon>
        {{'stats.scoreboard.tab.fractions' | translate}}
      </a>
    </li>
    <li class="nav-item" [ngClass]="{active :tab === 2, deactivated :tab !== 2} ">
      <a class="nav-link">
        <mat-icon svgIcon="stats-player"></mat-icon>
        {{'stats.scoreboard.tab.player' | translate}}
      </a>
    </li>
    <li class="nav-item" [ngClass]="{active :tab === 3}" (click)="switchTab(3)">
      <a class="nav-link">
        <mat-icon svgIcon="stats-performance" class="mat-icon-stats-performance"></mat-icon>
        {{'stats.scoreboard.tab.performance' | translate}}
      </a>
    </li>
    <li>
      <div *ngIf="tab === 0">
        <form class="pull-left tab-control">
          <label class="radio-inline">
            <input type="radio" name="fractSelect"
                   [checked]="(fractionFilterSelected == undefined) ? 'true' : 'false'"
                   [(ngModel)]="fractionFilterSelected"
                   (change)="filterPlayersByFraction()">
            {{'stats.scoreboard.fraction.filter.all' | translate}}
          </label>
          <label class="radio-inline">
            <input type="radio" name="fractSelect" value="BLUFOR"
                   [(ngModel)]="fractionFilterSelected"
                   #fractRadioBufor
                   (change)="filterPlayersByFraction(fractRadioBufor.value)">
            {{fraction.BLUFOR}}
          </label>
          <label class="radio-inline">
            <input type="radio" name="fractSelect" value="OPFOR"
                   [(ngModel)]="fractionFilterSelected"
                   #fractRadioOpfor
                   (change)="filterPlayersByFraction(fractRadioOpfor.value)">
            {{fraction.OPFOR}}
          </label>
        </form>
        <span class="btn btn-default pull-left tab-control" (click)="scoreBoardComponent.exportCSV()">
          {{'stats.scoreboard.download.csv' | translate}}
        </span>
      </div>
    </li>
  </ul>

  <!--Sub-Components (=TABS)-->
  <div *ngIf="war">
    <cc-scoreboard
      *ngIf="tab === 0"
      #scoreboard
      [war]="war"
      [fractionFilterSelected]="fractionFilterSelected"
      (playerTabSwitch)="switchToPlayerTab($event)">
    </cc-scoreboard>
    <war-detail-fraction
      *ngIf="tab === 1 && logData"
      [war]="war"
      [logData]="logData">
    </war-detail-fraction>
    <campaign-player-detail
      *ngIf="tab === 2 && singlePlayerView === 1"
      [campaignId]="war.campaign"
      [playerName]="playerDetailName"
      (switchTab)="switchTab($event)">
    </campaign-player-detail>
    <cc-server-statistics
      *ngIf="tab === 3"
      [war]="war"
      [performanceData]="[]">
    </cc-server-statistics>
  </div>

</div>