Add translation module and add i18n strings for initial pages (CC-57)

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}}57
               <span class="caret"></span>
             </a>
             <ul class="dropdown-menu">
               <li routerLinkActive="active">
-                <a routerLink='{{config.userPath}}' class="link">Teilnehmer</a>
+                <a routerLink='{{config.userPath}}' class="link">{{'navigation.top.management.users' | translate}}</a>
               </li>
               <li routerLinkActive="active">
-                <a routerLink='{{config.squadPath}}' class="link">Squads</a>
+                <a routerLink='{{config.squadPath}}' class="link">{{'navigation.top.management.squads' | translate}}</a>
               </li>
               <li routerLinkActive="active">
-                <a routerLink='{{config.decorationPath}}' class="link">Auszeichnungen</a>
+                <a routerLink='{{config.decorationPath}}' class="link">{{'navigation.top.management.decorations' | translate}}</a>
               </li>
               <li routerLinkActive="active">
-                <a routerLink='{{config.rankPath}}' class="link">Ränge</a>
+                <a routerLink='{{config.rankPath}}' 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,31 @@
                [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>
         </ul>
       </div>
@@ -122,7 +122,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,7 @@ 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';
 
 declare function require(url: string);
 
@@ -64,6 +65,7 @@ export class AppComponent implements OnInit {
               private iconRegistry: MatIconRegistry,
               private sanitizer: DomSanitizer,
               private spinnerService: SpinnerService,
+              private translate: TranslateService,
               @Inject(DOCUMENT) private document) {
     this.initMaterialSvgIcons();
 
@@ -85,6 +87,15 @@ export class AppComponent implements OnInit {
     });
   }
 
+  ngOnInit() {
+    this.translate.setDefaultLang('de');
+    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;
   }
@@ -103,14 +114,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 +125,13 @@ export class AppComponent implements OnInit {
     this.document.body.scrollTop = 0; // For Safari
     this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
   }
+
+  // TODO: use!
+  // private setLanguage(settings: SettingsState) {
+  //   const { language } = settings;
+  //   if (language) {
+  //     this.translate.use(language);
+  //   }
+  // }
 }
 

static/src/app/app.module.ts

@@ -13,7 +13,6 @@ 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';
@@ -26,10 +25,20 @@ import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.ser
 import {HttpClientModule} from '@angular/common/http';
 import {SpinnerService} from './services/user-interface/spinner/spinner.service';
 import {MatSnackBarModule} from '@angular/material';
+import {HttpClient} from './services/http-client';
 
 @NgModule({
-  imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule,
-    ClipboardModule, MatSnackBarModule],
+  imports: [
+    SharedModule,
+    BrowserModule,
+    BrowserAnimationsModule,
+    appRouting,
+    HttpModule,
+    HttpClientModule,
+    ClipboardModule,
+    MatSnackBarModule,
+  ],
+
   providers: [
     HttpClient,
     LoginService,
@@ -53,10 +62,15 @@ import {MatSnackBarModule} from '@angular/material';
     SnackBarService,
     SpinnerService,
   ],
+
   declarations: [
     AppComponent,
-    routingComponents],
-  bootstrap: [AppComponent]
+    routingComponents
+  ],
+
+  bootstrap: [
+    AppComponent
+  ]
 })
 export class AppModule {
 }

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

@@ -32,5 +32,4 @@ export class ArmyComponent implements OnInit {
   select(memberId) {
     this.router.navigate(['member', memberId], {relativeTo: this.route});
   }
-
 }

static/src/app/shared.module.ts

@@ -7,13 +7,55 @@ import {SearchFieldComponent} from './common/user-interface/search-field/search-
 import {MatButtonToggleModule, MatTooltipModule} from '@angular/material';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {HttpClient} from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 
 @NgModule({
-  declarations: [ShowErrorComponent, ListFilterComponent, SearchFieldComponent],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
-    MatTooltipModule],
-  exports: [FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule, ShowErrorComponent,
-    ListFilterComponent, SearchFieldComponent, MatTooltipModule],
+  declarations: [
+    ShowErrorComponent,
+    ListFilterComponent,
+    SearchFieldComponent
+  ],
+
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonToggleModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule,
+
+    // 3rd party
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    })
+  ],
+
+  exports: [
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonToggleModule,
+    MatButtonModule,
+    MatIconModule,
+    ShowErrorComponent,
+    ListFilterComponent,
+    SearchFieldComponent,
+    MatTooltipModule,
+    TranslateModule],
 })
 export class SharedModule {
 }
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(
+    http,
+    `/assets/i18n/`,
+    '.json'
+  );
+}