feat: add translate for periodic table

phodal · Apr 15, 2020 · f04e8c8 · f04e8c8
1 parent 91d7fe2
commit f04e8c8
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/src/app/features/periodic-table/periodic-table.module.ts b/src/app/features/periodic-table/periodic-table.module.ts
@@ -6,6 +6,8 @@ import { AtomDetailsComponent } from './atom-details/atom-details.component';
 import { AtomDialogComponent } from './atom-dialog/atom-dialog.component';
 import { AtomCategoryComponent } from './atom-category/atom-category.component';
 import { CustomMaterialModule } from '../../shared/custom-material.module';
+import { HttpClientModule } from '@angular/common/http';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
   declarations: [
@@ -22,6 +24,13 @@ import { CustomMaterialModule } from '../../shared/custom-material.module';
     AtomDialogComponent,
     AtomCategoryComponent,
   ],
-  imports: [CommonModule, CustomMaterialModule],
+  imports: [
+    CommonModule,
+    CustomMaterialModule,
+    HttpClientModule,
+    TranslateModule.forChild({
+      isolate: false,
+    }),
+  ],
 })
 export class PeriodicTableModule {}
diff --git a/src/app/features/periodic-table/periodic-table/periodic-table.component.spec.ts b/src/app/features/periodic-table/periodic-table/periodic-table.component.spec.ts
@@ -2,14 +2,27 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PeriodicTableComponent } from './periodic-table.component';
 import { SharedModule } from '../../../shared/shared.module';
+import {
+  TranslateFakeLoader,
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
 
 describe('PeriodicTableComponent', () => {
   let component: PeriodicTableComponent;
   let fixture: ComponentFixture<PeriodicTableComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [SharedModule],
+      imports: [
+        SharedModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateFakeLoader,
+          },
+        }),
+      ],
       declarations: [PeriodicTableComponent],
     }).compileComponents();
   }));

diff --git a/src/app/features/periodic-table/periodic-table/periodic-table.component.ts b/src/app/features/periodic-table/periodic-table/periodic-table.component.ts
@@ -12,6 +12,7 @@ import {
 import { combineLatest, Observable, Subject } from 'rxjs';
 import { debounceTime, map, startWith, takeUntil, tap } from 'rxjs/operators';
 import { Atom, HighlightState } from '../shared';
+import { TranslateService } from '@ngx-translate/core';
 
 const MAX_ROW_INDEX = 7;
 const MAX_COL_INDEX = 18;
@@ -74,7 +75,8 @@ export class PeriodicTableComponent implements OnInit, OnChanges {
   currentColHeader: number;
   selectCategory: string;
 
-  categories = [
+  categories = [];
+  zhCategories = [
     { type: 'scm', displayName: '源码管理' },
     { type: 'packageManage', displayName: '制品管理' },
     { type: 'database', displayName: '数据库自动化' },
@@ -95,12 +97,38 @@ export class PeriodicTableComponent implements OnInit, OnChanges {
     { type: 'platform', displayName: '平台' },
   ];
 
-  constructor(private http: HttpClient) {
+  enCategories = [
+    { type: 'scm', displayName: 'SCM' },
+    { type: 'packageManage', displayName: 'Package Mgr.' },
+    { type: 'database', displayName: 'Database Mgr.' },
+    { type: 'testing', displayName: 'Testing' },
+    { type: 'config', displayName: 'Config Mgr.' },
+    { type: 'ci', displayName: 'CI' },
+    { type: 'deployment', displayName: 'Deployment' },
+    { type: 'security', displayName: 'Security' },
+    { type: 'containers', displayName: 'Containers' },
+    { type: 'releaseOrchestration', displayName: 'Release Orc.' },
+    { type: 'openCloud', displayName: 'OS Cloud' },
+    { type: 'publicCloud', displayName: 'Public Cloud' },
+    { type: 'monitoring', displayName: 'Monitoring' },
+    { type: 'analytics', displayName: 'Analysis' },
+    { type: 'aiops', displayName: 'AIOps' },
+    { type: 'collaboration', displayName: 'Collaboration' },
+    { type: 'operation', displayName: 'Ops' },
+    { type: 'platform', displayName: 'Platform' },
+  ];
+
+  constructor(private http: HttpClient, public translate: TranslateService) {
     this.currentAtom = null;
     this.currentRowHeader = null;
     this.currentColHeader = null;
     this.atoms = null;
     this.selectCategory = '';
+    if (this.translate.currentLang === 'en') {
+      this.categories = this.enCategories;
+    } else {
+      this.categories = this.zhCategories;
+    }
   }
 
   ngOnInit() {