From 37904596fbc2f68e2fa6d80d44422b4230af71d8 Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Thu, 16 Jan 2020 11:02:57 +0100
Subject: [PATCH] :zap: change translation button way to be in sync with the
 model

---
 src/app/app.component.html | 20 ++++++++++++--------
 src/app/app.component.ts   | 31 ++++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index a875c425..09f418e1 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -18,16 +18,20 @@
             <img
                 src="assets/img/icone-langue.svg"
                 alt="location icon"
-                class="lang_icon"
-            > <img
-            src="assets/img/icone-menu.svg"
-            alt="menu icon"
-            class="menu_icon"
-        >
+                (click)="changeLanguage()"
+                class="lang_icon clickable"
+            >
+            <img
+                (click)="toggleMenu()"
+                alt="menu icon"
+                class="menu_icon  clickable"
+                src="assets/img/icone-menu.svg"
+            >
             <select
                 name="language"
                 class="Language-"
-                (change)="switchLanguage($event.target.value)"
+                (change)="switchLanguage(currentLang)"
+                [(ngModel)]="currentLang"
             >
                 <option
                     value="d"
@@ -37,7 +41,7 @@
                 <option value="en">English</option>
                 <option value="fr">Français</option>
             </select>
-            <span class="menu_label">Menu</span>
+            <span (click)="toggleMenu()" class="menu_label">Menu</span>
         </div>
         <h1 i18n>{{"Title"|translate}}</h1>
         <div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c27047d7..571d0091 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,6 +8,8 @@ import {Router} from '@angular/router';
     styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+    currentLang = 'fr';
+    langsAvailable = ['fr', 'en'];
     title = 'framadate';
     //translation demo:
     minutes = 12;
@@ -15,11 +17,17 @@ export class AppComponent {
         name: 'Arthur',
         age: 42
     };
+    menuVisible: boolean = true;
     private step: string;
 
     constructor(private translate: TranslateService,
                 private route: Router) {
-        this.translate.setDefaultLang('fr');
+        this.translate.setDefaultLang(this.currentLang);
+        this.detectCurrentTabOnRouteChange();
+
+    }
+
+    detectCurrentTabOnRouteChange() {
         this.route.events.subscribe((event: any) => {
 
             // console.log('event', event);
@@ -39,6 +47,27 @@ export class AppComponent {
 
     switchLanguage(language: string) {
         this.translate.use(language);
+        this.currentLang = language;
     }
 
+    /**
+     * set the next lang or loop to the first
+     * this is to manage future languages available
+     */
+    changeLanguage() {
+        let langs = this.langsAvailable;
+        let indexofCurrent = langs.indexOf(this.currentLang);
+        if (indexofCurrent > -1) {
+            let newIndex = indexofCurrent + 1;
+            if (newIndex > (langs.length - 1)) {
+                newIndex = 0;
+            }
+            this.currentLang = this.langsAvailable[newIndex];
+        }
+        this.translate.use(this.currentLang);
+    }
+
+    toggleMenu() {
+        this.menuVisible = !this.menuVisible;
+    }
 }