From cbb9185c2ab2754ded34af2cb42770c565da03b9 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Tue, 7 Aug 2018 12:30:21 +0200
Subject: [PATCH] Change language indicator

---
 client/src/app/site/site.component.html |  5 +++--
 client/src/app/site/site.component.ts   | 23 ++++++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html
index 131c0549d..a78cf172d 100644
--- a/client/src/app/site/site.component.html
+++ b/client/src/app/site/site.component.html
@@ -97,8 +97,9 @@
         <button mat-icon-button (click)='sideNav.toggle()'>
             <fa-icon icon='ellipsis-v'></fa-icon>
         </button>
-        <button mat-icon-button [matMenuTriggerFor]="languageMenu">
-            <fa-icon icon='language'></fa-icon>
+        <button mat-button [matMenuTriggerFor]="languageMenu">
+            <fa-icon icon='globe-americas'></fa-icon>
+            <span> {{getLangName(this.translate.currentLang)}} </span>
         </button>
 
         <!-- TODO: Could use translate.getLangs() to fetch available languages-->
diff --git a/client/src/app/site/site.component.ts b/client/src/app/site/site.component.ts
index 5e2306e22..d8a827c48 100644
--- a/client/src/app/site/site.component.ts
+++ b/client/src/app/site/site.component.ts
@@ -29,6 +29,7 @@ export class SiteComponent extends BaseComponent implements OnInit {
      * True if Viewport equals mobile or small resolution. Set by breakpointObserver.
      */
     isMobile = false;
+
     /**
      * Constructor
      *
@@ -46,7 +47,7 @@ export class SiteComponent extends BaseComponent implements OnInit {
         private operator: OperatorService,
         private router: Router,
         private breakpointObserver: BreakpointObserver,
-        protected translate: TranslateService,
+        public translate: TranslateService,
         public dialog: MatDialog
     ) {
         super();
@@ -87,13 +88,21 @@ export class SiteComponent extends BaseComponent implements OnInit {
      * Let the user change the language
      * @param lang the desired language (en, de, fr, ...)
      */
-    selectLang(lang: string): void {
-        console.log('selected langauge: ', lang);
-        console.log('get Langs : ', this.translate.getLangs());
+    selectLang(selection: string): void {
+        this.translate.use(selection).subscribe();
+    }
 
-        this.translate.use(lang).subscribe(res => {
-            console.log('language changed : ', res);
-        });
+    /**
+     * Get the name of a Language by abbreviation.
+     */
+    getLangName(abbreviation: string): string {
+        if (abbreviation === 'en') {
+            return this.translate.instant('English');
+        } else if (abbreviation === 'de') {
+            return this.translate.instant('German');
+        } else if (abbreviation === 'fr') {
+            return this.translate.instant('French');
+        }
     }
 
     /**