From 7c3aebc4294411383b27887e61d465ea461c0160 Mon Sep 17 00:00:00 2001 From: Florian Hartwich Date: Tue, 12 Sep 2017 15:44:12 +0200 Subject: [PATCH 1/2] Add simple ngx.datatable --- api/routes/wars.js | 2 +- static/package.json | 2 +- static/src/app/statistic/stats.module.ts | 4 +- .../war-detail/war-detail.component.html | 65 ++----------------- .../war-detail/war-detail.component.ts | 21 ++++-- 5 files changed, 24 insertions(+), 70 deletions(-) diff --git a/api/routes/wars.js b/api/routes/wars.js index e57fcf4..33ba5cc 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}, {'_id': 0, 'warId': 0, '__v': 0, 'updatedAt': 0, 'timestamp': 0}, (err, items) => { if (err) { return next(err); } 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.html b/static/src/app/statistic/war-detail/war-detail.component.html index ec53cf9..655f1c0 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.html +++ b/static/src/app/statistic/war-detail/war-detail.component.html @@ -51,67 +51,10 @@
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- 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}} -
-
+ +
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..18943f4 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.ts +++ b/static/src/app/statistic/war-detail/war-detail.component.ts @@ -17,12 +17,12 @@ export class WarDetailComponent { fractionRadioSelect: string; - sortBy = "kill"; - - sortOrder = "desc"; - playerChart: any[] = []; + rows = []; + + columns = []; + constructor(private route: ActivatedRoute, private warService: WarService) { Object.assign(this, this.playerChart) @@ -35,7 +35,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", @@ -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) { From 879ba486c00f72b4c1320ab50b49f993e721b5c8 Mon Sep 17 00:00:00 2001 From: Florian Hartwich Date: Wed, 13 Sep 2017 11:49:34 +0200 Subject: [PATCH 2/2] Add single template datatable --- api/routes/wars.js | 2 +- package.json | 2 +- .../war-detail/war-detail.component.css | 61 +++++++++++-------- .../war-detail/war-detail.component.html | 33 ++++++++-- .../war-detail/war-detail.component.ts | 28 ++++----- 5 files changed, 76 insertions(+), 50 deletions(-) diff --git a/api/routes/wars.js b/api/routes/wars.js index 33ba5cc..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}, {'_id': 0, 'warId': 0, '__v': 0, 'updatedAt': 0, 'timestamp': 0}, (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/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 655f1c0..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,11 +50,32 @@ -
- - -
+ + + + + {{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 18943f4..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,15 +13,20 @@ export class WarDetailComponent { war: War = {players: []}; - players: Player[] = []; - fractionRadioSelect: string; playerChart: any[] = []; + cellHeight = 40; + rows = []; - columns = []; + reorderable: boolean = false; + + customClasses = { + sortAscending: 'glyphicon glyphicon-triangle-top', + sortDescending: 'glyphicon glyphicon-triangle-bottom', + }; constructor(private route: ActivatedRoute, private warService: WarService) { @@ -47,26 +52,15 @@ 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) { 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; } }