🐛 select lang wigthout lifecycle bug

This commit is contained in:
tykayn 2020-11-05 14:39:01 +01:00 committed by Baptiste Lemoine
parent 60eeddbf21
commit 10c1930e4d
15 changed files with 112 additions and 51 deletions

View File

@ -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>
-->

View File

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

View File

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

View File

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

View File

@ -2,9 +2,6 @@
<div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> Tous les sondages </a> <a class="navbar-link"> Tous les sondages </a>
<div class="navbar-dropdown"> <div class="navbar-dropdown">
<a class="navbar-item" routerLink="/poll/inexistentPoll/consultation" routerLinkActive="is-active">
« inexistentPoll »
</a>
<a <a
class="navbar-item" class="navbar-item"
*ngFor="let poll of _pollsAvailables | async" *ngFor="let poll of _pollsAvailables | async"
@ -18,7 +15,7 @@
<hr /> <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> <a class="navbar-link"> Modules </a>
<div class="navbar-dropdown"> <div class="navbar-dropdown">
<a class="navbar-item" routerLink="oldstuff" routerLinkActive="is-active"> <a class="navbar-item" routerLink="oldstuff" routerLinkActive="is-active">
@ -34,28 +31,32 @@
Participation Participation
</a> </a>
</div> </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"> <a class="button is-block" routerLink="oldstuff/step/home" routerLinkActive="active">
<i class="fa fa-home" aria-hidden="true"></i> Accueil <i class="fa fa-home" aria-hidden="true"></i> Accueil
</a> </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> </nav>

View File

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

View File

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

View File

@ -1,4 +1,15 @@
export enum Language { 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',
} }

View File

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

View File

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

View File

@ -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>
</div> </div>

View File

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

View File

@ -134,7 +134,18 @@
"colorblindText": "colorblind." "colorblindText": "colorblind."
}, },
"LANGUAGES": { "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"
} }
} }

View File

@ -133,8 +133,22 @@
"choiceNotColorblind": "Je ne suis pas", "choiceNotColorblind": "Je ne suis pas",
"colorblindText": "daltonien." "colorblindText": "daltonien."
}, },
"selectors": {
"lang": "Sélectionner la langue"
},
"LANGUAGES": { "LANGUAGES": {
"DE": "Allemand",
"FR": "Français", "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"
} }
} }

View File

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