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">
      <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="margin-top:0" *ngIf="isSmallLayout">
      <h4>{{'stats.scoreboard.participants' | translate}}</h4>
      <span [style.color]="fraction.COLOR_BLUFOR"
            style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.playersBlufor}}</span>
      <span style="font-size: 13px;font-weight: bold;">vs</span>
      <span [style.color]="fraction.COLOR_OPFOR"
            style="font-weight: bold; margin-left: 10px;">{{war.playersOpfor}} {{fraction.OPFOR}}</span>
    </div>

    <div class="pull-left head-field-pie-chart" *ngIf="!isSmallLayout">
      <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="btn-clean-log">
      <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,'nav-tab-hidden' : war && war.players[0] && !war.players[0].performance}"
        (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"
              *ngIf="!isSmallLayout"
              (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"
      [isSmallLayout]="isSmallLayout"
      (playerTabSwitch)="switchToPlayerTab($event)">
    </cc-scoreboard>
    <war-detail-fraction
      *ngIf="tab === 1 && logData"
      [war]="war"
      [logData]="logData"
      [isSmallLayout]="isSmallLayout">
    </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]="performanceData">
    </cc-server-statistics>
  </div>

</div>