From 9a0cd3544e30701e3517a11da27a7443a5f66664 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Wed, 11 Jul 2018 21:10:55 +0200 Subject: [PATCH 1/7] migrate to basic material table --- static/src/app/statistic/stats.module.ts | 5 +- .../war/scoreboard/scoreboard.component.css | 18 +++ .../war/scoreboard/scoreboard.component.html | 116 +++++++++++------- .../war/scoreboard/scoreboard.component.ts | 10 +- 4 files changed, 99 insertions(+), 50 deletions(-) diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index f3a40fc..8a10d57 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/static/src/app/statistic/stats.module.ts @@ -8,12 +8,13 @@ import {CampaignService} from '../services/logs/campaign.service'; import {NgxDatatableModule} from '@swimlane/ngx-datatable'; import {PlayerService} from '../services/logs/player.service'; import {LogsService} from '../services/logs/logs.service'; -import {MatButtonModule, MatButtonToggleModule, MatExpansionModule} from '@angular/material'; +import {MatButtonModule, MatButtonToggleModule, MatExpansionModule, MatTableModule} from '@angular/material'; + @NgModule({ declarations: statsRoutingComponents, imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, NgxDatatableModule, - MatButtonModule, MatExpansionModule, MatButtonToggleModule], + MatButtonModule, MatExpansionModule, MatButtonToggleModule, MatTableModule], providers: [WarService, CampaignService, PlayerService, LogsService] }) export class StatsModule { diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.css b/static/src/app/statistic/war/scoreboard/scoreboard.component.css index c06a7a6..b2acb6d 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.css +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.css @@ -69,3 +69,21 @@ ngx-datatable { position: absolute; margin-top: -5px; } + +/* MATERIAL TABLE */ +table.mat-table { + margin: auto; +} + +.mat-column-name { + width: 200px; +} +.mat-column-fraction { + width: 90px; +} + +.mat-column-kill, .mat-column-friendlyFire, .mat-column-revive, .mat-column-flagTouch, +.mat-column-vehicleLight, .mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-death, .mat-column-respawn { + width: 62px; + text-align: center; +} diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html index e2559ea..0f9e603 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html @@ -1,47 +1,73 @@ -
- - - - - {{value}} - - - - - - {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} - - +
-
- - - - - {{column.head}} - - - - -
- - - - Gesamt - - - - + + + + + + + + + + + + + + + + + + + +
{{tableHead[0].head}} + {{element.name}} + {{tableHead[1].head}} {{element.fraction}} {{column.head}} {{element[column.prop]}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts index aa05ffd..a24d698 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts @@ -29,6 +29,9 @@ export class ScoreboardComponent implements OnChanges { rows = []; + displayedColumns = //['name', 'fraction', 'kill', 'friendlyFire', 'revive', 'flagTouch', 'vehicleLight', 'vehicleHeavy', 'vehicleAir']; + this.tableHead.map(head => head.prop); + reorderable = false; customClasses = { @@ -37,6 +40,7 @@ export class ScoreboardComponent implements OnChanges { }; constructor(private elRef: ElementRef) { + console.log(this.displayedColumns) } selectPlayerDetail(view: number, player) { @@ -49,9 +53,9 @@ export class ScoreboardComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { if (changes.war) { this.rows = changes.war.currentValue.players; - this.elRef.nativeElement - .querySelector('.datatable-body') - .scrollTo(0, 0); +// this.elRef.nativeElement +// .querySelector('.datatable-body') +// .scrollTo(0, 0); } if (changes.fractionFilterSelected) { this.filterPlayersByFraction(this.fractionFilterSelected); From 99482625a25d8a9c3e82dcfb892264623a98ec7a Mon Sep 17 00:00:00 2001 From: HardiReady Date: Thu, 12 Jul 2018 21:48:08 +0200 Subject: [PATCH 2/7] Add scoreboard table sorting --- static/src/app/statistic/stats.module.ts | 4 +- .../war/scoreboard/scoreboard.component.css | 22 ++- .../war/scoreboard/scoreboard.component.html | 140 ++++++++++-------- .../war/scoreboard/scoreboard.component.ts | 28 +++- 4 files changed, 125 insertions(+), 69 deletions(-) diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index 8a10d57..cd69cec 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/static/src/app/statistic/stats.module.ts @@ -8,13 +8,13 @@ import {CampaignService} from '../services/logs/campaign.service'; import {NgxDatatableModule} from '@swimlane/ngx-datatable'; import {PlayerService} from '../services/logs/player.service'; import {LogsService} from '../services/logs/logs.service'; -import {MatButtonModule, MatButtonToggleModule, MatExpansionModule, MatTableModule} from '@angular/material'; +import {MatButtonModule, MatButtonToggleModule, MatExpansionModule, MatTableModule, MatSortModule} from '@angular/material'; @NgModule({ declarations: statsRoutingComponents, imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, NgxDatatableModule, - MatButtonModule, MatExpansionModule, MatButtonToggleModule, MatTableModule], + MatButtonModule, MatExpansionModule, MatButtonToggleModule, MatTableModule, MatSortModule], providers: [WarService, CampaignService, PlayerService, LogsService] }) export class StatsModule { diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.css b/static/src/app/statistic/war/scoreboard/scoreboard.component.css index b2acb6d..0563308 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.css +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.css @@ -75,6 +75,10 @@ table.mat-table { margin: auto; } +table.mat-table img { + filter: invert(60%); +} + .mat-column-name { width: 200px; } @@ -84,6 +88,20 @@ table.mat-table { .mat-column-kill, .mat-column-friendlyFire, .mat-column-revive, .mat-column-flagTouch, .mat-column-vehicleLight, .mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-death, .mat-column-respawn { - width: 62px; - text-align: center; + width: 67px; + text-indent: 9px; +} + +/* MAT FAB BUTTON */ + +button.mat-mini-fab { + color: #7b7b7b; + background: #ffffff; + width: 60px; + height: 35px; + font-size: 12px; +} + +:host/deep/span.mat-button-wrapper { + padding: 0; } diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html index 0f9e603..28f2082 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html @@ -1,73 +1,91 @@
- +
- - - - + + + + - - - - + + + + - - - - + + + + - - -
{{tableHead[0].head}} - {{element.name}} - {{tableHead[0].head}} + {{element.name}} + {{tableHead[1].head}} {{element.fraction}} {{tableHead[1].head}} {{element.fraction}} {{column.head}} {{element[column.prop]}} + {{column.head}} + {{element[column.prop]}}
+ + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +
diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts index a24d698..d56de14 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts @@ -3,6 +3,7 @@ import {War} from '../../../models/model-interfaces'; import {Fraction} from '../../../utils/fraction.enum'; import {PlayerUtils} from '../../../utils/player-utils'; import {saveAs} from 'file-saver/FileSaver'; +import {Sort} from '@angular/material'; @Component({ selector: 'cc-scoreboard', @@ -29,8 +30,9 @@ export class ScoreboardComponent implements OnChanges { rows = []; - displayedColumns = //['name', 'fraction', 'kill', 'friendlyFire', 'revive', 'flagTouch', 'vehicleLight', 'vehicleHeavy', 'vehicleAir']; - this.tableHead.map(head => head.prop); + sortedRows = []; + + displayedColumns = this.tableHead.map(head => head.prop); reorderable = false; @@ -40,7 +42,7 @@ export class ScoreboardComponent implements OnChanges { }; constructor(private elRef: ElementRef) { - console.log(this.displayedColumns) + this.displayedColumns.push('interact'); } selectPlayerDetail(view: number, player) { @@ -53,6 +55,7 @@ export class ScoreboardComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { if (changes.war) { this.rows = changes.war.currentValue.players; + this.sortedRows = this.rows.slice(); // this.elRef.nativeElement // .querySelector('.datatable-body') // .scrollTo(0, 0); @@ -72,6 +75,24 @@ export class ScoreboardComponent implements OnChanges { } } + sortData(sort: Sort) { + const data = this.rows.slice(); + if (!sort.active || sort.direction === '') { + this.sortedRows = data; + return; + } + + this.sortedRows = data.sort((a, b) => { + const isAsc = sort.direction === 'desc'; + const sortProperty = sort.active; + return this.compare(a[sortProperty], b[sortProperty], isAsc); + }); + } + + compare(a, b, isAsc) { + return (a < b ? -1 : 1) * (isAsc ? 1 : -1); + } + exportCSV() { let csvOut = ''; for (let i = 0; i < this.tableHead.length; i++) { @@ -100,5 +121,4 @@ export class ScoreboardComponent implements OnChanges { const blob = new Blob([csvOut], {type: 'text/plain'}); saveAs(blob, this.war.title.toLowerCase().replace(' ', '_').concat('.csv')); } - } From 6f4274a365fe3fe4dcb56e10a8cb5be0a6fc0959 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Thu, 12 Jul 2018 21:49:16 +0200 Subject: [PATCH 3/7] remove datatable html for scoreboard --- .../war/scoreboard/scoreboard.component.html | 50 +------------------ 1 file changed, 2 insertions(+), 48 deletions(-) diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html index 28f2082..11905a6 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html @@ -2,7 +2,8 @@ @@ -41,51 +42,4 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
From 42cfadb9e96c8e51e49d9c5df34fa77482d8f9c6 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sat, 14 Jul 2018 12:54:53 +0200 Subject: [PATCH 4/7] Add more fancy tabbing feeling and fix initial ordering of stats --- static/src/app/app.component.ts | 2 + .../fraction-stats.component.css | 24 +++--- .../fraction-stats.component.html | 2 +- .../war/scoreboard/scoreboard.component.css | 81 +------------------ .../war/scoreboard/scoreboard.component.html | 10 ++- .../war/scoreboard/scoreboard.component.ts | 7 +- .../war/war-header/war-header.component.css | 21 +++-- .../src/assets/icon/round-assessment-24px.svg | 78 ++++++++++++++++++ 8 files changed, 120 insertions(+), 105 deletions(-) create mode 100644 static/src/assets/icon/round-assessment-24px.svg diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts index 8149986..5e2b202 100644 --- a/static/src/app/app.component.ts +++ b/static/src/app/app.component.ts @@ -42,6 +42,8 @@ export class AppComponent implements OnInit { sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-edit-24px.svg')); this.iconRegistry.addSvgIcon('delete', sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-delete-24px.svg')); + this.iconRegistry.addSvgIcon('stats-detail', + sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/round-assessment-24px.svg')); router.events.subscribe(event => { if (event instanceof NavigationStart) { diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.css b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.css index 98f5a74..8b96911 100644 --- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.css +++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.css @@ -1,32 +1,30 @@ .chart-select-group { display: flex; - width: 945px; + width: fit-content; margin: auto; } -.chart-select-group > mat-button-toggle { - background: #4b4b4b; - color: #f5f5f5; - border: 1px solid #000; +:host /deep/ mat-button-toggle { + color: #666666; + background: #e7e7e7; } -.chart-select-group > mat-button-toggle:hover { +:host /deep/ mat-button-toggle:hover { background: #afafaf; - color: #f5f5f5; } -mat-button-toggle.mat-button-toggle-checked { - background: #222222 !important; +:host /deep/ mat-button-toggle.mat-button-toggle-checked { + background: #ffffff; } :host /deep/ label.mat-button-toggle-label { - margin: 2px 0 !important; + margin: 2px 0; } :host /deep/ div.mat-button-toggle-label-content { - line-height: 25px !important; - margin-bottom: 0 !important; - font-weight: normal !important; + line-height: 25px; + margin-bottom: 0; + font-weight: normal; } .chart-container { diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html index 94f8719..9806126 100644 --- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html +++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html @@ -1,4 +1,4 @@ -
+
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; -} - -:host /deep/ .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell { - margin: auto; -} - -/* Table Scrollbar BEGIN */ -:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar { - width: 12px; -} - -:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - border-radius: 10px; -} - -:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb { - border-radius: 10px; - background: #4b4b4b; - -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5); -} - -/* Table Scrollbar END */ - .in-table-btn { position: absolute; margin-top: -5px; @@ -92,16 +25,8 @@ table.mat-table img { text-indent: 9px; } -/* MAT FAB BUTTON */ +/* MAT ICON BUTTON */ -button.mat-mini-fab { - color: #7b7b7b; - background: #ffffff; - width: 60px; - height: 35px; - font-size: 12px; -} - -:host/deep/span.mat-button-wrapper { - padding: 0; +:host/deep/.mat-table .mat-icon { + color: #666666; } diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html index 11905a6..bf0185b 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html @@ -1,8 +1,8 @@ -
+
@@ -31,10 +31,12 @@ diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts index d56de14..b75f627 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts @@ -3,7 +3,7 @@ import {War} from '../../../models/model-interfaces'; import {Fraction} from '../../../utils/fraction.enum'; import {PlayerUtils} from '../../../utils/player-utils'; import {saveAs} from 'file-saver/FileSaver'; -import {Sort} from '@angular/material'; +import {MatSort, Sort} from '@angular/material'; @Component({ selector: 'cc-scoreboard', @@ -55,7 +55,10 @@ export class ScoreboardComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { if (changes.war) { this.rows = changes.war.currentValue.players; - this.sortedRows = this.rows.slice(); + + const sort = new MatSort(); + sort.active = 'kill'; + this.sortData(sort); // this.elRef.nativeElement // .querySelector('.datatable-body') // .scrollTo(0, 0); diff --git a/static/src/app/statistic/war/war-header/war-header.component.css b/static/src/app/statistic/war/war-header/war-header.component.css index 9f7a896..8508278 100644 --- a/static/src/app/statistic/war/war-header/war-header.component.css +++ b/static/src/app/statistic/war/war-header/war-header.component.css @@ -19,12 +19,19 @@ span.tab-control { padding: 4px 16px; } -.war-header { - border-bottom: thin solid lightgrey; +.nav-tabs > li.active > a { + background: #ffffff; + border-bottom: none; } -.nav-tabs > li.active > a { - background: #222222; +.nav-tabs > li.active { + position: relative; + top: 1px; + z-index: 10; +} + +.nav-tabs > li img { + filter: invert(50%); } .nav-tabs { @@ -35,12 +42,12 @@ span.tab-control { } .nav-tabs > li > a { - background: #4b4b4b; + background: #e7e7e7; + border: 1px solid #dadada; } .nav-tabs > li:not(.active) > a:hover { background: #afafaf; - color: #f5f5f5; } .nav-tabs > li:last-child { @@ -49,7 +56,7 @@ span.tab-control { .nav-link { cursor: pointer !important; - color: #FFF !important; + color: #666666 !important; } .nav-tabs > li.deactivated > a.nav-link { diff --git a/static/src/assets/icon/round-assessment-24px.svg b/static/src/assets/icon/round-assessment-24px.svg new file mode 100644 index 0000000..24880bd --- /dev/null +++ b/static/src/assets/icon/round-assessment-24px.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From dfaddfa992ac8c64c4c9573125d6cde86fc54f96 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sun, 15 Jul 2018 12:27:41 +0200 Subject: [PATCH 5/7] * Use mat-table in highscores * Fix fraction filter for scoreboard --- .../highscore/highscore.component.css | 78 ++++++-------- .../highscore/highscore.component.html | 100 ++++++++++++------ .../campaign/highscore/highscore.component.ts | 17 --- .../war/scoreboard/scoreboard.component.css | 8 ++ .../war/scoreboard/scoreboard.component.html | 4 +- .../war/scoreboard/scoreboard.component.ts | 21 ++-- static/src/app/utils/sort-utils.ts | 6 ++ 7 files changed, 124 insertions(+), 110 deletions(-) create mode 100644 static/src/app/utils/sort-utils.ts diff --git a/static/src/app/statistic/campaign/highscore/highscore.component.css b/static/src/app/statistic/campaign/highscore/highscore.component.css index da5284b..ddd70e2 100644 --- a/static/src/app/statistic/campaign/highscore/highscore.component.css +++ b/static/src/app/statistic/campaign/highscore/highscore.component.css @@ -11,71 +11,53 @@ h2 { margin: 20px 0 0 10%; } -ngx-datatable { - width: 345px; - margin: 3% 5% 0 5%; - height: 310px; +.highscore-table-container { + width: 320px; + max-height: 394px; + margin: 100px 0 0 8%; float: left; - border: solid #dfdfdf 1px; - border-radius: 10px 10px 2px 2px; -} - -:host /deep/ .datatable-header { - width: 350px !important; - 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 { overflow-x: hidden; + overflow-y: auto; + border: solid #dfdfdf 1px; + box-shadow: 3px 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); } -:host /deep/ .datatable-body-row { - color: #222222; - border-bottom: 1px solid grey; +.highscore-table { + width: 100%; } -:host /deep/ .datatable-body-row:hover { - background-color: #f7f7f7; +table.mat-table img { + filter: invert(60%); + margin-left: -15px; } -:host /deep/ .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell { - margin: auto; +:host /deep/ table.mat-table > thead { + position: absolute; + width: 320px; + display: inherit; + margin-left: -1px; + margin-top: -57px; + border: 1px solid #dadada; +} + +.mat-column-kill, .mat-column-friendlyFire, .mat-column-revive, .mat-column-flagTouch, +.mat-column-vehicleLight, .mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-death, .mat-column-respawn { + width: 67px; + text-indent: 14px; } /* Table Scrollbar BEGIN */ -:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar { +.highscore-table-container::-webkit-scrollbar { width: 12px; } -:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - border-radius: 10px; +.highscore-table-container::-webkit-scrollbar-track { + border-left: 1px solid #f1f1f1; } -:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb { - border-radius: 10px; - background: #4b4b4b; - -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5); +.highscore-table-container::-webkit-scrollbar-thumb { + background: rgb(234, 234, 234); } /* Table Scrollbar END */ diff --git a/static/src/app/statistic/campaign/highscore/highscore.component.html b/static/src/app/statistic/campaign/highscore/highscore.component.html index 111068f..b02c5aa 100644 --- a/static/src/app/statistic/campaign/highscore/highscore.component.html +++ b/static/src/app/statistic/campaign/highscore/highscore.component.html @@ -3,6 +3,7 @@
- - - - - - {{value}} - - - +
+
-
- - - - - {{attributeMap.head}} - - - - - - {{value}} - - - - + + + + + + + + + + + + + + + + + +
#{{element.num}}Name + {{element.name}} + + {{attributeMap.head}} + {{element[attributeMap.prop]}}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/static/src/app/statistic/campaign/highscore/highscore.component.ts b/static/src/app/statistic/campaign/highscore/highscore.component.ts index 1954314..55f866e 100644 --- a/static/src/app/statistic/campaign/highscore/highscore.component.ts +++ b/static/src/app/statistic/campaign/highscore/highscore.component.ts @@ -30,21 +30,6 @@ export class StatisticHighScoreComponent implements OnInit { playerAttributeDisplayNames = PlayerUtils.attributeDisplayNames.slice(2, PlayerUtils.attributeDisplayNames.length); - cellHeight = 40; - - numberColWidth = 60; - - nameColWidth = 210; - - valueColWidth = 55; - - emptyMessage = {emptyMessage: 'Keine Einträge'}; - - customClasses = { - sortAscending: 'glyphicon glyphicon-triangle-top', - sortDescending: 'glyphicon glyphicon-triangle-bottom', - }; - readonly fraction = Fraction; constructor(private route: ActivatedRoute, @@ -97,7 +82,6 @@ export class StatisticHighScoreComponent implements OnInit { private filterPlayerAttribute(attribute) { const query = this.searchTerm.value.toLowerCase().split('&'); - return this.playersStored[attribute].filter(player => { for (let i = 0; i < query.length; i++) { if (query[i].trim() !== '' && player.name.toLowerCase().includes(query[i].trim())) { @@ -107,5 +91,4 @@ export class StatisticHighScoreComponent implements OnInit { return false; }); } - } diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.css b/static/src/app/statistic/war/scoreboard/scoreboard.component.css index 53bed51..fe4a839 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.css +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.css @@ -1,3 +1,11 @@ +.scoreboard-table { + height: 68vh; + width:fit-content; + border: 1px solid #dadada; + overflow-x: auto; + margin:auto; +} + .in-table-btn { position: absolute; margin-top: -5px; diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html index bf0185b..0adaf7d 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html @@ -1,9 +1,9 @@ -
+
diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts index b75f627..8c99e6a 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts @@ -4,6 +4,7 @@ import {Fraction} from '../../../utils/fraction.enum'; import {PlayerUtils} from '../../../utils/player-utils'; import {saveAs} from 'file-saver/FileSaver'; import {MatSort, Sort} from '@angular/material'; +import {SortUtils} from '../../../utils/sort-utils'; @Component({ selector: 'cc-scoreboard', @@ -32,6 +33,8 @@ export class ScoreboardComponent implements OnChanges { sortedRows = []; + currentSort = new MatSort(); + displayedColumns = this.tableHead.map(head => head.prop); reorderable = false; @@ -55,10 +58,8 @@ export class ScoreboardComponent implements OnChanges { ngOnChanges(changes: SimpleChanges) { if (changes.war) { this.rows = changes.war.currentValue.players; - - const sort = new MatSort(); - sort.active = 'kill'; - this.sortData(sort); + this.currentSort.active = 'kill'; + this.sortScoreboardData(this.currentSort); // this.elRef.nativeElement // .querySelector('.datatable-body') // .scrollTo(0, 0); @@ -76,9 +77,13 @@ export class ScoreboardComponent implements OnChanges { } else { this.rows = this.war.players; } + this.sortScoreboardData(this.currentSort); } - sortData(sort: Sort) { + sortScoreboardData(sort: MatSort) { + if (sort) { + this.currentSort = sort; + } const data = this.rows.slice(); if (!sort.active || sort.direction === '') { this.sortedRows = data; @@ -88,14 +93,10 @@ export class ScoreboardComponent implements OnChanges { this.sortedRows = data.sort((a, b) => { const isAsc = sort.direction === 'desc'; const sortProperty = sort.active; - return this.compare(a[sortProperty], b[sortProperty], isAsc); + return SortUtils.compare(a[sortProperty], b[sortProperty], isAsc); }); } - compare(a, b, isAsc) { - return (a < b ? -1 : 1) * (isAsc ? 1 : -1); - } - exportCSV() { let csvOut = ''; for (let i = 0; i < this.tableHead.length; i++) { diff --git a/static/src/app/utils/sort-utils.ts b/static/src/app/utils/sort-utils.ts new file mode 100644 index 0000000..6592a54 --- /dev/null +++ b/static/src/app/utils/sort-utils.ts @@ -0,0 +1,6 @@ +export class SortUtils { + + public static compare(a, b, isAsc) { + return (a < b ? -1 : 1) * (isAsc ? 1 : -1); + } +} From 8cabea74fdadc4496f75cdaf85cd8a1e9b0107c9 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sun, 15 Jul 2018 12:59:37 +0200 Subject: [PATCH 6/7] Add fixed header for scoreboard table --- .../war/scoreboard/scoreboard.component.css | 22 +++++++++++++++++++ .../war/scoreboard/scoreboard.component.html | 2 +- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.css b/static/src/app/statistic/war/scoreboard/scoreboard.component.css index fe4a839..aa01b77 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.css +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.css @@ -20,6 +20,16 @@ table.mat-table img { filter: invert(60%); } +:host /deep/ table.mat-table > thead { + position: absolute; + display: inherit; +} + +:host /deep/ table.mat-table > tbody { + margin-top: 60px; + display: block; +} + .mat-column-name { width: 200px; } @@ -33,6 +43,18 @@ table.mat-table img { text-indent: 9px; } +th.mat-column-interact { + padding-left: 36px; + background: white; + position: relative; + z-index: 100; +} + +/* TABLE SCROLLBAR */ +div::-webkit-scrollbar-thumb { + border-top: solid white 56px; +} + /* MAT ICON BUTTON */ :host/deep/.mat-table .mat-icon { diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html index 0adaf7d..dd30393 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html @@ -29,7 +29,7 @@ - +
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index cd69cec..f882acd 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/static/src/app/statistic/stats.module.ts @@ -5,7 +5,6 @@ import {statsRouterModule, statsRoutingComponents} from './stats.routing'; import {WarService} from '../services/logs/war.service'; import {NgxChartsModule} from '@swimlane/ngx-charts'; import {CampaignService} from '../services/logs/campaign.service'; -import {NgxDatatableModule} from '@swimlane/ngx-datatable'; import {PlayerService} from '../services/logs/player.service'; import {LogsService} from '../services/logs/logs.service'; import {MatButtonModule, MatButtonToggleModule, MatExpansionModule, MatTableModule, MatSortModule} from '@angular/material'; @@ -13,8 +12,8 @@ import {MatButtonModule, MatButtonToggleModule, MatExpansionModule, MatTableModu @NgModule({ declarations: statsRoutingComponents, - imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, NgxDatatableModule, - MatButtonModule, MatExpansionModule, MatButtonToggleModule, MatTableModule, MatSortModule], + imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, MatButtonModule, MatExpansionModule, + MatButtonToggleModule, MatTableModule, MatSortModule], providers: [WarService, CampaignService, PlayerService, LogsService] }) export class StatsModule {