Add simple ngx.datatable

pull/8/head
Florian Hartwich 2017-09-12 15:44:12 +02:00
parent 3f0761e90a
commit 7c3aebc429
5 changed files with 24 additions and 70 deletions

View File

@ -149,7 +149,7 @@ wars.route('/:id')
err.status = codes.notfound; err.status = codes.notfound;
return next(err); return next(err);
} }
PlayerModel.find({warId: item._id}, (err, items) => { PlayerModel.find({warId: item._id}, {'_id': 0, 'warId': 0, '__v': 0, 'updatedAt': 0, 'timestamp': 0}, (err, items) => {
if (err) { if (err) {
return next(err); return next(err);
} }

View File

@ -23,7 +23,7 @@
"@angular/platform-browser-dynamic": "^4.3.2", "@angular/platform-browser-dynamic": "^4.3.2",
"@angular/router": "^4.3.2", "@angular/router": "^4.3.2",
"@swimlane/ngx-charts": "^6.0.1", "@swimlane/ngx-charts": "^6.0.1",
"angular2-datatable": "^0.6.0", "@swimlane/ngx-datatable": "^10.2.3",
"bootstrap": "^3.3.7", "bootstrap": "^3.3.7",
"core-js": "^2.4.1", "core-js": "^2.4.1",
"d3": "^4.10.0", "d3": "^4.10.0",

View File

@ -3,14 +3,14 @@ import {CommonModule} from "@angular/common";
import {SharedModule} from "../shared.module"; import {SharedModule} from "../shared.module";
import {statsRouterModule, statsRoutingComponents} from "./stats.routing"; import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
import {WarService} from "../services/war-service/war.service"; import {WarService} from "../services/war-service/war.service";
import {DataTableModule} from "angular2-datatable";
import {LineChartModule, PieChartModule} from "@swimlane/ngx-charts"; import {LineChartModule, PieChartModule} from "@swimlane/ngx-charts";
import {AccordionModule, CarouselModule} from "ngx-bootstrap"; import {AccordionModule, CarouselModule} from "ngx-bootstrap";
import {NgxDatatableModule} from "@swimlane/ngx-datatable";
@NgModule({ @NgModule({
declarations: statsRoutingComponents, declarations: statsRoutingComponents,
imports: [CommonModule, SharedModule, statsRouterModule, LineChartModule, PieChartModule, imports: [CommonModule, SharedModule, statsRouterModule, LineChartModule, PieChartModule,
AccordionModule.forRoot(), CarouselModule.forRoot(), DataTableModule], AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule],
providers: [WarService] providers: [WarService]
}) })
export class StatsModule { export class StatsModule {

View File

@ -51,67 +51,10 @@
</div> </div>
<div class="pull-left"> <div class="pull-left">
<div class="table-container scoreboard-table-container"> <ngx-datatable
<table class="table table-hover" [mfData]="players" #mf="mfDataTable" [(mfSortBy)]="sortBy" [rows]="rows"
[(mfSortOrder)]="sortOrder"> [columns]="columns">
<thead> </ngx-datatable>
<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>
</div> </div>

View File

@ -17,12 +17,12 @@ export class WarDetailComponent {
fractionRadioSelect: string; fractionRadioSelect: string;
sortBy = "kill";
sortOrder = "desc";
playerChart: any[] = []; playerChart: any[] = [];
rows = [];
columns = [];
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private warService: WarService) { private warService: WarService) {
Object.assign(this, this.playerChart) Object.assign(this, this.playerChart)
@ -35,7 +35,7 @@ export class WarDetailComponent {
.flatMap(id => this.warService.getWar(id)) .flatMap(id => this.warService.getWar(id))
.subscribe(war => { .subscribe(war => {
this.war = war; this.war = war;
this.players = war.players; this.rows = war.players;
this.playerChart = [ this.playerChart = [
{ {
"name": "CSAT", "name": "CSAT",
@ -47,6 +47,17 @@ export class WarDetailComponent {
} }
]; ];
}); });
this.columns = [
{prop: 'name', name: 'Spieler'},
{prop: 'fraction', name: 'Fraktion'},
{prop: 'kill', name: 'Kills'},
{prop: 'friendlyFire', name: 'FriendlyFire'},
{prop: 'revive', name: 'Revive'},
{prop: 'flagTouch', name: 'Eroberung'},
{prop: 'death', name: 'Tod'},
{prop: 'respawn', name: 'Respawn'}
];
} }
filterPlayersByFraction(fraction: string) { filterPlayersByFraction(fraction: string) {