diff --git a/api/routes/wars.js b/api/routes/wars.js index e57fcf4..a3000ad 100644 --- a/api/routes/wars.js +++ b/api/routes/wars.js @@ -149,7 +149,7 @@ wars.route('/:id') err.status = codes.notfound; return next(err); } - PlayerModel.find({warId: item._id}, (err, items) => { + PlayerModel.find({warId: item._id}, {}, {sort: {kill: 'desc'}}, (err, items) => { if (err) { return next(err); } diff --git a/package.json b/package.json index ddc3151..e9f25d8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "opt-cc", - "version": "1.4.2", + "version": "1.4.3", "license": "MIT", "private": true, "scripts": { diff --git a/static/package.json b/static/package.json index 67bf713..7d7b6cc 100644 --- a/static/package.json +++ b/static/package.json @@ -23,7 +23,7 @@ "@angular/platform-browser-dynamic": "^4.3.2", "@angular/router": "^4.3.2", "@swimlane/ngx-charts": "^6.0.1", - "angular2-datatable": "^0.6.0", + "@swimlane/ngx-datatable": "^10.2.3", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "d3": "^4.10.0", diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index b1ce602..08e153b 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/static/src/app/statistic/stats.module.ts @@ -3,14 +3,14 @@ import {CommonModule} from "@angular/common"; import {SharedModule} from "../shared.module"; import {statsRouterModule, statsRoutingComponents} from "./stats.routing"; import {WarService} from "../services/war-service/war.service"; -import {DataTableModule} from "angular2-datatable"; import {LineChartModule, PieChartModule} from "@swimlane/ngx-charts"; import {AccordionModule, CarouselModule} from "ngx-bootstrap"; +import {NgxDatatableModule} from "@swimlane/ngx-datatable"; @NgModule({ declarations: statsRoutingComponents, imports: [CommonModule, SharedModule, statsRouterModule, LineChartModule, PieChartModule, - AccordionModule.forRoot(), CarouselModule.forRoot(), DataTableModule], + AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule], providers: [WarService] }) export class StatsModule { diff --git a/static/src/app/statistic/war-detail/war-detail.component.css b/static/src/app/statistic/war-detail/war-detail.component.css index b96dc82..d9a291c 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.css +++ b/static/src/app/statistic/war-detail/war-detail.component.css @@ -10,31 +10,8 @@ height: 100vh; } -:host /deep/ mfDefaultSorter > a { - color: white; -} - -.table { - overflow-wrap: break-word; - table-layout: fixed; -} - -.scoreboard-table-container { - min-width: 920px; - max-width: 920px; -} - -.table-container { - overflow-x: auto; -} - -.table-head { - background: #222222; - color: white; -} - -.cell-outline { - outline: 1px solid #D4D4D4; +.player-name { + font-weight: bold; } .text-opfor { @@ -45,3 +22,37 @@ color: blue; } +/* ########### DATATABLE ########### */ + +:host /deep/ .datatable-header { + background: #222222; + font-weight: 700; + border-radius: 10px 10px 0 0; + color: white; +} + +:host /deep/ span.datatable-header-cell-label, :host /deep/ div.datatable-body-cell-label { + padding-left: 8px; +} + +:host /deep/ .ngx-datatable .datatable-header { + /*vertical center alignment*/ + display: table-cell; + vertical-align: middle; +} + +:host /deep/ .ngx-datatable .datatable-body .datatable-body-row > div { + /*vertical alignment*/ + position: relative; + top: 10px; +} + +:host /deep/ .datatable-body-row { + color: #222222; + border-bottom: 1px solid grey; +} + +:host /deep/ .datatable-body-row:hover { + background-color: #f7f7f7; +} + diff --git a/static/src/app/statistic/war-detail/war-detail.component.html b/static/src/app/statistic/war-detail/war-detail.component.html index ec53cf9..6ff3d83 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.html +++ b/static/src/app/statistic/war-detail/war-detail.component.html @@ -50,68 +50,32 @@ -
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- Spieler - - Fraktion - - Kills - - FriendlyFire - - Revive - - Eroberung - - Tod - - Respawn -
- {{player.name}} - - {{player.fraction === 'BLUFOR' ? 'NATO' : 'CSAT'}} - - {{player.kill}} - - {{player.friendlyFire}} - - {{player.revive}} - - {{player.flagTouch}} - - {{player.death}} - - {{player.respawn}} -
-
-
+ + + + + {{value}} + + + + + + {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}} + + + + + + + + + diff --git a/static/src/app/statistic/war-detail/war-detail.component.ts b/static/src/app/statistic/war-detail/war-detail.component.ts index a0827b4..4d84ef6 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.ts +++ b/static/src/app/statistic/war-detail/war-detail.component.ts @@ -1,7 +1,7 @@ import {Component} from "@angular/core"; import {ActivatedRoute} from "@angular/router"; import {WarService} from "../../services/war-service/war.service"; -import {Player, War} from "../../models/model-interfaces"; +import {War} from "../../models/model-interfaces"; @Component({ @@ -13,16 +13,21 @@ export class WarDetailComponent { war: War = {players: []}; - players: Player[] = []; - fractionRadioSelect: string; - sortBy = "kill"; - - sortOrder = "desc"; - playerChart: any[] = []; + cellHeight = 40; + + rows = []; + + reorderable: boolean = false; + + customClasses = { + sortAscending: 'glyphicon glyphicon-triangle-top', + sortDescending: 'glyphicon glyphicon-triangle-bottom', + }; + constructor(private route: ActivatedRoute, private warService: WarService) { Object.assign(this, this.playerChart) @@ -35,7 +40,7 @@ export class WarDetailComponent { .flatMap(id => this.warService.getWar(id)) .subscribe(war => { this.war = war; - this.players = war.players; + this.rows = war.players; this.playerChart = [ { "name": "CSAT", @@ -51,11 +56,11 @@ export class WarDetailComponent { filterPlayersByFraction(fraction: string) { if (fraction) { - this.players = this.war.players.filter((player) => { + this.rows = this.war.players.filter((player) => { return player.fraction === fraction; }) } else { - this.players = this.war.players; + this.rows = this.war.players; } }