Merge branch 'release/v1.8.3' of hardi/opt-cc into master

api/apib/statistics/campaigns.apib

@@ -2,7 +2,6 @@
 
 Get all campaigns information
 
-
 + Response 200 (application/json; charset=utf-8)
 
     + Attributes (array[Campaign], fixed-type)
@@ -18,6 +17,18 @@ Get single campaign information
 
     + Attributes (Campaign, fixed-type)
     
+### Get Campaign Containing Specific War [GET /campaigns/with/war/{warId}]
+
+Get a single campaign, containing a specific war
+
++ Parameters
+    + warId: `5abf65ae3fc5fa349ffd5ca3` (string, required) - unique id of war that has to be part of campaign
+
++ Response 200 (application/json; charset=utf-8)
+
+    + Attributes (Campaign, fixed-type)
+
+
 ### Create Campaign [POST /campaigns]
 
 Create a new campaign

api/apib/statistics/wars.apib

@@ -1,10 +1,13 @@
-### List Wars [GET /wars]
+### List Wars [GET /wars{?campaignId}]
 
-List all wars, subordinate to their campaign
+List all wars
+
++ Parameters
+    + campaignId: `5abd55ea9e30a76bfef747d6` (string, optional) - show only wars from campaign with this id
 
 + Response 200 (application/json; charset=utf-8)
 
-    + Attributes (array[WarCampaign], fixed-type)
+    + Attributes (array[War], fixed-type)
 
 ### Get War [GET /wars/{id}]
 

api/routes/campaigns.js

@@ -63,6 +63,21 @@ campaigns.route('/')
            routerHandling.httpMethodNotAllowed
          );
 
