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 @@
-
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}}
-
-
-
-
-
-
-
-
-
+
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;
}
}