Add translations language for matefun component

Frontend Angular 4/src/app/layout/matefun/matefun.component.html

@@ -3,7 +3,7 @@
     <div class="row">
         <div class="col-md-6">
             <ngb-tabset [destroyOnHide]=false (tabChange)="onChangeTab($event)">
-                <ngb-tab id="ProgramBtn"title="Programa">
+                <ngb-tab id="ProgramBtn" title='{{ "i18n.object.program" | translate | titlecase }}'>
                     <ng-template ngbTabContent>
 
             <div class="card">
@@ -11,39 +11,75 @@
                     <form>
                         <input type="text" name="archivo" class="nomArchivoInp form-control form-control-sm" 
                         [disabled]="!archivo.editable || archivo.estado=='Corregido' || archivo.estado == 'Entregado'"
-                        *ngIf="archivo" [(ngModel)]="archivo.nombre" (keyup)="archivoModificado()" placeholder="nombre del archivo" />
+                        *ngIf="archivo" [(ngModel)]="archivo.nombre" (keyup)="archivoModificado()" placeholder='{{ "i18n.msg.codemirror.fileName" | translate }}' />
 
-                        <button id="downloadFileButton" (click)="downloadFile()" style="margin-left: 10px; float: right;"  class="btn btn-sm btn-secondary" placement="bottom" ngbPopover="Exportar (Ctrl+E)" triggers="mouseenter:mouseleave" tiggers="click">
+                        <button
+                            id="downloadFileButton"
+                            (click)="downloadFile()"
+                            style="margin-left: 10px; float: right;"
+                            class="btn btn-sm btn-secondary"
+                            placement="bottom"
+                            ngbPopover='{{ "i18n.action.export" | translate | titleCase }} (Ctrl+E)'
+                            triggers="mouseenter:mouseleave"
+                            tiggers="click">
                             <i class="fa fa-download "></i>
                         </button>
-
-                        <button style="margin-left: 10px; float: right;" id="popover" class="btn btn-sm btn-secondary" placement="bottom" [ngbPopover]=popoverContent #popover="ngbPopover" popoverTitle="Configuración" tiggers="click">
+                        <button
+                            style="margin-left: 10px; float: right;"
+                            id="popover" class="btn btn-sm btn-secondary"
+                            placement="bottom"
+                            [ngbPopover]=popoverContent
+                            #popover="ngbPopover"
+                            popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
+                            tiggers="click">
                             <i class="fa fa-gear"></i>
                         </button>
-                        <div style="margin-left: 10px; float: right;" ngbPopover="Guardar archivo (Ctrl+G)" triggers="mouseenter:mouseleave" placement="bottom" >
+                        <div
+                            style="margin-left: 10px; float: right;"
+                            ngbPopover='{{ "i18n.action.save" | translate | titleCase }} {{ "i18n.object.file" | translate | titleCase }} (Ctrl+G)'
+                            triggers="mouseenter:mouseleave"
+                            placement="bottom" >
                             <button [disabled]="!modificado" (click)="guardarArchivo()" class="btn btn-sm btn-secondary" >
                                 <i class="fa fa-save"></i>
                             </button>
                         </div>
-                        <button style="margin-left: 10px; float: right;" (click)="reiniciarInterprete()" class="btn btn-sm btn-secondary" ngbPopover="Reiniciar intérprete (Ctrl+R)" triggers="mouseenter:mouseleave" placement="bottom">
+                        <button
+                            style="margin-left: 10px; float: right;"
+                            (click)="reiniciarInterprete()"
+                            class="btn btn-sm btn-secondary"
+                            ngbPopover='{{ "i18n.action.restart" | translate | titleCase }} {{ "i18n.object.interpreter" | translate | titleCase }} (Ctrl+R)'
+                            triggers="mouseenter:mouseleave"
+                            placement="bottom">
                             <i class="fa fa-refresh"></i>
                         </button>
