Add translation service for public sub module (CC-57)

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

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

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

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'cc-public',
+  templateUrl: './public.component.html',
+  styleUrls: ['./public.component.scss']
+})
+export class PublicComponent {
+  constructor(private translate: TranslateService) {
+    this.translate.setDefaultLang('de');
+  }
+}

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,
-    MatTabsModule, pubRouterModule],
-  providers: [DecorationService, RankService]
+
+  entryComponents: [
+    UserListSheetComponent
+  ],
+
+  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,13 @@ 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';
+import {StatisticComponent} from '../statistic/stats.component';
 
 export const publicRoutes: Routes = [
   {
     path: '',
+    component: PublicComponent,
     children: [
       {
         path: 'ranks',
@@ -24,6 +27,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,7 +1,7 @@
 <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>
 
@@ -12,7 +12,7 @@
   <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}} {{data.decoration.isMedal ? 'Orden' : 'Ordensband'}} : {{data.decoration.name}}
   </h4>
 </div>
 

static/src/app/shared.module.ts

@@ -11,6 +11,10 @@ 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/', '.json');
+}
+
 @NgModule({
   declarations: [
     ShowErrorComponent,
@@ -27,11 +31,10 @@ import {TranslateHttpLoader} from '@ngx-translate/http-loader';
     MatIconModule,
     MatTooltipModule,
 
-    // 3rd party
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
-        useFactory: HttpLoaderFactory,
+        useFactory: (createTranslateLoader),
         deps: [HttpClient]
       }
     })
@@ -47,15 +50,8 @@ import {TranslateHttpLoader} from '@ngx-translate/http-loader';
     ListFilterComponent,
     SearchFieldComponent,
     MatTooltipModule,
-    TranslateModule],
+    TranslateModule
+  ],
 })
 export class SharedModule {
 }
-
-export function HttpLoaderFactory(http: HttpClient) {
-  return new TranslateHttpLoader(
-    http,
-    `/assets/i18n/`,
-    '.json'
-  );
-}

static/src/assets/i18n/de.json

@@ -0,0 +1,25 @@
+{
+  "navigation.top.board": "Zum Forum",
+  "navigation.top.overview": "Armeeübersicht",
+  "navigation.top.ranks": "Ränge",
+  "navigation.top.decorations": "Auszeichnungem",
+  "navigation.top.statistics": "Statistiken",
+  "navigation.top.login": "Login",
+  "navigation.top.logout": "Abmelden",
+  "navigation.top.management": "Verwaltung",
+  "navigation.top.management.users": "Teilnehmer",
+  "navigation.top.management.squads": "Squads",
+  "navigation.top.management.decorations": "Auszeichnungen",
+  "navigation.top.management.ranks": "Ränge",
+  "navigation.top.request": "Beantragen",
+  "navigation.top.request.open": "Offene Anträge",
+  "navigation.top.request.manage": "Anträge",
+  "navigation.top.request.promotion": "Beförderung",
+  "navigation.top.request.award": "Orden/ Auszeichnung",
+  "navigation.top.admin": "Admin Panel",
+  "navigation.button.scroll.top": "Zum Seitenanfang",
+
+  "public.army.headline": "Übersicht über alle Spieler, Squads und Armeen",
+  "public army.squad.members": "Mitglieder:",
+  "public.army.members": "Armeemitglieder:"
+}

static/src/assets/i18n/en.json

@@ -0,0 +1,2 @@
+{
+}