From ee61271550a0db726935f5361f44a6a57442e477 Mon Sep 17 00:00:00 2001 From: Florian Hartwich Date: Sat, 8 Jul 2017 21:56:11 +0200 Subject: [PATCH] Add war detail view --- api/routes/war.js | 2 +- static/src/app/app.config.ts | 1 + static/src/app/app.module.ts | 2 + static/src/app/app.routing.ts | 5 +- static/src/app/models/model-interfaces.ts | 20 +++++ .../app/services/war-service/war.service.ts | 45 +++++++++++ static/src/app/wars/war-detail.component.css | 43 ++++++++++ static/src/app/wars/war-detail.component.html | 80 +++++++++++++++++++ static/src/app/wars/war-detail.component.ts | 46 +++++++++++ 9 files changed, 242 insertions(+), 2 deletions(-) create mode 100644 static/src/app/services/war-service/war.service.ts create mode 100644 static/src/app/wars/war-detail.component.css create mode 100644 static/src/app/wars/war-detail.component.html create mode 100644 static/src/app/wars/war-detail.component.ts diff --git a/api/routes/war.js b/api/routes/war.js index 225c6d6..9e2031c 100644 --- a/api/routes/war.js +++ b/api/routes/war.js @@ -113,7 +113,7 @@ wars.route('/:id') err.status = codes.notfound; return next(err); } - PlayerModel.find({warId: item._id}, (err, items) => { + PlayerModel.find({warId: item._id}, {}, {sort: {kill: 'desc'}}, (err, items) => { if (err) { return next(err); } diff --git a/static/src/app/app.config.ts b/static/src/app/app.config.ts index c082376..347d0c4 100644 --- a/static/src/app/app.config.ts +++ b/static/src/app/app.config.ts @@ -14,5 +14,6 @@ export class AppConfig { public readonly apiOverviewPath = '/overview'; public readonly apiRequestAwardPath = '/request/award'; public readonly apiPromotionPath = '/request/promotion'; + public readonly apiWarPath = '/wars'; } diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index 9db2858..46f9331 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -31,6 +31,7 @@ import {AppUserService} from "./services/app-user-service/app-user.service"; import {AppUserStore} from "./services/stores/app-user.store"; import {PromotionService} from "./services/promotion-service/promotion.service"; import {FilterRankPipe} from "./filter/filter.pipe"; +import {WarService} from "./services/war-service/war.service"; @NgModule({ imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule, ClipboardModule], @@ -53,6 +54,7 @@ import {FilterRankPipe} from "./filter/filter.pipe"; RankStore, AwardingService, PromotionService, + WarService, AppConfig, Title, routingProviders, diff --git a/static/src/app/app.routing.ts b/static/src/app/app.routing.ts index bed999c..1ffd6cf 100644 --- a/static/src/app/app.routing.ts +++ b/static/src/app/app.routing.ts @@ -13,6 +13,7 @@ import {RequestAwardComponent} from "./request/award/req-award.component"; import {RequestPromotionComponent} from "./request/promotion/req-promotion.component"; import {ConfirmPromotionComponent} from "./request/confirm-promotion/confirm-promotion.component"; import {ConfirmAwardComponent} from "./request/confirm-award/confirm-award.component"; +import {WarDetailComponent} from "./wars/war-detail.component"; export const appRoutes: Routes = [ @@ -20,6 +21,8 @@ export const appRoutes: Routes = [ {path: 'cc-overview', children: armyRoutes}, {path: '', redirectTo: '/cc-overview', pathMatch: 'full'}, + {path: 'cc-wars/:id', component: WarDetailComponent}, + {path: 'login', component: LoginComponent}, {path: 'signup', component: SignupComponent}, @@ -44,6 +47,6 @@ export const appRouting = RouterModule.forRoot(appRoutes); export const routingComponents = [LoginComponent, SignupComponent, RequestAwardComponent, RequestPromotionComponent, ConfirmAwardComponent, ConfirmPromotionComponent, AdminComponent, ...armyRoutingComponents, NotFoundComponent, ...usersRoutingComponents, - ...squadsRoutingComponents, ...decorationsRoutingComponents, ...ranksRoutingComponents]; + ...squadsRoutingComponents, ...decorationsRoutingComponents, ...ranksRoutingComponents, WarDetailComponent]; export const routingProviders = [LoginGuardHL]; diff --git a/static/src/app/models/model-interfaces.ts b/static/src/app/models/model-interfaces.ts index 837a6e5..f66fa03 100644 --- a/static/src/app/models/model-interfaces.ts +++ b/static/src/app/models/model-interfaces.ts @@ -16,6 +16,26 @@ export interface User { awards?: Award[]; } +export interface Player { + _id?: string; + fraction?: string; + name?: string; + warId?: War; + kill?: number; + death?: number; + friendlyFire?: number; + respawn?: number; + flagTouch?: number; +} +export interface War { + _id?: string; + date?: Date; + ptBlufor?: number; + ptOpfor?: number; + bestPlayerId?: Player; + players: Player[]; +} + export interface Squad { _id?: string; name?: string; diff --git a/static/src/app/services/war-service/war.service.ts b/static/src/app/services/war-service/war.service.ts new file mode 100644 index 0000000..9805a60 --- /dev/null +++ b/static/src/app/services/war-service/war.service.ts @@ -0,0 +1,45 @@ +import {Injectable} from "@angular/core"; +import {War} from "../../models/model-interfaces"; +import {AppConfig} from "../../app.config"; +import {HttpClient} from "../http-client"; + +@Injectable() +export class WarService { + + constructor(private http: HttpClient, + private config: AppConfig) { + } + + getAllWars() { + return this.http.get(this.config.apiUrl + this.config.apiWarPath) + .map(res => res.json()) + } + + getWar(warId: string) { + return this.http.get(this.config.apiUrl + this.config.apiWarPath + '/' + warId) + .map(res => res.json()) + } + + + submitDecoration(war: War, logFile?) { + let body; + + if (logFile) { + body = new FormData(); + Object.keys(war).map((objectKey) => { + if (war[objectKey] !== undefined) { + body.append(objectKey, war[objectKey]); + } + }); + body.append('log', logFile, logFile.name); + } + + return this.http.post(this.config.apiUrl + this.config.apiDecorationPath, body) + .map(res => res.json()) + .do(savedDecoration => { + console.log('saved successfully') + }); + } + +} + diff --git a/static/src/app/wars/war-detail.component.css b/static/src/app/wars/war-detail.component.css new file mode 100644 index 0000000..296dc50 --- /dev/null +++ b/static/src/app/wars/war-detail.component.css @@ -0,0 +1,43 @@ +.overview { + position: fixed; + overflow-y: scroll; + overflow-x: hidden; + bottom: 20px; + width: 100%; + padding-left: 50px; + padding-top: 70px; + margin-left: 10px; + height: 100vh; +} + +.trash { + cursor: pointer; +} + +.table { + overflow-wrap: break-word; + table-layout: fixed; +} + +.table-container { + margin-top: 10px; + overflow-x: auto; +} + +.table-head { + background: #222222; + color: white; +} + +.cell-outline { + outline: 1px solid #D4D4D4; +} + +.text-opfor { + color: firebrick; +} + +.text-blufor { + color: blue; +} + diff --git a/static/src/app/wars/war-detail.component.html b/static/src/app/wars/war-detail.component.html new file mode 100644 index 0000000..e45bcd4 --- /dev/null +++ b/static/src/app/wars/war-detail.component.html @@ -0,0 +1,80 @@ +
+ +
+

Schlacht vom {{war.date | date: 'dd.MM.yyyy'}}

+

+

Endpunktestand:

+ NATO {{war.ptBlufor}} + | + {{war.ptOpfor}} CSAT + + +
+
+ + + +
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
SpielerFraktionKillsFriendlyFireEroberungenTodeRespawn
+ {{player.name}} + + {{player.fraction === 'BLUFOR' ? 'NATO' : 'CSAT'}} + + {{player.kill}} + + {{player.friendlyFire}} + + {{player.flagTouch}} + + {{player.death}} + + {{player.respawn}} +
+
+
+ +
diff --git a/static/src/app/wars/war-detail.component.ts b/static/src/app/wars/war-detail.component.ts new file mode 100644 index 0000000..32b1d47 --- /dev/null +++ b/static/src/app/wars/war-detail.component.ts @@ -0,0 +1,46 @@ +import {Component} from "@angular/core"; +import {Player, War} from "../models/model-interfaces"; +import {WarService} from "../services/war-service/war.service"; +import {ActivatedRoute} from "@angular/router"; + + +@Component({ + selector: 'war-detail', + templateUrl: './war-detail.component.html', + styleUrls: ['./war-detail.component.css'] +}) +export class WarDetailComponent { + + war: War = {players: []}; + + players: Player[] = []; + + fractionRadioSelect: string; + + constructor(private route: ActivatedRoute, + private warService: WarService) { + } + + ngOnInit() { + this.route.params + .map(params => params['id']) + .filter(id => id != undefined) + .flatMap(id => this.warService.getWar(id)) + .subscribe(war => { + this.war = war; + this.players = war.players; + }); + } + + filterPlayersByFraction(fraction: string) { + if (fraction) { + this.players = this.war.players.filter((player) => { + console.log(player.fraction + " .... " + fraction); + return player.fraction === fraction; + }) + } else { + this.players = this.war.players; + } + } + +}