-                        <button style="margin-left: 10px; float: right;" (click)="runCode()" class="btn btn-sm btn-secondary" ngbPopover="Cargar programa (Ctrl+P)" triggers="mouseenter:mouseleave" placement="bottom">
+                        <button
+                            style="margin-left: 10px; float: right;"
+                            (click)="runCode()"
+                            class="btn btn-sm btn-secondary"
+                            ngbPopover='{{ "i18n.action.load" | translate | titleCase }} {{ "i18n.object.program" | translate | titleCase }} (Ctrl+P)'
+                            triggers="mouseenter:mouseleave"
+                            placement="bottom">
                             <i class="fa fa-play"></i>
                         </button>
-                        <button style="float: right;" (click)="seleccionarDirectorio()" class="btn btn-sm btn-secondary" ngbPopover="Nuevo archivo (Ctrl+A)" triggers="mouseenter:mouseleave" placement="bottom">
+                        <button
+                            style="float: right;"
+                            (click)="seleccionarDirectorio()"
+                            class="btn btn-sm btn-secondary"
+                            ngbPopover='{{ "i18n.action.new" | translate | titleCase }} {{ "i18n.object.file" | translate | titleCase }} (Ctrl+A)'
+                            triggers="mouseenter:mouseleave"
+                            placement="bottom">
                             <i class="fa fa-plus"></i>
                         </button>
                         <ng-template #popoverContent style="width: 15em">
                             <div style="width: 12em">
                                 <div class="form-group">
-                                    <label>Tema:</label>
+                                    <label>{{ "i18n.object.theme" | translate | titleCase }}:</label>
                                     <select name="theme" class="form-control form-control-sm" #selectTheme (change)=updateConfig(selectTheme.value)>
                                         <option *ngFor="let theme of themes" [selected]="theme==configCodeMirror.theme" value='{{theme}}'>{{theme}}</option>
                                     </select>
                                 </div>
                                 <div class="form-group">
-                                    <label>Tamaño de fuente:</label>
+                                    <label>{{ "i18n.msg.codemirror.fontSize" | translate }}:</label>
                                     <div>
                                         <button class="btn btn-sm btn-secondary" (click)="aumentarFuente()">A⁺</button>
                                         <button class="btn btn-sm btn-secondary" (click)="disminuirFuente()">A⁻</button>
@@ -53,16 +89,17 @@
                                 <div class="form-group">
                                     <label>
                                         <input type="checkbox" style="width: 15px; display: inline-block;" name="argumentoF" class="form-control form-control-sm" [(ngModel)]=argumentoF>
-                                        Mostrar advertencias de uso de funciones
+                                        {{ "i18n.msg.codemirror.functionWarnings" | translate }}
                                     </label>
                                     <br>
                                     <label>
                                         <input type="checkbox" style="width: 15px; display: inline-block;" name="argumentoI" class="form-control form-control-sm" [(ngModel)]=argumentoI>
-                                        Mostrar advertencias de uso de operadores infijos
+                                        {{ "i18n.msg.codemirror.infixOperatorsWarnings" | translate }}
+                                        
                                     </label>
                                 </div>
                                 <div class="form-group">
-                                    <button class="btn btn-secondary" (click)="saveConfig()">Guardar</button>
+                                    <button class="btn btn-secondary" (click)="saveConfig()">{{ "i18n.action.save" | translate | titleCase }}</button>
                                 </div>
                             </div>
                         </ng-template>
@@ -79,12 +116,12 @@
                         <canvas-component (canvasComp)=canvasC></canvas-component>
                     </ng-template>
                 </ngb-tab> -->
-                <ngb-tab id="FigurasBtn2D" title="Figuras 2D">
+                <ngb-tab id="FigurasBtn2D" title='{{ "i18n.object.figures" | translate | titleCase }} 2D'>
                     <ng-template ngbTabContent>
                         <graph2D-component (graph2DComp)=graph2DComp></graph2D-component>
                     </ng-template>
                 </ngb-tab>
-                <ngb-tab id="FigurasBtn3D" title="Figuras 3D">
+                <ngb-tab id="FigurasBtn3D" title='{{ "i18n.object.figures" | translate | titleCase }} 3D'>
                     <ng-template ngbTabContent>
                         <graph3d-component (graph3DComp)=graph3DComp></graph3d-component>
                     </ng-template>