+campaigns.route('/with/war/:id')
+         .get((req, res, next) => {
+           WarModel.findById(req.params.id, (err, item) => {
+             if (err) {
+               err.status = codes.servererror;
+               return next(err);
+             }
+             return genericGetById({params: {id: item.campaign}}, res, next, CampaignModel);
+           });
+         })
+
+         .all(
+           routerHandling.httpMethodNotAllowed
+         );
+
 campaigns.route('/:id')
          .get(idValidator, (req, res, next) => {
            return genericGetById(req, res, next, CampaignModel);

api/routes/users.js

@@ -57,7 +57,7 @@ users.route('/')
                       return next();
                     }
 
-                    UserModel.count(dbFilter, (err, totalCount) => {
+                    UserModel.countDocuments(dbFilter, (err, totalCount) => {
                       res.set('x-total-count', totalCount);
                       res.locals.items = users;
                       res.locals.processed = true;

api/routes/wars.js

@@ -23,7 +23,6 @@ const resourceLocation = require('../middleware/resource-location').resourceLoca
 const parseWarLog = require('../tools/log-parse-tool');
 
 // Mongoose Model using mongoDB
-const CampaignModel = require('../models/campaign');
 const WarModel = require('../models/war');
 const PlayerModel = require('../models/player');
 const LogKillModel = require('../models/logs/kill');
@@ -43,36 +42,18 @@ const wars = new express.Router();
 // routes **********************
 wars.route('/')
     .get((req, res, next) => {
-      let result = [];
+      const filter = {};
-      CampaignModel.find({}, {}, {sort: {timestamp: 'desc'}}, (err, campaigns) => {
+      if (req.query.campaignId) {
+        filter.campaign = req.query.campaignId;
+      }
+      WarModel.find(filter, {}, {sort: {date: 'desc'}}, (err, wars) => {
         if (err) {
           err.status = codes.servererror;
           return next(err);
         }
-        if (campaigns) {
+        res.locals.items = wars;
-          WarModel.find({}, {}, {sort: {date: 'desc'}}, (err, wars) => {
-              if (err) {
-                err.status = codes.servererror;
-                return next(err);
-              }
-              if (wars) {
-                campaigns.forEach((campaign) => {
-                  let entry = {_id: campaign._id, title: campaign.title, wars: []};
-                  wars.forEach((war) => {
-                    if (String(campaign._id) === String(war.campaign)) {
-                      entry.wars.push(war);
-                    }
-                  });
-                  result.push(entry);
-                });
-                res.locals.items = result;
-              }
         res.locals.processed = true;
         next();
-            }
-          )
-          ;
-        }
       });
     })
 

api/server.js

@@ -63,6 +63,7 @@ const corsOptions = {
   methods: ['GET'],
   optionsSuccessStatus: 200,
 };
+
 app.use(cors(corsOptions));
 
 app.use(favicon(path.join(__dirname + '/..', 'public', 'favicon.ico')));
@@ -146,26 +147,41 @@ if (process.env.NODE_ENV === config.test.unit.env || process.env.NODE_ENV === co
   });
 } else {
   mongoose.connect(config.database.uri + config.database.db, {useNewUrlParser: true}).then((db) => {
+    let cronWorkerPID;
     if (cluster.isMaster) {
       // Fork workers
       for (let i = 0; i < numWorkers; i++) {
+        if (i === 0) {
+          const spawnedWorker = cluster.fork({START_CRON: true});
+          cronWorkerPID = spawnedWorker.process.pid;
+        } else {
           cluster.fork();
         }
+      }
       logger(`Master ${process.pid} is running. Forking ${numWorkers} workers`);
 
       // Check if worker id is died
       cluster.on('exit', (worker, code, signal) => {
         logger(`worker ${worker.process.pid} died`);
+        if (worker.process.pid === cronWorkerPID) {
+          const spawnedWorker = cluster.fork({START_CRON: true});
+          cronWorkerPID = spawnedWorker.process.pid;
+        } else {
+          cluster.fork();
+        }
       });
     } else {
       app.listen(config.port, (err) => {
-        if (err !== undefined) {
+        if (err) {
           error(`Error on startup ${err}`);
         } else {
           logger(`Worker ${process.pid} started. Listening on port ${config.port}`);
+          if (process.env.START_CRON) {
+            logger(`Attaching cronJobs to cluster worker ${process.pid}`);
             signatureCronJob.start();
             backupCronJob.start();
           }
+        }
       });
     }
   });

api/tools/log-parse-tool.js

@@ -24,6 +24,9 @@ const vehicleRegex = /(vehicle:\s(.*?)\))/;
 const categoryRegex = /(category:\s(.*?)\))/;
 
 const parseWarLog = (lineArray, war) => {
+  let flagBlufor = true;
+  let flagOpfor = true;
+
   const NAME_TOO_LONG_ERROR = 'Error: ENAMETOOLONG: name too long, open \'';
 
   const stats = {
@@ -164,11 +167,21 @@ const parseWarLog = (lineArray, war) => {
       /**
        * FLAG
        */
-      stats.clean.push(line);
-      const playerName = line.substring(line.lastIndexOf('rt von ') + 7).slice(0, -1);
       const flagFraction = line.includes('NATO Flagge') ? 'BLUFOR' : 'OPFOR';
       const capture = !!line.includes('Flagge erobert');
 
+      if ((flagFraction === 'BLUFOR' && ((capture && flagBlufor) || (!capture && !flagBlufor))) ||
+        (flagFraction === 'OPFOR' && ((capture && flagOpfor) || (!capture && !flagOpfor)))) {
+        stats.clean.push(line);
+
+        const playerName = line.substring(line.lastIndexOf('rt von ') + 7).slice(0, -1);
+
+        if (flagFraction === 'BLUFOR') {
+          flagBlufor = !capture;
+        } else if (flagFraction === 'OPFOR') {
+          flagOpfor = !capture;
+        }
+
         stats.flag.push({
           war: war._id,
           time: getFullTimeDate(war.date, line.split(WHITESPACE)[5]),
@@ -176,6 +189,7 @@ const parseWarLog = (lineArray, war) => {
           flagFraction: flagFraction,
           capture: capture,
         });
+      }
     } else if (line.includes('(Punkte)')) {
       /**
        * POINTS

docs/infra/codestyle/cc-intellij-idea-javascript-typescript-style.xml

@@ -11,7 +11,6 @@
     <option name="RIGHT_MARGIN" value="120" />
     <option name="KEEP_FIRST_COLUMN_COMMENT" value="false" />
     <option name="ALIGN_MULTILINE_CHAINED_METHODS" value="true" />
-    <option name="SPACE_WITHIN_BRACKETS" value="true" />
     <option name="CALL_PARAMETERS_WRAP" value="1" />
     <option name="METHOD_PARAMETERS_WRAP" value="1" />
     <option name="EXTENDS_KEYWORD_WRAP" value="1" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {

static/package.json

@@ -28,9 +28,11 @@
     "@angular/platform-browser": "^6.0.7",
     "@angular/platform-browser-dynamic": "^6.0.7",
     "@angular/router": "^6.0.7",
-    "@swimlane/ngx-charts": "^8.1.0",
+    "@ngx-translate/core": "^10.0.2",
+    "@ngx-translate/http-loader": "^3.0.1",
+    "@swimlane/ngx-charts": "^9.0.0",
     "bootstrap": "^3.3.7",
-    "d3": "^4.11.0",
+    "d3": "^5.7.0",
     "file-saver": "^1.3.8",
     "jquery": "^3.1.0",
     "jquery-ui": "^1.12.0",
@@ -43,6 +45,7 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "^0.8.3",
     "@types/jasmine": "2.5.38",
     "@types/node": "^6.0.89",
     "codelyzer": "^4.4.2",
@@ -52,11 +55,10 @@
     "karma-chrome-launcher": "^2.0.0",
     "karma-jasmine": "^1.1.0",
     "karma-spec-reporter": "0.0.30",
-    "protractor": "^5.3.2",
+    "protractor": "^5.4.1",
     "protractor-jasmine2-screenshot-reporter": "^0.3.2",
     "ts-node": "1.2.1",
     "tslint": "^5.10.0",
-    "@angular-devkit/build-angular": "~0.6.8",
     "typescript": "^2.7.2"
   }
 }

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

@@ -5,8 +5,6 @@ import {AppUserService} from '../services/app-user-service/app-user.service';
 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';
-import {Message} from '../i18n/de.messages';
-
 
 @Component({
   selector: 'admin-panel',
@@ -47,7 +45,7 @@ export class AdminComponent implements OnInit {
 
     this.appUserService.updateUser(updateObject)
         .subscribe(resUser => {
-          this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+          this.snackBarService.showSuccess('generic.save.success');
         });
   }
 
@@ -67,5 +65,4 @@ export class AdminComponent implements OnInit {
       return o1._id === o2._id;
     }
   }
-
 }

static/src/app/admin/admin.module.ts

@@ -1,7 +1,6 @@
 import {NgModule} from '@angular/core';
 import {AdminComponent} from './admin.component';
 import {SharedModule} from '../shared.module';
-import {AppUserStore} from '../services/stores/app-user.store';
 import {AppUserService} from '../services/app-user-service/app-user.service';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
@@ -9,7 +8,7 @@ import {RouterModule} from '@angular/router';
 @NgModule({
   declarations: [AdminComponent],
   imports: [CommonModule, SharedModule, RouterModule.forChild([{path: '', component: AdminComponent}])],
-  providers: [AppUserStore, AppUserService]
+  providers: [AppUserService]
 })
 export class AdminModule {
 }

static/src/app/app.component.html

@@ -12,39 +12,39 @@
 
         <ul class="nav navbar-nav">
           <li routerLinkActive="active">
-            <a href="https://www.opt4.net/dashboard" class="link">Zum Forum</a>
+            <a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>
           </li>
           <li routerLinkActive="active">
-            <a routerLink='{{config.overviewPath}}' class="link">Armeeübersicht</a>
+            <a routerLink='{{config.overviewPath}}' class="link">{{'navigation.top.overview' | translate}}</a>
           </li>
           <li routerLinkActive="active">
-            <a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]" class="link">Ränge</a>
+            <a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]" class="link">{{'navigation.top.ranks' | translate}}</a>
           </li>
           <li routerLinkActive="active">
-            <a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]" class="link">Auszeichnungen</a>
+            <a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]" class="link">{{'navigation.top.decorations' | translate}}</a>
           </li>
           <li routerLinkActive="active">
-            <a routerLink='{{config.statsPath}}' class="link">Statistiken</a>
+            <a routerLink='{{config.statsPath}}' class="link">{{'navigation.top.statistics' | translate}}</a>
           </li>
           <li *ngIf="loginService.hasPermission(2)"
               class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">
-              Verwaltung
+              {{'navigation.top.management' | translate}}
               <span class="caret"></span>
             </a>
             <ul class="dropdown-menu">
               <li routerLinkActive="active">
-                <a routerLink='{{config.userPath}}' class="link">Teilnehmer</a>
+                <a routerLink='{{config.manageUserPath}}' class="link">{{'navigation.top.management.users' | translate}}</a>
               </li>
               <li routerLinkActive="active">
-                <a routerLink='{{config.squadPath}}' class="link">Squads</a>
+                <a routerLink='{{config.manageSquadPath}}' class="link">{{'navigation.top.management.squads' | translate}}</a>
               </li>
               <li routerLinkActive="active">
-                <a routerLink='{{config.decorationPath}}' class="link">Auszeichnungen</a>
+                <a routerLink='{{config.manageDecorationPath}}' class="link">{{'navigation.top.management.decorations' | translate}}</a>
               </li>
               <li routerLinkActive="active">
-                <a routerLink='{{config.rankPath}}' class="link">Ränge</a>
+                <a routerLink='{{config.manageRankPath}}' class="link">{{'navigation.top.management.ranks' | translate}}</a>
               </li>
             </ul>
           </li>
@@ -52,18 +52,18 @@
               class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">
-              Beantragen
+              {{'navigation.top.request' | translate}}
               <span class="caret"></span>
             </a>
             <ul class="dropdown-menu">
               <li>
-                <a routerLink="{{config.request}}/{{config.sqlDashboardPath}}">Offene Anträge</a>
+                <a routerLink="{{config.request}}/{{config.sqlDashboardPath}}">{{'navigation.top.request.open' | translate}}</a>
               </li>
               <li>
-                <a routerLink="{{config.request}}/{{config.requestPromotionPath}}">Beförderung</a>
+                <a routerLink="{{config.request}}/{{config.requestPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>
               </li>
               <li>
-                <a routerLink="{{config.request}}/{{config.requestAwardPath}}">Orden/ Auszeichnung</a>
+                <a routerLink="{{config.request}}/{{config.requestAwardPath}}">{{'navigation.top.request.award' | translate}}</a>
               </li>
             </ul>
           </li>
@@ -72,31 +72,43 @@
                [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
                class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">
-              Anträge
+              {{'navigation.top.request.manage' | translate}}
               <span class="caret"></span>
             </a>
             <ul class="dropdown-menu">
               <li>
                 <a [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
-                   routerLink="{{config.request}}/{{config.confirmPromotionPath}}">Beförderung</a>
+                   routerLink="{{config.request}}/{{config.confirmPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>
               </li>
               <li>
                 <a [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
-                   routerLink="{{config.request}}/{{config.confirmAwardPath}}">Orden/ Auszeichnung</a>
+                   routerLink="{{config.request}}/{{config.confirmAwardPath}}">{{'navigation.top.request.award' | translate}}</a>
               </li>
             </ul>
           </li>
         </ul>
 
-        <ul class="nav navbar-nav" style="float: right">
+        <ul class="nav navbar-nav pull-right">
           <li *ngIf="loginService.hasPermission(4)" routerLinkActive="active">
-            <a routerLink='{{config.adminPanelPath}}' class="link">Admin Panel</a>
+            <a routerLink='{{config.adminPanelPath}}' class="link">{{'navigation.top.admin' | translate}}</a>
           </li>
           <li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
-            <a (click)="logout()">Abmelden</a>
+            <a (click)="logout()">{{'navigation.top.logout' | translate}}</a>
           </li>
           <li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">
-            <a routerLink='{{config.loginPath}}' class="link">Login</a>
+            <a routerLink='{{config.loginPath}}' class="link">{{'navigation.top.login' | translate}}</a>
+          </li>
+          <li class="dropdown" *ngIf="FEATURE_LOCALIZATION_ENABLED">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
+               aria-expanded="false" style="padding: 12px 12px 10px 12px;">
+              <mat-icon svgIcon="{{(language === 'de') ? 'flag-de' : 'flag-gb'}}"></mat-icon>
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+              <li *ngFor="let lang of languages" style="cursor: pointer">
+                <a (click)="setLanguage(lang)"><mat-icon svgIcon="{{(lang === 'de') ? 'flag-de' : 'flag-gb'}}"></mat-icon></a>
+              </li>
+            </ul>
           </li>
         </ul>
       </div>
@@ -122,7 +134,7 @@
         mat-mini-fab
         id="scrollTopBtn"
         *ngIf="scrollTopVisible"
-        matTooltip="Zum Seitenanfang"
+        matTooltip="{{'navigation.button.scroll.top' | translate}}"
         (click)="scrollToTop()">
   <mat-icon svgIcon="arrow-up"></mat-icon>
 </button>

static/src/app/app.component.ts

@@ -8,6 +8,8 @@ import {DOCUMENT} from '@angular/common';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry} from '@angular/material';
 import {SpinnerService} from './services/user-interface/spinner/spinner.service';
+import {TranslateService} from '@ngx-translate/core';
+import {SettingsService} from './services/settings.service';
 
 declare function require(url: string);
 
@@ -18,6 +20,8 @@ declare function require(url: string);
 })
 export class AppComponent implements OnInit {
 
+  readonly FEATURE_LOCALIZATION_ENABLED = false;
+
   config = RouteConfig;
 
   loading = false;
@@ -53,8 +57,15 @@ export class AppComponent implements OnInit {
     'vehicleAir': 'stats/scoreboard/vehicleAir',
     'vehicleHeavy': 'stats/scoreboard/vehicleHeavy',
     'vehicleLight': 'stats/scoreboard/vehicleLight',
+    // --------LOCALE---------
+    'flag-de': 'locale/de',
+    'flag-gb': 'locale/gb',
   };
 
+  language;
+
+  languages = ['de', 'en'];
+
   version = 'v'.concat(require('./../../../package.json').version);
 
   constructor(public loginService: LoginService,
@@ -64,6 +75,8 @@ export class AppComponent implements OnInit {
               private iconRegistry: MatIconRegistry,
               private sanitizer: DomSanitizer,
               private spinnerService: SpinnerService,
+              private translate: TranslateService,
+              private settingsService: SettingsService,
               @Inject(DOCUMENT) private document) {
     this.initMaterialSvgIcons();
 
@@ -85,14 +98,25 @@ export class AppComponent implements OnInit {
     });
   }
 
+  ngOnInit() {
+    this.settingsService.getLanguage().subscribe((language) => {
+      this.language = language;
+      this.translate.setDefaultLang(language)
+    });
+    if (this.loginService.hasPermission(2)) {
+      const fraction = this.loginService.getCurrentUser().squad.fraction;
+      this.promotionService.checkUnconfirmedPromotions(fraction);
+      this.awardingService.checkUnprocessedAwards(fraction);
+    }
+  }
+
   toggleSpinner(active) {
     this.loading = active;
   }
 
   initMaterialSvgIcons() {
     Object.keys(this.svgIcons).forEach(key => {
-      const fileUri = '../assets/icon/'.concat(this.svgIcons[key])
+      const fileUri = '../assets/icon/'.concat(this.svgIcons[key]).concat('.svg');
-        .concat('.svg');
       this.iconRegistry.addSvgIcon(key, this.sanitizer.bypassSecurityTrustResourceUrl(fileUri));
     });
   }
@@ -103,14 +127,6 @@ export class AppComponent implements OnInit {
       || document.documentElement.scrollTop > this.scrollBtnVisibleVal;
   }
 
-  ngOnInit() {
-    if (this.loginService.hasPermission(2)) {
-      const fraction = this.loginService.getCurrentUser().squad.fraction;
-      this.promotionService.checkUnconfirmedPromotions(fraction);
-      this.awardingService.checkUnprocessedAwards(fraction);
-    }
-  }
-
   logout() {
     this.loginService.logout();
     setTimeout(() => {
@@ -122,5 +138,12 @@ export class AppComponent implements OnInit {
     this.document.body.scrollTop = 0; // For Safari
     this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
   }
+
+  setLanguage(language: string) {
+    if (language) {
+      this.language = language;
+      this.settingsService.setLanguage(language);
+    }
+  }
 }
 

static/src/app/app.config.ts

@@ -21,13 +21,14 @@ export class AppConfig {
 
 export const RouteConfig = {
   adminPanelPath: 'admin-panel',
-  decorationPath: 'decorations',
+  managePath: 'manage',
+  manageDecorationPath: 'manage/decorations',
+  manageRankPath: 'manage/ranks',
+  manageSquadPath: 'manage/squads',
+  manageUserPath: 'manage/users',
   loginPath: 'login',
   signUpPath: 'signup',
-  rankPath: 'ranks',
-  squadPath: 'squads',
   statsPath: 'stats',
-  userPath: 'users',
   overviewPath: 'overview',
   request: 'request',
   requestAwardPath: 'award',
@@ -36,6 +37,8 @@ export const RouteConfig = {
   confirmPromotionPath: 'confirm-promotion',
   sqlDashboardPath: 'sql-dashboard',
   publicPath: 'public',
+  decorationPath: 'decorations',
+  rankPath: 'ranks',
   rankOverviewPath: 'public/ranks',
   decorationOverviewPath: 'public/decorations',
 };

static/src/app/app.module.ts

@@ -5,46 +5,49 @@ import {AppComponent} from './app.component';
 import {LoginService} from './services/app-user-service/login-service';
 import {appRouting, routingComponents, routingProviders} from './app.routing';
 import {SquadService} from './services/army-management/squad.service';
-import {SquadStore} from './services/stores/squad.store';
-import {DecorationStore} from './services/stores/decoration.store';
 import {DecorationService} from './services/army-management/decoration.service';
-import {RankStore} from './services/stores/rank.store';
 import {RankService} from './services/army-management/rank.service';
 import {AppConfig} from './app.config';
 import {LoginGuardAdmin, LoginGuardHL, LoginGuardSQL} from './login';
 import {AwardingService} from './services/army-management/awarding.service';
-import {HttpClient} from './services/http-client';
 import {ArmyService} from './services/army-service/army.service';
 import {ClipboardModule} from 'ngx-clipboard';
 import {PromotionService} from './services/army-management/promotion.service';
 import {SharedModule} from './shared.module';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {UserService} from './services/army-management/user.service';
-import {UserStore} from './services/stores/user.store';
 import {CookieService} from 'ngx-cookie-service';
 import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
 import {HttpClientModule} from '@angular/common/http';
 import {SpinnerService} from './services/user-interface/spinner/spinner.service';
-import {MatSnackBarModule} from '@angular/material';
+import {MatSelectModule, MatSnackBarModule} from '@angular/material';
+import {SettingsService} from './services/settings.service';
+import {HttpGateway} from './services/http-gateway';
 
 @NgModule({
-  imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule,
+  imports: [
-    ClipboardModule, MatSnackBarModule],
+    SharedModule,
+    BrowserModule,
+    BrowserAnimationsModule,
+    appRouting,
+    HttpModule,
+    HttpClientModule,
+    ClipboardModule,
+    MatSnackBarModule,
+    MatSelectModule,
+  ],
+
   providers: [
-    HttpClient,
+    HttpGateway,
     LoginService,
     LoginGuardSQL,
     LoginGuardHL,
     LoginGuardAdmin,
     UserService,
-    UserStore,
     ArmyService,
     SquadService,
-    SquadStore,
     DecorationService,
-    DecorationStore,
     RankService,
-    RankStore,
     AwardingService,
     PromotionService,
     AppConfig,
@@ -52,11 +55,17 @@ import {MatSnackBarModule} from '@angular/material';
     CookieService,
     SnackBarService,
     SpinnerService,
+    SettingsService,
   ],
+
   declarations: [
     AppComponent,
-    routingComponents],
+    routingComponents
-  bootstrap: [AppComponent]
+  ],
+
+  bootstrap: [
+    AppComponent
+  ]
 })
 export class AppModule {
 }

static/src/app/app.routing.ts

@@ -23,23 +23,8 @@ export const appRoutes: Routes = [
     loadChildren: './request/request.module#RequestModule'
   },
   {
-    path: RouteConfig.userPath,
+    path: RouteConfig.managePath,
-    loadChildren: './users/users.module#UsersModule',
+    loadChildren: './manage/manage.module#ManageModule',
-    canActivate: [LoginGuardHL]
-  },
-  {
-    path: RouteConfig.squadPath,
-    loadChildren: './squads/squads.module#SquadsModule',
-    canActivate: [LoginGuardHL]
-  },
-  {
-    path: RouteConfig.decorationPath,
-    loadChildren: './decorations/decoration.module#DecorationsModule',
-    canActivate: [LoginGuardHL]
-  },
-  {
-    path: RouteConfig.rankPath,
-    loadChildren: './ranks/ranks.module#RanksModule',
     canActivate: [LoginGuardHL]
   },
   {

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

@@ -3,13 +3,13 @@
     <div class="return-button">
       <button mat-raised-button (click)="backToOverview()">
         <mat-icon svgIcon="chevron-left"></mat-icon>
-        Zurück
+        {{'public.army.member.button.back' | translate}}
       </button>
     </div>
 
     <h3 class="text-center" style="font-weight: 600"
         [style.color]="user.squadId?.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
-      Auszeichnungen von {{user.username}}
+      {{'public.army.member.headline' | translate:{name: user.username} }}
     </h3>
 
     <div class="text-center">
@@ -19,7 +19,9 @@
       <input type="text" style="background: white;" class="form-control" [(ngModel)]="signatureUrl" readonly>
       <span class="input-group-btn">
         <button class="btn btn-default" [class.btn-success]="isCopied" type="button"
-                ngxClipboard [cbContent]="signatureUrl" (cbOnSuccess)="isCopied = true">kopieren</button>
+                ngxClipboard [cbContent]="signatureUrl" (cbOnSuccess)="isCopied = true">
+          {{'public.army.member.button.copy' | translate}}
+        </button>
       </span>
     </div>
 
@@ -29,9 +31,11 @@
           <thead>
           <tr class="table-head">
             <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
-            <th class="col-sm-2">Bezeichnung</th>
+            <th class="col-sm-2">{{'public.army.member.awards.title' | translate}}</th>
-            <th class="col-sm-2">Begründung</th>
+            <th class="col-sm-2">{{'public.army.member.awards.reason' | translate}}</th>
-            <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
+            <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">
+              {{'public.army.member.awards.date' | translate}}
+            </th>
           </tr>
           </thead>
           <tbody *ngFor="let award of awards">
@@ -55,7 +59,6 @@
           </tbody>
         </table>
       </div>
-
     </div>
   </div>
 </div>

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

@@ -18,7 +18,7 @@
   </div>
   <div>
     <div class="squad-cell squad-member-count">
-      Mitglieder: {{squad.memberCount}}
+      {{'public army.squad.members' | translate}} {{squad.memberCount}}
     </div>
   </div>
 </div>

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

@@ -1,5 +1,5 @@
 <div style="width: 1100px; margin:auto; position: relative;">
-  <h1>Übersicht über alle Spieler, Squads und Armeen</h1>
+  <h1>{{'public.army.headline' | translate}}</h1>
 
   <div class="pull-left army-column">
     <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
@@ -8,7 +8,7 @@
                    squadFraction="BLUFOR"
                    (memberSelect)="select($event)">
     </cc-army-squad>
-    <div class="member-count">Armeemitglieder: {{army[0].memberCount}}</div>
+    <div class="member-count">{{'public.army.members' | translate}} {{army[0].memberCount}}</div>
   </div>
 
   <div class="pull-right army-column">
@@ -18,6 +18,6 @@
                    squadFraction="OPFOR"
                    (memberSelect)="select($event)">
     </cc-army-squad>
-    <div class="member-count">Armeemitglieder: {{army[1].memberCount}}</div>
+    <div class="member-count">{{'public.army.members' | translate}} {{army[1].memberCount}}</div>
   </div>
 </div>

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;
     });
   };
@@ -32,5 +30,4 @@ export class ArmyComponent implements OnInit {
   select(memberId) {
     this.router.navigate(['member', memberId], {relativeTo: this.route});
   }
-
 }

static/src/app/common/not-found/not-found.component.html

@@ -1 +1 @@
-<h1>Oops, diese Seite kennen wir nicht...</h1>
+<h1>{{'public.error.headline' | translate}}</h1>

static/src/app/common/show-error/show-error.component.ts

@@ -1,5 +1,7 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {FormGroup, NgForm} from '@angular/forms';
+import {TranslateService} from '@ngx-translate/core';
+import {SettingsService} from '../../services/settings.service';
 
 @Component({
   selector: 'show-error',
@@ -20,8 +22,11 @@ export class ShowErrorComponent {
 
   private form: FormGroup;
 
-  constructor(ngForm: NgForm) {
+  constructor(ngForm: NgForm,
+              private translate: TranslateService,
+              private settingsService: SettingsService) {
     this.form = ngForm.form;
+    this.settingsService.getLanguage().subscribe((language) => this.translate.setDefaultLang(language));
   }
 
   get errorMessages(): string[] {
@@ -37,22 +42,43 @@ export class ShowErrorComponent {
         let message = '';
         switch (code) {
           case 'required':
-            message = `${this.displayName} ist ein Pflichtfeld`;
+            this.translate.get('public.error.message.required', {fieldName: this.displayName})
+                .subscribe((res: string) => {
+                  message = res;
+                });
             break;
           case 'minlength':
-            message = `${this.displayName} muss mindestens ${error.requiredLength} Zeichen enthalten`;
+            this.translate.get('public.error.message.min.length', {
+                  fieldName: this.displayName,
+                  boundary: error.requiredLength
+                })
+                .subscribe((res: string) => {
+                  message = res;
+                });
             break;
           case 'maxlength':
-            message = `${this.displayName} darf maximal ${error.requiredLength} Zeichen enthalten`;
+            this.translate.get('public.error.message.max.length', {
+                  fieldName: this.displayName,
+                  boundary: error.requiredLength
+                })
+                .subscribe((res: string) => {
+                  message = res;
+                });
             break;
           case 'invalidEMail':
-            message = `Bitte geben Sie eine gültige E-Mail Adresse an`;
+            this.translate.get('public.error.message.email').subscribe((res: string) => {
+              message = res;
+            });
             break;
           case 'userNotFound':
-            message = `Der eingetragene Benutzer existiert nicht.`;
+            this.translate.get('public.error.message.no.user').subscribe((res: string) => {
+              message = res;
+            });
             break;
           default:
-            message = `${name} ist nicht valide`;
+            this.translate.get('public.error.message.default', {fieldName: name}).subscribe((res: string) => {
+              message = res;
+            });
         }
         messages.push(message);
       }

static/src/app/common/user-interface/list-filter/list-filter.component.html

@@ -1,12 +1,13 @@
 <div class="input-group list-header pull-left">
   <mat-button-toggle-group #group="matButtonToggleGroup">
     <mat-button-toggle *ngFor="let button of filterButtons" value="{{button.value}}" (change)="execute(group)">
-      {{button.label}}
+      <span *ngIf="button.label !== fraction.BLUFOR && button.label !== fraction.OPFOR">{{button.label | translate}}</span>
+      <span *ngIf="button.label === fraction.BLUFOR || button.label === fraction.OPFOR">{{button.label}}</span>
     </mat-button-toggle>
   </mat-button-toggle-group>
   <button mat-icon-button
           class="add-btn"
-          matTooltip="{{addButton.tooltip}}"
+          matTooltip="{{addButton.tooltip | translate}}"
           (click)="add()">
       <mat-icon svgIcon="{{addButton.svgIcon}}">
     </mat-icon>

static/src/app/common/user-interface/list-filter/list-filter.component.ts

@@ -1,4 +1,5 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Fraction} from '../../../utils/fraction.enum';
 
 @Component({
   selector: 'cc-list-filter',
@@ -15,6 +16,8 @@ export class ListFilterComponent {
 
   @Output() openAddFrom = new EventEmitter();
 
+  readonly fraction = Fraction;
+
   constructor() {
   }
 

static/src/app/common/user-interface/search-field/search-field.component.html

@@ -6,7 +6,7 @@
   <span class="input-group-btn">
       <button class="btn btn-default" type="button"
               (click)="emitSearch()">
-        Suchen
+        {{'public.common.search.button' | translate}}
       </button>
     </span>
 </div>

static/src/app/decorations/decoration.module.ts

@@ -1,15 +0,0 @@
-import {decorationRoutesModule, decorationsRoutingComponents} from './decoration.routing';
-import {SharedModule} from '../shared.module';
-import {CommonModule} from '@angular/common';
-import {DecorationStore} from '../services/stores/decoration.store';
-import {DecorationService} from '../services/army-management/decoration.service';
-import {NgModule} from '@angular/core';
-
-@NgModule({
-  declarations: decorationsRoutingComponents,
-  imports: [CommonModule, SharedModule, decorationRoutesModule],
-  providers: [DecorationStore, DecorationService]
-})
-export class DecorationsModule {
-  static routes = decorationRoutesModule;
-}

static/src/app/decorations/decoration.routing.ts

@@ -1,27 +0,0 @@
-import {RouterModule, Routes} from '@angular/router';
-import {DecorationListComponent} from './decoration-list/decoration-list.component';
-import {EditDecorationComponent} from './edit-decoration/edit-decoration.component';
-import {ModuleWithProviders} from '@angular/core';
-import {DecorationItemComponent} from './decoration-list/decoration-item.component';
-
-export const decorationsRoutes: Routes = [
-  {
-    path: '',
-    component: DecorationListComponent,
-    outlet: 'left'
-  },
-  {
-    path: 'new',
-    component: EditDecorationComponent,
-    outlet: 'right'
-  },
-  {
-    path: 'edit/:id',
-    component: EditDecorationComponent,
-    outlet: 'right'
-  }];
-
-export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
-
-export const decorationsRoutingComponents = [DecorationItemComponent, DecorationListComponent, EditDecorationComponent];
-

static/src/app/i18n/de.messages.ts

@@ -1,5 +0,0 @@
-export enum Message {
-  SIGN_UP_SUCCESS = 'Account erfolgreich erstellt',
-  SUCCESS_SAVE = 'Erfolgreich gespeichert',
-  DUPLICATED_NAME_ERR = 'Benutzername existiert bereits',
-}

static/src/app/login/login.component.html

@@ -1,16 +1,19 @@
 <form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
   <div class="row">
-    <h2 class="form-signin-heading">Login</h2>
+    <h2 class="form-signin-heading">{{'login.headline' | translate}}</h2>
 
-    <label for="inputEmail" class="sr-only">Benutzername</label>
+    <label for="inputEmail" class="sr-only">{{'login.username' | translate}}</label>
-    <input #userName id="inputEmail" class="form-control" placeholder="Benutzername" required="" autofocus="">
+    <input #userName id="inputEmail" class="form-control"
+           placeholder="{{'login.username' | translate}}"
+           required="" autofocus="">
 
-    <label for="inputPassword" class="sr-only">Passwort</label>
+    <label for="inputPassword" class="sr-only">{{'login.password' | translate}}</label>
-    <input #password type="password" id="inputPassword" class="form-control" placeholder="Passwort" required="">
+    <input #password type="password" id="inputPassword" class="form-control"
+           placeholder="{{'login.password' | translate}}" required="">
 
     <div class="form-group">
       <button mat-stroked-button type="submit">
-        <span *ngIf="!loading">Anmelden</span>
+        <span *ngIf="!loading">{{'login.submit' | translate}}</span>
         <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
       </button>
     </div>

static/src/app/login/signup.component.html

@@ -1,29 +1,23 @@
-<form class="form-signin" (ngSubmit)="login(userName.value, password.value, secret.value)">
+<form class="form-signin" (ngSubmit)="signup(userName.value, password.value, secret.value)">
 
   <div class="row" style="position: absolute;width: 500px;left: 40%;">
-    <h2 style="text-align: center;" class="form-signin-heading">Registrieren</h2>
+    <h2 style="text-align: center;" class="form-signin-heading">{{'signup.headline' | translate}}</h2>
 
-    <p>Dieses Formular nur ausfüllen wenn du einer <b>HL</b> angehörst oder <b>SQL</b> bist. Dabei den Nutzernamen aus
+    <p [innerHtml]="'signup.description' | translate"></p>
-      dem OPT Forum verwenden!
-      Im Forum eine Nachricht an <a href="https://www.opt4.net/dashboard/index.php?conversation-add/&userID=9"
-                                    target="_blank">HardiReady</a>
-      senden, in welcher der 'geheime Text' steht, den du bei der Registrierung nutzt.<br>
-      Dabei kann es sich um irgend eine willkürliche Zeichenfolge oder einen Satz handeln - dient nur dem Abgleich.
-      Anschließend wird dein Account aktiviert und du wirst darüber per PN informiert.</p>
 
-    <label for="inputEmail" class="sr-only">Benutzername</label>
+    <label for="inputEmail" class="sr-only">{{'signup.username' | translate}}</label>
-    <input #userName id="inputEmail" class="form-control" placeholder="Benutzername" required="" autofocus="">
+    <input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required="" autofocus="">
 
-    <label for="inputPassword" class="sr-only">Passwort</label>
+    <label for="inputPassword" class="sr-only">{{'signup.password' | translate}}</label>
-    <input #password type="password" id="inputPassword" class="form-control" placeholder="Passwort" required="">
+    <input #password type="password" id="inputPassword" class="form-control" placeholder="{{'signup.password' | translate}}" required="">
 
-    <label for="inputSecret" class="sr-only">Secret</label>
+    <label for="inputSecret" class="sr-only">{{'signup.secret' | translate}}</label>
-    <input #secret type="text" id="inputSecret" class="form-control" placeholder="Geheimer Text für PN Abgleich"
+    <input #secret type="text" id="inputSecret" class="form-control" placeholder="{{'signup.secret.placeholder' | translate}}"
            required="">
 
     <div class="form-group">
       <button type="submit" class="btn btn-lg btn-block btn-primary">
-        <span *ngIf="!loading">Registrieren</span>
+        <span *ngIf="!loading">{{'signup.submit' | translate}}</span>
         <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
       </button>
     </div>

static/src/app/login/signup.component.ts

@@ -2,7 +2,6 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {LoginService} from '../services/app-user-service/login-service';
 import {RouteConfig} from '../app.config';
-import {Message} from '../i18n/de.messages';
 import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service';
 
 
@@ -31,18 +30,18 @@ export class SignupComponent implements OnInit {
     this.returnUrl = RouteConfig.overviewPath;
   }
 
-  login(username: string, password: string, secret: string) {
+  signup(username: string, password: string, secret: string) {
     if (username.length > 0 && password.length > 0 && secret.length > 0) {
       this.loading = true;
       this.loginService.signUp(username, password, secret)
           .subscribe(
             data => {
               this.loading = false;
-              this.snackBarService.showSuccess(Message.SIGN_UP_SUCCESS);
+              this.snackBarService.showSuccess('generic.signup.success');
             },
             error => {
               this.loading = false;
-              this.snackBarService.showError(error, 10000);
+              this.snackBarService.showError('generic.signup.error', 6000);
             });
     }
   }

static/src/app/manage/decorations/decoration-list/decoration-item.component.html

@@ -8,8 +8,8 @@
       <br>
       <small *ngIf="decoration.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
       <small *ngIf="decoration.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
-      <small *ngIf="decoration.fraction == 'GLOBAL'">Global</small>
+      <small *ngIf="decoration.fraction == 'GLOBAL'">{{'decorations.list.filter.global' | translate}}</small>
-      <small> - Sortierung: {{decoration.sortingNumber}}</small>
+      <small> {{'decorations.item.label.sort' | translate:{value: decoration.sortingNumber} }}</small>
     </div>
 
     <div class="col-xs-4">
@@ -18,7 +18,8 @@
            [style.max-width]="imgStyle.width"
            [style.margin-top]="imgStyle.marginTop"
            class="decoration-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="{{'decorations.list.button.delete' | translate}}"
+            class="glyphicon glyphicon-trash trash"></span>
     </div>
   </div>
 </div>

static/src/app/manage/decorations/decoration-list/decoration-item.component.ts

@@ -1,11 +1,11 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {Decoration} from '../../models/model-interfaces';
+import {Decoration} from '../../../models/model-interfaces';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
 
 @Component({
   selector: 'decoration-item',
   templateUrl: './decoration-item.component.html',
-  styleUrls: ['./decoration-item.component.css', '../../style/list-entry.css'],
+  styleUrls: ['./decoration-item.component.css', '../../../style/list-entry.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DecorationItemComponent implements OnInit {

static/src/app/manage/decorations/decoration-list/decoration-list.component.html

@@ -2,8 +2,8 @@
   <cc-list-filter
     [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
                       {label: fraction.OPFOR, value: 'OPFOR'},
-                      {label: 'Global', value: 'GLOBAL'}]"
+                      {label: 'decorations.list.filter.global', value: 'GLOBAL'}]"
-    [addButton]="{svgIcon: 'add', tooltip: 'Neue Auszeichnung hinzufügen'}"
+    [addButton]="{svgIcon: 'add', tooltip: 'decorations.list.button.add'}"
     (executeSearch)="filterDecorations($event)"
     (openAddFrom)="openNewDecorationForm()">
   </cc-list-filter>

static/src/app/manage/decorations/decoration-list/decoration-list.component.ts

@@ -3,16 +3,17 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Observable} from 'rxjs/Observable';
-import {Decoration} from '../../models/model-interfaces';
+import {Decoration} from '../../../models/model-interfaces';
-import {DecorationService} from '../../services/army-management/decoration.service';
+import {DecorationService} from '../../../services/army-management/decoration.service';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
 import {MatButtonToggleGroup} from '@angular/material';
-import {UIHelpers} from '../../utils/global.helpers';
+import {UIHelpers} from '../../../utils/global.helpers';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'cc-decoration-list',
   templateUrl: './decoration-list.component.html',
-  styleUrls: ['./decoration-list.component.css', '../../style/select-list.css']
+  styleUrls: ['./decoration-list.component.css', '../../../style/select-list.css']
 })
 export class DecorationListComponent implements OnInit {
 
@@ -28,7 +29,8 @@ export class DecorationListComponent implements OnInit {
 
   constructor(private decorationService: DecorationService,
               private router: Router,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -60,11 +62,16 @@ export class DecorationListComponent implements OnInit {
       fraction = Fraction.OPFOR;
     }
 
-    if (confirm('Soll die Auszeichnung "' + decoration.name + '" (' + fraction + ') wirklich gelöscht werden?')) {
+    this.translate.get('decorations.list.delete.confirm', {
+      name: decoration.name,
+      fraction: fraction
+    }).subscribe((confirmQuestion) => {
+      if (confirm(confirmQuestion)) {
         this.decorationService.deleteDecoration(decoration)
             .subscribe((res) => {
             });
       }
+    })
   }
 
   filterDecorations(group?: MatButtonToggleGroup) {

static/src/app/manage/decorations/edit-decoration/edit-decoration.component.html

@@ -1,63 +1,63 @@
 <form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
-  <h3 *ngIf="decoration._id">Auszeichnung editieren</h3>
+  <h3 *ngIf="decoration._id">{{'decorations.submit.headline.edit' | translate}}</h3>
-  <h3 *ngIf="!decoration._id">Neue Auszeichnung hinzufügen</h3>
+  <h3 *ngIf="!decoration._id">{{'decorations.submit.headline.new' | translate}}</h3>
 
   <div class="form-group">
-    <label for="title">Name</label>
+    <label for="title">{{'decorations.submit.field.name' | translate}}</label>
     <input type="text" class="form-control"
            [(ngModel)]="decoration.name"
            name="title"
            id="title"
            required maxlength="50"/>
-    <show-error displayName="Name" controlPath="title"></show-error>
+    <show-error displayName="{{'decorations.submit.field.name' | translate}}" controlPath="title"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="fraction">Fraktion</label>
+    <label for="fraction">{{'decorations.submit.field.fraction' | translate}}</label>
     <select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="decoration.fraction">
       <option value="OPFOR">{{fraction.OPFOR}}</option>
       <option value="BLUFOR">{{fraction.BLUFOR}}</option>
-      <option value="GLOBAL">Global</option>
+      <option value="GLOBAL">{{'decorations.submit.field.fraction.global' | translate}}</option>
     </select>
-    <show-error displayName="Fraktion" controlPath="fraction"></show-error>
+    <show-error displayName="{{'decorations.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="type">Art</label>
+    <label for="type">{{'decorations.submit.field.type' | translate}}</label>
     <select id="type" name="type" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="decoration.isMedal">
-      <option value="true">Orden</option>
+      <option value="true">{{'decorations.submit.field.type.medal' | translate}}</option>
-      <option value="false">Ribbon</option>
+      <option value="false">{{'decorations.submit.field.type.ribbon' | translate}}</option>
     </select>
-    <show-error displayName="Art" controlPath="type"></show-error>
+    <show-error displayName="{{'decorations.submit.field.type' | translate}}" controlPath="type"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="sort">Sortierung</label>
+    <label for="sort">{{'decorations.submit.field.sort' | translate}}</label>
     <input id="sort" name="sort" type="number" class="form-control btn dropdown-toggle"
            [(ngModel)]="decoration.sortingNumber">
-    <show-error displayName="Sortierung" controlPath="sort"></show-error>
+    <show-error displayName="{{'decorations.submit.field.sort' | translate}}" controlPath="sort"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="description">Beschreibung</label>
+    <label for="description">{{'decorations.submit.field.description' | translate}}</label>
     <textarea id="description" name="description" class="form-control" rows="5"
               required
               [(ngModel)]="decoration.description"></textarea>
-    <show-error displayName="Beschreibung" controlPath="description"></show-error>
+    <show-error displayName="{{'decorations.submit.field.description' | translate}}" controlPath="description"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="graphic">Bild</label>
+    <label for="graphic">{{'decorations.submit.field.image' | translate}}</label>
     <input id="graphic" name="graphic" class="ui-button form-control" type="file"
            #fileInput
            accept="image/png"
            (change)="fileChange($event)">
     <span class="label label-bg label-danger center-block" style="font-size:small" *ngIf="showImageError">
-      Bild muss im PNG Format vorliegen
+      {{'decorations.submit.field.image.error.type' | translate}}
     </span>
 
     <img class="preview-image" src="{{imagePreviewSrc}}">
@@ -66,7 +66,7 @@
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'decorations.submit,button.cancel' | translate}}
   </button>
 
   <button id="save"
@@ -74,6 +74,6 @@
           (click)="saveDecoration(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
-    Bestätigen
+    {{'decorations.submit,button.submit' | translate}}
   </button>
 </form>

static/src/app/manage/decorations/edit-decoration/edit-decoration.component.ts

@@ -1,16 +1,16 @@
 import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {NgForm} from '@angular/forms';
-import {Decoration} from '../../models/model-interfaces';
+import {Decoration} from '../../../models/model-interfaces';
-import {DecorationService} from '../../services/army-management/decoration.service';
+import {DecorationService} from '../../../services/army-management/decoration.service';
 import {Subscription} from 'rxjs/Subscription';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
-import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
-import {Message} from '../../i18n/de.messages';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   templateUrl: './edit-decoration.component.html',
-  styleUrls: ['./edit-decoration.component.css', '../../style/entry-form.css', '../../style/overview.css']
+  styleUrls: ['./edit-decoration.component.css', '../../../style/entry-form.css', '../../../style/overview.css']
 })
 export class EditDecorationComponent implements OnInit, OnDestroy {
 
@@ -31,7 +31,8 @@ export class EditDecorationComponent implements OnInit, OnDestroy {
   constructor(private route: ActivatedRoute,
               private router: Router,
               private decorationService: DecorationService,
-              private snackBarService: SnackBarService) {
+              private snackBarService: SnackBarService,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -69,7 +70,12 @@ export class EditDecorationComponent implements OnInit, OnDestroy {
               this.router.navigate(['..'], {relativeTo: this.route});
             });
       } else {
-        return window.alert(`Bild ist ein Pflichtfeld`);
+        this.translate.get('decorations.submit.field.image').subscribe((fieldNameLogo) => {
+          this.translate.get('public.error.message.required',
+            {fieldName: fieldNameLogo}).subscribe((message) => {
+            this.snackBarService.showError(message, 4000);
+          })
+        });
       }
     } else {
       if (this.fileList) {
@@ -82,7 +88,7 @@ export class EditDecorationComponent implements OnInit, OnDestroy {
               this.imagePreviewSrc = 'resource/decoration/' + this.decoration._id + '.png?' + Date.now();
             }, 300);
             fileInput.value = '';
-            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+            this.snackBarService.showSuccess('generic.save.success');
           });
     }
   }

static/src/app/manage/manage.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

static/src/app/manage/manage.component.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {SettingsService} from '../services/settings.service';
+
+@Component({
+  selector: 'cc-manage-root',
+  templateUrl: './manage.component.html',
+  styleUrls: ['./manage.component.scss']
+})
+export class ManageComponent {
+  constructor(private translate: TranslateService,
+              private settingsService: SettingsService) {
+    this.settingsService.getLanguage().subscribe((language) => this.translate.setDefaultLang(language));
+  }
+}

static/src/app/manage/manage.module.ts

@@ -0,0 +1,35 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../shared.module';
+import {CommonModule} from '@angular/common';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {HttpClient} from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {manageRouterModule, manageRoutingComponents} from './manage.routing';
+import {InfiniteScrollModule} from 'ngx-infinite-scroll';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/manage/', '.json');
+}
+
+@NgModule({
+  declarations: manageRoutingComponents,
+
+  imports: [
+    manageRouterModule,
+    CommonModule,
+    SharedModule,
+    InfiniteScrollModule,
+
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      },
+      isolate: true
+    })
+  ]
+})
+export class ManageModule {
+  static routes = manageRouterModule;
+}

static/src/app/manage/manage.routing.ts

@@ -0,0 +1,131 @@
+import {RouterModule, Routes} from '@angular/router';
+import {ModuleWithProviders} from '@angular/core';
+import {ManageComponent} from './manage.component';
+import {UserListComponent} from './users/user-list/user-list.component';
+import {EditUserComponent} from './users/edit-user/edit-user.component';
+import {AwardUserComponent} from './users/award-user/award-user.component';
+import {RankListComponent} from './ranks/rank-list/rank-list.component';
+import {EditRankComponent} from './ranks/edit-rank/edit-rank.component';
+import {DecorationListComponent} from './decorations/decoration-list/decoration-list.component';
+import {EditDecorationComponent} from './decorations/edit-decoration/edit-decoration.component';
+import {SquadListComponent} from './squads/squad-list/squad-list.component';
+import {EditSquadComponent} from './squads/edit-squad/edit-squad.component';
+import {DecorationItemComponent} from './decorations/decoration-list/decoration-item.component';
+import {RankItemComponent} from './ranks/rank-list/rank-item.component';
+import {SquadItemComponent} from './squads/squad-list/squad-item.component';
+import {UserItemComponent} from './users/user-list/user-item.component';
+
+
+export const publicRoutes: Routes = [
+  {
+    path: 'decorations',
+    children: [
+      {
+        path: '',
+        component: ManageComponent,
+        outlet: 'left',
+        children: [{
+          path: '',
+          component: DecorationListComponent
+        }]
+      },
+      {
+        path: 'new',
+        component: EditDecorationComponent,
+        outlet: 'right'
+      },
+      {
+        path: 'edit/:id',
+        component: EditDecorationComponent,
+        outlet: 'right'
+      }
+    ]
+  },
+  {
+    path: 'ranks',
+    children: [
+      {
+        path: '',
+        component: ManageComponent,
+        outlet: 'left',
+        children: [{
+          path: '',
+          component: RankListComponent
+        }]
+      },
+      {
+        path: 'new',
+        component: EditRankComponent,
+        outlet: 'right'
+      },
+      {
+        path: 'edit/:id',
+        component: EditRankComponent,
+        outlet: 'right'
+      }
+    ]
+  },
+  {
+    path: 'squads',
+    children: [
+      {
+        path: '',
+        component: ManageComponent,
+        outlet: 'left',
+        children: [{
+          path: '',
+          component: SquadListComponent,
+        }]
+      },
+      {
+        path: 'new',
+        component: EditSquadComponent,
+        outlet: 'right'
+      },
+      {
+        path: 'edit/:id',
+        component: EditSquadComponent,
+        outlet: 'right'
+      }
+    ]
+  },
+  {
+    path: 'users',
+    children: [
+      {
+        path: '',
+        component: ManageComponent,
+        outlet: 'left',
+        children: [{
+          path: '',
+          component: UserListComponent
+        }]
+      },
+      {
+        path: 'new',
+        component: EditUserComponent,
+        outlet: 'right'
+      },
+      {
+        path: 'edit/:id',
+        component: EditUserComponent,
+        outlet: 'right'
+      },
+      {
+        path: 'award/:id',
+        component: AwardUserComponent,
+        outlet: 'right'
+      }
+    ]
+  }
+];
+
+export const manageRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
+
+export const manageRoutingComponents = [
+  ManageComponent,
+  DecorationListComponent, DecorationItemComponent, EditDecorationComponent,
+  RankListComponent, RankItemComponent, EditRankComponent,
+  SquadListComponent, SquadItemComponent, EditSquadComponent,
+  UserListComponent, UserItemComponent, EditUserComponent, AwardUserComponent
+];

static/src/app/manage/ranks/edit-rank/edit-rank.component.html

@@ -1,44 +1,43 @@
 <form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
-  <h3 *ngIf="rank._id">Rang editieren</h3>
+  <h3 *ngIf="rank._id">{{'ranks.submit.headline.edit' | translate}}</h3>
-  <h3 *ngIf="!rank._id">Neuen Rang hinzufügen</h3>
+  <h3 *ngIf="!rank._id">{{'ranks.submit.headline.new' | translate}}</h3>
 
   <div class="form-group">
-    <label for="title">Name</label>
+    <label for="title">{{'ranks.submit.field.name' | translate}}</label>
     <input type="text" class="form-control"
            [(ngModel)]="rank.name"
            name="title"
            id="title"
            required maxlength="50"/>
-
+    <show-error displayName="{{'ranks.submit.field.name' | translate}}" controlPath="title"></show-error>
-    <show-error displayName="Name" controlPath="title"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="fraction">Fraktion</label>
+    <label for="fraction">{{'ranks.submit.field.fraction' | translate}}</label>
     <select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="rank.fraction">
       <option value="OPFOR">{{fraction.OPFOR}}</option>
       <option value="BLUFOR">{{fraction.BLUFOR}}</option>
     </select>
-    <show-error displayName="Fraktion" controlPath="fraction"></show-error>
+    <show-error displayName="{{'ranks.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="level">Stufe</label>
+    <label for="level">{{'ranks.submit.field.level' | translate}}</label>
     <input id="level" name="level" type="number" class="form-control btn dropdown-toggle"
            [(ngModel)]="rank.level">
-    <show-error displayName="Stufe" controlPath="level"></show-error>
+    <show-error displayName="{{'ranks.submit.field.level' | translate}}" controlPath="level"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="logo">Bild</label>
+    <label for="logo">{{'ranks.submit.field.image' | translate}}</label>
     <input id="logo" name="logo" class="ui-button form-control" type="file"
            accept="image/png"
            #fileInput
            (change)="fileChange($event)">
     <span class="label label-bg label-danger center-block" style="font-size:small" *ngIf="showImageError">
-        Bild muss im PNG Format vorliegen
+      {{'ranks.submit.field.image.error.format' | translate}}
     </span>
 
     <img class="preview-image" src="{{imagePreviewSrc}}">
@@ -47,7 +46,7 @@
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'ranks.submit.button.cancel' | translate}}
   </button>
 
   <button id="save"
@@ -55,6 +54,6 @@
           (click)="saveRank(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
-    Bestätigen
+    {{'ranks.submit.button.submit' | translate}}
   </button>
 </form>

static/src/app/manage/ranks/edit-rank/edit-rank.component.ts

@@ -1,17 +1,17 @@
 import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {NgForm} from '@angular/forms';
-import {Rank} from '../../models/model-interfaces';
+import {Rank} from '../../../models/model-interfaces';
-import {RankService} from '../../services/army-management/rank.service';
+import {RankService} from '../../../services/army-management/rank.service';
 import {Subscription} from 'rxjs/Subscription';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
-import {Message} from '../../i18n/de.messages';
+import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
-import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
   templateUrl: './edit-rank.component.html',
-  styleUrls: ['./edit-rank.component.css', '../../style/entry-form.css', '../../style/overview.css']
+  styleUrls: ['./edit-rank.component.css', '../../../style/entry-form.css', '../../../style/overview.css']
 })
 export class EditRankComponent implements OnInit, OnDestroy {
 
@@ -34,7 +34,8 @@ export class EditRankComponent implements OnInit, OnDestroy {
   constructor(private route: ActivatedRoute,
               private router: Router,
               private rankService: RankService,
-              private snackBarService: SnackBarService) {
+              private snackBarService: SnackBarService,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -73,7 +74,12 @@ export class EditRankComponent implements OnInit, OnDestroy {
               this.router.navigate(['..'], {relativeTo: this.route});
             });
       } else {
-        return window.alert(`Bild ist ein Pflichtfeld`);
+        this.translate.get('ranks.submit.field.image').subscribe((fieldNameIMage) => {
+          this.translate.get('public.error.message.required',
+            {fieldName: fieldNameIMage}).subscribe((message) => {
+            this.snackBarService.showError(message, 4000);
+          })
+        });
       }
     } else {
       if (this.fileList) {
@@ -86,7 +92,7 @@ export class EditRankComponent implements OnInit, OnDestroy {
               this.imagePreviewSrc = 'resource/rank/' + this.rank._id + '.png?' + Date.now();
             }, 300);
             fileInput.value = '';
-            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+            this.snackBarService.showSuccess('generic.save.success');
           });
     }
   }
@@ -95,12 +101,4 @@ export class EditRankComponent implements OnInit, OnDestroy {
     this.router.navigate([this.rank._id ? '../..' : '..'], {relativeTo: this.route});
     return false;
   }
-
-  canDeactivate(): boolean {
-    if (this.saved || !this.form.dirty) {
-      return true;
-    }
-    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
-  }
-
 }

static/src/app/manage/ranks/rank-list/rank-item.component.html

@@ -8,12 +8,13 @@
       <br>
       <small *ngIf="rank.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
       <small *ngIf="rank.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
-      <small> - Stufe {{rank.level}}</small>
+      <small> {{'ranks.list.item.label.level' | translate:{level: rank.level} }}</small>
     </div>
 
     <div class="col-xs-4">
       <img src="{{imageSrc}}" class="rank-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="{{'ranks.list.button.delete' | translate}}"
+            class="glyphicon glyphicon-trash trash"></span>
     </div>
 
   </div>

static/src/app/manage/ranks/rank-list/rank-item.component.ts

@@ -1,11 +1,11 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {Rank} from '../../models/model-interfaces';
+import {Rank} from '../../../models/model-interfaces';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
 
 @Component({
   selector: 'pjm-rank-item',
   templateUrl: './rank-item.component.html',
-  styleUrls: ['./rank-item.component.css', '../../style/list-entry.css'],
+  styleUrls: ['./rank-item.component.css', '../../../style/list-entry.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RankItemComponent implements OnInit {

static/src/app/manage/ranks/rank-list/rank-list.component.html

@@ -2,7 +2,7 @@
   <cc-list-filter
     [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
                       {label: fraction.OPFOR, value: 'OPFOR'}]"
-    [addButton]="{svgIcon: 'add', tooltip: 'Neuen Rang hinzufügen'}"
+    [addButton]="{svgIcon: 'add', tooltip: 'ranks.list.button.add'}"
     (executeSearch)="filterRanks($event)"
     (openAddFrom)="openNewRankForm()">
   </cc-list-filter>

static/src/app/manage/ranks/rank-list/rank-list.component.ts

@@ -3,16 +3,17 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Observable} from 'rxjs/Observable';
-import {Rank} from '../../models/model-interfaces';
+import {Rank} from '../../../models/model-interfaces';
-import {RankService} from '../../services/army-management/rank.service';
+import {RankService} from '../../../services/army-management/rank.service';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
-import {UIHelpers} from '../../utils/global.helpers';
+import {UIHelpers} from '../../../utils/global.helpers';
 import {MatButtonToggleGroup} from '@angular/material';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'cc-rank-list',
   templateUrl: './rank-list.component.html',
-  styleUrls: ['./rank-list.component.css', '../../style/select-list.css']
+  styleUrls: ['./rank-list.component.css', '../../../style/select-list.css']
 })
 export class RankListComponent implements OnInit {
 
@@ -28,7 +29,8 @@ export class RankListComponent implements OnInit {
 
   constructor(private rankService: RankService,
               private router: Router,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -60,10 +62,15 @@ export class RankListComponent implements OnInit {
 
   deleteRank(rank) {
     const fraction = rank.fraction === 'OPFOR' ? Fraction.OPFOR : Fraction.BLUFOR;
-    if (confirm('Soll der Rang ' + rank.name + ' (' + fraction + ') wirklich gelöscht werden?')) {
+    this.translate.get('ranks.list.delete.confirm', {
+      name: rank.name,
+      fraction: fraction
+    }).subscribe((confirmQuestion) => {
+      if (confirm(confirmQuestion)) {
         this.rankService.deleteRank(rank)
             .subscribe((res) => {
             });
       }
+    });
   }
 }

static/src/app/manage/squads/edit-squad/edit-squad.component.html

@@ -1,44 +1,43 @@
 <form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
-  <h3 *ngIf="squad._id">Squad editieren</h3>
+  <h3 *ngIf="squad._id">{{'squad.submit.edit.headline' | translate}}</h3>
-  <h3 *ngIf="!squad._id">Neues Squad hinzufügen</h3>
+  <h3 *ngIf="!squad._id">{{'squad.submit.new.headline' | translate}}</h3>
 
   <div class="form-group">
-    <label for="title">Name</label>
+    <label for="title">{{'squad.submit.field.name' | translate}}</label>
     <input type="text" class="form-control"
            [(ngModel)]="squad.name"
            name="title"
            id="title"
            required maxlength="50"/>
-
+    <show-error displayName="{{'squad.submit.field.name' | translate}}" controlPath="title"></show-error>
-    <show-error displayName="Name" controlPath="title"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="fraction">Fraktion</label>
+    <label for="fraction">{{'squad.submit.field.fraction' | translate}}</label>
     <select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="squad.fraction">
       <option value="OPFOR">{{fraction.OPFOR}}</option>
       <option value="BLUFOR">{{fraction.BLUFOR}}</option>
     </select>
-    <show-error displayName="Fraktion" controlPath="fraction"></show-error>
+    <show-error displayName="{{'squad.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="sort">Sortierung</label>
+    <label for="sort">{{'squad.submit.field.sort' | translate}}</label>
     <input id="sort" name="sort" type="number" class="form-control btn dropdown-toggle"
            [(ngModel)]="squad.sortingNumber">
-    <show-error displayName="Sortierung" controlPath="sort"></show-error>
+    <show-error displayName="{{'squad.submit.field.sort' | translate}}" controlPath="sort"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="logo">Logo</label>
+    <label for="logo">{{'squad.submit.field.logo' | translate}}</label>
     <input id="logo" name="logo" class="ui-button form-control" type="file"
            #fileInput
            accept="image/png"
            (change)="fileChange($event)">
     <span class="label label-bg label-danger center-block" style="font-size:small" *ngIf="showImageError">
-        Bild muss im PNG Format vorliegen
+        {{'squad.submit.error.logo.type' | translate}}
     </span>
 
     <img class="preview-image" src="{{imagePreviewSrc}}">
@@ -47,7 +46,7 @@
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'squad.submit.button.cancel' | translate}}
   </button>
 
   <button id="save"
@@ -55,6 +54,6 @@
           (click)="saveSquad(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
-    Bestätigen
+    {{'squad.submit.button.submit' | translate}}
   </button>
 </form>

static/src/app/manage/squads/edit-squad/edit-squad.component.ts

@@ -1,17 +1,17 @@
 import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {NgForm} from '@angular/forms';
-import {Squad} from '../../models/model-interfaces';
+import {Squad} from '../../../models/model-interfaces';
-import {SquadService} from '../../services/army-management/squad.service';
+import {SquadService} from '../../../services/army-management/squad.service';
 import {Subscription} from 'rxjs/Subscription';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
-import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
-import {Message} from '../../i18n/de.messages';
+import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
   templateUrl: './edit-squad.component.html',
-  styleUrls: ['./edit-squad.component.css', '../../style/entry-form.css', '../../style/overview.css']
+  styleUrls: ['./edit-squad.component.css', '../../../style/entry-form.css', '../../../style/overview.css']
 })
 export class EditSquadComponent implements OnInit, OnDestroy {
 
@@ -34,7 +34,8 @@ export class EditSquadComponent implements OnInit, OnDestroy {
   constructor(private route: ActivatedRoute,
               private router: Router,
               private squadService: SquadService,
-              private snackBarService: SnackBarService) {
+              private snackBarService: SnackBarService,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -73,7 +74,12 @@ export class EditSquadComponent implements OnInit, OnDestroy {
               this.router.navigate(['..'], {relativeTo: this.route});
             });
       } else {
-        return window.alert(`Bild ist ein Pflichtfeld`);
+        this.translate.get('squad.submit.field.logo').subscribe((fieldNameLogo) => {
+          this.translate.get('public.error.message.required',
+            {fieldName: fieldNameLogo}).subscribe((message) => {
+            this.snackBarService.showError(message, 4000);
+          })
+        });
       }
     } else {
       if (this.fileList) {
@@ -86,7 +92,7 @@ export class EditSquadComponent implements OnInit, OnDestroy {
               this.imagePreviewSrc = 'resource/squad/' + this.squad._id + '.png?' + Date.now();
             }, 300);
             fileInput.value = '';
-            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+            this.snackBarService.showSuccess('generic.save.success');
           });
     }
   }
@@ -95,12 +101,4 @@ export class EditSquadComponent implements OnInit, OnDestroy {
     this.router.navigate([this.squad._id ? '../..' : '..'], {relativeTo: this.route});
     return false;
   }
-
-  canDeactivate(): boolean {
-    if (this.saved || !this.form.dirty) {
-      return true;
-    }
-    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
-  }
-
 }

static/src/app/manage/squads/squad-list/squad-item.component.html

@@ -12,7 +12,9 @@
 
     <div class="col-xs-4">
       <img src="{{imageSrc}}" height="50px" class="squad-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()"
+            matTooltip="{{'squad.modify.delete' | translate}}"
+            class="glyphicon glyphicon-trash trash"></span>
     </div>
   </div>
 </div>

static/src/app/manage/squads/squad-list/squad-item.component.ts

@@ -1,11 +1,11 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {Squad} from '../../models/model-interfaces';
+import {Squad} from '../../../models/model-interfaces';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
 
 @Component({
   selector: 'pjm-squad-item',
   templateUrl: './squad-item.component.html',
-  styleUrls: ['./squad-item.component.css', '../../style/list-entry.css'],
+  styleUrls: ['./squad-item.component.css', '../../../style/list-entry.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SquadItemComponent implements OnInit {

static/src/app/manage/squads/squad-list/squad-list.component.html

@@ -2,7 +2,7 @@
   <cc-list-filter
     [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
                       {label: fraction.OPFOR, value: 'OPFOR'}]"
-    [addButton]="{svgIcon: 'add', tooltip: 'Neues Squad hinzufügen'}"
+    [addButton]="{svgIcon: 'add', tooltip: 'squad.list.tooltip.new'}"
     (executeSearch)="filterSquads($event)"
     (openAddFrom)="openNewSquadForm()">
   </cc-list-filter>

static/src/app/manage/squads/squad-list/squad-list.component.ts

@@ -3,16 +3,17 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Observable} from 'rxjs/Observable';
-import {Squad} from '../../models/model-interfaces';
+import {Squad} from '../../../models/model-interfaces';
-import {SquadService} from '../../services/army-management/squad.service';
+import {SquadService} from '../../../services/army-management/squad.service';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
-import {UIHelpers} from '../../utils/global.helpers';
+import {UIHelpers} from '../../../utils/global.helpers';
 import {MatButtonToggleGroup} from '@angular/material';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'cc-squad-list',
   templateUrl: './squad-list.component.html',
-  styleUrls: ['./squad-list.component.css', '../../style/select-list.css']
+  styleUrls: ['./squad-list.component.css', '../../../style/select-list.css']
 })
 export class SquadListComponent implements OnInit {
 
@@ -28,7 +29,8 @@ export class SquadListComponent implements OnInit {
 
   constructor(private squadService: SquadService,
               private router: Router,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -54,11 +56,16 @@ export class SquadListComponent implements OnInit {
 
   deleteSquad(squad) {
     const fraction = squad.fraction === 'OPFOR' ? Fraction.OPFOR : Fraction.BLUFOR;
-    if (confirm('Soll das Squad "' + squad.name + '" (' + fraction + ') wirklich gelöscht werden?')) {
+    this.translate.get('squad.list.delete.confirm', {
+      name: squad.name,
+      fraction: fraction
+    }).subscribe((confirmQuestion) => {
+      if (confirm(confirmQuestion)) {
         this.squadService.deleteSquad(squad)
             .subscribe((res) => {
             });
       }
+    });
   }
 
   filterSquads(group?: MatButtonToggleGroup) {

static/src/app/manage/users/award-user/award-user.component.html

@@ -1,8 +1,8 @@
 <form #form="ngForm" class="overview">
-  <h3>Teilnehmer auszeichnen</h3>
+  <h3>{{'users.award.headline' | translate}}</h3>
 
   <div class="form-group">
-    <label for="decoration">Auszeichnung</label>
+    <label for="decoration">{{'users.award.field.decoration' | translate}}</label>
     <select class="form-control"
             name="decoration"
             id="decoration"
@@ -11,14 +11,13 @@
             [ngModel]="0"
             required
             style="min-width: 200px;">
-      <option [value]="0">Auswählen...</option>
+      <option [value]="0">{{'users.award.field.decoration.placeholder' | translate}}</option>
       <option *ngFor="let deco of decorations" [value]="deco._id">
         {{deco.fraction == 'BLUFOR'? fraction.BLUFOR : deco.fraction == 'OPFOR'? fraction.OPFOR : 'Global'}}:
         {{deco.name}}
       </option>
     </select>
-
+    <show-error displayName="{{'users.award.field.decoration' | translate}}" controlPath="decoration"></show-error>
-    <show-error displayName="Auszeichnung" controlPath="decoration"></show-error>
   </div>
 
   <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
@@ -38,37 +37,40 @@
   </div>
 
   <div class="form-group">
-    <label for="reason">Begründung</label>
+    <label for="reason">{{'users.award.field.reason' | translate}}</label>
     <textarea class="form-control center-block" name="reason" [ngModel]="undefined" required
-              id="reason" placeholder="Begründung eingeben..." rows="3" #awardTextArea></textarea>
+              id="reason" placeholder="{{'users.award.field.reason.placeholder' | translate}}"
-    <show-error displayName="Begründung" controlPath="reason"></show-error>
+              rows="3" #awardTextArea>
+    </textarea>
+    <show-error displayName="{{'users.award.field.reason' | translate}}" controlPath="reason"></show-error>
   </div>
 
-
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'users.award.button.cancel' | translate}}
   </button>
 
   <button id="save"
           (click)="addAwarding(decorationField, awardTextArea, decoPreview, decoDescription)"
           class="btn btn-default"
           [disabled]="decorationField.value === '0' || !form.valid">
-    Bestätigen
+    {{'users.award.button.submit' | translate}}
   </button>
 
   <div class="table-container">
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Bild</th>
+        <th class="col-sm-1">{{'users.award.table.head.image' | translate}}</th>
-        <th class="col-sm-2">Bezeichnung</th>
+        <th class="col-sm-2">{{'users.award.table.head.name' | translate}}</th>
-        <th class="col-sm-2">Begründung</th>
+        <th class="col-sm-2">{{'users.award.table.head.reason' | translate}}</th>
-        <th class="col-sm-1 text-right">Datum</th>
+        <th class="col-sm-1 text-right">{{'users.award.table.head.date' | translate}}</th>
-        <th class="col-sm-1 text-center">Status</th>
+        <th class="col-sm-1 text-center">{{'users.award.table.head.status' | translate}}</th>
         <th class="col-sm-1 text-center">
-          <span class="btn btn-default" (click)="deleteAwarding()">Löschen</span>
+          <span class="btn btn-default" (click)="deleteAwarding()">
+            {{'users.award.table.button.delete' | translate}}
+          </span>
         </th>
       </tr>
       </thead>
@@ -90,7 +92,9 @@
           <a class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</a>
         </td>
         <td class="text-center">
-          {{award.confirmed === 0 ? 'In Bearbeitung' : (award.confirmed === 1 ? 'Genehmigt' : 'Abgelehnt')}}
+          {{award.confirmed === 0 ?
+          awardStatus['users.award.table.status.in.progress'] : (award.confirmed === 1 ?
+          awardStatus['users.award.table.status.approved']: awardStatus['users.award.table.status.rejected'])}}
         </td>
         <td class="text-center">
           <label>

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

@@ -1,17 +1,17 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {Award, Decoration} from '../../models/model-interfaces';
+import {Award, Decoration} from '../../../models/model-interfaces';
 import {NgForm} from '@angular/forms';
-import {AwardingService} from '../../services/army-management/awarding.service';
+import {AwardingService} from '../../../services/army-management/awarding.service';
-import {DecorationService} from '../../services/army-management/decoration.service';
+import {DecorationService} from '../../../services/army-management/decoration.service';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
-import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
-import {Message} from '../../i18n/de.messages';
+import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
   templateUrl: './award-user.component.html',
-  styleUrls: ['./award-user.component.css', '../../style/overview.css', '../../style/hide-scrollbar.css'],
+  styleUrls: ['./award-user.component.css', '../../../style/overview.css', '../../../style/hide-scrollbar.css'],
 })
 export class AwardUserComponent implements OnInit {
 
@@ -23,6 +23,8 @@ export class AwardUserComponent implements OnInit {
 
   awards: Award[];
 
+  awardStatus = {};
+
   decoPreviewDisplay = 'none';
 
   readonly fraction = Fraction;
@@ -31,10 +33,18 @@ export class AwardUserComponent implements OnInit {
               private route: ActivatedRoute,
               private awardingService: AwardingService,
               private decorationService: DecorationService,
-              private snackBarService: SnackBarService) {
+              private snackBarService: SnackBarService,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
+    ['users.award.table.status.in.progress',
+      'users.award.table.status.approved',
+      'users.award.table.status.rejected'].forEach((i18n) => {
+      this.translate.get(i18n).subscribe((translated) => {
+        this.awardStatus[i18n] = translated;
+      })
+    });
 
     this.decorationService.findDecorations().subscribe(decorations => {
       this.decorations = decorations;
@@ -84,7 +94,7 @@ export class AwardUserComponent implements OnInit {
               this.decoPreviewDisplay = 'none';
               decorationField.value = undefined;
               reasonField.value = previewImage.src = descriptionField.innerHTML = '';
-              this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+              this.snackBarService.showSuccess('generic.save.success');
             });
       });
     }
@@ -102,7 +112,7 @@ export class AwardUserComponent implements OnInit {
               });
         });
       });
-      this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+      this.snackBarService.showSuccess('generic.save.success');
     }
   }
 

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

@@ -1,38 +1,36 @@
 <form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
-  <h3 *ngIf="user._id">Teilnehmer editieren</h3>
+  <h3 *ngIf="user._id">{{'user.submit.headline.edit' | translate}}</h3>
-  <h3 *ngIf="!user._id">Neuen Teilnehmer hinzufügen</h3>
+  <h3 *ngIf="!user._id">{{'user.submit.headline.new' | translate}}</h3>
 
   <div class="form-group">
-    <label for="title">Name</label>
+    <label for="title">{{'user.submit.field.name' | translate}}</label>
     <input class="form-control"
            [(ngModel)]="user.username"
            name="title"
            id="title"
            required
            maxlength="50"/>
-
+    <show-error displayName="{{'user.submit.field.name' | translate}}" controlPath="title"></show-error>
-    <show-error displayName="Name" controlPath="title"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="squad">Squad</label>
+    <label for="squad">{{'user.submit.field.squad' | translate}}</label>
     <select class="form-control"
             name="squad"
             id="squad"
             [(ngModel)]="user.squadId"
             [compareWith]="equals"
             (change)="toggleRanks()">
-      <option [value]="0">Ohne Fraktion/ Squad</option>
+      <option [value]="0">{{'user.submit.field.squad.not.assigned' | translate}}</option>
       <option *ngFor="let squad of squads" [ngValue]="squad">
         {{squad.fraction == 'BLUFOR'? fraction.BLUFOR : fraction.OPFOR}}: {{squad.name}}
       </option>
     </select>
-
+    <show-error displayName="{{'user.submit.field.squad' | translate}}" controlPath="squad"></show-error>
-    <show-error displayName="Squad" controlPath="squad"></show-error>
   </div>
 
   <div class="form-group" [style.display]="ranksDisplay">
-    <label for="rank">Rang</label>
+    <label for="rank">{{'user.submit.field.rank' | translate}}</label>
     <select class="form-control"
             name="rank"
             id="rank" [ngModel]="user.rankLvl"
@@ -40,14 +38,13 @@
             style="min-width: 200px;">
       <option *ngFor="let rank of ranks" [value]="rank.level">{{rank.name}}</option>
     </select>
-
+    <show-error displayName="{{'user.submit.field.rank' | translate}}" controlPath="rank"></show-error>
-    <show-error displayName="Rang" controlPath="rank"></show-error>
   </div>
 
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'user.submit.button.cancel' | translate}}
   </button>
 
   <button id="save"
@@ -55,6 +52,6 @@
           (click)="saveUser(rankLevel.value)"
           class="btn btn-default"
           [disabled]="!form.valid">
-    Bestätigen
+    {{'user.submit.button.submit' | translate}}
   </button>
 </form>

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

@@ -1,19 +1,18 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {Rank, Squad, User} from '../../models/model-interfaces';
+import {Rank, Squad, User} from '../../../models/model-interfaces';
-import {UserService} from '../../services/army-management/user.service';
+import {UserService} from '../../../services/army-management/user.service';
-import {SquadService} from '../../services/army-management/squad.service';
+import {SquadService} from '../../../services/army-management/squad.service';
-import {RankService} from '../../services/army-management/rank.service';
+import {RankService} from '../../../services/army-management/rank.service';
 import {Subscription} from 'rxjs/Subscription';
 import {NgForm} from '@angular/forms';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
-import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
-import {Message} from '../../i18n/de.messages';
 
 
 @Component({
   templateUrl: './edit-user.component.html',
-  styleUrls: ['./edit-user.component.css', '../../style/entry-form.css', '../../style/overview.css'],
+  styleUrls: ['./edit-user.component.css', '../../../style/entry-form.css', '../../../style/overview.css'],
 })
 export class EditUserComponent implements OnInit {
 
@@ -96,22 +95,22 @@ 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(Message.SUCCESS_SAVE);
+            this.snackBarService.showSuccess('generic.save.success');
           });
     } else {
       this.userService.submitUser(updateObject)
           .subscribe(user => {
               this.router.navigate(['..'], {relativeTo: this.route});
-              this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+              this.snackBarService.showSuccess('generic.save.success');
               return true;
             },
             error => {
               // duplicated user error message
-              const errorMessage = error._body.includes('duplicate') ? Message.DUPLICATED_NAME_ERR : error._body;
+              const errorMessage = error._body.includes('duplicate') ? 'generic.signup.error.duplicate' : error._body;
               this.snackBarService.showError(errorMessage, 10000);
             })
     }
@@ -130,5 +129,4 @@ export class EditUserComponent implements OnInit {
       return o1._id === o2._id;
     }
   }
-
 }

static/src/app/manage/users/user-list/user-item.component.html

@@ -9,12 +9,14 @@
       <small *ngIf="user.squadId && user.squadId.fraction == 'OPFOR'">{{fraction.OPFOR}} - {{user.squadId.name}}</small>
       <small *ngIf="user.squadId && user.squadId.fraction == 'BLUFOR'">{{fraction.BLUFOR}} - {{user.squadId.name}}
       </small>
-      <small *ngIf="!user.squadId">ohne Squad/Fraktion</small>
+      <small *ngIf="!user.squadId">{{'users.list.item.label.no.squad' | translate}}</small>
     </div>
 
     <div class="col-sm-4">
-      <mat-icon (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="pull-right" style="margin-top: 8px;" svgIcon="delete"></mat-icon>
+      <mat-icon (click)="delete(); $event.stopPropagation()" matTooltip="{{'users.list.tooltip.delete' | translate}}"
-      <mat-icon (click)="award(); $event.stopPropagation()" matTooltip="Auszeichnungen" class="icon-award pull-right" svgIcon="award"></mat-icon>
+                class="pull-right" style="margin-top: 8px;" svgIcon="delete"></mat-icon>
+      <mat-icon (click)="award(); $event.stopPropagation()" matTooltip="{{'users.list.tooltip.awards' | translate}}"
+                class="icon-award pull-right" svgIcon="award"></mat-icon>
     </div>
   </div>
 </div>

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

@@ -1,11 +1,11 @@
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
-import {User} from '../../models/model-interfaces';
+import {User} from '../../../models/model-interfaces';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
 
 @Component({
   selector: 'pjm-user-item',
   templateUrl: './user-item.component.html',
-  styleUrls: ['./user-item.component.css', '../../style/list-entry.css'],
+  styleUrls: ['./user-item.component.css', '../../../style/list-entry.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UserItemComponent {

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

@@ -2,8 +2,8 @@
   <cc-list-filter
     [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
                       {label: fraction.OPFOR, value: 'OPFOR'},
-                      {label: 'Ohne Squad', value: 'UNASSIGNED'}]"
+                      {label: 'users.list.filter.no.squad', value: 'UNASSIGNED'}]"
-    [addButton]="{svgIcon: 'add-user', tooltip: 'Neuen Teilnehmer hinzufügen'}"
+    [addButton]="{svgIcon: 'add-user', tooltip: 'users.list.tooltip.new'}"
     (executeSearch)="filterUsers(undefined, $event)"
     (openAddFrom)="openNewUserForm()">
   </cc-list-filter>

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

@@ -1,21 +1,22 @@
-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 {UserService} from '../../../services/army-management/user.service';
-import {User} from '../../models/model-interfaces';
+import {User} from '../../../models/model-interfaces';
-import {ADD, LOAD} from '../../services/stores/user.store';
+import {ADD_ARRAY, LOAD} from '../../../services/stores/generic-store';
-import {Fraction} from '../../utils/fraction.enum';
+import {Fraction} from '../../../utils/fraction.enum';
 import {MatButtonToggleGroup} from '@angular/material';
-import {UIHelpers} from '../../utils/global.helpers';
+import {UIHelpers} from '../../../utils/global.helpers';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'cc-user-list',
   templateUrl: './user-list.component.html',
-  styleUrls: ['./user-list.component.css', '../../style/select-list.css']
+  styleUrls: ['./user-list.component.css', '../../../style/select-list.css']
 })
-export class UserListComponent implements OnInit {
+export class UserListComponent {
 
   selectedUserId: string | number = null;
 
@@ -25,9 +26,9 @@ export class UserListComponent implements OnInit {
 
   radioModel = '';
 
-  throttle = 300;
+  readonly throttle = 300;
 
-  scrollDistance = 1;
+  readonly scrollDistance = 1;
 
   offset = 0;
 
@@ -37,10 +38,8 @@ export class UserListComponent implements OnInit {
 
   constructor(private userService: UserService,
               private router: Router,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
-  }
+              private translate: TranslateService) {
-
-  ngOnInit() {
     this.users$ = this.userService.users$;
   }
 
@@ -67,11 +66,13 @@ export class UserListComponent implements OnInit {
   }
 
   deleteUser(user: User) {
-    if (confirm('Soll der Teilnehmer "' + user.username + '" wirklich gelöscht werden?')) {
+    this.translate.get('users.list.delete.confirm', {name: user.username}).subscribe((confirmQuestion) => {
+      if (confirm(confirmQuestion)) {
         this.userService.deleteUser(user)
             .subscribe((res) => {
             });
       }
+    });
   }
 
   filterUsers(action?, group?: MatButtonToggleGroup) {
@@ -92,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

@@ -1,3 +1,5 @@
+import {Observable} from 'rxjs';
+
 export interface AppUser {
   _id?: string;
   username?: string;
@@ -5,6 +7,7 @@ export interface AppUser {
   secret?: string;
   activated: boolean;
   permission: number;
+  token?: string;
 }
 
 export interface User {
@@ -43,7 +46,7 @@ export interface CampaignPlayer {
 export interface Campaign {
   _id?: string;
   title?: string;
-  wars?: War[];
+  wars$?: Observable<War[]>;
 }
 
 export interface War {

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

@@ -1,5 +1,5 @@
 <div class="decoration-overview-container">
-  <h1>Übersicht über alle Auszeichnungen</h1>
+  <h1>{{'public.decorations.headline' | translate}}</h1>
 
   <div class="fraction-side-bar">
     <div [ngClass]="{active: active === 'BLUFOR'}" (click)="switchFraction('BLUFOR')">{{fraction.BLUFOR}}</div>
@@ -8,7 +8,7 @@
   </div>
 
   <mat-tab-group [selectedIndex]="selectedType" (selectedIndexChange)="switchTab($event)">
-    <mat-tab label="Orden">
+    <mat-tab label="{{'public.decorations.medal' | translate}}">
       <ng-template matTabContent>
         <cc-decoration-panel *ngFor="let decoration of medals"
                              [decoration]="decoration"
@@ -16,7 +16,7 @@
         </cc-decoration-panel>
       </ng-template>
     </mat-tab>
-    <mat-tab label="Ordensbänder">
+    <mat-tab label="{{'public.decorations.ribbons' | translate}}">
       <ng-template matTabContent>
         <cc-decoration-panel *ngFor="let decoration of ribbons"
                              [decoration]="decoration"

static/src/app/pub/public.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

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

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {SettingsService} from '../services/settings.service';
+
+@Component({
+  selector: 'cc-public',
+  templateUrl: './public.component.html',
+  styleUrls: ['./public.component.scss']
+})
+export class PublicComponent {
+  constructor(private translate: TranslateService,
+              private settingsService: SettingsService) {
+    this.settingsService.getLanguage().subscribe((language) => this.translate.setDefaultLang(language));
+  }
+}

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

@@ -10,13 +10,45 @@ import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
 import {MatListModule} from '@angular/material/list';
 import {MatTabsModule} from '@angular/material/tabs';
 import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {HttpClient} from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/public/', '.json');
+}
 
 @NgModule({
   declarations: pubRoutingComponents,
-  entryComponents: [UserListSheetComponent],
+
-  imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, MatBottomSheetModule, MatListModule,
+  entryComponents: [
-    MatTabsModule, pubRouterModule],
+    UserListSheetComponent
-  providers: [DecorationService, RankService]
+  ],
+
+  imports: [
+    CommonModule,
+    SharedModule,
+    MatTableModule,
+    MatCardModule,
+    MatBottomSheetModule,
+    MatListModule,
+    MatTabsModule,
+    pubRouterModule,
+
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      },
+      isolate: true
+    })
+  ],
+
+  providers: [
+    DecorationService,
+    RankService
+  ]
 })
 export class PublicModule {
   static routes = pubRouterModule;

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

@@ -5,10 +5,12 @@ import {DecorationOverviewComponent} from './decoration-overview/decoration-over
 import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
 import {RankPanelComponent} from './rank-overview/rank-panel/rank-panel.component';
 import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
+import {PublicComponent} from './public.component';
 
 export const publicRoutes: Routes = [
   {
     path: '',
+    component: PublicComponent,
     children: [
       {
         path: 'ranks',
@@ -24,6 +26,5 @@ export const publicRoutes: Routes = [
 
 export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
 
-export const pubRoutingComponents = [RankOverviewComponent, DecorationOverviewComponent, DecorationPanelComponent,
+export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent, DecorationPanelComponent,
   RankPanelComponent, UserListSheetComponent];
-

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

@@ -1,5 +1,5 @@
 <div style="width: 1000px; margin:auto; position: relative;">
-  <h1>Übersicht über alle Ränge</h1>
+  <h1>{{'public.ranks.headline' | translate}}</h1>
 
   <div class="column-container pull-left">
     <h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
@@ -7,12 +7,10 @@
     <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>
 
@@ -26,18 +24,14 @@
     <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-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
     </table>
   </div>
-
-
 </div>

static/src/app/pub/user-list-sheet/user-list-sheet.component.html

@@ -1,18 +1,21 @@
 <div *ngIf="data.rank">
-  <img src="resource/rank/{{data.rank._id}}.png" height="65" style="float:left;">
+  <img class="pull-left" src="resource/rank/{{data.rank._id}}.png" height="65">
   <h4 style="text-align: center;height: 65px; padding-top: 20px;">
-    Aktive Teilnehmer mit Rang: {{data.rank.name}}
+    {{'public.list.users.headline' | translate}} {{'public.ranks.rank' | translate}} {{data.rank.name}}
   </h4>
 </div>
 
 <div *ngIf="data.decoration">
-  <img src="resource/decoration/{{data.decoration._id}}.png"
+  <img class="pull-left"
-       height="{{data.decoration.isMedal ? 65 : 32}}"
+       src="resource/decoration/{{data.decoration._id}}.png"
-       style="float:left;">
+       height="{{data.decoration.isMedal ? 65 : 32}}">
   <h4 style="text-align: center;"
       [style.height]="data.decoration.isMedal ? '65px' : 'inherit'"
       [style.padding-top]="data.decoration.isMedal ? '20px' : 'inherit'">
-    Aktive Teilnehmer mit {{data.decoration.isMedal ? 'Orden' : 'Ordensband'}}: {{data.decoration.name}}
+    {{'public.list.users.headline' | translate}}
+    <span *ngIf="data.decoration.isMedal">{{'public.list.user.decorations.medal' | translate}}</span>
+    <span *ngIf="!data.decoration.isMedal">{{'public.list.user.decorations.ribbon' | translate}}</span>
+    {{data.decoration.name}}
   </h4>
 </div>
 

static/src/app/ranks/ranks.module.ts

@@ -1,15 +0,0 @@
-import {NgModule} from '@angular/core';
-import {rankRouterModule, ranksRoutingComponents} from './ranks.routing';
-import {SharedModule} from '../shared.module';
-import {CommonModule} from '@angular/common';
-import {RankService} from '../services/army-management/rank.service';
-import {RankStore} from '../services/stores/rank.store';
-
-@NgModule({
-  declarations: ranksRoutingComponents,
-  imports: [CommonModule, SharedModule, rankRouterModule],
-  providers: [RankStore, RankService]
-})
-export class RanksModule {
-  static routes = rankRouterModule;
-}

static/src/app/ranks/ranks.routing.ts

@@ -1,27 +0,0 @@
-import {RouterModule, Routes} from '@angular/router';
-import {RankListComponent} from './rank-list/rank-list.component';
-import {EditRankComponent} from './edit-rank/edit-rank.component';
-import {RankItemComponent} from './rank-list/rank-item.component';
-import {ModuleWithProviders} from '@angular/core';
-
-export const ranksRoutes: Routes = [
-  {
-    path: '',
-    component: RankListComponent,
-    outlet: 'left'
-  },
-  {
-    path: 'new',
-    component: EditRankComponent,
-    outlet: 'right'
-  },
-  {
-    path: 'edit/:id',
-    component: EditRankComponent,
-    outlet: 'right'
-  }];
-
-export const rankRouterModule: ModuleWithProviders = RouterModule.forChild(ranksRoutes);
-
-export const ranksRoutingComponents = [RankItemComponent, RankListComponent, EditRankComponent];
-

static/src/app/request/award/req-award.component.html

@@ -1,8 +1,8 @@
 <form #form="ngForm" class="overview">
-  <h3>Auszeichnung beantragen</h3>
+  <h3>{{'request.award.headline' | translate}}</h3>
 
   <div class="form-group">
-    <label for="user">Teilnehmer</label>
+    <label for="user">{{'request.award.field.user' | translate}}</label>
     <select class="form-control"
             name="user"
             id="user"
@@ -10,7 +10,7 @@
             [compareWith]="equals"
             (change)="toggleUser()"
             required>
-      <option [ngValue]="{_id: '0'}">Auswählen...</option>
+      <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
       <option *ngFor="let user of users" [ngValue]="user">
         {{user.username}}
       </option>
@@ -18,7 +18,7 @@
   </div>
 
   <div class="form-group">
-    <label for="decoration">Auszeichnung</label>
+    <label for="decoration">{{'request.award.field.award' | translate}}</label>
     <select class="form-control"
             name="decoration"
             id="decoration"
@@ -26,7 +26,7 @@
             [compareWith]="equals"
             (change)="toggleDecoPreview(decoDescription, decoPreview)"
             required>
-      <option [ngValue]="{_id: '0'}">Auswählen...</option>
+      <option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
       <option *ngFor="let deco of decorations" [ngValue]="deco">
         {{deco.name}}
       </option>
@@ -44,35 +44,35 @@
   </div>
 
   <div class="form-group">
-    <label for="reason">Begründung</label>
+    <label for="reason">{{'request.award.field.reason' | translate}}</label>
     <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
-              id="reason" placeholder="Begründung eingeben..." rows="3"></textarea>
+              id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
   </div>
 
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'request.award.button.cancel' | translate}}
   </button>
 
   <button id="save"
           (click)="addAwarding(decoPreview, decoDescription)"
           class="btn btn-default"
           [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
-    Bestätigen
+    {{'request.award.button.submit' | translate}}
   </button>
 
   <div class="table-container" *ngIf="showForm">
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Bild</th>
+        <th class="col-sm-1">{{'request.award.table.head.image' | translate}}</th>
-        <th class="col-sm-2">Bezeichnung</th>
+        <th class="col-sm-2">{{'request.award.table.head.name' | translate}}</th>
-        <th class="col-sm-2">Begründung</th>
+        <th class="col-sm-2">{{'request.award.table.head.reason' | translate}}</th>
-        <th class="col-sm-1 ">Antragsteller</th>
+        <th class="col-sm-1 ">{{'request.award.table.head.requester' | translate}}</th>
-        <th class="col-sm-1 text-right">Datum</th>
+        <th class="col-sm-1 text-right">{{'request.award.table.head.date' | translate}}</th>
-        <th class="col-sm-1 text-center">Status</th>
+        <th class="col-sm-1 text-center">{{'request.award.table.head.status' | translate}}</th>
-        <th class="col-sm-2 text-right">Grund für Ablehnung</th>
+        <th class="col-sm-2 text-right">{{'request.award.table.head.reject.reason' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let award of awards">
@@ -96,7 +96,15 @@
           {{award.date | date: 'dd.MM.yyyy'}}
         </td>
         <td class="text-center">
-          {{award.confirmed === 0? 'In Bearbeitung' : (award.confirmed === 1? 'Genehmigt' : 'Abgelehnt')}}
+           <span *ngIf="award.confirmed === 0">
+            {{'request.award.table.status.progressing' | translate}}
+          </span>
+          <span *ngIf="award.confirmed === 1">
+            {{'request.award.table.status.accepted' | translate}}
+          </span>
+          <span *ngIf="award.confirmed !== 0 && award.confirmed !== 1">
+            {{'request.award.table.status.rejected' | translate}}
+          </span>
         </td>
         <td class="text-right">
           {{award.rejectReason ? award.rejectReason : ''}}

static/src/app/request/award/req-award.component.ts

@@ -7,7 +7,6 @@ import {DecorationService} from '../../services/army-management/decoration.servi
 import {UserService} from '../../services/army-management/user.service';
 import {LoginService} from '../../services/app-user-service/login-service';
 import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
-import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -82,10 +81,10 @@ export class RequestAwardComponent implements OnInit {
   addAwarding(previewImage, descriptionField) {
     if (this.decoration._id && this.reason.length > 0) {
       const award: Award = {
-        'userId': this.user._id,
+        userId: this.user._id,
-        'decorationId': this.decoration._id,
+        decorationId: this.decoration._id,
-        'reason': this.reason,
+        reason: this.reason,
-        'date': Date.now()
+        date: Date.now()
       };
       this.awardingService.requestAwarding(award).subscribe(() => {
         this.awardingService.getUserAwardings(this.user._id)
@@ -94,7 +93,7 @@ export class RequestAwardComponent implements OnInit {
               this.decoration = {_id: '0'};
               this.reason = previewImage.src = descriptionField.innerHTML = '';
               this.decoPreviewDisplay = 'none';
-              this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+              this.snackBarService.showSuccess('generic.save.success');
             });
       });
     }

static/src/app/request/confirm-award/confirm-award.component.html

@@ -1,18 +1,18 @@
 <form #form="ngForm" class="overview">
-  <h3>Offene Anträge - Auszeichnungen</h3>
+  <h3>{{'request.confirm.award.headline' | translate}}</h3>
 
   <div class="table-container">
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Teilnehmer</th>
+        <th class="col-sm-1">{{'request.confirm.award.table.head.participant' | translate}}</th>
         <th class="col-sm-1"></th>
-        <th class="col-sm-2">Auszeichnung</th>
+        <th class="col-sm-2">{{'request.confirm.award.table.head.award' | translate}}</th>
-        <th class="col-sm-2">Begründung</th>
+        <th class="col-sm-2">{{'request.confirm.award.table.head.reason' | translate}}</th>
-        <th class="col-sm-1 ">Antragsteller</th>
+        <th class="col-sm-1 ">{{'request.confirm.award.table.head.requester' | translate}}</th>
-        <th class="col-sm-1 text-right">Datum</th>
+        <th class="col-sm-1 text-right">{{'request.confirm.award.table.head.date' | translate}}</th>
         <th class="col-sm-2 text-right"></th>
-        <th class="col-sm-1 text-right">Aktion</th>
+        <th class="col-sm-1 text-right">{{'request.confirm.award.table.head.action' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let award of awards">
@@ -43,16 +43,19 @@
         <td>
           <textarea style="width: 100%;"
                     rows="3"
-                    placeholder="Begründung für Ablehnung (optional)"
+                    placeholder="{{'request.confirm.award.table.reject.reason.placeholder' | translate}}"
                     #rejectReason></textarea>
         </td>
         <td class="text-right">
-          <a class="action" (click)="confirm(award, true, reason.value)">Bestätigen</a><br>
+          <a class="action" (click)="confirm(award, true, reason.value)">
-          <a class="action" (click)="confirm(award, false, reason.value, rejectReason.value)">Ablehnen</a>
+            {{'request.confirm.award.table.button.action.accept' | translate}}
+          </a><br>
+          <a class="action" (click)="confirm(award, false, reason.value, rejectReason.value)">
+            {{'request.confirm.award.table.button.action.reject' | translate}}
+          </a>
         </td>
       </tr>
       </tbody>
     </table>
   </div>
-
 </form>

static/src/app/request/confirm-award/confirm-award.component.ts

@@ -3,7 +3,6 @@ import {Award} from '../../models/model-interfaces';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {LoginService} from '../../services/app-user-service/login-service';
 import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
-import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -47,7 +46,7 @@ export class ConfirmAwardComponent implements OnInit {
         if (awards.length < 1) {
           this.awardingService.hasUnprocessedAwards = false;
         }
-        this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+        this.snackBarService.showSuccess('generic.save.success');
       });
     });
   }

static/src/app/request/confirm-promotion/confirm-promotion.component.html

@@ -1,18 +1,18 @@
 <form #form="ngForm" class="overview">
-  <h3>Offene Anträge - Beförderung</h3>
+  <h3>{{'request.confirm.promotion.headline' | translate}}</h3>
 
   <div class="table-container">
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Teilnehmer</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
-        <th class="col-sm-1">Alter Rang</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
-        <th class="col-sm-1">Neuer Rang</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
-        <th class="col-sm-1 ">Antragsteller</th>
+        <th class="col-sm-1 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
-        <th class="col-sm-1 text-center">Datum</th>
+        <th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th>
-        <th class="col-sm-1 text-center">Status</th>
+        <th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.status' | translate}}</th>
         <th class="col-sm-2 text-right"></th>
-        <th class="col-sm-1 text-right">Aktion</th>
+        <th class="col-sm-1 text-right">{{'request.confirm.promotion.table.head.action' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let promotion of promotions">
@@ -33,17 +33,29 @@
           {{promotion.timestamp | date: 'dd.MM.yyyy'}}
         </td>
         <td class="text-center">
-          {{promotion.confirmed === 0? 'In Bearbeitung' : (promotion.confirmed === 1? 'Genehmigt' : 'Abgelehnt')}}
+          <span *ngIf="promotion.confirmed === 0">
+            {{'request.confirm.promotion.table.status.progressing' | translate}}
+          </span>
+          <span *ngIf="promotion.confirmed === 1">
+            {{'request.confirm.promotion.table.status.accepted' | translate}}
+          </span>
+          <span *ngIf="promotion.confirmed !== 0 && promotion.confirmed !== 1">
+            {{'request.confirm.promotion.table.status.rejected' | translate}}
+          </span>
         </td>
         <td>
           <textarea style="width: 100%;"
                     rows="3"
-                    placeholder="Begründung für Ablehnung (optional)"
+                    placeholder="{{'request.confirm.promotion.table.reject.reason.placeholder' | translate}}"
                     #rejectReason></textarea>
         </td>
         <td class="text-right">
-          <a class="action" (click)="confirm(promotion, true)">Bestätigen</a><br>
+          <a class="action" (click)="confirm(promotion, true)">
-          <a class="action" (click)="confirm(promotion, false, rejectReason.value)">Ablehnen</a>
+            {{'request.confirm.promotion.table.button.action.accept' | translate}}
+          </a><br>
+          <a class="action" (click)="confirm(promotion, false, rejectReason.value)">
+            {{'request.confirm.promotion.table.button.action.reject' | translate}}
+          </a>
         </td>
       </tr>
       </tbody>

static/src/app/request/confirm-promotion/confirm-promotion.component.ts

@@ -4,7 +4,6 @@ import {RankService} from '../../services/army-management/rank.service';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {LoginService} from '../../services/app-user-service/login-service';
 import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
-import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -51,7 +50,7 @@ export class ConfirmPromotionComponent implements OnInit {
         if (promotions.length < 1) {
           this.promotionService.hasUnprocessedPromotion = false;
         }
-        this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+        this.snackBarService.showSuccess('generic.save.success');
       });
     });
   }

static/src/app/request/promotion/req-promotion.component.html

@@ -1,8 +1,8 @@
 <form #form="ngForm" class="overview">
-  <h3>Beförderung beantragen</h3>
+  <h3>{{'request.promotion.headline' | translate}}</h3>
 
   <div class="form-group">
-    <label for="user">Teilnehmer</label>
+    <label for="user">{{'request.promotion.field.participant' | translate}}</label>
     <select class="form-control"
             name="user"
             id="user"
@@ -10,7 +10,7 @@
             [compareWith]="equals"
             required
             (change)="toggleUser()">
-      <option [ngValue]="{_id: '0'}">Auswählen...</option>
+      <option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
       <option *ngFor="let user of users" [ngValue]="user">
         {{user.username}}
       </option>
@@ -20,7 +20,7 @@
   <div *ngIf="showForm">
 
     <div class="form-group">
-      <label for="user">Aktueller Rang</label>
+      <label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
       <input class="form-control"
              [(ngModel)]="selectedUserRank"
              [ngModelOptions]="{standalone: true}"
@@ -28,7 +28,7 @@
     </div>
 
     <div class="form-group">
-      <label for="decoration">Neuer Rang</label>
+      <label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
       <select class="form-control"
               name="decoration"
               id="decoration"
@@ -46,7 +46,7 @@
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'request.promotion.button.cancel' | translate}}
   </button>
 
   <button id="save"
@@ -54,7 +54,7 @@
           (click)="addPromotion()"
           class="btn btn-default"
           [disabled]="newLevel === user.rankLvl">
-    Bestätigen
+    {{'request.promotion.button.submit' | translate}}
   </button>
 
   <div class="table-container">
@@ -62,13 +62,13 @@
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Teilnehmer</th>
+        <th class="col-sm-1">{{'request.promotion.table.head.participant' | translate}}</th>
-        <th class="col-sm-1">Alter Rang</th>
+        <th class="col-sm-1">{{'request.promotion.table.head.rank.before' | translate}}</th>
-        <th class="col-sm-1">Neuer Rang</th>
+        <th class="col-sm-1">{{'request.promotion.table.head.rank.after' | translate}}</th>
-        <th class="col-sm-1 ">Antragsteller</th>
+        <th class="col-sm-1 ">{{'request.promotion.table.head.requester' | translate}}</th>
-        <th class="col-sm-1 text-center">Datum</th>
+        <th class="col-sm-1 text-center">{{'request.promotion.table.head.date' | translate}}</th>
-        <th class="col-sm-1 text-center">Status</th>
+        <th class="col-sm-1 text-center">{{'request.promotion.table.head.status' | translate}}</th>
-        <th class="col-sm-2 text-right">Grund für Ablehnung</th>
+        <th class="col-sm-2 text-right">{{'request.promotion.table.head.reject.reason' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let promotion of uncheckedPromotions">
@@ -89,10 +89,18 @@
           {{promotion.timestamp | date: 'dd.MM.yyyy'}}
         </td>
         <td class="text-center">
-          {{promotion.confirmed === 0? 'In Bearbeitung' : (promotion.confirmed === 1? 'Genehmigt' : 'Abgelehnt')}}
+          <span *ngIf="promotion.confirmed === 0">
+            {{'request.confirm.promotion.table.status.progressing' | translate}}
+          </span>
+          <span *ngIf="promotion.confirmed === 1">
+            {{'request.confirm.promotion.table.status.accepted' | translate}}
+          </span>
+          <span *ngIf="promotion.confirmed !== 0 && promotion.confirmed !== 1">
+            {{'request.confirm.promotion.table.status.rejected' | translate}}
+          </span>
         </td>
         <td class="text-right">
-          {{promotion.rejectReason ? promotion.rejectReason : ''}}
+          <span *ngIf="promotion.rejectReason">{{promotion.rejectReason}}</span>
         </td>
       </tr>
       </tbody>

static/src/app/request/promotion/req-promotion.component.ts

@@ -6,7 +6,6 @@ import {UserService} from '../../services/army-management/user.service';
 import {RankService} from '../../services/army-management/rank.service';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {LoginService} from '../../services/app-user-service/login-service';
-import {Message} from '../../i18n/de.messages';
 import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
 
 
@@ -80,7 +79,7 @@ export class RequestPromotionComponent implements OnInit {
         this.uncheckedPromotions = promotions;
         this.showForm = false;
         this.user = {_id: '0'};
-        this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
+        this.snackBarService.showSuccess('generic.save.success');
       });
     });
   }
@@ -98,5 +97,4 @@ export class RequestPromotionComponent implements OnInit {
       return o1._id === o2._id;
     }
   }
-
 }

static/src/app/request/request.component.ts

@@ -1,11 +1,15 @@
 import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {SettingsService} from '../services/settings.service';
 
 @Component({
-  selector: 'cc-request',
+  selector: 'cc-request-root',
   templateUrl: 'request.component.html',
   styleUrls: ['request.component.css']
 })
 export class RequestComponent {
-  constructor() {
+  constructor(private translate: TranslateService,
+              private settingsService: SettingsService) {
+    this.settingsService.getLanguage().subscribe((language) => this.translate.setDefaultLang(language));
   }
 }

static/src/app/request/request.module.ts

@@ -9,11 +9,38 @@ import {ConfirmPromotionComponent} from './confirm-promotion/confirm-promotion.c
 import {RequestAwardComponent} from './award/req-award.component';
 import {RequestPromotionComponent} from './promotion/req-promotion.component';
 import {SqlDashboardComponent} from './sql-dashboard/sql-dashboard.component';
+import {HttpClient} from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/request/', '.json');
+}
 
 @NgModule({
-  declarations: [RequestComponent, RequestPromotionComponent, RequestAwardComponent, ConfirmPromotionComponent,
+  declarations: [
-    ConfirmAwardComponent, SqlDashboardComponent, FilterRankPipe],
+    RequestComponent,
-  imports: [CommonModule, SharedModule, requestRouterModule]
+    RequestPromotionComponent,
+    RequestAwardComponent,
+    ConfirmPromotionComponent,
+    ConfirmAwardComponent,
+    SqlDashboardComponent,
+    FilterRankPipe
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    requestRouterModule,
+
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      },
+      isolate: true
+    })
+  ]
 })
 export class RequestModule {
   static routes = requestRouterModule;

static/src/app/request/request.routing.ts

@@ -11,9 +11,11 @@ import {LoginGuardHL, LoginGuardSQL} from '../login';
 import {SqlDashboardComponent} from './sql-dashboard/sql-dashboard.component';
 
 
-export const requestRoutes: Routes = [{
+export const requestRoutes: Routes = [
-  path: '', component: RequestComponent
+  {
-},
+    path: '',
+    component: RequestComponent,
+    children: [
       {
         path: RouteConfig.requestAwardPath,
         component: RequestAwardComponent,
@@ -39,6 +41,8 @@ export const requestRoutes: Routes = [{
         component: ConfirmPromotionComponent,
         canActivate: [LoginGuardHL]
       },
+    ]
+  },
 ];
 
 export const requestRouterModule: ModuleWithProviders = RouterModule.forChild(requestRoutes);

static/src/app/request/sql-dashboard/sql-dashboard.component.html

@@ -1,16 +1,16 @@
 <div class="overview">
-  <h3>SQL Dashboard</h3>
+  <h3>{{'request.sql.dashboard.headline' | translate}}</h3>
 
   <div class="table-container">
-    <label>Beförderungsanträge</label>
+    <label>{{'request.confirm.promotion.headline' | translate}}</label>
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Teilnehmer</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
-        <th class="col-sm-1">Alter Rang</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
-        <th class="col-sm-1">Neuer Rang</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
-        <th class="col-sm-1 ">Antragsteller</th>
+        <th class="col-sm-1 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
-        <th class="col-sm-1 text-center">Datum</th>
+        <th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let promotion of promotions">
@@ -36,16 +36,16 @@
   </div>
 
   <div class="table-container">
-    <label>Anträge für Orden/ Auszeichnungen</label>
+    <label>{{'request.confirm.award.headline' | translate}}</label>
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Teilnehmer</th>
+        <th class="col-sm-1">{{'request.confirm.award.table.head.participant' | translate}}</th>
-        <th class="col-sm-1">Bild</th>
+        <th class="col-sm-1"></th>
-        <th class="col-sm-2">Bezeichnung</th>
+        <th class="col-sm-2">{{'request.confirm.award.table.head.award' | translate}}</th>
-        <th class="col-sm-2">Begründung</th>
+        <th class="col-sm-2">{{'request.confirm.award.table.head.reason' | translate}}</th>
-        <th class="col-sm-1 ">Antragsteller</th>
+        <th class="col-sm-1 ">{{'request.confirm.award.table.head.requester' | translate}}</th>
-        <th class="col-sm-1 text-right">Datum</th>
+        <th class="col-sm-1 text-right">{{'request.confirm.award.table.head.date' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let award of awards">