Migrate main gateway from Http to HttpClient - 1st iteration (CC-63)

static/src/app/admin/admin.component.ts

@@ -6,7 +6,6 @@ import {SquadService} from '../services/army-management/squad.service';
 import {Fraction} from '../utils/fraction.enum';
 import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service';
 
-
 @Component({
   selector: 'admin-panel',
   templateUrl: './admin.component.html',
@@ -66,5 +65,4 @@ export class AdminComponent implements OnInit {
       return o1._id === o2._id;
     }
   }
-
 }

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

@@ -22,9 +22,7 @@ export class ArmyComponent implements OnInit {
   }
 
   ngOnInit() {
-    // init army data
+    this.armyService.getArmies().subscribe(army => {
-    this.armyService.getArmy()
-        .subscribe(army => {
       this.army = army;
     });
   };

static/src/app/manage/users/edit-user/edit-user.component.ts

@@ -95,8 +95,8 @@ export class EditUserComponent implements OnInit {
     if (this.user._id) {
       this.userService.updateUser(updateObject)
           .subscribe(user => {
-            if (!user.squad) {
+            if (!user.squadId) {
-              user.squad = '0';
+              user.squadId = '0';
             }
             this.user = user;
             this.snackBarService.showSuccess('generic.save.success');

static/src/app/manage/users/user-list/user-list.component.ts

@@ -1,11 +1,11 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Observable} from 'rxjs/Observable';
 import {UserService} from '../../../services/army-management/user.service';
 import {User} from '../../../models/model-interfaces';
-import {ADD, LOAD} from '../../../services/stores/generic-store';
+import {ADD_ARRAY, LOAD} from '../../../services/stores/generic-store';
 import {Fraction} from '../../../utils/fraction.enum';
 import {MatButtonToggleGroup} from '@angular/material';
 import {UIHelpers} from '../../../utils/global.helpers';
@@ -16,7 +16,7 @@ import {TranslateService} from '@ngx-translate/core';
   templateUrl: './user-list.component.html',
   styleUrls: ['./user-list.component.css', '../../../style/select-list.css']
 })
-export class UserListComponent implements OnInit {
+export class UserListComponent {
 
   selectedUserId: string | number = null;
 
@@ -26,9 +26,9 @@ export class UserListComponent implements OnInit {
 
   radioModel = '';
 
-  throttle = 300;
+  readonly throttle = 300;
 
-  scrollDistance = 1;
+  readonly scrollDistance = 1;
 
   offset = 0;
 
@@ -40,9 +40,6 @@ export class UserListComponent implements OnInit {
               private router: Router,
               private route: ActivatedRoute,
               private translate: TranslateService) {
-  }
-
-  ngOnInit() {
     this.users$ = this.userService.users$;
   }
 
@@ -96,7 +93,7 @@ export class UserListComponent implements OnInit {
     }
     if (this.limit !== 0) {
       this.offset += this.limit;
-      this.filterUsers(ADD);
+      this.filterUsers(ADD_ARRAY);
     }
   }
 }

static/src/app/models/model-interfaces.ts

@@ -7,6 +7,7 @@ export interface AppUser {
   secret?: string;
   activated: boolean;
   permission: number;
+  token?: string;
 }
 
 export interface User {

static/src/app/services/app-user-service/app-user.service.ts

@@ -18,8 +18,7 @@ export class AppUserService {
   }
 
   getUsers() {
-    this.httpGateway.get(this.config.apiAppUserPath)
+    this.httpGateway.get<AppUser[]>(this.config.apiAppUserPath)
-        .map(res => res.json())
         .do((users) => {
           this.appUserStore.dispatch({type: LOAD, data: users});
         }).subscribe(_ => {
@@ -29,8 +28,7 @@ export class AppUserService {
   }
 
   updateUser(user: AppUser) {
-    return this.httpGateway.patch(this.config.apiAppUserPath + user._id, user)
+    return this.httpGateway.patch<AppUser>(this.config.apiAppUserPath + user._id, user)
-               .map(res => res.json())
                .do(savedUser => {
                  const action = {type: EDIT, data: savedUser};
                  this.appUserStore.dispatch(action);

static/src/app/services/app-user-service/login-service.ts

@@ -1,15 +1,16 @@
 import {Injectable} from '@angular/core';
-import {Http, Response} from '@angular/http';
 import 'rxjs/add/operator/map';
 
 import {AppConfig} from '../../app.config';
 import {AwardingService} from '../army-management/awarding.service';
 import {PromotionService} from '../army-management/promotion.service';
 import {CookieService} from 'ngx-cookie-service';
+import {HttpClient} from '@angular/common/http';
+import {AppUser} from '../../models/model-interfaces';
 
 @Injectable()
 export class LoginService {
-  constructor(private http: Http,
+  constructor(private http: HttpClient,
               private config: AppConfig,
               private cookieService: CookieService,
               private awardingService: AwardingService,
@@ -17,10 +18,10 @@ export class LoginService {
   }
 
   login(username: string, password: string) {
-    return this.http.post(this.config.apiAuthenticationPath, {username: username, password: password})
+    return this.http.post<AppUser>(this.config.apiAuthenticationPath, {username: username, password: password})
-               .map((response: Response) => {
+               .map((response) => {
                  // login successful if there's a jwt token in the response
-                 const user = response.json();
+                 const user = response;
                  if (user && user.token) {
                    // store user details and jwt token in cookie
                    this.cookieService.set('currentUser', JSON.stringify(user));
@@ -34,9 +35,7 @@ export class LoginService {
   }
 
   signUp(username: string, password: string, secret: string) {
-    return this.http.post(this.config.apiSignupPath, {username: username, password: password, secret: secret})
+    return this.http.post(this.config.apiSignupPath, {username: username, password: password, secret: secret});
-               .map((response: Response) => {
-               });
   }
 
   logout() {

static/src/app/services/army-management/awarding.service.ts

@@ -18,7 +18,7 @@ export class AwardingService {
                        .concat('&fractFilter=').concat(fraction)
                        .concat('&userId=').concat(userId)
                        .concat('&squadId=').concat(squadId);
-    return this.httpGateway.get(getUrl).map(res => res.json());
+    return this.httpGateway.get<Award[]>(getUrl);
   }
 
   addAwarding(award: Award) {
@@ -26,8 +26,7 @@ export class AwardingService {
   }
 
   updateAward(award) {
-    return this.httpGateway.patch(this.config.apiAwardPath + '/' + award._id, award)
+    return this.httpGateway.patch(this.config.apiAwardPath + '/' + award._id, award);
-               .map(res => res.json());
   }
 
   requestAwarding(award: Award) {
@@ -61,4 +60,3 @@ export class AwardingService {
     return this.getAwardings('', userId);
   }
 }
-

static/src/app/services/army-management/decoration.service.ts

@@ -1,10 +1,11 @@
 import {Injectable} from '@angular/core';
 import {Decoration} from '../../models/model-interfaces';
-import {RequestMethod, RequestOptions, URLSearchParams} from '@angular/http';
+import {RequestMethod, RequestOptions} from '@angular/http';
 import {Observable} from 'rxjs/Observable';
 import {ADD, EDIT, LOAD, REMOVE, Store} from '../stores/generic-store';
 import {AppConfig} from '../../app.config';
 import {HttpGateway} from '../http-gateway';
+import {HttpParams} from '@angular/common/http';
 
 @Injectable()
 export class DecorationService {
@@ -18,15 +19,13 @@ export class DecorationService {
     this.decorations$ = this.decorationStore.items$;
   }
 
-  findDecorations(query = '', fractionFilter?) {
+  findDecorations(query = '', fractionFilter?): Observable<Decoration[]> {
-    const searchParams = new URLSearchParams();
+    let searchParams = new HttpParams().append('q', query);
-    searchParams.append('q', query);
     if (fractionFilter) {
-      searchParams.append('fractFilter', fractionFilter);
+      searchParams = searchParams.append('fractFilter', fractionFilter);
     }
 
-    this.httpGateway.get(this.config.apiDecorationPath, searchParams)
+    this.httpGateway.get<Decoration[]>(this.config.apiDecorationPath, searchParams)
-        .map(res => res.json())
         .do((squads) => {
           this.decorationStore.dispatch({type: LOAD, data: squads});
         }).subscribe(_ => {
@@ -36,8 +35,7 @@ export class DecorationService {
   }
 
   getDecoration(id: number | string): Observable<Decoration> {
-    return this.httpGateway.get(this.config.apiDecorationPath + id)
+    return this.httpGateway.get<Decoration>(this.config.apiDecorationPath + id);
-               .map(res => res.json());
   }
 
   /**
@@ -76,8 +74,7 @@ export class DecorationService {
       method: requestMethod,
     });
 
-    return this.httpGateway.request(requestUrl, options)
+    return this.httpGateway.request<Decoration>(requestUrl, options)
-               .map(res => res.json())
                .do(savedDecoration => {
                  const action = {type: accessType, data: savedDecoration};
                  this.decorationStore.dispatch(action);

static/src/app/services/army-management/promotion.service.ts

@@ -2,6 +2,7 @@ import {Injectable} from '@angular/core';
 import {AppConfig} from '../../app.config';
 import {Promotion} from '../../models/model-interfaces';
 import {HttpGateway} from '../http-gateway';
+import {Observable} from 'rxjs';
 
 @Injectable()
 export class PromotionService {
@@ -12,9 +13,9 @@ export class PromotionService {
               private config: AppConfig) {
   }
 
-  getUnconfirmedPromotions(fraction?: string) {
+  getUnconfirmedPromotions(fraction?: string): Observable<Promotion[]> {
-    return this.httpGateway.get(this.config.apiPromotionPath + '?inProgress=true&fractFilter=' + fraction)
+    return this.httpGateway.get<Promotion[]>(this.config.apiPromotionPath +
-               .map(res => res.json());
+      '?inProgress=true&fractFilter=' + fraction);
   }
 
   checkUnconfirmedPromotions(fraction?: string) {
@@ -25,23 +26,19 @@ export class PromotionService {
     });
   }
 
-  getSquadPromotions(squadId: string) {
+  getSquadPromotions(squadId: string): Observable<Promotion[]> {
-    return this.httpGateway.get(this.config.apiPromotionPath + '?squadId=' + squadId)
+    return this.httpGateway.get<Promotion[]>(this.config.apiPromotionPath + '?squadId=' + squadId);
-               .map(res => res.json());
   }
 
-  requestPromotion(promotion: Promotion) {
+  requestPromotion(promotion: Promotion): Observable<Promotion> {
-    return this.httpGateway.post(this.config.apiPromotionPath, promotion);
+    return this.httpGateway.post<Promotion>(this.config.apiPromotionPath, promotion);
   }
 
-  updatePromotion(promotion) {
+  updatePromotion(promotion): Observable<Promotion> {
-    return this.httpGateway.patch(this.config.apiPromotionPath + '/' + promotion._id, promotion)
+    return this.httpGateway.patch<Promotion>(this.config.apiPromotionPath + '/' + promotion._id, promotion);
-               .map(res => res.json());
   }
 
   deletePromotion(promotionId) {
     return this.httpGateway.delete(this.config.apiPromotionPath + promotionId);
   }
-
 }
-

static/src/app/services/army-management/rank.service.ts

@@ -1,10 +1,11 @@
 import {Injectable} from '@angular/core';
 import {Rank} from '../../models/model-interfaces';
-import {RequestMethod, RequestOptions, URLSearchParams} from '@angular/http';
+import {RequestMethod, RequestOptions} from '@angular/http';
 import {Observable} from 'rxjs/Observable';
 import {ADD, EDIT, LOAD, REMOVE, Store} from '../stores/generic-store';
 import {AppConfig} from '../../app.config';
 import {HttpGateway} from '../http-gateway';
+import {HttpParams} from '@angular/common/http';
 
 @Injectable()
 export class RankService {
@@ -18,15 +19,13 @@ export class RankService {
     this.ranks$ = this.rankStore.items$;
   }
 
-  findRanks(query = '', fractionFilter?) {
+  findRanks(query = '', fractionFilter?): Observable<Rank[]> {
-    const searchParams = new URLSearchParams();
+    let searchParams = new HttpParams().append('q', query);
-    searchParams.append('q', query);
     if (fractionFilter) {
-      searchParams.append('fractFilter', fractionFilter);
+      searchParams = searchParams.append('fractFilter', fractionFilter);
     }
 
-    this.httpGateway.get(this.config.apiRankPath, searchParams)
+    this.httpGateway.get<Rank[]>(this.config.apiRankPath, searchParams)
-        .map(res => res.json())
         .do((ranks) => {
           this.rankStore.dispatch({type: LOAD, data: ranks});
         }).subscribe(_ => {
@@ -36,15 +35,14 @@ export class RankService {
   }
 
   getRank(id: number | string): Observable<Rank> {
-    return this.httpGateway.get(this.config.apiRankPath + id)
+    return this.httpGateway.get<Rank>(this.config.apiRankPath + id);
-               .map(res => res.json());
   }
 
   /**
    * For creating new data with POST or
    * update existing with patch PATCH
    */
-  submitRank(rank: Rank, imageFile?) {
+  submitRank(rank: Rank, imageFile?): Observable<Rank> {
     let requestUrl = this.config.apiRankPath;
     let requestMethod: RequestMethod;
     let accessType;
@@ -77,8 +75,7 @@ export class RankService {
       method: requestMethod
     });
 
-    return this.httpGateway.request(requestUrl, options)
+    return this.httpGateway.request<Rank>(requestUrl, options)
-               .map(res => res.json())
                .do(savedRank => {
                  const action = {type: accessType, data: savedRank};
                  // leave some time to save image file before accessing it through list view

static/src/app/services/army-management/squad.service.ts

@@ -1,10 +1,11 @@
 import {Injectable} from '@angular/core';
 import {Squad} from '../../models/model-interfaces';
-import {RequestMethod, RequestOptions, URLSearchParams} from '@angular/http';
+import {RequestMethod, RequestOptions} from '@angular/http';
 import {Observable} from 'rxjs/Observable';
 import {ADD, EDIT, LOAD, REMOVE, Store} from '../stores/generic-store';
 import {AppConfig} from '../../app.config';
 import {HttpGateway} from '../http-gateway';
+import {HttpParams} from '@angular/common/http';
 
 @Injectable()
 export class SquadService {
@@ -18,13 +19,11 @@ export class SquadService {
     this.squads$ = this.squadStore.items$;
   }
 
-  findSquads(query = '', fractionFilter = '') {
+  findSquads(query = '', fractionFilter = ''): Observable<Squad[]> {
-    const searchParams = new URLSearchParams();
+    const searchParams = new HttpParams().append('q', query)
-    searchParams.append('q', query);
+                                         .append('fractFilter', fractionFilter);
-    searchParams.append('fractFilter', fractionFilter);
 
     this.httpGateway.get(this.config.apiSquadPath, searchParams)
-        .map(res => res.json())
         .do((squads) => {
           this.squadStore.dispatch({type: LOAD, data: squads});
         }).subscribe(_ => {
@@ -34,15 +33,14 @@ export class SquadService {
   }
 
   getSquad(id: number | string): Observable<Squad> {
-    return this.httpGateway.get(this.config.apiSquadPath + id)
+    return this.httpGateway.get<Squad>(this.config.apiSquadPath + id);
-               .map(res => res.json());
   }
 
   /**
    * For creating new data with POST or
    * update existing with patch PATCH
    */
-  submitSquad(squad: Squad, imageFile?) {
+  submitSquad(squad: Squad, imageFile?): Observable<Squad> {
     let requestUrl = this.config.apiSquadPath;
     let requestMethod: RequestMethod;
     let accessType;
@@ -74,8 +72,7 @@ export class SquadService {
       method: requestMethod
     });
 
-    return this.httpGateway.request(requestUrl, options)
+    return this.httpGateway.request<Squad>(requestUrl, options)
-               .map(res => res.json())
                .do(savedSquad => {
                  const action = {type: accessType, data: savedSquad};
                  this.squadStore.dispatch(action);

static/src/app/services/army-management/user.service.ts

@@ -1,10 +1,10 @@
 import {Injectable} from '@angular/core';
 import {User} from '../../models/model-interfaces';
-import {URLSearchParams} from '@angular/http';
 import {Observable} from 'rxjs/Observable';
 import {ADD, EDIT, LOAD, REMOVE, Store} from '../stores/generic-store';
 import {AppConfig} from '../../app.config';
 import {HttpGateway} from '../http-gateway';
+import {HttpParams} from '@angular/common/http';
 
 @Injectable()
 export class UserService {
@@ -20,32 +20,34 @@ export class UserService {
     this.users$ = this.userStore.items$;
   }
 
-  findUsers(filter, limit?, offset?, action = LOAD) {
+  findUsers(filter, limit?, offset?, action = LOAD): Observable<User[]> {
-    const searchParams = new URLSearchParams();
+    let searchParams = new HttpParams().append('q', (filter && filter.query) ? filter.query : '')
+                                       .append('limit', limit)
+                                       .append('offset', offset);
 
-    searchParams.append('q', (filter && filter.query) ? filter.query : '');
+    if (filter) {
-
+      if (filter.fraction) {
-    if (filter && filter.fraction) {
+        searchParams = searchParams.append('fractFilter', filter.fraction);
-      searchParams.append('fractFilter', filter.fraction);
+      }
+      if (filter.squadId) {
+        searchParams = searchParams.append('squadId', filter.squadId);
+      }
+      if (filter.decorationId) {
+        searchParams = searchParams.append('decorationId', filter.decorationId);
+      }
     }
 
-    if (filter && filter.squadId) {
-      searchParams.append('squadId', filter.squadId);
-    }
 
-    if (filter && filter.decorationId) {
+    this.httpGateway.get<Response>(this.config.apiUserPath, searchParams, true)
-      searchParams.append('decorationId', filter.decorationId);
-    }
-
-    searchParams.append('limit', limit);
-    searchParams.append('offset', offset);
-    this.httpGateway.get(this.config.apiUserPath, searchParams)
         .do((res) => {
           const headerCount = parseInt(res.headers.get('x-total-count'), 10);
           if (headerCount) {
             this.totalCount = headerCount;
           }
-        }).map(res => res.json()).do((users) => {
+        })
+        .map(res => res.body)
+        .do((users) => {
+          console.log(users)
           this.userStore.dispatch({type: action, data: users});
         }).subscribe(_ => {
     });
@@ -54,22 +56,19 @@ export class UserService {
   }
 
   getUser(_id: number | string): Observable<User> {
-    return this.httpGateway.get(this.config.apiUserPath + _id)
+    return this.httpGateway.get<User>(this.config.apiUserPath + _id);
-               .map(res => res.json());
   }
 
-  submitUser(user) {
+  submitUser(user): Observable<User> {
-    return this.httpGateway.post(this.config.apiUserPath, user)
+    return this.httpGateway.post<User>(this.config.apiUserPath, user)
-               .map(res => res.json())
                .do(savedUser => {
                  const action = {type: ADD, data: savedUser};
                  this.userStore.dispatch(action);
                });
   }
 
-  updateUser(user) {
+  updateUser(user): Observable<User> {
-    return this.httpGateway.put(this.config.apiUserPath + user._id, user)
+    return this.httpGateway.put<User>(this.config.apiUserPath + user._id, user)
-               .map(res => res.json())
                .do(savedUser => {
                  const action = {type: EDIT, data: savedUser};
                  this.userStore.dispatch(action);

static/src/app/services/army-service/army.service.ts

@@ -1,17 +1,17 @@
 import {Injectable} from '@angular/core';
 import {AppConfig} from '../../app.config';
-import {Http} from '@angular/http';
+import {HttpClient} from '@angular/common/http';
+import {Army} from '../../models/model-interfaces';
 
 
 @Injectable()
 export class ArmyService {
 
-  constructor(private http: Http,
+  constructor(private http: HttpClient,
               private config: AppConfig) {
   }
 
-  getArmy() {
+  getArmies() {
-    return this.http.get(this.config.apiOverviewPath)
+    return this.http.get<Army[]>(this.config.apiOverviewPath);
-               .map(res => res.json());
   }
 }

static/src/app/services/http-gateway.ts

@@ -1,13 +1,15 @@
 import {Injectable} from '@angular/core';
-import {Headers, Http, RequestMethod} from '@angular/http';
+import {RequestMethod} from '@angular/http';
 import {Router} from '@angular/router';
 import {CookieService} from 'ngx-cookie-service';
+import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
+import {Observable} from 'rxjs';
 
 @Injectable()
 export class HttpGateway {
 
   constructor(private router: Router,
-              private http: Http,
+              private http: HttpClient,
               private cookieService: CookieService) {
   }
 
@@ -16,60 +18,56 @@ export class HttpGateway {
     if (cookieField) {
       const currentUser = JSON.parse(cookieField);
       if (new Date().getTime() <= Date.parse(currentUser.tokenExpireDate)) {
-        const headers = new Headers();
+        return {
-        headers.append('x-access-token', currentUser.token);
+          headers: new HttpHeaders({
-        return headers;
+            'x-access-token': currentUser.token
+          })
+        };
       } else {
         // logout
         localStorage.removeItem('currentUser');
         this.router.navigate(['/login']);
       }
+    } else {
+      return {};
     }
   }
 
-  get(url, searchParams?) {
+  get<T>(url: string, searchParams?: HttpParams, getFullResponse = false): Observable<T> {
-    const headers = this.createAuthorizationHeader();
+    const options = this.createAuthorizationHeader();
-    const options: any = {headers: headers};
+
     if (searchParams) {
-      options.search = searchParams;
+      options['params'] = searchParams;
     }
-    return this.http.get(url, options);
+    if (getFullResponse) {
+      options['observe'] = 'response';
     }
 
-  post(url, data) {
+    return this.http.get<T>(url, options);
-    const headers = this.createAuthorizationHeader();
-    return this.http.post(url, data, {
-      headers: headers
-    });
   }
 
-  put(url, data) {
+  post<T>(url, data): Observable<T> {
-    const headers = this.createAuthorizationHeader();
+    return this.http.post<T>(url, data, this.createAuthorizationHeader());
-    return this.http.put(url, data, {
-      headers: headers
-    });
   }
 
-  patch(url, data) {
+  put<T>(url, data): Observable<T> {
-    const headers = this.createAuthorizationHeader();
+    return this.http.put<T>(url, data, this.createAuthorizationHeader());
-    return this.http.patch(url, data, {
+  }
-      headers: headers
+
-    });
+  patch<T>(url, data): Observable<T> {
+    return this.http.patch<T>(url, data, this.createAuthorizationHeader());
   }
 
   delete(url) {
-    const headers = this.createAuthorizationHeader();
+    return this.http.delete(url, this.createAuthorizationHeader());
-    return this.http.delete(url, {
-      headers: headers
-    });
   }
 
-  request(requestUrl, options) {
+  request<T>(requestUrl, options): Observable<T> {
     if (options.method === RequestMethod.Post) {
-      return this.post(requestUrl, options.body);
+      return this.post<T>(requestUrl, options.body);
     }
     if (options.method === RequestMethod.Patch) {
-      return this.patch(requestUrl, options.body);
+      return this.patch<T>(requestUrl, options.body);
     }
   }
 }

static/src/app/services/logs/campaign.service.ts

@@ -19,19 +19,16 @@ export class CampaignService {
   }
 
   getAllCampaigns() {
-    return this.httpGateway.get(this.config.apiCampaignPath)
+    return this.httpGateway.get<Campaign[]>(this.config.apiCampaignPath)
-               .map(res => res.json())
                .do((ranks) => this.campaignStore.dispatch({type: LOAD, data: ranks}));
   }
 
   getCampaign(id: string) {
-    return this.httpGateway.get(`${this.config.apiCampaignPath}/${id}`)
+    return this.httpGateway.get(`${this.config.apiCampaignPath}/${id}`);
-               .map(res => res.json());
   }
 
   getCampaignByWarId(warId) {
-    return this.httpGateway.get(`${this.config.apiCampaignPath}/with/war/${warId}`)
+    return this.httpGateway.get(`${this.config.apiCampaignPath}/with/war/${warId}`);
-               .map((res) => res.json());
   }
 
   submitCampaign(campaign: Campaign) {
@@ -54,8 +51,7 @@ export class CampaignService {
       method: requestMethod
     });
 
-    return this.httpGateway.request(requestUrl, options)
+    return this.httpGateway.request<Campaign>(requestUrl, options)
-               .map(res => res.json())
                .do(savedCampaign => {
                  const action = {type: accessType, data: savedCampaign};
                  this.campaignStore.dispatch(action);

static/src/app/services/logs/logs.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {AppConfig} from '../../app.config';
-import {URLSearchParams} from '@angular/http';
 import {HttpGateway} from '../http-gateway';
+import {HttpParams} from '@angular/common/http';
 
 @Injectable()
 export class LogsService {
@@ -11,69 +11,61 @@ export class LogsService {
   }
 
   getFullLog(warId: string) {
-    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId)
+    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId);
-               .map(res => res.json());
   }
 
   getBudgetLogs(warId: string, fraction = '') {
-    const params = new URLSearchParams();
+    const params = new HttpParams();
     params.append('fraction', fraction);
-    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/budget', params)
+    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/budget', params);
-               .map(res => res.json());
   }
 
   getRespawnLogs(warId: string, playerName = '') {
-    const params = new URLSearchParams();
+    const params = new HttpParams();
     params.append('player', playerName);
-    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/respawn', params)
+    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/respawn', params);
-               .map(res => res.json());
   }
 
   getPointsLogs(warId: string, fraction = '') {
-    const params = new URLSearchParams();
+    const params = new HttpParams();
     params.append('fraction', fraction);
-    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/points', params)
+    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/points', params);
-               .map(res => res.json());
   }
 
   getReviveLogs(warId: string, medicName = '', patientName = '', fraction = '', stabilizedOnly = false, reviveOnly = false) {
-    const params = new URLSearchParams();
+    const params = new HttpParams();
     params.append('medic', medicName);
     params.append('patient', patientName);
     params.append('fraction', fraction);
     params.append('stabilized', stabilizedOnly ? 'true' : '');
     params.append('revive', reviveOnly ? 'true' : '');
-    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/revive', params)
+    return this.httpGateway.get(this.config .apiLogsPath + '/' + warId + '/revive', params);
-               .map(res => res.json());
   }
 
   getKillLogs(warId: string, shooterName = '', targetName = '', fraction = '', friendlyFireOnly = false, notFriendlyFireOnly = false) {
-    const params = new URLSearchParams();
+    const params = new HttpParams();
     params.append('shooter', shooterName);
     params.append('target', targetName);
     params.append('fraction', fraction);
     params.append('friendlyFire', friendlyFireOnly ? 'true' : '');
     params.append('noFriendlyFire', notFriendlyFireOnly ? 'true' : '');
-    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/kills', params)
+    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/kills', params);
-               .map(res => res.json());
   }
 
   getTransportLogs(warId: string, driverName = '', passengerName = '', fraction = '') {
-    const params = new URLSearchParams();
+    const params = new HttpParams();
     params.append('driver', driverName);
     params.append('passenger', passengerName);
     params.append('fraction', fraction);
-    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/transport', params)
+    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/transport', params);
-               .map(res => res.json());
   }
 
   getFlagLogs(warId: string, playerName = '', fraction = '', captureOnly = false, defendOnly = false) {
-    const params = new URLSearchParams();
+    const params = new HttpParams();
     params.append('player', playerName);
     params.append('fraction', fraction);
     params.append('capture', captureOnly ? 'true' : '');
     params.append('defend', defendOnly ? 'true' : '');
-    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/flag', params)
+    return this.httpGateway.get(this.config.apiLogsPath + '/' + warId + '/flag', params);
-               .map(res => res.json());
   }
 }

static/src/app/services/logs/player.service.ts

@@ -10,12 +10,10 @@ export class PlayerService {
   }
 
   getCampaignPlayer(campaignId: string, playerName: string) {
-    return this.httpGateway.get(this.config.apiPlayersPath + '/single/' + campaignId + '/' + playerName)
+    return this.httpGateway.get(this.config.apiPlayersPath + '/single/' + campaignId + '/' + playerName);
-               .map(res => res.json());
   }
 
   getCampaignHighscore(campaignId: string) {
-    return this.httpGateway.get(this.config.apiPlayersPath + '/ranking/' + campaignId)
+    return this.httpGateway.get(this.config.apiPlayersPath + '/ranking/' + campaignId);
-               .map(res => res.json());
   }
 }

static/src/app/services/logs/war.service.ts

@@ -17,19 +17,17 @@ export class WarService {
     this.wars$ = this.warStore.items$;
   }
 
-  getAllWars(campaignId?: string) {
+  getAllWars(campaignId?: string): Observable<War[]> {
     let targetUrl = this.config.apiWarPath;
     if (campaignId) {
       targetUrl += `?campaignId=${campaignId}`
     }
-    return this.httpGateway.get(targetUrl)
+    return this.httpGateway.get<War[]>(targetUrl)
-               .map(res => res.json())
                .do((wars) => this.warStore.dispatch({type: LOAD, data: wars}));
   }
 
-  getWar(warId: string) {
+  getWar(warId: string): Observable<War> {
-    return this.httpGateway.get(this.config.apiWarPath + '/' + warId)
+    return this.httpGateway.get<War>(this.config.apiWarPath + '/' + warId);
-               .map(res => res.json());
   }
 
   submitWar(war: War, logFile?) {
@@ -45,14 +43,12 @@ export class WarService {
       body.append('log', logFile, logFile.name);
     }
 
-    return this.httpGateway.post(this.config.apiWarPath, body)
+    return this.httpGateway.post<War>(this.config.apiWarPath, body)
-               .map(res => res.json())
                .do((newWar) => this.warStore.dispatch({type: ADD, data: newWar}));
   }
 
   updateWar(war: War) {
-    return this.httpGateway.patch(this.config.apiWarPath + '/' + war._id, war)
+    return this.httpGateway.patch<War>(this.config.apiWarPath + '/' + war._id, war)
-               .map(res => res.json())
                .do((updatedWar) => this.warStore.dispatch({type: EDIT, data: updatedWar}));
   }
 

static/src/app/services/stores/generic-store.ts

@@ -2,6 +2,7 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 
 export const LOAD = 'LOAD';
 export const ADD = 'ADD';
+export const ADD_ARRAY = 'ADD_ARRAY';
 export const EDIT = 'EDIT';
 export const REMOVE = 'REMOVE';
 
@@ -27,6 +28,8 @@ export class Store<T extends Identifiable> {
         return [...action.data];
       case ADD:
         return [...items, action.data];
+      case ADD_ARRAY:
+        return [...items].concat(action.data);
       case EDIT:
         return items.map(item => {
           const editedItem = action.data;

static/src/app/statistic/war/war-header/war-header.component.ts

@@ -56,7 +56,8 @@ export class WarHeaderComponent implements OnInit {
           this.fractionStatsInitialized = false;
           this.fractionFilterSelected = undefined;
 
-          this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
+          this.playerChart =
+            ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
           Object.assign(this, [this.playerChart]);
         });
   }