From a74f1bd6738c0cff547d23eefde802efe7550ce4 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Mon, 13 Nov 2017 13:49:47 +0100 Subject: [PATCH] Refactor war detail components; Fix styles; Add Scoreboard additional btns --- .../campaign-player-detail.component.html | 2 +- static/src/app/statistic/stats.module.ts | 4 +- static/src/app/statistic/stats.routing.ts | 12 +- .../war-detail-header.component.css | 33 ------ .../war-detail-header.component.html | 73 ------------ .../war-detail-header.component.ts | 52 --------- .../fraction-stats.component.css} | 0 .../fraction-stats.component.html} | 0 .../fraction-stats.component.ts} | 31 +++-- .../scoreboard/scoreboard.component.css | 42 +++++++ .../scoreboard/scoreboard.component.html | 42 +++++++ .../scoreboard/scoreboard.component.ts | 72 ++++++++++++ .../war-detail/war-detail.component.css | 99 +++------------- .../war-detail/war-detail.component.html | 106 ++++++++++++------ .../war-detail/war-detail.component.ts | 80 +++++++------ 15 files changed, 304 insertions(+), 344 deletions(-) delete mode 100644 static/src/app/statistic/war-detail-header/war-detail-header.component.css delete mode 100644 static/src/app/statistic/war-detail-header/war-detail-header.component.html delete mode 100644 static/src/app/statistic/war-detail-header/war-detail-header.component.ts rename static/src/app/statistic/{war-detail-fraction/war-detail-fraction.component.css => war-detail/fraction-stats/fraction-stats.component.css} (100%) rename static/src/app/statistic/{war-detail-fraction/war-detail-fraction.component.html => war-detail/fraction-stats/fraction-stats.component.html} (100%) rename static/src/app/statistic/{war-detail-fraction/war-detail-fraction.component.ts => war-detail/fraction-stats/fraction-stats.component.ts} (93%) create mode 100644 static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css create mode 100644 static/src/app/statistic/war-detail/scoreboard/scoreboard.component.html create mode 100644 static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts diff --git a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html index 8507339..d9a92f9 100644 --- a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html +++ b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html @@ -1,5 +1,5 @@
-

Spielerstatistik - {{campaignPlayer.name}}

+

Kampagnendetails - {{campaignPlayer.name}}

{{campaignPlayer.campaign.title}} Kampagne

