Add translations language for graph3D component

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html

@@ -5,8 +5,7 @@
 				type="button" 
 				class="btn btn-secondary"
 				style="min-width: 70px;"
-				(click)=changeZoomType()
-			>
+				(click)=changeZoomType()>
 				{{getZoom3DTypeName(graphProps.zoomType)}}
 			</button>
 			<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
@@ -16,8 +15,7 @@
 						*ngFor="let type of [1,2,3,4]" 
 						class="dropdown-item"
 						[disabled]="type === graphProps.zoomType"
-						(click)=changeZoomType(type)
-					>
+						(click)=changeZoomType(type)>
 						{{getZoom3DTypeName(type)}}
 					</button>
 				</div>
@@ -25,32 +23,29 @@
 		</div> 
 
 		<button 
-			ngbPopover="Zoom +"  
+			ngbPopover='{{ "i18n.action.zoom" | translate | titleCase}} +' 
 			triggers="mouseenter:mouseleave" 
 			data-placement="bottom" 
 			class="btn btn-sm btn-secondary" 
-			(click)=zoomIn() 
-		>
+			(click)=zoomIn() >
 			<i class="fa fa-plus"></i>
 		</button>
 
 		<button 
-			ngbPopover="Zoom -"  
+			ngbPopover='{{ "i18n.action.zoom" | translate | titleCase}} -'  
 			triggers="mouseenter:mouseleave" 
 			data-placement="bottom" 
 			class="btn btn-sm btn-secondary" 
-			(click)=zoomOut() 
-		>
+			(click)=zoomOut() >
 			<i class="fa fa-minus"></i>
 		</button>
 
 		<button 
-			ngbPopover="Centrar"  
+			ngbPopover='{{ "i18n.action.center" | translate | titleCase}}'  
 			triggers="mouseenter:mouseleave" 
 			data-placement="bottom" 
 			class="btn btn-sm btn-secondary" 
-			(click)=center() 
-		>
+			(click)=center() >
 			<i class="fa fa-arrows"></i>
 		</button>
 
@@ -61,8 +56,7 @@
 			[ngbPopover]=popoverAxesSize
 			popoverTitle="Rango de ejes"
 			#popover="ngbPopover"
-			tiggers="click"
-		>
+			tiggers="click">
 			<i class="fa fa-arrows-h"></i>
 		</button>
 		<ng-template #popoverAxesSize>
@@ -140,12 +134,11 @@
 		
 
 		<button 
-			ngbPopover="Borrar"  
+			ngbPopover='{{ "i18n.action.delete" | translate | titleCase }}'  
 			triggers="mouseenter:mouseleave" 
 			data-placement="bottom" 
 			class="btn btn-sm btn-secondary" 
-			(click)=clear() 
-		>
+			(click)=clear() >
 			<i class="fa fa-trash"></i>
 		</button>
 
@@ -155,7 +148,7 @@
 			placement="bottom" 
 			tiggers="click"
 			class="btn btn-sm btn-secondary" 
-			popoverTitle="Configuración"
+			popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
 		>
 			<i class="fa fa-gear"></i>
 		</button>
@@ -164,12 +157,12 @@
 			<div style="width: 140px;">
 				<label class="d-block">
 					<input type="checkbox"[checked]=graphProps.showAxes (click)="changeAxesVisibility()">
-					Mostrar grilla
+					{{ "i18n.object.grid" | translate | titleCase }}
 				</label>
 
 				<div style="display: flex;">
 					<span style="margin-right: 8px; align-self: center;">
-						Quality:
+						{{ "i18n.object.quality" | translate | titleCase }}:
 					</span>
 
 					<input 

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit, ViewChild, ElementRef, NgZone, AfterViewInit } from
 import * as graph3DLib from 'graph3D';
 import { GHCIService } from '../../../shared/services/ghci.service';
 import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps, debounce } from './graph3D.helper';
+import { TranslateService } from '@ngx-translate/core';
+import { TitleCasePipe } from '../../../shared/pipes/titlecase.pipe';
 
 @Component({
   selector: 'graph3d-component',
@@ -15,6 +17,9 @@ export class Graph3DComponent implements AfterViewInit {
 
   private ghciServiceSub: any;
 
+  private translateService: any;
+  private titlecasePipe: any;
+
   @ViewChild('graph3DElement') 
   private graph3DRef: ElementRef;
 
@@ -27,9 +32,13 @@ export class Graph3DComponent implements AfterViewInit {
     speed: 1000
   };
   
-  constructor(ghciService: GHCIService, private zone: NgZone) {
+  constructor(ghciService: GHCIService, private zone: NgZone, public translate: TranslateService) {
     const self = this;
 
+    // i18n
+    this.translateService = translate;
+    this.titlecasePipe = new TitleCasePipe();
+
     this.ghciServiceSub = ghciService.messages.subscribe(
       message => {
         if (message.tipo == "canvas3D") {
@@ -177,13 +186,13 @@ export class Graph3DComponent implements AfterViewInit {
   public getZoom3DTypeName = (type: Zoom3DType) => {
     switch (type) {
       case Zoom3DType.Normal:
-        return 'Normal';
+        return this.titlecasePipe.transform(this.translateService.get('i18n.object.normal').value);
       case Zoom3DType.XAxis:
-        return 'Eje x';
+        return this.titlecasePipe.transform(this.translateService.get('i18n.object.axis').value) + ' x';
       case Zoom3DType.YAxis:
-        return 'Eje y';
+        return this.titlecasePipe.transform(this.translateService.get('i18n.object.axis').value) + ' y';
       case Zoom3DType.ZAxis:
-        return 'Eje z';
+        return this.titlecasePipe.transform(this.translateService.get('i18n.object.axis').value) + ' z';
     }
   }
 }

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.module.ts

@@ -6,10 +6,19 @@ import { FormsModule } from '@angular/forms';
 import { Graph3DComponent } from './graph3D.component';
 import { AnimationControlComponent } from '../animation-control/animation-control.component';
 import { DirectivesModule } from '../../../shared/directives/directives.module';
-
+import { I18nModule } from '../../../shared/modules/translate/i18n.module';
+import { TitleCaseModule } from '../../../shared/modules/titlecase.module';
 
 @NgModule({
-    imports: [FormsModule, RouterModule, CommonModule, NgbModule, DirectivesModule],
+    imports: [
+        FormsModule,
+        RouterModule,
+        CommonModule,
+        NgbModule,
+        DirectivesModule,
+        I18nModule,
+        TitleCaseModule
+    ],
     declarations: [
         AnimationControlComponent, 
         Graph3DComponent