🐛 select lang wigthout lifecycle bug

lokalize-scripts/scripts.rc

@@ -0,0 +1,14 @@
+<!-- 
+Collection name attribute represents the name of the menu, e.g., to use menu "File" use "file" or "Help" use "help". You can add new menus.
+
+
+If you type a relative script file beware that this script is located in $XDG_DATA_HOME/applicationname/
+
+The following example adds an action with the text "Export..." into the "File" menu
+
+<KrossScripting>
+<collection name="file" text="File" comment="File menu">
+<script name="export" text="Export..." comment="Export content" file="export.py" />
+</collection>
+</KrossScripting>
+-->

src/app/app.module.ts

@@ -52,7 +52,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
 		NgxWebstorageModule.forRoot({ prefix: environment.localStorage.key }),
 		SharedModule,
 		TranslateModule.forRoot({
-			defaultLanguage: 'fr',
+			defaultLanguage: 'FR',
 			loader: {
 				provide: TranslateLoader,
 				useFactory: HttpLoaderFactory,
@@ -62,7 +62,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
 				provide: MissingTranslationHandler,
 				useClass: MyMissingTranslationHandler,
 			},
-			useDefaultLang: false,
+			useDefaultLang: true,
 		}),
 	],
 	providers: [Title, TranslateService],

src/app/core/components/header/header.component.html

@@ -19,6 +19,8 @@
 				aria-label="menu"
 				aria-expanded="false"
 				data-target="navbarBasicExample"
+				[ngClass]="{ 'bg-primary': mobileMenuVisible }"
+				(click)="mobileMenuVisible = !mobileMenuVisible"
 			>
 				<span aria-hidden="true"></span>
 				<span aria-hidden="true"></span>
@@ -34,10 +36,15 @@
 			</div>
 
 			<div class="navbar-end">
+				<app-language-selector></app-language-selector>
+				<app-theme-selector></app-theme-selector>
 				<a class="navbar-item btn btn-primary" routerLink="user/polls" routerLinkActive="is-active">
 					<i class="fa fa-user"></i> {{ 'config.find_my_polls' | translate }}
 				</a>
 			</div>
 		</div>
+		<div class="mobile-menu" *ngIf="mobileMenuVisible">
+			menu mobile
+		</div>
 	</nav>
 </header>

src/app/core/components/header/header.component.ts

@@ -17,8 +17,9 @@ export class HeaderComponent implements OnInit {
 	public env = environment;
 	@Input() public appTitle: string = 'FramaDate Funky';
 	@Input() public appLogo: string;
+	mobileMenuVisible = false;
 
-	constructor(private userService: UserService, private modalService: ModalService) {}
+	constructor(private userService: UserService) {}
 
 	public ngOnInit(): void {}
 }

src/app/core/components/sibebar/navigation/navigation.component.html

@@ -2,9 +2,6 @@
 	<div class="navbar-item has-dropdown is-hoverable">
 		<a class="navbar-link"> Tous les sondages </a>
 		<div class="navbar-dropdown">
-			<a class="navbar-item" routerLink="/poll/inexistentPoll/consultation" routerLinkActive="is-active">
-				« inexistentPoll »
-			</a>
 			<a
 				class="navbar-item"
 				*ngFor="let poll of _pollsAvailables | async"
@@ -18,7 +15,7 @@
 
 	<hr />
 
-	<div class="navbar-item has-dropdown is-hoverable">
+	<div class="navbar-item has-dropdown is-hoverable is-warning" *ngIf="devModeEnabled">
 		<a class="navbar-link"> Modules </a>
 		<div class="navbar-dropdown">
 			<a class="navbar-item" routerLink="oldstuff" routerLinkActive="is-active">
@@ -34,28 +31,32 @@
 				Participation
 			</a>
 		</div>
-	</div>
 