< Zurück diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index 5be86ae..27c7bb5 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/static/src/app/statistic/stats.module.ts @@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module"; import {statsRouterModule, statsRoutingComponents} from "./stats.routing"; import {WarService} from "../services/logs/war.service"; import {NgxChartsModule} from "@swimlane/ngx-charts"; -import {AccordionModule, BsDropdownModule, ButtonsModule, TabsModule} from "ngx-bootstrap"; +import {AccordionModule, ButtonsModule} from "ngx-bootstrap"; import {CampaignService} from "../services/logs/campaign.service"; import {NgxDatatableModule} from "@swimlane/ngx-datatable"; import {PlayerService} from "../services/logs/player.service"; @@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service"; @NgModule({ declarations: statsRoutingComponents, imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, - AccordionModule.forRoot(), BsDropdownModule.forRoot(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule], + AccordionModule.forRoot(), ButtonsModule.forRoot(), NgxDatatableModule], providers: [WarService, CampaignService, PlayerService, LogsService] }) export class StatsModule { diff --git a/static/src/app/statistic/stats.routing.ts b/static/src/app/statistic/stats.routing.ts index 92b1188..db263b9 100644 --- a/static/src/app/statistic/stats.routing.ts +++ b/static/src/app/statistic/stats.routing.ts @@ -1,15 +1,15 @@ import {RouterModule, Routes} from "@angular/router"; import {StatisticComponent} from "./stats.component"; -import {WarDetailComponent} from "./war-detail/war-detail.component"; -import {WarSubmitComponent} from "./war-submit/war-submit.component"; import {WarListComponent} from "./war-list/war-list.component"; import {StatisticOverviewComponent} from "./overview/stats-overview.component"; import {WarItemComponent} from "./war-list/war-item.component"; import {ModuleWithProviders} from "@angular/core"; import {CampaignSubmitComponent} from "./campaign-submit/campaign-submit.component"; import {CampaignPlayerDetailComponent} from "./campaign-player-detail/campaign-player-detail.component"; -import {WarDetailHeaderComponent} from "./war-detail-header/war-detail-header.component"; -import {WarDetailFractionComponent} from "./war-detail-fraction/war-detail-fraction.component"; +import {WarDetailComponent} from "./war-detail/war-detail.component"; +import {ScoreboardComponent} from "./war-detail/scoreboard/scoreboard.component"; +import {WarSubmitComponent} from "./war-submit/war-submit.component"; +import {FractionStatsComponent} from "./war-detail/fraction-stats/fraction-stats.component"; export const statsRoutes: Routes = [{ @@ -38,7 +38,7 @@ export const statsRoutes: Routes = [{ }, { path: 'war/:id', - component: WarDetailHeaderComponent, + component: WarDetailComponent, outlet: 'right' }, { @@ -50,6 +50,6 @@ export const statsRoutes: Routes = [{ export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes); export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent, - WarListComponent, WarSubmitComponent, WarDetailHeaderComponent, WarDetailComponent, WarDetailFractionComponent, + WarListComponent, WarSubmitComponent, WarDetailComponent, ScoreboardComponent, FractionStatsComponent, CampaignPlayerDetailComponent, WarItemComponent]; diff --git a/static/src/app/statistic/war-detail-header/war-detail-header.component.css b/static/src/app/statistic/war-detail-header/war-detail-header.component.css deleted file mode 100644 index 0d69397..0000000 --- a/static/src/app/statistic/war-detail-header/war-detail-header.component.css +++ /dev/null @@ -1,33 +0,0 @@ -.war-header-container { - width: 920px; - min-height: 205px; - margin: auto; -} - -.head-field { - font-size: 24px; - margin-top: 10px; - margin-bottom: 10px; -} - -.war-header { - border-bottom: thin solid lightgrey; -} - -.nav-tabs > li.active > a { - background: #222222; -} - -.nav-tabs > li > a { - background: #4b4b4b; -} - -.nav-tabs > li:not(.active) > a:hover { - background: #afafaf; - color: #f5f5f5; -} - -.nav-link { - cursor: pointer !important; - color: #FFF !important; -} diff --git a/static/src/app/statistic/war-detail-header/war-detail-header.component.html b/static/src/app/statistic/war-detail-header/war-detail-header.component.html deleted file mode 100644 index 372076c..0000000 --- a/static/src/app/statistic/war-detail-header/war-detail-header.component.html +++ /dev/null @@ -1,73 +0,0 @@ -
-
-

{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}

-
-

Endpunktestand:

- {{fraction.BLUFOR}} {{war.ptBlufor}} - | - {{war.ptOpfor}} {{fraction.OPFOR}} -
- -
-

Teilnehmer:

- - -
- -
- Logfile - anzeigen -
- - - -
-
-
-
- - - -
- - - - -
- -
diff --git a/static/src/app/statistic/war-detail-header/war-detail-header.component.ts b/static/src/app/statistic/war-detail-header/war-detail-header.component.ts deleted file mode 100644 index b87f166..0000000 --- a/static/src/app/statistic/war-detail-header/war-detail-header.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -import {Component} from "@angular/core"; -import {ActivatedRoute} from "@angular/router"; -import {WarService} from "../../services/logs/war.service"; -import {War} from "../../models/model-interfaces"; -import {ChartUtils} from "../../utils/chart-utils"; -import {Fraction} from "../../utils/fraction.enum"; - - -@Component({ - selector: 'war-detail-header', - templateUrl: './war-detail-header.component.html', - styleUrls: ['./war-detail-header.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css'] -}) -export class WarDetailHeaderComponent { - - readonly fraction = Fraction; - - war: War; - - tab: number; - - fractionFilterSelected: string; - - playerChart: any[] = []; - - colorScheme = { - domain: [Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR] - }; - - constructor(private route: ActivatedRoute, - private warService: WarService) { - } - - ngOnInit() { - this.route.params - .map(params => params['id']) - .filter(id => id != undefined) - .flatMap(id => this.warService.getWar(id)) - .subscribe(war => { - this.tab = 0; - this.war = war; - this.fractionFilterSelected = undefined; - this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor); - Object.assign(this, [this.playerChart]); - }) - } - - filterPlayersByFraction(fraction?: string) { - this.fractionFilterSelected = fraction; - } - -} diff --git a/static/src/app/statistic/war-detail-fraction/war-detail-fraction.component.css b/static/src/app/statistic/war-detail/fraction-stats/fraction-stats.component.css similarity index 100% rename from static/src/app/statistic/war-detail-fraction/war-detail-fraction.component.css rename to static/src/app/statistic/war-detail/fraction-stats/fraction-stats.component.css diff --git a/static/src/app/statistic/war-detail-fraction/war-detail-fraction.component.html b/static/src/app/statistic/war-detail/fraction-stats/fraction-stats.component.html similarity index 100% rename from static/src/app/statistic/war-detail-fraction/war-detail-fraction.component.html rename to static/src/app/statistic/war-detail/fraction-stats/fraction-stats.component.html diff --git a/static/src/app/statistic/war-detail-fraction/war-detail-fraction.component.ts b/static/src/app/statistic/war-detail/fraction-stats/fraction-stats.component.ts similarity index 93% rename from static/src/app/statistic/war-detail-fraction/war-detail-fraction.component.ts rename to static/src/app/statistic/war-detail/fraction-stats/fraction-stats.component.ts index cec9da3..58756a7 100644 --- a/static/src/app/statistic/war-detail-fraction/war-detail-fraction.component.ts +++ b/static/src/app/statistic/war-detail/fraction-stats/fraction-stats.component.ts @@ -1,18 +1,17 @@ import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core"; -import {LogsService} from "../../services/logs/logs.service"; import * as d3 from "d3"; -import {ChartUtils} from "../../utils/chart-utils"; -import {Fraction} from "../../utils/fraction.enum"; -import {War} from "../../models/model-interfaces"; +import {ChartUtils} from "../../../utils/chart-utils"; +import {Fraction} from "../../../utils/fraction.enum"; +import {War} from "../../../models/model-interfaces"; @Component({ selector: 'war-detail-fraction', - templateUrl: './war-detail-fraction.component.html', - inputs: ['war'], - styleUrls: ['./war-detail-fraction.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css'] + templateUrl: './fraction-stats.component.html', + inputs: ['war', 'logData'], + styleUrls: ['./fraction-stats.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css'] }) -export class WarDetailFractionComponent { +export class FractionStatsComponent { readonly fraction = Fraction; @@ -67,14 +66,14 @@ export class WarDetailFractionComponent { timeline = false; roundDomains = true; - constructor(private logsService: LogsService) { + constructor() { } ngOnInit() { } ngOnChanges(changes: SimpleChanges) { - if (changes.war) { + if (changes.war || changes.logData) { this.initialized = { budget: false, kill: false, @@ -134,14 +133,10 @@ export class WarDetailFractionComponent { loadFractionData() { this.initializeTempCollections(); - - this.logsService.getFullLog(this.war._id).subscribe((data) => { - this.logData = data; - this.initPointData(); - this.showLineChart = true; - this.lineChartLabel = this.labelPoints; - this.lineChartData = this.tmpPointData; - }); + this.initPointData(); + this.showLineChart = true; + this.lineChartLabel = this.labelPoints; + this.lineChartData = this.tmpPointData; } initPointData() { diff --git a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css new file mode 100644 index 0000000..856b24a --- /dev/null +++ b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css @@ -0,0 +1,42 @@ +.player-name { + font-weight: bold; +} + +/* ########### 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; +} + +.in-table-btn { + position: absolute; + margin-top: -5px; +} diff --git a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.html b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.html new file mode 100644 index 0000000..cb70ec2 --- /dev/null +++ b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.html @@ -0,0 +1,42 @@ +
+ + + + + {{value}} + + + + + + {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} + + + + + + + + + + + Detail + + + + + Gesamt + + + +
diff --git a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts new file mode 100644 index 0000000..945fbbe --- /dev/null +++ b/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts @@ -0,0 +1,72 @@ +import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core"; +import {ActivatedRoute, Router} from "@angular/router"; +import {War} from "../../../models/model-interfaces"; +import {Fraction} from "../../../utils/fraction.enum"; + +@Component({ + selector: 'scoreboard', + templateUrl: './scoreboard.component.html', + inputs: ['war', 'fractionFilterSelected'], + styleUrls: ['./scoreboard.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css'] +}) +export class ScoreboardComponent { + + readonly fraction = Fraction; + + @ViewChild('overview') private overviewContainer: ElementRef; + + war: War; + + fractionFilterSelected: string; + + cellHeight = 40; + + rows = []; + + reorderable: boolean = false; + + customClasses = { + sortAscending: 'glyphicon glyphicon-triangle-top', + sortDescending: 'glyphicon glyphicon-triangle-bottom', + }; + + constructor(private route: ActivatedRoute, + private router: Router) { + } + + ngOnInit() { + } + + selectPlayerDetail(playerName: string) { + this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + playerName], + {relativeTo: this.route}); + } + + ngOnChanges(changes: SimpleChanges) { + if (changes.war) { + this.rows = changes.war.currentValue.players; + } + if (changes.fractionFilterSelected) { + this.filterPlayersByFraction(this.fractionFilterSelected) + } + this.scrollOverviewTop(); + } + + scrollOverviewTop() { + try { + this.overviewContainer.nativeElement.scrollTop = 0; + } catch (err) { + } + } + + filterPlayersByFraction(fraction?: string) { + if (fraction) { + this.rows = this.war.players.filter((player) => { + return player.fraction === fraction; + }) + } else { + this.rows = this.war.players; + } + } + +} 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 96409fd..fc05931 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.css +++ b/static/src/app/statistic/war-detail/war-detail.component.css @@ -1,7 +1,7 @@ -.vertical-spacer { - height: 205px; - float: left; - width: 4%; +.war-header-container { + width: 920px; + min-height: 205px; + margin: auto; } .head-field { @@ -10,99 +10,28 @@ margin-bottom: 10px; } -@media screen and (min-width: 1500px) { - .vertical-spacer { - width: 15%; - } +.war-header { + border-bottom: thin solid lightgrey; } -@media screen and (min-width: 2000px) { - .vertical-spacer { - width: 20%; - } -} - -.overview { - overflow-y: scroll; - overflow-x: hidden; - border-left: thin solid lightgrey; - bottom: 20px; - height: 100vh; -} - -.player-name { - font-weight: bold; -} - -/* ########### DATATABLE ########### */ - -:host /deep/ .datatable-header { +.nav-tabs > li.active > a { 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; +.nav-tabs { + border-bottom: 0; } -: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; - cursor: pointer; -} - -:host /deep/ .datatable-body-row:hover { - background-color: #f7f7f7; -} - -/* ########### CHART-TAB ######## */ - -.btn-dark { +.nav-tabs > li > a { background: #4b4b4b; - color: #f5f5f5; - border-color: #000; } -.btn-dark:hover { +.nav-tabs > li:not(.active) > a:hover { background: #afafaf; color: #f5f5f5; } -.btn-dark.active { - background: #222222; +.nav-link { + cursor: pointer !important; + color: #FFF !important; } - -.chart-container { - width: 95%; - margin: 2%; - min-width: 900px; - height: 600px; - padding: 15px; - float: left; -} - -.chart-select-group { - width: 50%; - margin: auto; - position: inherit; - display: block; - vertical-align: middle; -} - -/*.dropdown-menu > li > a {*/ -/*cursor: pointer;*/ -/*}*/ 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 335fb77..6efb2b7 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.html +++ b/static/src/app/statistic/war-detail/war-detail.component.html @@ -1,33 +1,75 @@ -
- - - - - {{value}} - - - - - - {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} - - - - - - - - - +
+
+

{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}

+
+

Endpunktestand:

+ {{fraction.BLUFOR}} {{war.ptBlufor}} + | + {{war.ptOpfor}} {{fraction.OPFOR}} +
+ +
+

Teilnehmer:

+ + +
+ +
+ Logfile + anzeigen +
+ + + +
+
+
+
+ + + + +
+ + + + +
+
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 cdea6c5..5560a9e 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.ts +++ b/static/src/app/statistic/war-detail/war-detail.component.ts @@ -1,75 +1,71 @@ -import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core"; -import {ActivatedRoute, Router} from "@angular/router"; +import {Component} from "@angular/core"; +import {ActivatedRoute} from "@angular/router"; +import {WarService} from "../../services/logs/war.service"; import {War} from "../../models/model-interfaces"; +import {ChartUtils} from "../../utils/chart-utils"; import {Fraction} from "../../utils/fraction.enum"; +import {LogsService} from "../../services/logs/logs.service"; @Component({ selector: 'war-detail', templateUrl: './war-detail.component.html', - inputs: ['war', 'fractionFilterSelected'], styleUrls: ['./war-detail.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css'] }) export class WarDetailComponent { readonly fraction = Fraction; - @ViewChild('overview') private overviewContainer: ElementRef; - war: War; + logData; + + tab: number; + + fractionStatsInitialized: boolean; + fractionFilterSelected: string; - cellHeight = 40; + playerChart: any[] = []; - rows = []; - - reorderable: boolean = false; - - customClasses = { - sortAscending: 'glyphicon glyphicon-triangle-top', - sortDescending: 'glyphicon glyphicon-triangle-bottom', + colorScheme = { + domain: [Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR] }; constructor(private route: ActivatedRoute, - private router: Router) { + private warService: WarService, + private logsService: LogsService) { } ngOnInit() { + this.route.params + .map(params => params['id']) + .filter(id => id != undefined) + .flatMap(id => this.warService.getWar(id)) + .subscribe(war => { + this.war = war; + + this.tab = 0; + this.fractionStatsInitialized = false; + this.fractionFilterSelected = undefined; + + this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor); + Object.assign(this, [this.playerChart]); + }) } - selectPlayerDetail(player) { - if (player && player.selected && player.selected.length > 0) { - this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + player.selected[0].name], - {relativeTo: this.route}); - } - } - - ngOnChanges(changes: SimpleChanges) { - if (changes.war) { - this.rows = changes.war.currentValue.players; - } - if (changes.fractionFilterSelected) { - this.filterPlayersByFraction(this.fractionFilterSelected) - } - this.scrollOverviewTop(); - } - - scrollOverviewTop() { - try { - this.overviewContainer.nativeElement.scrollTop = 0; - } catch (err) { + switchTab(index: number) { + this.tab = index; + if (index === 1 && !this.fractionStatsInitialized) { + this.logsService.getFullLog(this.war._id).subscribe(log => { + this.logData = log; + this.fractionStatsInitialized = true; + }); } } filterPlayersByFraction(fraction?: string) { - if (fraction) { - this.rows = this.war.players.filter((player) => { - return player.fraction === fraction; - }) - } else { - this.rows = this.war.players; - } + this.fractionFilterSelected = fraction; } }