Add flag dropdown for language selection

static/src/app/app.component.html

@@ -89,21 +89,6 @@
         </ul>
 
         <ul class="nav navbar-nav pull-right">
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
-               aria-expanded="false">
-              Language
-              <span class="caret"></span>
-            </a>
-            <ul class="dropdown-menu">
-              <li>
-                <a (click)="setLanguage('en')">English</a>
-              </li>
-              <li>
-                <a (click)="setLanguage('de')">Deutsch</a>
-              </li>
-            </ul>
-          </li>
           <li *ngIf="loginService.hasPermission(4)" routerLinkActive="active">
             <a routerLink='{{config.adminPanelPath}}' class="link">{{'navigation.top.admin' | translate}}</a>
           </li>
@@ -113,6 +98,18 @@
           <li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">
             <a routerLink='{{config.loginPath}}' class="link">{{'navigation.top.login' | translate}}</a>
           </li>
+          <li class="dropdown">
+            <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>
     </div>

static/src/app/app.component.ts

@@ -6,7 +6,7 @@ import {AwardingService} from './services/army-management/awarding.service';
 import {RouteConfig} from './app.config';
 import {DOCUMENT} from '@angular/common';
 import {DomSanitizer} from '@angular/platform-browser';
-import {MatIconRegistry} from '@angular/material';
+import {MatIconRegistry, MatSelectChange} from '@angular/material';
 import {SpinnerService} from './services/user-interface/spinner/spinner.service';
 import {TranslateService} from '@ngx-translate/core';
 import {SettingsService} from './services/settings.service';
@@ -55,8 +55,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,
@@ -90,7 +97,10 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.settingsService.getLanguage().subscribe((language) => this.translate.setDefaultLang(language));
+    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);
@@ -104,8 +114,7 @@ export class AppComponent implements OnInit {
 
   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));
     });
   }
@@ -130,6 +139,7 @@ export class AppComponent implements OnInit {
 
   setLanguage(language: string) {
     if (language) {
+      this.language = language;
       this.settingsService.setLanguage(language);
     }
   }

static/src/app/app.module.ts

@@ -24,7 +24,7 @@ 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 {HttpClient} from './services/http-client';
 import {SettingsService} from './services/settings.service';
 
@@ -38,6 +38,7 @@ import {SettingsService} from './services/settings.service';
     HttpClientModule,
     ClipboardModule,
     MatSnackBarModule,
+    MatSelectModule,
   ],
 
   providers: [

static/src/assets/i18n/app/en.json

@@ -7,10 +7,10 @@
   "public.error.message.default": "{{fieldName}} is not valid",
   "public.common.search.button": "Search",
 
-  "navigation.top.board": "To message board",
+  "navigation.top.board": "To Message Board",
   "navigation.top.overview": "Army Overview",
   "navigation.top.ranks": "Ranks",
-  "navigation.top.decorations": "Awards",
+  "navigation.top.decorations": "Decorations",
   "navigation.top.statistics": "Statistics",
   "navigation.top.login": "Login",
   "navigation.top.logout": "Logout",

static/src/assets/i18n/statistics/en.json

@@ -17,7 +17,7 @@
   "stats.sidebar.overview": "Overview",
   "stats.sidebar.highscore": "Highscore",
   "stats.sidebar.battles": "Battles",
-  "stats.sidebar.battles.battle.from.date": "at",
+  "stats.sidebar.battles.battle.from.date": "of",
   "stats.sidebar.battle.manage.edit": "Edit",
   "stats.sidebar.battle.manage.delete": "Delete",
   "stats.sidebar.battle.manage.delete.confirm": "Do you really want to delete the battle \"{{title}}\"?",

static/src/assets/icon/locale/de.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-de" viewBox="0 0 640 480">
+  <path fill="#ffce00" d="M0 320h640v160H0z"/>
+  <path fill="#000" d="M0 0h640v160H0z"/>
+  <path fill="#d00" d="M0 160h640v160H0z"/>
+</svg>

static/src/assets/icon/locale/gb.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-gb" viewBox="0 0 640 480">
+  <defs>
+    <clipPath id="a">
+      <path fill-opacity=".7" d="M-85.3 0h682.6v512H-85.3z"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#a)" transform="translate(80) scale(.94)">
+    <g stroke-width="1pt">
+      <path fill="#006" d="M-256 0H768v512H-256z"/>
+      <path fill="#fff" d="M-256 0v57.2L653.5 512H768v-57.2L-141.5 0H-256zM768 0v57.2L-141.5 512H-256v-57.2L653.5 0H768z"/>
+      <path fill="#fff" d="M170.7 0v512h170.6V0H170.7zM-256 170.7v170.6H768V170.7H-256z"/>
+      <path fill="#c00" d="M-256 204.8v102.4H768V204.8H-256zM204.8 0v512h102.4V0H204.8zM-256 512L85.3 341.3h76.4L-179.7 512H-256zm0-512L85.3 170.7H9L-256 38.2V0zm606.4 170.7L691.7 0H768L426.7 170.7h-76.3zM768 512L426.7 341.3H503l265 132.5V512z"/>
+    </g>
+  </g>
+</svg>