Refactor army squad into own component
parent
59483b29d8
commit
6e1eaafd95
File diff suppressed because it is too large
Load Diff
|
|
@ -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 {AwardingService} from '../services/army-management/awarding.service';
|
||||
import {Fraction} from '../utils/fraction.enum';
|
||||
import {RouteConfig} from '../../app.config';
|
||||
import {AwardingService} from '../../services/army-management/awarding.service';
|
||||
import {Fraction} from '../../utils/fraction.enum';
|
||||
import {DOCUMENT} from '@angular/common';
|
||||
import {CSSHelpers} from '../utils/global.helpers';
|
||||
import {CSSHelpers} from '../../utils/global.helpers';
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,63 +1,11 @@
|
|||
.squad-layout {
|
||||
overflow: hidden;
|
||||
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;
|
||||
.army-column {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<div class="row colored-row title-row">
|
||||
<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="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>
|
||||
<cc-army-squad *ngFor="let squad of army[0].squads"
|
||||
[squad]="squad"
|
||||
squadFraction="BLUFOR"
|
||||
(memberSelect)="select($event)">
|
||||
</cc-army-squad>
|
||||
<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">
|
||||
<div class="row colored-row title-row">
|
||||
<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="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>
|
||||
<cc-army-squad *ngFor="let squad of army[1].squads"
|
||||
[squad]="squad"
|
||||
squadFraction="OPFOR"
|
||||
(memberSelect)="select($event)">
|
||||
</cc-army-squad>
|
||||
<div class="member-count">Armeemitglieder: {{army[1].memberCount}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
|
|
|
|||
Loading…
Reference in New Issue