Refactor army squad into own component

static/src/app/army/army-member/army-member.component.ts

@@ -1,13 +1,13 @@
 import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
-import {Award, User} from '../models/model-interfaces';
+import {Award, User} from '../../models/model-interfaces';
 import {ActivatedRoute, Router} from '@angular/router';
-import {UserService} from '../services/army-management/user.service';
+import {UserService} from '../../services/army-management/user.service';
 import {Subscription} from 'rxjs/Subscription';
-import {RouteConfig} from '../app.config';
+import {RouteConfig} from '../../app.config';
-import {AwardingService} from '../services/army-management/awarding.service';
+import {AwardingService} from '../../services/army-management/awarding.service';
-import {Fraction} from '../utils/fraction.enum';
+import {Fraction} from '../../utils/fraction.enum';
 import {DOCUMENT} from '@angular/common';
-import {CSSHelpers} from '../utils/global.helpers';
+import {CSSHelpers} from '../../utils/global.helpers';
 
 
 @Component({

static/src/app/army/army-squad/army-squad.component.css

@@ -0,0 +1,70 @@
+.squad-layout {
+  overflow: hidden;
+  padding: 6px 0;
+}
+
+.squad-layout > div {
+  clear: both;
+}
+
+.squad-layout > div:first-child {
+  background: rgb(34, 34, 34);
+  border-radius: 12px 12px 0 0;
+}
+
+.squad-layout > div:last-child {
+  display: flex;
+  background: rgb(34, 34, 34);
+  border-radius: 0 0 12px 12px;
+}
+
+.squad-cell {
+  display: table-cell;
+  padding: 5px;
+}
+
+.squad-member-count {
+  float:left;
+  color: whitesmoke;
+  margin-left: 42px
+}
+
+.middle-row {
+  min-height: 120px;
+  padding: 5px;
+  border: rgb(34, 34, 34);
+  background-color: rgba(255, 255, 255, 0.88);
+  border-left-style: solid;
+  border-right-style: solid;
+}
+
+.member-link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+img {
+  position: absolute;
+  margin-top: 8px;
+  margin-left: 25px;
+}
+
+.title {
+  color: whitesmoke;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.name-cell {
+  display: inherit;
+  margin-left: 200px;
+}
+
+
+.colored-row {
+  background: rgb(34, 34, 34);
+}
+
+.footer-row {
+  border-radius: 0 0 12px 12px;
+}

static/src/app/army/army-squad/army-squad.component.html

@@ -0,0 +1,24 @@
+<div class="squad-layout">
+  <div>
+    <div class="squad-cell pull-left">
+      <img src="resource/squad/{{squad._id}}.png">
+    </div>
+    <div class="squad-cell title name-cell">{{squad.name}}</div>
+  </div>
+  <div class=" middle-row">
+    <div class="name-cell">
+      <div [style.color]="squadFraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR"
+           *ngFor="let member of squad.members">
+          <span class="member-link"
+                (click)="select(member._id)">
+            {{member.rank}} {{member.username}}
+          </span>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="squad-cell squad-member-count">
+      Mitglieder: {{squad.memberCount}}
+    </div>
+  </div>
+</div>

static/src/app/army/army-squad/army-squad.component.ts

@@ -0,0 +1,26 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+import {Fraction} from '../../utils/fraction.enum';
+
+@Component({
+  selector: 'cc-army-squad',
+  templateUrl: './army-squad.component.html',
+  styleUrls: ['./army-squad.component.css']
+})
+export class ArmySquadComponent {
+
+  @Input() squad;
+
+  @Input() squadFraction: String;
+
+  @Output() memberSelect = new EventEmitter();
+
+  readonly fraction = Fraction;
+
+  constructor() {
+  }
+
+  select(memberId) {
+    this.memberSelect.emit(memberId);
+  }
+}

static/src/app/army/army.component.css

@@ -1,63 +1,11 @@
-.squad-layout {
+.army-column {
-  overflow: hidden;
+  width: 45%;
-  padding: 5px 15px 5px 15px;
-}
-
-.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;
 }
 
 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
@@ -72,4 +20,3 @@ img {
   background: #222222;
   border-radius: 12px;
 }
-

static/src/app/army/army.component.html

@@ -1,62 +1,23 @@
 <div style="width: 1100px; margin:auto; position: relative;">
   <h1>Übersicht über alle Spieler, Squads und Armeen</h1>
 
-  <div class="pull-left" style="width: 45%;">
+  <div class="pull-left army-column">
     <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
-    <div class="squad-layout" *ngFor="let squad of army[0].squads">
+    <cc-army-squad *ngFor="let squad of army[0].squads"
-      <div class="row colored-row title-row">
+                   [squad]="squad"
-        <div class="squad-cell pull-left"><img
+                   squadFraction="BLUFOR"
-          src="resource/squad/{{squad._id}}.png"></div>
+                   (memberSelect)="select($event)">
-        <div class="squad-cell title name-cell">{{squad.name}}</div>
+    </cc-army-squad>
-      </div>
-      <div class="row middle-row">
-        <div class="squad-cell name-cell">
-        <span style="display: block"
-              [style.color]="fraction.COLOR_BLUFOR"
-              *ngFor="let member of squad.members">
-          <span class="member-link"
-                (click)="select(member._id)">
-            {{member.rank}} {{member.username}}
-          </span>
-        </span>
-        </div>
-      </div>
-      <div class="row colored-row footer-row">
-        <div class="squad-cell pull-left" style="color: whitesmoke; margin-left: 42px">
-          Mitglieder: {{squad.memberCount}}
-        </div>
-      </div>
-    </div>
     <div class="member-count">Armeemitglieder: {{army[0].memberCount}}</div>
   </div>
 
-  <div class="pull-right" style="width: 45%;">
+  <div class="pull-right army-column">
     <h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
-    <div class="squad-layout" *ngFor="let squad of army[1].squads">
+    <cc-army-squad *ngFor="let squad of army[1].squads"
-      <div class="row colored-row title-row">
+                   [squad]="squad"
-        <div class="squad-cell pull-left"><img
+                   squadFraction="OPFOR"
-          src="resource/squad/{{squad._id}}.png"></div>
+                   (memberSelect)="select($event)">
-        <div class="squad-cell title name-cell">{{squad.name}}</div>
+    </cc-army-squad>
-      </div>
-      <div class="row middle-row">
-        <div class="squad-cell name-cell">
-        <span style="display: block"
-              [style.color]="fraction.COLOR_OPFOR"
-              *ngFor="let member of squad.members">
-          <span class="member-link"
-                (click)="select(member._id)">
-            {{member.rank}} {{member.username}}
-          </span>
-        </span>
-        </div>
-      </div>
-      <div class="row colored-row footer-row">
-        <div class="squad-cell pull-left" style="color: whitesmoke; margin-left: 42px">
-          Mitglieder: {{squad.memberCount}}
-        </div>
-      </div>
-    </div>
     <div class="member-count">Armeemitglieder: {{army[1].memberCount}}</div>
   </div>
-
 </div>

static/src/app/army/army.routing.ts

@@ -1,6 +1,8 @@
 import {Routes} from '@angular/router';
 import {ArmyComponent} from './army.component';
-import {ArmyMemberComponent} from './army-member.component';
+import {ArmyMemberComponent} from './army-member/army-member.component';
+import {ArmySquadComponent} from './army-squad/army-squad.component';
+
 
 
 export const armyRoutes: Routes = [
@@ -16,4 +18,4 @@ export const armyRoutes: Routes = [
   }
 ];
 
-export const armyRoutingComponents = [ArmyComponent, ArmyMemberComponent];
+export const armyRoutingComponents = [ArmyComponent, ArmySquadComponent, ArmyMemberComponent];