ing

angular.json

@@ -27,7 +27,8 @@
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets/image"
+              "src/assets/image",
+              "src/assets/i18n"
             ],
             "styles": [
               "node_modules/primeicons/primeicons.css",

src/app/app.component.ts

@@ -5,6 +5,8 @@ import { Store, select } from '@ngrx/store';
 import { of, Subscription } from 'rxjs';
 import { map, catchError, take } from 'rxjs/operators';
 
+import { TranslateService } from '@ngx-translate/core';
+
 import { ElectronProxyService } from './service/electron-proxy.service';
 import { MenuEvent } from '../commons/type';
 import * as AppStore from './store/app';
@@ -31,11 +33,14 @@ export class AppComponent implements OnInit, AfterContentInit, AfterViewInit, On
   public constructor(
     private changeDetector: ChangeDetectorRef,
     private store: Store<any>,
+    private translateService: TranslateService,
     private electronProxyService: ElectronProxyService,
   ) {
     // this.showTitleBar = !__LINUX__;
     this.showTitleBar = false;
     this.block = false;
+    this.translateService.setDefaultLang('en');
+    this.translateService.use('en');
   }
 
   ngOnInit(): void {
@@ -65,13 +70,19 @@ export class AppComponent implements OnInit, AfterContentInit, AfterViewInit, On
             case 'show-print':
               this.displayPrint = true;
               break;
+            case 'change-language-english':
+              this.translateService.use('en');
+              break;
+            case 'change-language-korean':
+              this.translateService.use('ko');
+              break;
             default:
               break;
           }
           this.changeDetector.detectChanges();
         }),
         catchError(error => {
-          return of();
+          return of(error);
         }),
       )
       .subscribe();

src/app/app.module.ts

@@ -36,7 +36,8 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
       loader: {
         provide: TranslateLoader,
         useExisting: I18nService,
-      }
+      },
+      useDefaultLang: true,
     }),
     PerfectScrollbarModule,
 

src/app/component/infra/detail/host.component.html

@@ -19,37 +19,37 @@
   </div>
 
   <p-tabView class="detail-content" (onChange)="onTabViewChange($event)">
-    <p-tabPanel header=" General">
+    <p-tabPanel [header]="'infra.detail.title.general' | translate">
       <div of-auto-height key="0">
         <perfect-scrollbar>
 
           <ul class="key-value">
 
             <li *ngIf="host.address">
-              IP Address
+              {{ 'infra.detail.general.ip_address' | translate }}
               <span class="meta-value">{{host.address}}</span>
             </li>
 
             <li *ngIf="host.hostType">
-              Type
+              {{ 'infra.detail.general.type' | translate }}
               <span class="meta-value">{{host.hostType}}</span>
             </li>
             <li *ngIf="host.hostVendor">
-              Vendor
+              {{ 'infra.detail.general.vendor' | translate }}
               <span class="meta-value">{{host.hostVendor}}</span>
             </li>
             <li *ngIf="host.hostModel">
-              Model
+              {{ 'infra.detail.general.model' | translate }}
               <span class="meta-value">{{host.hostModel}}</span>
             </li>
 
             <li *ngIf="host.osType">
-              OS
+              {{ 'infra.detail.general.os' | translate }}
               <span class="meta-value">{{host.osType}}</span>
             </li>
 
             <li *ngIf="host.mac">
-              Mac Address
+              {{ 'infra.detail.general.mac_address' | translate }}
               <span class="meta-value">{{host.mac}}</span>
             </li>
           </ul>
@@ -57,7 +57,7 @@
       </div>
     </p-tabPanel>
 
-    <p-tabPanel header="Metadata" *ngIf="host.meta">
+    <p-tabPanel [header]="'infra.detail.title.metadata' | translate" *ngIf="host.meta">
       <div of-auto-height key="1">
         <perfect-scrollbar>
           <ul class="detail-content-meta-title">
@@ -76,7 +76,7 @@
       </div>
     </p-tabPanel>
 
-    <p-tabPanel header="Ports" *ngIf="host.portList">
+    <p-tabPanel [header]="'infra.detail.title.ports' | translate" *ngIf="host.portList">
       <div of-auto-height key="2">
         <perfect-scrollbar>
           <ul class="key-value">
@@ -88,24 +88,24 @@
       </div>
     </p-tabPanel>
 
-    <p-tabPanel header="Health">
+    <p-tabPanel [header]="'infra.detail.title.health' | translate">
       <div of-auto-height key="3">
         <perfect-scrollbar>
           <div class="ui-g">
             <div class="ui-ping-row">
-              <div class="title">Count </div>
+              <div class="title">{{ 'infra.detail.health.count' | translate }} </div>
               <p-spinner size="1" [(ngModel)]="count" [min]="1" [max]="30"></p-spinner>
             </div>
             <div class="ui-ping-row">
-              <div class="title">Interval </div>
+              <div class="title">{{ 'infra.detail.health.interval' | translate }} </div>
               <p-spinner size="1" [(ngModel)]="interval" [min]="0" [max]="5"></p-spinner>
             </div>
             <div class="ui-ping-row">
