+
+
+
diff --git a/client/src/app/modules/core/account-settings-form/account-settings-form.component.ts b/client/src/app/modules/core/account-settings-form/account-settings-form.component.ts
index 0655e7cf..a5415d07 100644
--- a/client/src/app/modules/core/account-settings-form/account-settings-form.component.ts
+++ b/client/src/app/modules/core/account-settings-form/account-settings-form.component.ts
@@ -11,6 +11,10 @@ import { AccountService } from '../../../services/crud/account.service';
import { AccountSettings } from '../../../models/account-settings';
import { toastNotification } from '../../../ngrx/actions/notifications.actions';
import { Store } from '@ngrx/store';
+import { LanguageSelectComponent } from '../../shared/forms/controls/language-select/language-select.component';
+import { Tooltip } from 'primeng/tooltip';
+import { Divider } from 'primeng/divider';
+import { LanguageService } from '../../../services/core/language.service';
@Component({
selector: 'lc-account-settings-form',
@@ -22,6 +26,9 @@ import { Store } from '@ngrx/store';
TranslocoDirective,
FormDirective,
Button,
+ LanguageSelectComponent,
+ Tooltip,
+ Divider,
],
templateUrl: './account-settings-form.component.html',
styleUrl: './account-settings-form.component.scss',
@@ -37,10 +44,12 @@ export class AccountSettingsFormComponent implements OnInit {
private accountService = inject(AccountService);
private fb = inject(FormBuilder);
private store = inject(Store);
+ private languageService = inject(LanguageService);
private buildForm() {
this.accountSettingsForm = this.fb.group({
commentReplyMailsEnabled: [null],
+ language: [null],
});
}
@@ -58,6 +67,7 @@ export class AccountSettingsFormComponent implements OnInit {
this.accountSettingsForm.enable();
this.accountSettingsForm.patchValue({
commentReplyMailsEnabled: this.accountSettings.commentReplyMailsEnabled,
+ language: this.accountSettings.language,
});
}
@@ -68,6 +78,7 @@ export class AccountSettingsFormComponent implements OnInit {
accountSettings.commentReplyMailsEnabled = this.accountSettingsForm.get(
'commentReplyMailsEnabled',
).value;
+ accountSettings.language = this.accountSettingsForm.get('language').value;
this.accountService.updateAccountSettings(accountSettings).subscribe({
next: () => {
this.store.dispatch(toastNotification('ACCOUNT_SETTINGS_UPDATED'));
diff --git a/client/src/app/modules/core/app.config.ts b/client/src/app/modules/core/app.config.ts
index 40dce831..a0e07c73 100644
--- a/client/src/app/modules/core/app.config.ts
+++ b/client/src/app/modules/core/app.config.ts
@@ -27,13 +27,11 @@ import {
provideTransloco,
Translation,
TranslocoLoader,
- TranslocoService,
} from '@jsverse/transloco';
import { provideStore, Store } from '@ngrx/store';
import { InstanceSettingsService } from '../../services/crud/instance-settings.service';
import { MenuItemsService } from '../../services/crud/menu-items.service';
-import { selectGymMode } from '../../ngrx/selectors/instance-settings.selectors';
-import { forkJoin } from 'rxjs';
+import { concatMap } from 'rxjs';
import { map } from 'rxjs/operators';
import { updateInstanceSettings } from '../../ngrx/actions/instance-settings.actions';
import { MessageService } from 'primeng/api';
@@ -46,6 +44,7 @@ import { AppLevelAlertsEffects } from 'src/app/ngrx/effects/app-level-alerts.eff
import { NotificationsEffects } from '../../ngrx/effects/notifications.effects';
import { MatomoInitializerService, provideMatomo } from 'ngx-matomo-client';
import { provideTranslocoMessageformat } from '@jsverse/transloco-messageformat';
+import { LanguageService } from '../../services/core/language.service';
/**
* Transloco HTTP loader.
@@ -66,56 +65,34 @@ export class TranslocoHttpLoader implements TranslocoLoader {
}
}
-const preloadTranslations = (transloco: TranslocoService, store: Store) => {
- return () => {
- store.select(selectGymMode).subscribe((gymMode) => {
- if (gymMode && !transloco.getActiveLang().endsWith('-gym')) {
- transloco.setActiveLang(environment.language + '-gym');
- transloco.setFallbackLangForMissingTranslation({
- fallbackLang: environment.language,
- });
- } else if (!gymMode && transloco.getActiveLang().endsWith('-gym')) {
- transloco.setActiveLang(environment.language);
- }
- });
-
- return forkJoin(
- [
- '',
- 'crag/',
- 'sector/',
- 'area/',
- 'line/',
- 'topoImage/',
- 'linePath/',
- 'maps/',
- ].flatMap((path) => [
- transloco.load(path + environment.language),
- transloco.load(path + environment.language + '-gym'),
- ]),
- );
- };
-};
-
-const preloadMenus = (menuItemsService: MenuItemsService) => {
- return () => {
- return menuItemsService.getMenuItems();
- };
-};
-
-const preloadInstanceSettings = (
+/**
+ * Initializes instance settings and language on app startup.
+ * @param instanceSettingsService
+ * @param languageService
+ * @param store
+ */
+const initInstanceSettingsAndLanguage = (
instanceSettingsService: InstanceSettingsService,
+ languageService: LanguageService,
store: Store,
) => {
return () => {
return instanceSettingsService.getInstanceSettings().pipe(
map((instanceSettings) => {
store.dispatch(updateInstanceSettings({ settings: instanceSettings }));
+ return instanceSettings.language;
}),
+ concatMap(languageService.initApp.bind(languageService)),
);
};
};
+const preloadMenus = (menuItemsService: MenuItemsService) => {
+ return () => {
+ return menuItemsService.getMenuItems();
+ };
+};
+
const initMatomo = (
actions: Actions,
matomoInitializer: MatomoInitializerService,
@@ -132,6 +109,12 @@ const initMatomo = (
};
};
+export function localeFactory(): string {
+ return (
+ localStorage.getItem('preferredLanguage') || navigator.language || 'en-US'
+ );
+}
+
export const appConfig: ApplicationConfig = {
providers: [
{
@@ -171,7 +154,7 @@ export const appConfig: ApplicationConfig = {
},
{
provide: LOCALE_ID,
- useValue: environment.language,
+ useValue: localeFactory,
},
provideHttpClient(withInterceptorsFromDi()),
providePrimeNG({
@@ -185,16 +168,23 @@ export const appConfig: ApplicationConfig = {
}),
MessageService,
provideAnimationsAsync(),
- provideAppInitializer(() => {
- const initializerFn = preloadTranslations(
- inject(TranslocoService),
- inject(Store),
- );
- return initializerFn();
+ provideTransloco({
+ config: {
+ availableLangs: ['de', 'de-gym', 'en', 'en-gym', 'it', 'it-gym'],
+ defaultLang: 'de',
+ fallbackLang: 'en',
+ prodMode: environment.production,
+ reRenderOnLangChange: true,
+ missingHandler: {
+ useFallbackTranslation: true,
+ },
+ },
+ loader: TranslocoHttpLoader,
}),
provideAppInitializer(() => {
- const initializerFn = preloadInstanceSettings(
+ const initializerFn = initInstanceSettingsAndLanguage(
inject(InstanceSettingsService),
+ inject(LanguageService),
inject(Store),
);
return initializerFn();
@@ -221,19 +211,6 @@ export const appConfig: ApplicationConfig = {
provideMatomo({
mode: 'deferred',
}),
- provideTransloco({
- config: {
- availableLangs: ['de', 'de-gym'],
- defaultLang: environment.language,
- fallbackLang: 'de',
- prodMode: environment.production,
- reRenderOnLangChange: true,
- missingHandler: {
- useFallbackTranslation: true,
- },
- },
- loader: TranslocoHttpLoader,
- }),
provideTranslocoMessageformat(),
],
};
diff --git a/client/src/app/modules/core/instance-settings-form/instance-settings-form.component.html b/client/src/app/modules/core/instance-settings-form/instance-settings-form.component.html
index e56ad456..a7edf342 100644
--- a/client/src/app/modules/core/instance-settings-form/instance-settings-form.component.html
+++ b/client/src/app/modules/core/instance-settings-form/instance-settings-form.component.html
@@ -215,6 +215,22 @@
>
+
+
+
+
+
+
+
+
{{ t("imagesSettings") }}
diff --git a/client/src/app/modules/core/instance-settings-form/instance-settings-form.component.ts b/client/src/app/modules/core/instance-settings-form/instance-settings-form.component.ts
index ca0107f9..41f68b2b 100644
--- a/client/src/app/modules/core/instance-settings-form/instance-settings-form.component.ts
+++ b/client/src/app/modules/core/instance-settings-form/instance-settings-form.component.ts
@@ -41,6 +41,7 @@ import { IfErrorDirective } from '../../shared/forms/if-error.directive';
import { FaDefaultFormat } from '../../../enums/fa-default-format';
import { SingleImageUploadComponent } from '../../shared/forms/controls/single-image-upload/single-image-upload.component';
import { StartingPosition } from '../../../enums/starting-position';
+import { LanguageSelectComponent } from '../../shared/forms/controls/language-select/language-select.component';
@Component({
selector: 'lc-instance-settings-form',
@@ -65,6 +66,7 @@ import { StartingPosition } from '../../../enums/starting-position';
FormControlDirective,
IfErrorDirective,
SingleImageUploadComponent,
+ LanguageSelectComponent,
],
templateUrl: './instance-settings-form.component.html',
styleUrl: './instance-settings-form.component.scss',
@@ -171,6 +173,7 @@ export class InstanceSettingsFormComponent implements OnInit {
faDefaultFormat: [null],
defaultStartingPosition: [null, [Validators.required]],
rankingPastWeeks: [null],
+ language: [null],
});
}
@@ -200,6 +203,7 @@ export class InstanceSettingsFormComponent implements OnInit {
faDefaultFormat: this.instanceSettings.faDefaultFormat,
defaultStartingPosition: this.instanceSettings.defaultStartingPosition,
rankingPastWeeks: this.instanceSettings.rankingPastWeeks,
+ language: this.instanceSettings.language,
});
}
@@ -254,6 +258,8 @@ export class InstanceSettingsFormComponent implements OnInit {
).value;
instanceSettings.rankingPastWeeks =
this.instanceSettingsForm.get('rankingPastWeeks').value;
+ instanceSettings.language =
+ this.instanceSettingsForm.get('language').value;
this.instanceSettingsService
.updateInstanceSettings(instanceSettings)
.subscribe({
diff --git a/client/src/app/modules/core/menu/menu.component.html b/client/src/app/modules/core/menu/menu.component.html
index d2ccf2e7..559f8f3b 100644
--- a/client/src/app/modules/core/menu/menu.component.html
+++ b/client/src/app/modules/core/menu/menu.component.html
@@ -25,6 +25,13 @@
{{ t("searchPlaceholder") }}