Frontend Angular 4/src/app/layout/matefun/matefun.component.ts

@@ -22,6 +22,8 @@ import { NotificacionService } from '../../shared/services/notificacion.service'
 import { Graph2DModule } from '../plotter/graph2D/graph2D.module';
 import { Graph2DComponent } from '../plotter/graph2D/graph2D.component';
 import { Graph3DComponent } from '../plotter/graph3D/graph3D.component';
+import { TranslateService } from '@ngx-translate/core';
+import { TitleCasePipe } from '../../shared/pipes/titlecase.pipe';
 
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
@@ -48,6 +50,7 @@ import * as npm from './../../../../package.json'
 var codeMirrorRef:any;
 var componentRef : any;
 var focus: any;
+
 @Component({
     moduleId: module.id,
     selector: 'matefun',     
@@ -58,7 +61,8 @@ var focus: any;
 
 
 export class MateFunComponent {
-
+    titlecasePipe: any;
+    translateService: any;
     consoleDisable: boolean = false;
     consolaVisible: boolean = true;
     cursorPanel: any;
@@ -101,7 +105,13 @@ export class MateFunComponent {
         private notifService: NotificacionService,
         private sessionService: SessionService,
         private dialogService:DialogService,
-        private usuarioService: UsuarioService) {
+        private usuarioService: UsuarioService,
+        public translate: TranslateService) {
+
+        // i18n
+        this.translateService = translate;
+        this.titlecasePipe = new TitleCasePipe();
+
         //si el archivo fue seteado en la session. 
         this.archivo = sessionService.getArchivo();
         if(!this.archivo || !this.archivo.id){
@@ -170,7 +180,8 @@ export class MateFunComponent {
         var y = cm.getCursor().ch; 
         x = (Number(x) + 1).toString();
         y = (Number(y) + 1).toString();
-        this.cursorPanelLabel.textContent = "Posición del cursor: (" + x + "," + y + ")";    
+        var cursorPositionTranslate = this.translateService.get('i18n.msg.codemirror.cursorPosition').value;
+        this.cursorPanelLabel.textContent = cursorPositionTranslate + ": (" + x + "," + y + ")";    
 
 
         this.cursorPanel = this.codemirror.instance.addPanel(node, {position: "bottom", stable: true});
@@ -181,7 +192,7 @@ export class MateFunComponent {
             var y = cm.getCursor().ch; 
             x = (Number(x) + 1).toString();
             y = (Number(y) + 1).toString();
-            that.cursorPanel.node.innerText = "Posición del cursor: (" + x + "," + y + ")";    
+            that.cursorPanel.node.innerText = cursorPositionTranslate + ": (" + x + "," + y + ")";    
         });
 
         this.codemirror.instance.on("keyHandled",function(cm,name,evt){

Frontend Angular 4/src/app/layout/matefun/matefun.module.ts

@@ -12,19 +12,23 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { NotificacionModule } from '../../notificacion/notificacion.module';
 import { Graph2DModule } from '../plotter/graph2D/graph2D.module';
 import { Graph3DModule } from '../plotter/graph3D/graph3D.module';
+import { I18nModule } from '../../shared/modules/translate/i18n.module';
+import { TitleCaseModule } from '../../shared/modules/titlecase.module';
 
 @NgModule({
     imports: [
-    CommonModule, 
-    FormsModule, 
-    CanvasModule, 
-    Graph2DModule,
-    Graph3DModule,
-    NotificacionModule,
-    MateFunRoutingModule,
-    CodemirrorModule,
-    NgbModule,    
-    BootstrapModalModule
+        CommonModule, 
+        FormsModule, 
+        CanvasModule, 
+        Graph2DModule,
+        Graph3DModule,
+        NotificacionModule,
+        MateFunRoutingModule,
+        CodemirrorModule,
+        NgbModule,    
+        BootstrapModalModule,
+        I18nModule,
+        TitleCaseModule
     ],      
     entryComponents: [
         ConfirmComponent,