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

<div class="overview" xmlns="http://www.w3.org/1999/html">

  <div style="margin-left: 2%; min-height: 263px;">
    <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
    <h3 class="pull-left">
      <h4>Endpunktestand:</h4>
      <span class="text-blufor" style="font-weight: bold; margin-right: 10px">NATO {{war.ptBlufor}}</span>
      <span style="font-size: x-large">|</span>
      <span class="text-opfor" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} CSAT</span>
    </h3>

    <h3 class="pull-left" style="padding-left: 6%;">
      <h4>Teilnehmer:</h4>
      <ngx-charts-pie-chart
        [view]="[150, 150]"
        [scheme]="{domain: ['#B22222', '#0000FF']}"
        [results]="playerChart"
        [legend]="false"
        [explodeSlices]="false"
        [labels]="false"
        [doughnut]="false"
        [gradient]="false">
      </ngx-charts-pie-chart>
    </h3>

    <div style="margin-left: 600px; margin-top:1%">
      <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
        anzeigen</a>
      <form class="form-group">
        <label class="radio-inline">
          <input type="radio" name="fractSelect"
                 [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
                 [(ngModel)]="fractionRadioSelect"
                 (change)="filterPlayersByFraction()">Alle
        </label>
        <label class="radio-inline">
          <input type="radio" name="fractSelect" value="BLUFOR"
                 [(ngModel)]="fractionRadioSelect"
                 #fractRadioBufor
                 (change)="filterPlayersByFraction(fractRadioBufor.value)">NATO
        </label>
        <label class="radio-inline">
          <input type="radio" name="fractSelect" value="OPFOR"
                 [(ngModel)]="fractionRadioSelect"
                 #fractRadioOpfor
                 (change)="filterPlayersByFraction(fractRadioOpfor.value)">CSAT
        </label>
        <br>
      </form>
    </div>
  </div>

  <div class="pull-left" style="margin-left: 2%">
    <div class="table-container scoreboard-table-container">
      <table class="table table-hover" [mfData]="players" #mf="mfDataTable" [(mfSortBy)]="sortBy"
             [(mfSortOrder)]="sortOrder">
        <thead>
        <tr class="table-head">
          <th class="col-sm-2" style="border-radius: 10px 0 0 0;">
            <mfDefaultSorter by="name">Spieler</mfDefaultSorter>
          </th>
          <th class="col-sm-1">
            <mfDefaultSorter by="fraction">Fraktion</mfDefaultSorter>
          </th>
          <th class="col-sm-1">
            <mfDefaultSorter by="kill">Kills</mfDefaultSorter>
          </th>
          <th class="col-sm-1">
            <mfDefaultSorter by="friendlyFire">FriendlyFire</mfDefaultSorter>
          </th>
          <th class="col-sm-1">
            <mfDefaultSorter by="revive">Revive</mfDefaultSorter>
          </th>
          <th class="col-sm-1">
            <mfDefaultSorter by="flagTouch">Eroberung</mfDefaultSorter>
          </th>
          <th class="col-sm-1">
            <mfDefaultSorter by="death">Tod</mfDefaultSorter>
          </th>
          <th class="col-sm-1" style="border-radius: 0 10px 0 0;">
            <mfDefaultSorter by="respawn">Respawn</mfDefaultSorter>
          </th>
        </tr>
        </thead>
        <tbody *ngFor="let player of mf.data">
        <tr class="cell-outline">
          <td style="font-weight: bold" [ngClass]="player.fraction === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
            {{player.name}}
          </td>
          <td>
            {{player.fraction === 'BLUFOR' ? 'NATO' : 'CSAT'}}
          </td>
          <td>
            {{player.kill}}
          </td>
          <td>
            {{player.friendlyFire}}
          </td>
          <td>
            {{player.revive}}
          </td>
          <td>
            {{player.flagTouch}}
          </td>
          <td>
            {{player.death}}
          </td>
          <td>
            {{player.respawn}}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>