i18n is working

This commit is contained in:
Richard Park 2020-01-10 10:17:36 +09:00
parent 68e90ccd03
commit c4c9f5d941
4 changed files with 63 additions and 29 deletions

View File

@ -407,6 +407,10 @@
"simpleView": "Simple View",
"preview": "Preview"
},
"languages": {
"ko": "Korean",
"en": "English"
},
"timezone": {
"Africa/Abidjan": "Africa/Abidjan",
"Africa/Accra": "Africa/Accra",

View File

@ -407,6 +407,10 @@
"simpleView": "간략 보기",
"preview": "미리 보기"
},
"languages": {
"ko": "한국어",
"en": "영어"
},
"timezone": {
"Africa/Abidjan": "아프리카/아비 장",
"Africa/Accra": "아프리카/아크라",

View File

@ -80,11 +80,11 @@
[value]="setting.locale"
(selectionChange)="onSelectionChangeLocale($event)"
>
<mat-option value="ko">
한국어 (대한민국)
</mat-option>
<mat-option value="en">
영어 (미국)
<mat-option
*ngFor="let language of languageList"
[value]="language.name"
>
{{ language.displayName }}
</mat-option>
</mat-select>
</mat-form-field>
@ -99,11 +99,11 @@
[value]="setting.hrInfoLocale"
(selectionChange)="onSelectionChangeHrInfoLocale($event)"
>
<mat-option value="ko">
한국어 (대한민국)
</mat-option>
<mat-option value="en">
영어 (미국)
<mat-option
*ngFor="let language of languageList"
[value]="language.name"
>
{{ language.displayName }}
</mat-option>
</mat-select>
</mat-form-field>
@ -111,7 +111,7 @@
<mat-divider></mat-divider>
<h1 mat-subheader>시간대</h1>
<h1 mat-subheader>{{ 'settings.genernal.timezone' | translate }}</h1>
<mat-list-item>
<mat-form-field fxFlexFill>
<mat-select

View File

@ -29,6 +29,11 @@ export interface TimezoneData {
name: string;
}
export interface LanguageData {
displayName: string;
name: string;
}
@Component({
selector: 'ucap-settings-general',
templateUrl: './general.component.html',
@ -53,6 +58,15 @@ export class GeneralComponent implements OnInit, OnDestroy {
// tslint:disable-next-line: variable-name
_timezoneList: TimezoneData[];
get languageList(): LanguageData[] {
return this._languageList;
}
set languageList(languageList: LanguageData[]) {
this._languageList = languageList;
}
// tslint:disable-next-line: variable-name
_languageList: LanguageData[];
langChangeSubscription: Subscription;
constructor(
@ -79,6 +93,7 @@ export class GeneralComponent implements OnInit, OnDestroy {
this.themeTabGroup.selectedIndex = themeIndex;
this.setTimezoneData();
this.setLanguageData();
this.langChangeSubscription = merge(
this.translateService.onLangChange,
@ -86,6 +101,7 @@ export class GeneralComponent implements OnInit, OnDestroy {
this.translateService.onTranslationChange
).subscribe(() => {
this.setTimezoneData();
this.setLanguageData();
});
}
@ -145,25 +161,35 @@ export class GeneralComponent implements OnInit, OnDestroy {
}
private setTimezoneData() {
this.translateService
.get('common.timezone')
.pipe(take(1))
.subscribe(timezoneData => {
let timezoneList: TimezoneData[] = [];
for (const name of moment.tz.names()) {
const displayName = `(UTC${moment.tz(name).format('Z')}) ${
timezoneData[name]
}`;
timezoneList.push({
displayName,
name
});
}
timezoneList = timezoneList.sort((a: TimezoneData, b: TimezoneData) => {
return a.displayName.localeCompare(b.displayName);
});
const timezoneData = this.translateService.instant('common.timezone');
this.timezoneList = timezoneList;
let timezoneList: TimezoneData[] = [];
for (const name of moment.tz.names()) {
const displayName = `(UTC${moment.tz(name).format('Z')}) ${
timezoneData[name]
}`;
timezoneList.push({
displayName,
name
});
}
timezoneList = timezoneList.sort((a: TimezoneData, b: TimezoneData) => {
return a.displayName.localeCompare(b.displayName);
});
this.timezoneList = timezoneList;
}
private setLanguageData() {
const languageData = this.translateService.instant('common.languages');
const languageList: LanguageData[] = [];
for (const key in languageData) {
if (languageData.hasOwnProperty(key)) {
languageList.push({ displayName: languageData[key], name: key });
}
}
this.languageList = languageList;
}
}