-	<hr />
+		<hr />
+		<a class="navbar-item" routerLink="/poll/inexistentPoll/consultation" routerLinkActive="is-active">
+			« inexistentPoll »
+		</a>
+		<hr />
+		<a class="button is-block" routerLink="oldstuff/step/creation" routerLinkActive="active"> Création </a>
+		<a class="button is-block" routerLink="oldstuff/step/date" routerLinkActive="active"> Les Dates </a>
+		<a class="button is-block" routerLink="oldstuff/step/answers" routerLinkActive="active"> Réponses </a>
+		<a class="button is-block" routerLink="oldstuff/step/visibility" routerLinkActive="active"> Visibilité </a>
+		<a class="button is-block" routerLink="oldstuff/step/resume" routerLinkActive="active"> Résumé </a>
+		<a class="button is-block" routerLink="oldstuff/step/end" routerLinkActive="active"> Confirmation </a>
+		<a class="button is-block" routerLink="oldstuff/step/admin"> Administration </a>
+
+		<hr />
+
+		<a class="button is-block" routerLink="oldstuff/step/kind" routerLinkActive="active"> Page démo </a>
+		<a class="button is-block" routerLink="oldstuff/vote/poll/id/1" routerLinkActive="active"> Sondage 1 </a>
+		<a class="button is-block" routerLink="oldstuff/vote/poll/id/2" routerLinkActive="active"> Sondage 2 </a>
+		<a class="button is-block" routerLink="oldstuff/vote/poll/id/3" routerLinkActive="active">
+			Sondage 3 (dessins animés)
+		</a>
+		<a class="button is-block" routerLink="oldstuff/graphic/toto" routerLinkActive="active"> Graphique </a>
+	</div>
 
 	<a class="button is-block" routerLink="oldstuff/step/home" routerLinkActive="active">
 		<i class="fa fa-home" aria-hidden="true"></i> Accueil
 	</a>
-	<a class="button is-block" routerLink="oldstuff/step/creation" routerLinkActive="active"> Création </a>
-	<a class="button is-block" routerLink="oldstuff/step/date" routerLinkActive="active"> Les Dates </a>
-	<a class="button is-block" routerLink="oldstuff/step/answers" routerLinkActive="active"> Réponses </a>
-	<a class="button is-block" routerLink="oldstuff/step/visibility" routerLinkActive="active"> Visibilité </a>
-	<a class="button is-block" routerLink="oldstuff/step/resume" routerLinkActive="active"> Résumé </a>
-	<a class="button is-block" routerLink="oldstuff/step/end" routerLinkActive="active"> Confirmation </a>
-	<a class="button is-block" routerLink="oldstuff/step/admin"> Administration </a>
-
-	<hr />
-
-	<a class="button is-block" routerLink="oldstuff/step/kind" routerLinkActive="active"> Page démo </a>
-	<a class="button is-block" routerLink="oldstuff/vote/poll/id/1" routerLinkActive="active"> Sondage 1 </a>
-	<a class="button is-block" routerLink="oldstuff/vote/poll/id/2" routerLinkActive="active"> Sondage 2 </a>
-	<a class="button is-block" routerLink="oldstuff/vote/poll/id/3" routerLinkActive="active">
-		Sondage 3 (dessins animés)
-	</a>
-	<a class="button is-block" routerLink="oldstuff/graphic/toto" routerLinkActive="active"> Graphique </a>
 </nav>

src/app/core/components/sibebar/navigation/navigation.component.ts

@@ -3,6 +3,7 @@ import { Observable } from 'rxjs';
 
 import { Poll } from '../../../models/poll.model';
 import { MockingService } from '../../../services/mocking.service';
