Add tables for rank overview

static/src/app/app.component.ts

@@ -35,9 +35,13 @@ export class AppComponent implements OnInit {
               private sanitizer: DomSanitizer,
               @Inject(DOCUMENT) private document) {
     this.iconRegistry.addSvgIcon('add',
-      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-add_circle-24px.svg'));
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/outline-add_box-24px.svg'));
     this.iconRegistry.addSvgIcon('add-user',
       sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-person_add-24px.svg'));
+    this.iconRegistry.addSvgIcon('edit',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-edit-24px.svg'));
+    this.iconRegistry.addSvgIcon('delete',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-delete-24px.svg'));
 
     router.events.subscribe(event => {
       if (event instanceof NavigationStart) {

static/src/app/pub/public.module.ts

@@ -4,10 +4,12 @@ import {CommonModule} from '@angular/common';
 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';
+
 
 @NgModule({
   declarations: pubRoutingComponents,
-  imports: [CommonModule, SharedModule, pubRouterModule],
+  imports: [CommonModule, SharedModule, MatTableModule, pubRouterModule],
   providers: [DecorationService, RankService]
 })
 export class PublicModule {

static/src/app/pub/rank-overview/rank-overview.component.css

@@ -1,75 +1,25 @@
-.squad-layout {
-  overflow: hidden;
-  padding: 5px 15px 5px 15px;
+table {
+  width: 100%;
 }
 
-.row {
-  clear: both;
+:host /deep/ table.mat-table {
+  background: rgba(255, 255, 255, 0.6);
 }
 
-.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;
-}
-
-h1 {
-  text-align: center;
-}
-
-img {
-  position: absolute;
-  margin-top: 8px;
-  margin-left: 25px;
-}
-
-.member-link {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.army-head {
-  font-weight: bolder;
-  text-align: center
-}
-
-.member-count {
-  margin-top: 15px;
+td > img {
+  height: 120px;
   padding: 8px;
-  text-align: center;
-  font-weight: bold;
-  color: whitesmoke;
-  background: #222222;
-  border-radius: 12px;
 }
 
+h1, h3 {
+  text-align: center;
+}
+
+h3 {
+  font-weight: bolder;
+}
+
+.column-container {
+  width:48%;
+  padding-bottom: 20px;
+}

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

@@ -1,18 +1,45 @@
-<div style="width: 1100px; margin:auto; position: relative;">
+<div style="width: 1000px; margin:auto; position: relative;">
   <h1>Übersicht über alle Ränge</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 rank of ranks">
-      {{rank.name}}
-    </div>
+  <div class="column-container pull-left">
+    <h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
+
+    <table mat-table [dataSource]="ranksBlufor" class="mat-elevation-z8">
+
+      <ng-container matColumnDef="picture">
+        <th mat-header-cell *matHeaderCellDef> Rankabzeichen </th>
+        <td mat-cell *matCellDef="let element"><img src="resource/rank/{{element._id}}.png"></td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
   </div>
 
-  <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 rank of ranks">
-      {{rank.name}}
-    </div>
+  <div class="column-container pull-right">
+    <h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
+
+    <table mat-table [dataSource]="ranksOpfor" class="pull-right mat-elevation-z8">
+
+      <ng-container matColumnDef="picture">
+        <th mat-header-cell *matHeaderCellDef> Rankabzeichen </th>
+        <td mat-cell *matCellDef="let element"><img src="resource/rank/{{element._id}}.png"></td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
   </div>
 
+
 </div>

static/src/app/pub/rank-overview/rank-overview.component.ts

@@ -1,6 +1,5 @@
 import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-
 import {DOCUMENT} from '@angular/common';
 import {Fraction} from '../../utils/fraction.enum';
 import {CSSHelpers} from '../../utils/global.helpers';
@@ -16,7 +15,11 @@ import {RankService} from '../../services/army-management/rank.service';
 })
 export class RankOverviewComponent implements OnInit, OnDestroy {
 
-  ranks: Rank[];
+  ranksOpfor: Rank[];
+
+  ranksBlufor: Rank[];
+
+  displayedColumns: string[] = ['picture', 'name'];
 
   readonly fraction = Fraction;
 
@@ -33,10 +36,12 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
     // init rank data
     this.rankService.findRanks()
         .subscribe(ranks => {
-          this.ranks = ranks;
+          this.ranksBlufor = ranks.filter(r => r.fraction === 'BLUFOR');
+          this.ranksOpfor = ranks.filter(r => r.fraction === 'OPFOR');
         });
   };
 
+
   ngOnDestroy() {
     if (!this.router.url.includes(RouteConfig.overviewPath)) {
       this.document.getElementById('right').setAttribute('style', '');

static/src/app/statistic/war/war-list/war-item.component.css

@@ -1,13 +0,0 @@
-.interact-ico-container {
-  padding-right: 15px;
-  float: right;
-  display: grid;
-}
-
-.interact-ico-container > span {
-  font-size: 17px;
-}
-
-.interact-ico-container > span:last-child {
-  padding-top: 7px;
-}

static/src/app/statistic/war/war-list/war-item.component.html

@@ -11,8 +11,18 @@
 
     <div *ngIf="loginService.hasPermission(3)"
          class="interact-ico-container">
-      <span class="glyphicon glyphicon-edit" (click)="edit(); $event.stopPropagation()" matTooltip="Bearbeiten"></span>
-      <span class="glyphicon glyphicon-trash"  (click)="delete(); $event.stopPropagation()" matTooltip="Löschen"></span>
+      <button mat-icon-button
+              class="add-btn"
+              matTooltip="Bearbeiten"
+              (click)="edit(); $event.stopPropagation()">
+        <mat-icon svgIcon="edit"></mat-icon>
+      </button>
+      <button mat-icon-button
+              class="add-btn"
+              matTooltip="Löschen"
+              (click)="delete(); $event.stopPropagation()">
+        <mat-icon svgIcon="delete"></mat-icon>
+      </button>
     </div>
   </div>
 </div>

static/src/app/statistic/war/war-list/war-list.component.html

@@ -15,13 +15,18 @@
           {{campaign.title}}
         </mat-panel-title>
         <mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
-          <span (click)="deleteCampaign(campaign); $event.stopPropagation()" matTooltip="Löschen"
-                class="glyphicon glyphicon-trash trash">
-          </span>
-          <span (click)="editCampaign(campaign); $event.stopPropagation()" matTooltip="Bearbeiten"
-                class="glyphicon glyphicon-edit trash"
-                style="padding-right: 10px;">
-          </span>
+          <button mat-icon-button
+                  class="add-btn"
+                  matTooltip="Bearbeiten"
+                  (click)="editCampaign(campaign); $event.stopPropagation()">
+            <mat-icon svgIcon="edit"></mat-icon>
+          </button>
+          <button mat-icon-button
+                  class="add-btn"
+                  matTooltip="Löschen"
+                  (click)="deleteCampaign(campaign); $event.stopPropagation()">
+            <mat-icon svgIcon="delete"></mat-icon>
+          </button>
         </mat-panel-description>
       </mat-expansion-panel-header>
       <div class="top-list-entry">

static/src/app/style/list-entry.css

@@ -11,6 +11,10 @@ div.list-entry:hover, a.list-entry:hover {
   background-color: #f9f9f9;
 }
 
+:host/deep/.list-entry mat-icon > svg {
+  color: #222222;
+}
+
 .decoration-list-preview, .squad-list-preview {
   float: left;
   margin-right: 12px;

static/src/app/style/select-list.css

@@ -1,3 +1,3 @@
 .select-list {
-  padding: 20px 2% 0 5%;
+  padding: 20px 3% 12px 5%;
 }

static/src/assets/icon/outline-add_box-24px.svg

@@ -7,15 +7,12 @@
 	</g>
 	<path fill="none" d="M0,0h24v24H0V0z"/>
 </g>
-<g id="Duotone">
-	<g id="ui_x5F_spec_x5F_header_copy_2" display="none">
+<g id="Outline">
+	<g id="ui_x5F_spec_x5F_header" display="none">
 	</g>
 	<g>
-		<path opacity="0.3" d="M12,4c-4.41,0-8,3.59-8,8c0,4.41,3.59,8,8,8s8-3.59,8-8C20,7.59,16.41,4,12,4z M17,13h-4v4h-2v-4H7v-2h4V7
-			h2v4h4V13z"/>
-		<polygon points="13,7 11,7 11,11 7,11 7,13 11,13 11,17 13,17 13,13 17,13 17,11 13,11 		"/>
-		<path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8
-			c0-4.41,3.59-8,8-8s8,3.59,8,8C20,16.41,16.41,20,12,20z"/>
+		<path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V5h14V19z"/>
+		<polygon points="11,17 13,17 13,13 17,13 17,11 13,11 13,7 11,7 11,11 7,11 7,13 11,13 		"/>
 	</g>
 </g>
 </svg>

static/src/assets/icon/twotone-delete-24px.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Header_x2F_BG" display="none">
+	<rect x="-270" y="-270" display="inline" fill="#F1F1F2" width="520" height="520"/>
+</g>
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded" display="none">
+	<g id="ui_x5F_spec_x5F_header_copy_5" display="inline">
+	</g>
+	<path display="inline" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V9c0-1.1-0.9-2-2-2H8C6.9,7,6,7.9,6,9V19z M18,4h-2.5l-0.71-0.71
+		C14.61,3.11,14.35,3,14.09,3H9.91C9.65,3,9.39,3.11,9.21,3.29L8.5,4H6C5.45,4,5,4.45,5,5v0c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1
+		v0C19,4.45,18.55,4,18,4z"/>
+</g>
+<g id="Sharp" display="none">
+	<g id="ui_x5F_spec_x5F_header_copy_4" display="inline">
+	</g>
+	<path display="inline" d="M6,21h12V7H6V21z M19,4h-3.5l-1-1h-5l-1,1H5v2h14V4z"/>
+</g>
+<g id="Outline" display="none">
+	<g id="ui_x5F_spec_x5F_header" display="inline">
+	</g>
+	<path id="XMLID_282_" display="inline" d="M16,9v10H8V9H16 M14.5,3h-5l-1,1H5v2h14V4h-3.5L14.5,3L14.5,3z M18,7H6v12
+		c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7L18,7z"/>
+</g>
+<g id="Duotone">
+	<g id="ui_x5F_spec_x5F_header_copy_2">
+	</g>
+	<g>
+		<rect x="8" y="9" opacity="0.3" width="8" height="10"/>
+		<g>
+			<polygon points="15.5,4 14.5,3 9.5,3 8.5,4 5,4 5,6 19,6 19,4 			"/>
+			<path d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7H6V19z M8,9h8v10H8V9z"/>
+		</g>
+	</g>
+</g>
+<g id="Fill" display="none">
+	<g id="ui_x5F_spec_x5F_header_copy" display="inline">
+	</g>
+	<path display="inline" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7H6V19z M19,4h-3.5l-1-1h-5l-1,1H5v2h14V4z"/>
+</g>
+<g id="nyt_x5F_exporter_x5F_info" display="none">
+</g>
+</svg>

static/src/assets/icon/twotone-edit-24px.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Duotone">
+	<g id="ui_x5F_spec_x5F_header_copy_5">
+	</g>
+	<g>
+		<polygon opacity="0.3" points="5,18.08 5,19 5.92,19 14.98,9.94 14.06,9.02 		"/>
+		<path d="M20.71,7.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34C18.17,3.09,17.92,3,17.66,3s-0.51,0.1-0.7,0.29l-1.83,1.83l3.75,3.75
+			L20.71,7.04z"/>
+		<path d="M3,17.25V21h3.75L17.81,9.94l-3.75-3.75L3,17.25z M5.92,19H5v-0.92l9.06-9.06l0.92,0.92L5.92,19z"/>
+	</g>
+</g>
+</svg>