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 ec42076..a6802cb 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.css
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.css
@@ -1,42 +1,11 @@
-table {
- width: 100%;
- margin-bottom: 20px;
-}
-
-:host /deep/ table.mat-table {
- background: rgba(255, 255, 255, 0.6);
-}
-
h1 {
- text-align: center;
margin-bottom: 30px;
}
-td > img {
- margin: 5px 2px;
+h3 {
+ font-weight: bolder;
}
-.mat-column-image {
- width: 160px;
-}
-
-.mat-column-fraction {
- width: 90px;
- text-indent: 10px;
-}
-
-.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;
+h1, h3 {
+ text-align: center;
}
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 4fd37d4..c6eef5c 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.html
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.html
@@ -1,44 +1,24 @@
Übersicht über alle Auszeichnungen
-
+
+
{{fraction.BLUFOR}}
+
+
+
-
- {{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]}} |
-
-
-
-
-
+
+
Global
+
+
+
+
+
{{fraction.OPFOR}}
+
+
+
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 5a1c412..470d04d 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, HostListener, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {DOCUMENT} from '@angular/common';
@@ -16,18 +16,11 @@ import {DecorationService} from '../../services/army-management/decoration.servi
})
export class DecorationOverviewComponent implements OnInit, OnDestroy {
- rows: Decoration[];
+ decorationsBlufor: Decoration[];
- columnMap = [
- {prop: 'image', head: 'Abbildung'},
- {prop: 'name', head: 'Bezeichnung'},
- {prop: 'fraction', head: 'Fraktion'},
- {prop: 'description', head: 'Beschreibung'}
- ];
+ decorationsGlobal: Decoration[];
- displayedColumns = this.columnMap.map(col => col.prop);
-
- tableHeaderFixedVal = 100;
+ decorationsOpfor: Decoration[];
hasFixedTableHeader = false;
@@ -46,16 +39,12 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
// init decoration data
this.decorationService.findDecorations()
.subscribe(decorations => {
- this.rows = decorations;
+ this.decorationsBlufor = decorations.filter(d => d.fraction === 'BLUFOR');
+ this.decorationsGlobal = decorations.filter(d => d.fraction === 'GLOBAL');
+ this.decorationsOpfor = decorations.filter(d => d.fraction === 'OPFOR');
});
};
- @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/decoration-overview/decoration-panel/decoration-panel.component.css b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css
new file mode 100644
index 0000000..480bc45
--- /dev/null
+++ b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css
@@ -0,0 +1,4 @@
+.decoration-card {
+ max-width: 338px;
+ margin: 6px;
+}
diff --git a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html
new file mode 100644
index 0000000..54386aa
--- /dev/null
+++ b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html
@@ -0,0 +1,16 @@
+
+
+ {{decoration.name}}
+
+ {{decoration.fraction === 'BLUFOR'? fraction.BLUFOR : decoration.fraction === 'OPFOR' ? fraction.OPFOR : 'GLOBAL'}}
+
+
+
+
+
+ {{decoration.description}}
+
+
+
diff --git a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts
new file mode 100644
index 0000000..15229e9
--- /dev/null
+++ b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts
@@ -0,0 +1,20 @@
+import {Component, Input} from '@angular/core';
+
+import {Decoration} from '../../../models/model-interfaces';
+import {Fraction} from '../../../utils/fraction.enum';
+
+
+@Component({
+ selector: 'cc-decoration-panel',
+ templateUrl: './decoration-panel.component.html',
+ styleUrls: ['./decoration-panel.component.css']
+})
+export class DecorationPanelComponent {
+
+ @Input() decoration: Decoration;
+
+ readonly fraction = Fraction;
+
+ constructor() {
+ }
+}
diff --git a/static/src/app/pub/public.module.ts b/static/src/app/pub/public.module.ts
index a435a9a..428b60b 100644
--- a/static/src/app/pub/public.module.ts
+++ b/static/src/app/pub/public.module.ts
@@ -5,12 +5,11 @@ 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';
-
+import {MatCardModule} from '@angular/material/card';
@NgModule({
declarations: pubRoutingComponents,
- imports: [CommonModule, SharedModule, MatTableModule, pubRouterModule],
+ imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, pubRouterModule],
providers: [DecorationService, RankService]
})
export class PublicModule {
diff --git a/static/src/app/pub/public.routing.ts b/static/src/app/pub/public.routing.ts
index 60d6853..1ea1d84 100644
--- a/static/src/app/pub/public.routing.ts
+++ b/static/src/app/pub/public.routing.ts
@@ -3,6 +3,7 @@ import {RankOverviewComponent} from './rank-overview/rank-overview.component';
import {ModuleWithProviders} from '@angular/core';
import {DecorationOverviewComponent} from './decoration-overview/decoration-overview.component';
import {PublicComponent} from './public.component';
+import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
export const publicRoutes: Routes = [
{
@@ -19,5 +20,6 @@ export const publicRoutes: Routes = [
export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
-export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent];
+export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent,
+ DecorationPanelComponent];