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