+import { environment } from '../../../../../environments/environment';
 
 @Component({
 	selector: 'app-navigation',
@@ -11,6 +12,7 @@ import { MockingService } from '../../../services/mocking.service';
 })
 export class NavigationComponent implements OnInit {
 	public _pollsAvailables: Observable<Poll[]> = this.mockingService.pollsAvailables;
+	public devModeEnabled = !environment.production;
 
 	constructor(private mockingService: MockingService) {}
 

src/app/core/core.module.ts

@@ -10,10 +10,11 @@ import { HomeComponent } from './components/home/home.component';
 import { LogoComponent } from './components/logo/logo.component';
 import { NavigationComponent } from './components/sibebar/navigation/navigation.component';
 import { throwIfAlreadyLoaded } from './guards/module-import.guard';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
 	declarations: [FooterComponent, HeaderComponent, HomeComponent, LogoComponent, NavigationComponent],
-	imports: [CommonModule, FormsModule, RouterModule, TranslateModule],
+	imports: [CommonModule, FormsModule, RouterModule, TranslateModule, SharedModule],
 	exports: [HeaderComponent, FooterComponent, NavigationComponent, LogoComponent],
 })
 export class CoreModule {

src/app/core/enums/language.enum.ts

@@ -1,4 +1,15 @@
 export enum Language {
-	FR = 'FR',
+	FR = 'fr',
-	EN = 'EN',
+	// BR = 'br',
+	// CA = 'ca',
+	// DE = 'de',
+	// EL = 'el',
+	EN = 'en',
+	// ES = 'es',
+	// GL = 'gl',
+	// HU = 'hu',
+	// IT = 'it',
+	// NL = 'nl',
+	// OC = 'oc',
+	// SV = 'sv',
 }

src/app/core/services/language.service.ts

@@ -15,7 +15,7 @@ export class LanguageService {
 	}
 
 	public setLanguage(language: Language): void {
-		this.translate.use(language.toString().toUpperCase());
+		this.translate.use(language.toString());
 	}
 
 	public getAvailableLanguages(): string[] {
@@ -48,17 +48,19 @@ export class LanguageService {
 
 		// set default language
 		if (!this.translate.currentLang) {
-			this.setLanguage(Language.EN);
+			this.setLanguage(Language.FR);
 		}
 	}
 
 	private setLanguageFromStorage(): void {
+		console.log('this.storageService.language', this.storageService.language);
 		if (this.storageService.language && this.translate.getLangs().includes(this.storageService.language)) {
 			this.setLanguage(this.storageService.language);
 		}
 	}
 	private setLanguageFromBrowser(): void {
 		const currentBrowserLanguage: Language = this.translate.getBrowserLang().toUpperCase() as Language;
+		console.log('currentBrowserLanguage', currentBrowserLanguage);
 		if (this.translate.getLangs().includes(currentBrowserLanguage)) {
 			this.setLanguage(currentBrowserLanguage);
 		}

src/app/features/administration/form/form.component.html

@@ -1,8 +1,8 @@
 <div class="admin-form">
-	<h1 i18n>
+	<h1>
 		{{ 'creation.title' | translate }}
 	</h1>
-	<span class="pre-selector" i18n>
+	<span class="pre-selector">
 		{{ 'creation.want' | translate }}
 	</span>
 	<button class="btn btn--warning" (click)="askInitFormDefault()">

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -1,14 +1,11 @@
-<div class="columns">
+<div class="selector">
-	<div class="column">
+	<img src="assets/img/icone-langue.svg" alt="langue" />
-		<p>Langue</p>
+	<div class="buttons has-addons">
-	</div>
+		<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label>
-	<div class="column">
+		<select class="select" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
-		<div class="buttons has-addons">
+			<option *ngFor="let language of availableLanguages" value="{{ language }}">
-			<select class="select" [(ngModel)]="currentLang">
+				{{ language }} - {{ 'LANGUAGES.' + language | translate }}
-				<option *ngFor="let language of availableLanguages" value="{{ language }}">
+			</option>
-					{{ 'LANGUAGES.' + language | translate }}
+		</select>
-				</option>
-			</select>
-		</div>
 	</div>
 </div>

src/app/shared/components/selectors/language-selector/language-selector.component.ts

@@ -10,7 +10,7 @@ import { LanguageService } from '../../../../core/services/language.service';
 	templateUrl: './language-selector.component.html',
 	styleUrls: ['./language-selector.component.scss'],
 })
-export class LanguageSelectorComponent implements OnInit, DoCheck {
+export class LanguageSelectorComponent implements OnInit {
 	public currentLang: Language;
 	public availableLanguages: string[] = [];
 
@@ -21,7 +21,7 @@ export class LanguageSelectorComponent implements OnInit, DoCheck {
 		this.currentLang = this.languageService.getLangage();
 	}
 
-	ngDoCheck(): void {
+	setLang(): void {
 		this.languageService.setLanguage(this.currentLang);
 	}
 }

src/assets/i18n/en.json

@@ -134,7 +134,18 @@
 		"colorblindText": "colorblind."
 	},
 	"LANGUAGES": {
-		"FR": "Français",
+		"DE": "Allemand",
-		"EN": "English"
+		"FR": "French",
+		"BR": "Breton",
+		"CA": "Canadien",
+		"EL": "el",
+		"ES": "Espagnol",
+		"EN": "English",
+		"GL": "gl",
+		"HU": "hu",
+		"IT": "Italien",
+		"NL": "Néérlandais",
+		"OC": "oc",
+		"SV": "sv"
 	}
 }

src/assets/i18n/fr.json

@@ -133,8 +133,22 @@
 		"choiceNotColorblind": "Je ne suis pas",
 		"colorblindText": "daltonien."
 	},
+	"selectors": {
+		"lang": "Sélectionner la langue"
+	},
 	"LANGUAGES": {
+		"DE": "Allemand",
 		"FR": "Français",
-		"EN": "English"
+		"BR": "Breton",
+		"CA": "Canadien",
+		"EL": "el",
+		"ES": "Espagnol",
+		"EN": "English",
+		"GL": "gl",
+		"HU": "hu",
+		"IT": "Italien",
+		"NL": "Néérlandais",
+		"OC": "oc",
+		"SV": "sv"
 	}
 }

src/environments/environment.ts

@@ -9,7 +9,7 @@ const backendApiUrlsInDev = {
 
 export const environment = {
 	production: false,
-	appTitle: 'FramaDate',
+	appTitle: 'FramaDate Funky',
 	appVersion: '2.0.0',
 	appLogo: 'assets/img/logo.png',
 	api: {