diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.css b/static/src/app/pub/decoration-overview/decoration-overview.component.css
index 896472d..ec42076 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.css
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.css
@@ -1,75 +1,42 @@
-.squad-layout {
- overflow: hidden;
- padding: 5px 15px 5px 15px;
+table {
+ width: 100%;
+ margin-bottom: 20px;
}
-.row {
- clear: both;
-}
-
-.squad-cell {
- display: table-cell;
- padding: 5px;
-}
-
-.colored-row {
- background: rgb(34, 34, 34);
-}
-
-.title-row {
- border-radius: 12px 12px 0 0;
-}
-
-.footer-row {
- border-radius: 0 0 12px 12px;
-}
-
-.middle-row {
- min-height: 120px;
- border: rgb(34, 34, 34);
- background-color: rgba(255, 255, 255, 0.88);
- border-left-style: solid;
- border-right-style: solid;
-}
-
-.title {
- color: whitesmoke;
- font-weight: bold;
- font-size: 14px;
-}
-
-.name-cell {
- display: inherit;
- margin-left: 200px;
+:host /deep/ table.mat-table {
+ background: rgba(255, 255, 255, 0.6);
}
h1 {
text-align: center;
+ margin-bottom: 30px;
}
-img {
- position: absolute;
- margin-top: 8px;
- margin-left: 25px;
+td > img {
+ margin: 5px 2px;
}
-.member-link {
- cursor: pointer;
- text-decoration: underline;
+.mat-column-image {
+ width: 160px;
}
-.army-head {
- font-weight: bolder;
- text-align: center
+.mat-column-fraction {
+ width: 90px;
+ text-indent: 10px;
}
-.member-count {
- margin-top: 15px;
- padding: 8px;
- text-align: center;
- font-weight: bold;
- color: whitesmoke;
- background: #222222;
- border-radius: 12px;
+.mat-column-description {
+ width: 55%;
}
+tr.mat-row:hover {
+ background: rgba(231, 231, 231, 0.6);
+}
+
+:host /deep/ table.fixed-header-table > thead {
+ position: fixed;
+ display: inherit;
+ width: 1100px;
+ background: white;
+ top: 50px;
+}
diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.html b/static/src/app/pub/decoration-overview/decoration-overview.component.html
index ae87a39..4fd37d4 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.html
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.html
@@ -1,18 +1,44 @@
-
Übersicht über alle Ränge
+
Übersicht über alle Auszeichnungen
-
-
{{fraction.BLUFOR}}
-
- {{decoration.name}}
-
-
+
-
-
{{fraction.OPFOR}}
-
- {{decoration.name}}
-
-
+
+ {{columnMap[0].head}} |
+
+
+ |
+
+
+
+ {{columnMap[1].head}} |
+ {{element[columnMap[1].prop]}} |
+
+
+
+ {{columnMap[2].head}} |
+
+ {{element[columnMap[2].prop] === 'BLUFOR'?
+ 'NATO' :
+ element[columnMap[2].prop] === 'OPFOR' ? 'CSAT' : 'GLOBAL'}}
+ |
+
+
+
+ {{columnMap[3].head}} |
+ {{element[columnMap[3].prop]}} |
+
+
+
+
+
diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.ts b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
index 4dcb68b..5a1c412 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Component, HostListener, Inject, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {DOCUMENT} from '@angular/common';
@@ -16,7 +16,20 @@ import {DecorationService} from '../../services/army-management/decoration.servi
})
export class DecorationOverviewComponent implements OnInit, OnDestroy {
- decorations: Decoration[];
+ rows: Decoration[];
+
+ columnMap = [
+ {prop: 'image', head: 'Abbildung'},
+ {prop: 'name', head: 'Bezeichnung'},
+ {prop: 'fraction', head: 'Fraktion'},
+ {prop: 'description', head: 'Beschreibung'}
+ ];
+
+ displayedColumns = this.columnMap.map(col => col.prop);
+
+ tableHeaderFixedVal = 100;
+
+ hasFixedTableHeader = false;
readonly fraction = Fraction;
@@ -30,13 +43,19 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
// set background image css
this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
- // init rank data
+ // init decoration data
this.decorationService.findDecorations()
.subscribe(decorations => {
- this.decorations = decorations;
+ this.rows = decorations;
});
};
+ @HostListener('window:scroll', [])
+ onWindowScroll() {
+ this.hasFixedTableHeader = document.body.scrollTop > this.tableHeaderFixedVal
+ || document.documentElement.scrollTop > this.tableHeaderFixedVal;
+ }
+
ngOnDestroy() {
if (!this.router.url.includes(RouteConfig.overviewPath)) {
this.document.getElementById('right').setAttribute('style', '');
diff --git a/static/src/app/pub/public.module.ts b/static/src/app/pub/public.module.ts
index 69b979d..a435a9a 100644
--- a/static/src/app/pub/public.module.ts
+++ b/static/src/app/pub/public.module.ts
@@ -5,6 +5,7 @@ import {RankService} from '../services/army-management/rank.service';
import {pubRouterModule, pubRoutingComponents} from './public.routing';
import {DecorationService} from '../services/army-management/decoration.service';
import {MatTableModule} from '@angular/material/table';
+import {MatSortModule} from '@angular/material';
@NgModule({