244 lines
9.0 KiB
HTML
244 lines
9.0 KiB
HTML
<div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
|
|
<div class=vertical-spacer></div>
|
|
<div style="overflow:hidden">
|
|
<div style="width: 920px;min-height: 205px;">
|
|
<h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
|
|
<div class="pull-left head-field" style="width: 250px">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="pull-left head-field " style="padding-left: 140px;">
|
|
<h4 style="margin-bottom: 0;">Teilnehmer:</h4>
|
|
<ngx-charts-pie-chart
|
|
[view]="[120, 120]"
|
|
[scheme]="{domain: ['#B22222', '#0000FF']}"
|
|
[results]="playerChart"
|
|
[legend]="false"
|
|
[explodeSlices]="false"
|
|
[labels]="false"
|
|
[doughnut]="false"
|
|
[gradient]="false">
|
|
</ngx-charts-pie-chart>
|
|
</div>
|
|
|
|
<div class="pull-left " style="padding-left: 150px; padding-top:15px">
|
|
<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>
|
|
|
|
<tabset #staticTabs>
|
|
<tab>
|
|
<ng-template tabHeading>
|
|
<img src="../../../assets/scoreboard-btn.png"> Scoreboard
|
|
</ng-template>
|
|
<div class=vertical-spacer></div>
|
|
<ngx-datatable
|
|
[rows]="rows"
|
|
[sorts]="[{prop: 'kill', dir: 'desc'}]"
|
|
[reorderable]="reorderable"
|
|
[messages]="{emptyMessage: 'Loading...'}"
|
|
[headerHeight]="cellHeight"
|
|
[rowHeight]="cellHeight"
|
|
[cssClasses]='customClasses'
|
|
[selectionType]="'single'"
|
|
(select)="selectPlayerDetail($event)">
|
|
<ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
|
|
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
|
|
<span class="player-name"
|
|
[ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
|
|
{{value}}
|
|
</span>
|
|
</ng-template>
|
|
</ngx-datatable-column>
|
|
<ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
|
|
<ng-template ngx-datatable-cell-template let-value="value">
|
|
{{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
|
|
</ng-template>
|
|
</ngx-datatable-column>
|
|
<ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
|
|
<ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
|
|
<ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
|
|
<ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
|
|
<ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
|
|
<ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
|
|
</ngx-datatable>
|
|
</tab>
|
|
|
|
<tab (select)="loadFractionData()">
|
|
<ng-template tabHeading>
|
|
<img src="../../../assets/fraction-btn.png"> Fraktionen
|
|
</ng-template>
|
|
<div class="fade-in chart-container">
|
|
<ngx-charts-line-chart
|
|
[scheme]="colorScheme"
|
|
[results]="pointData"
|
|
[gradient]="gradient"
|
|
[xAxis]="xAxis"
|
|
[yAxis]="yAxis"
|
|
[curve]="monotoneYCurve"
|
|
[legend]="legend"
|
|
[legendTitle]="legendTitle"
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
[yAxisLabel]="yAxisLabelPoints"
|
|
[autoScale]="autoscale"
|
|
[timeline]="timeline"
|
|
[roundDomains]="roundDomains">
|
|
</ngx-charts-line-chart>
|
|
</div>
|
|
<div class="fade-in chart-container">
|
|
<ngx-charts-line-chart
|
|
[scheme]="colorScheme"
|
|
[results]="budgetData"
|
|
[gradient]="gradient"
|
|
[xAxis]="xAxis"
|
|
[yAxis]="yAxis"
|
|
[curve]="monotoneYCurve"
|
|
[legend]="legend"
|
|
[legendTitle]="legendTitle"
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
[yAxisLabel]="yAxisLabelBudget"
|
|
[autoScale]="autoscale"
|
|
[timeline]="timeline"
|
|
[roundDomains]="roundDomains">
|
|
</ngx-charts-line-chart>
|
|
</div>
|
|
<div class="fade-in chart-container">
|
|
<ngx-charts-line-chart
|
|
[scheme]="colorScheme"
|
|
[results]="killData"
|
|
[gradient]="gradient"
|
|
[xAxis]="xAxis"
|
|
[yAxis]="yAxis"
|
|
[curve]="monotoneYCurve"
|
|
[legend]="legend"
|
|
[legendTitle]="legendTitle"
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
[yAxisLabel]="yAxisLabelKill"
|
|
[autoScale]="autoscale"
|
|
[timeline]="timeline"
|
|
[roundDomains]="roundDomains">
|
|
</ngx-charts-line-chart>
|
|
</div>
|
|
<div class="fade-in chart-container">
|
|
<ngx-charts-line-chart
|
|
[scheme]="colorScheme"
|
|
[results]="friendlyFireData"
|
|
[gradient]="gradient"
|
|
[xAxis]="xAxis"
|
|
[yAxis]="yAxis"
|
|
[curve]="monotoneYCurve"
|
|
[legend]="legend"
|
|
[legendTitle]="legendTitle"
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
[yAxisLabel]="yAxisLabelFriendlyFire"
|
|
[autoScale]="autoscale"
|
|
[timeline]="timeline"
|
|
[roundDomains]="roundDomains">
|
|
</ngx-charts-line-chart>
|
|
</div>
|
|
<div class="fade-in chart-container">
|
|
<ngx-charts-line-chart
|
|
[scheme]="colorScheme"
|
|
[results]="transportData"
|
|
[gradient]="gradient"
|
|
[xAxis]="xAxis"
|
|
[yAxis]="yAxis"
|
|
[curve]="monotoneYCurve"
|
|
[legend]="legend"
|
|
[legendTitle]="legendTitle"
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
[yAxisLabel]="yAxisLabelTransport"
|
|
[autoScale]="autoscale"
|
|
[timeline]="timeline"
|
|
[roundDomains]="roundDomains">
|
|
</ngx-charts-line-chart>
|
|
</div>
|
|
<div class="fade-in chart-container">
|
|
<ngx-charts-line-chart
|
|
[scheme]="colorScheme"
|
|
[results]="reviveData"
|
|
[gradient]="gradient"
|
|
[xAxis]="xAxis"
|
|
[yAxis]="yAxis"
|
|
[curve]="monotoneYCurve"
|
|
[legend]="legend"
|
|
[legendTitle]="legendTitle"
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
[yAxisLabel]="yAxisLabelRevive"
|
|
[autoScale]="autoscale"
|
|
[timeline]="timeline"
|
|
[roundDomains]="roundDomains">
|
|
</ngx-charts-line-chart>
|
|
</div>
|
|
<div class="fade-in chart-container">
|
|
<ngx-charts-line-chart
|
|
[scheme]="colorScheme"
|
|
[results]="stabilizedData"
|
|
[gradient]="gradient"
|
|
[xAxis]="xAxis"
|
|
[yAxis]="yAxis"
|
|
[curve]="monotoneYCurve"
|
|
[legend]="legend"
|
|
[legendTitle]="legendTitle"
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
[yAxisLabel]="yAxisLabelStabilize"
|
|
[autoScale]="autoscale"
|
|
[timeline]="timeline"
|
|
[roundDomains]="roundDomains">
|
|
</ngx-charts-line-chart>
|
|
</div>
|
|
<div class="fade-in chart-container">
|
|
<ngx-charts-area-chart
|
|
[scheme]="colorScheme"
|
|
[results]="flagData"
|
|
[xAxis]="xAxis"
|
|
[yAxis]="yAxis"
|
|
[curve]="stepCurve"
|
|
[legend]="legend"
|
|
[legendTitle]="legendTitle"
|
|
[showXAxisLabel]="showXAxisLabel"
|
|
[showYAxisLabel]="showYAxisLabel"
|
|
[yAxisLabel]="yAxisLabelFlag"
|
|
[autoScale]="autoscale"
|
|
[timeline]="timeline"
|
|
[roundDomains]="roundDomains">
|
|
</ngx-charts-area-chart>
|
|
</div>
|
|
</tab>
|
|
</tabset>
|
|
|
|
</div>
|