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