-              <div class="title">Deadline </div>
+              <div class="title">{{ 'infra.detail.health.deadline' | translate }} </div>
               <p-spinner size="1" [(ngModel)]="deadline" [min]="1" [max]="10"></p-spinner>
             </div>
           </div>
-          <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
+          <button type="button" pButton [label]="'infra.detail.health.ping' | translate" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
 
           <div class="ui-ping-result-textarea">
             <p-progressBar *ngIf="pingWaiting" mode="indeterminate"></p-progressBar>

src/app/component/infra/display/map.component.html

@@ -53,16 +53,16 @@
   </svg>
   <p-card class="ui-map-info" *ngIf="displaySummary">
     <div class="ui-map-info-row ui-border-bottom">
-      <div>Total Hosts: </div>{{displaySummary.totalHosts}}
+      <div>{{ 'discovery.summary.total_hosts' | translate }}: </div>{{displaySummary.totalHosts}}
     </div>
     <div class="ui-map-info-row ui-border-bottom">
-      <div>Total Ports: </div>{{displaySummary.totalPorts}}
+      <div>{{ 'discovery.summary.total_ports' | translate }}: </div>{{displaySummary.totalPorts}}
     </div>
     <div class="ui-map-info-row ui-border-bottom">
-      <div>Total Services: </div>{{displaySummary.totalServices}}
+      <div>{{ 'discovery.summary.total_services' | translate }}: </div>{{displaySummary.totalServices}}
     </div>
     <div class="ui-map-info-row">
-      <div>Elapsed: </div>{{displaySummary.elapsedTime}}
+      <div>{{ 'discovery.summary.elapsed' | translate }}: </div>{{displaySummary.elapsedTime}}
     </div>
   </p-card>
 </div>

src/app/component/layout/toolbar/scanner-setting-dropdown.component.html

@@ -29,7 +29,7 @@
   <div class="ui-g">
     <div class="ui-g-12">
       <div class="ui-g-2">
-        <h3>IP</h3>
+        <h3>{{ 'network.ip' | translate }}</h3>
       </div>
       <div class="ui-g-5">
         <p-radioButton name="ipType" value="V4" label="V4" [(ngModel)]="ipType"></p-radioButton>
@@ -37,7 +37,7 @@
       <div class="ui-g-5">
         <p-radioButton name="ipType" value="V6" label="V6" [(ngModel)]="ipType" [disabled]="true"></p-radioButton>
       </div>
-      <div class="ui-g-10 ui-g-offset-2">Range :
+      <div class="ui-g-10 ui-g-offset-2">{{ 'network.range' | translate }} :
         <input type="text" pInputText placeholder="192.168.1.1" style="width:100px;" [(ngModel)]="firstIP"
           (ngModelChange)="validateIP($event, 0)" (keypress)="ipPressed($event)"> -
         <input type="text" pInputText placeholder="192.168.1.254" style="width:100px;" [(ngModel)]="lastIP"
@@ -52,7 +52,7 @@
   <div class="ui-g">
     <div class="ui-g-12">
       <div class="ui-g-2">
-        <h3>Port</h3>
+        <h3>{{ 'network.port' | translate }}</h3>
       </div>
       <div class="ui-g-5">
         <p-checkbox name="includePortType" value="TCP" label="TCP" [(ngModel)]="includePortType" (onChange)="validateTCP($event)"></p-checkbox>
@@ -60,7 +60,7 @@
       <div class="ui-g-5">
         <p-checkbox name="includePortType" value="UDP" label="UDP" [(ngModel)]="includePortType" (onChange)="validateUDP($event)"></p-checkbox>
       </div>
-      <div class="ui-g-10 ui-g-offset-2">Range :
+      <div class="ui-g-10 ui-g-offset-2">{{ 'network.range' | translate }} :
         <input type="text" pInputText placeholder="1" style="width:100px;" [(ngModel)]="firstPort" min="1" max="65535"
           maxlength="5" (ngModelChange)="validatePort($event, 0)" (keypress)="portPressed($event)"> -
         <input type="text" pInputText placeholder="65535" style="width:100px;" [(ngModel)]="lastPort" min="1" max="65535"
@@ -96,8 +96,8 @@
   </p-panel>
    -->
   <div class="ui-g-12 ui-button-right">
-    <button type="button" pButton label="Reset" (click)="setDefault()" class="ui-button-secondary"></button>
+    <button type="button" pButton [label]="'ui.button.reset' | translate" (click)="setDefault()" class="ui-button-secondary"></button>
-    <button type="button" pButton label="Apply" (click)="done()" [disabled]="portErrMsg || ipErrMsg"></button>
+    <button type="button" pButton [label]="'ui.button.apply' | translate" (click)="done()" [disabled]="portErrMsg || ipErrMsg"></button>
   </div>
   <!-- <p-footer>
     Footer content here

src/app/pages/home/home-page.component.html

@@ -10,8 +10,8 @@
       <img src="assets/image/logo/overFlow_CI_white_90.png">
       <h1>Network Scanner </h1>
       <br>
