Add public decoration table (CC-38)

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

static/src/app/pub/decoration-overview/decoration-overview.component.html

@@ -1,18 +1,44 @@
 <div style="width: 1100px; margin:auto; position: relative;">
-  <h1>Übersicht über alle Ränge</h1>
+  <h1>Übersicht über alle Auszeichnungen</h1>
 
-  <div class="pull-left" style="width: 45%;">
-    <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
-    <div class="squad-layout" *ngFor="let decoration of decorations">
-      {{decoration.name}}
-    </div>
-  </div>
+  <table mat-table
+         [dataSource]="rows"
+         [class.fixed-header-table]="hasFixedTableHeader"
+         class="mat-elevation-z8">
 
-  <div class="pull-right" style="width: 45%;">
-    <h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
-    <div class="squad-layout" *ngFor="let decoration of decorations">
-      {{decoration.name}}
-    </div>
-  </div>
+    <ng-container matColumnDef="{{columnMap[0].prop}}">
+      <th mat-header-cell *matHeaderCellDef>{{columnMap[0].head}}</th>
+      <td mat-cell *matCellDef="let element">
+        <img src="resource/decoration/{{element._id}}.png"
+             matTooltip="{{element.name}}"
+             alt="{{element.name}}">
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="{{columnMap[1].prop}}">
+      <th mat-header-cell *matHeaderCellDef>{{columnMap[1].head}}</th>
+      <td mat-cell *matCellDef="let element">{{element[columnMap[1].prop]}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="{{columnMap[2].prop}}">
+      <th mat-header-cell *matHeaderCellDef>{{columnMap[2].head}}</th>
+      <td mat-cell *matCellDef="let element"
+          [style.color]="element['fraction'] === 'BLUFOR' ?
+           fraction.COLOR_BLUFOR :
+            element['fraction'] === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
+        {{element[columnMap[2].prop] === 'BLUFOR'?
+        'NATO' :
+        element[columnMap[2].prop] === 'OPFOR' ? 'CSAT' : 'GLOBAL'}}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="{{columnMap[3].prop}}">
+      <th mat-header-cell *matHeaderCellDef>{{columnMap[3].head}}</th>
+      <td mat-cell *matCellDef="let element">{{element[columnMap[3].prop]}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
 
 </div>

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', '');

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({