-      <b>이용해 주셔서 감사합니다.</b>
+      <b>{{ 'pages.welcome.thank_you_for_using' | translate }}</b>
-      <br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
+      <br>{{ 'pages.welcome.how_to_use' | translate }}
     </div>
   </div>
 

src/app/service/electron-proxy.service.ts

@@ -65,12 +65,12 @@ export class ElectronProxyService {
     ipcRenderer.send('get-app-menu');
   }
 
-  public getRendererI18n({ filePath, fileName }: { filePath: string, fileName: string }): Promise<any> {
+  public getRendererI18n({ filePath, fileName }: { filePath: string, fileName: string }): Observable<any> {
-    return new Promise<any>((resolve, reject) => {
+    return Observable.create(function (observer) {
       ipcRenderer.once(
         'get-renderer-i18n-result',
         (event: Electron.IpcMessageEvent, { result }: { result: any }) => {
-          resolve(result);
+          observer.next(result);
         }
       );
 

src/app/service/i18n.service.ts

@@ -17,14 +17,14 @@ export class I18nService extends TranslateLoader {
     super();
 
     this.prefix = 'assets/i18n';
-    this.suffix = '.json';
+    this.suffix = 'json';
   }
 
   getTranslation(lang: string): Observable<any> {
-    return of(this.electronProxyService.getRendererI18n({
+    return this.electronProxyService.getRendererI18n({
-      filePath: `${this.prefix}`,
+      filePath: __DEV__ ? `src/${this.prefix}` : `${this.prefix}`,
       fileName: `${lang}.${this.suffix}`,
-    }));
+    });
   }
 
 }

src/assets/i18n/en.json

@@ -11,6 +11,12 @@
       "toggle_full_screen": "Toggle Full Screen"
     }
   },
+  "pages": {
+    "welcome": {
+      "thank_you_for_using": "Thanks for using.",
+      "how_to_use": "Click the button on the left to start scanning with the default settings. If you want to change the setting, you can change it by clicking the setting area at the top."
+    }
+  },
   "network": {
     "ip": "IP",
     "port": "Port",
@@ -29,7 +35,8 @@
         "type": "Type",
         "vendor": "Vendor",
         "model": "Model",
-        "os": "OS"
+        "os": "OS",
+        "mac_address": "Mac Address"
       },
       "health": {
         "count": "Count",
@@ -40,9 +47,11 @@
     }
   },
   "discovery": {
-    "total_hosts": "Total Hosts",
+    "summary": {
-    "total_ports": "Total Ports",
+      "total_hosts": "Total Hosts",
-    "total_services": "Total Services",
+      "total_ports": "Total Ports",
-    "elapsed": "Elapsed"
+      "total_services": "Total Services",
+      "elapsed": "Elapsed"
+    }
   }
 }

src/assets/i18n/ko.json

@@ -1,6 +1,57 @@
 {
-  "HOME": {
+  "ui": {
-    "TITLE": "Hello Angular with ngx-translate!",
+    "button": {
-    "SELECT": "Change language"
+      "apply": "적용",
+      "reset": "초기화"
+    },
+    "menu": {
+      "save": "Save",
+      "export_as": "Export as",
+      "print": "Print",
+      "toggle_full_screen": "Toggle Full Screen"
+    }
+  },
+  "pages": {
+    "welcome": {
+      "thank_you_for_using": "이용해 주셔서 감사합니다.",
+      "how_to_use": "좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다."
+    }
+  },
+  "network": {
+    "ip": "아이피",
+    "port": "포트",
+    "range": "범위"
+  },
+  "infra": {
+    "detail": {
+      "title": {
+        "general": "일반",
+        "metadata": "메타데이타",
+        "ports": "포트",
+        "health": "상태 체크"
+      },
+      "general": {
+        "ip_address": "아이피 주소",
+        "type": "유형",
+        "vendor": "벤더",
+        "model": "모델",
+        "os": "운영체제",
+        "mac_address": "Mac 주소"
+      },
+      "health": {
+        "count": "반복횟수",
+        "interval": "Interval",
+        "deadline": "Deadline",
+        "ping": "Ping"
+      }
+    }
+  },
+  "discovery": {
+    "summary": {
+      "total_hosts": "호스트",
+      "total_ports": "포트",
+      "total_services": "서비스",
+      "elapsed": "소요 시간"
+    }
   }
 }

src/electron/main.ts

@@ -236,7 +236,7 @@ app.on('ready', () => {
     ) => {
       const rBuf = fse.readFileSync(root(filePath, fileName));
       const i18n = JSON.parse(rBuf.toString('utf8'));
-      event.sender.send('get-renderer-i18n-result', { i18n });
+      event.sender.send('get-renderer-i18n-result', { result: i18n });
     }
   );
 

src/electron/menu/build-default.ts

@@ -178,13 +178,11 @@ export function buildDefaultMenu(
             label: __DARWIN__ ? 'English…' : 'English…',
             id: 'language-english',
             click: emit('change-language-english'),
-            enabled: false,
           },
           {
             label: __DARWIN__ ? 'Korean…' : 'Korean…',
             id: 'language-korean',
             click: emit('change-language-korean'),
-            enabled: false,
           },
         ],
       },