From 75e3b8521625e7f3ca0e9d487d8d93c58e8f1370 Mon Sep 17 00:00:00 2001
From: Diego Rey <diego.despaux@izundo.com>
Date: Fri, 23 Nov 2018 11:39:15 -0300
Subject: [PATCH] Add i18n module shared and fix language switcher styles
---
Frontend Angular 4/.angular-cli.json | 1 +
Frontend Angular 4/package-lock.json | 7 +++-
Frontend Angular 4/package.json | 1 +
Frontend Angular 4/src/app/app.component.html | 5 +--
Frontend Angular 4/src/app/app.component.ts | 1 -
.../src/app/login/login.component.html | 29 +++++++++++------
.../src/app/login/login.component.scss | 32 +++++++++++++++++++
.../src/app/login/login.component.ts | 12 +++++--
.../src/app/login/login.module.ts | 3 ++
Frontend Angular 4/src/app/shared/config.ts | 7 ++--
.../src/app/shared/modules/index.ts | 1 +
.../shared/modules/translate/i18n.module.ts | 10 ++++++
Frontend Angular 4/src/assets/i18n/en.json | 7 +++-
Frontend Angular 4/src/assets/i18n/es.json | 7 +++-
14 files changed, 101 insertions(+), 22 deletions(-)
create mode 100644 Frontend Angular 4/src/app/shared/modules/translate/i18n.module.ts
diff --git a/Frontend Angular 4/.angular-cli.json b/Frontend Angular 4/.angular-cli.json
index ce65410..b034b58 100644
--- a/Frontend Angular 4/.angular-cli.json
+++ b/Frontend Angular 4/.angular-cli.json
@@ -21,6 +21,7 @@
"prefix": "app",
"styles": [
"../node_modules/font-awesome/css/font-awesome.css",
+ "../node_modules/flag-icon-css/css/flag-icon.min.css",
"styles/app.scss",
"styles/console.css",
"../node_modules/tippy.js/dist/tippy.css",
diff --git a/Frontend Angular 4/package-lock.json b/Frontend Angular 4/package-lock.json
index 3b36451..0339d88 100644
--- a/Frontend Angular 4/package-lock.json
+++ b/Frontend Angular 4/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "matefun",
- "version": "2.0.1",
+ "version": "2.0.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -3490,6 +3490,11 @@
}
}
},
+ "flag-icon-css": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-3.2.1.tgz",
+ "integrity": "sha512-0t7zPm2crM2cBIm3epZQ+EmiHuzgFNTTSMUMkWlrztDDGL+y31D+eY8zaB9zYCzJGAsn4KEMAKY+jCU1mt9jwg=="
+ },
"flatten": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
diff --git a/Frontend Angular 4/package.json b/Frontend Angular 4/package.json
index 33c5175..b2605e1 100755
--- a/Frontend Angular 4/package.json
+++ b/Frontend Angular 4/package.json
@@ -25,6 +25,7 @@
"@ngx-translate/http-loader": "^0.1.0",
"core-js": "^2.4.1",
"d3": "^4.12.2",
+ "flag-icon-css": "^3.2.1",
"font-awesome": "^4.7.0",
"function-plot": "git://github.com/diego-rey/function-plot.git#feature/integration-multigraf-shape",
"graph3D": "git://github.com/ifagian/graph3D#master",
diff --git a/Frontend Angular 4/src/app/app.component.html b/Frontend Angular 4/src/app/app.component.html
index eb9fe87..0680b43 100755
--- a/Frontend Angular 4/src/app/app.component.html
+++ b/Frontend Angular 4/src/app/app.component.html
@@ -1,4 +1 @@
-<div>
- <router-outlet></router-outlet>
- <span class="translate">{{ "HELLO" | translate }}</span>
-</div>
+<router-outlet></router-outlet>
diff --git a/Frontend Angular 4/src/app/app.component.ts b/Frontend Angular 4/src/app/app.component.ts
index a1f2a8d..4e2243f 100755
--- a/Frontend Angular 4/src/app/app.component.ts
+++ b/Frontend Angular 4/src/app/app.component.ts
@@ -11,7 +11,6 @@ export class AppComponent implements OnInit {
constructor(public router: Router, public translate: TranslateService) {
this.translate.addLangs(['es', 'en']);
this.translate.setDefaultLang('es');
- //this.translate.use('en');
}
ngOnInit() {
//this.router.navigate(['/login']);
diff --git a/Frontend Angular 4/src/app/login/login.component.html b/Frontend Angular 4/src/app/login/login.component.html
index 25c3e4c..d921ec3 100755
--- a/Frontend Angular 4/src/app/login/login.component.html
+++ b/Frontend Angular 4/src/app/login/login.component.html
@@ -5,25 +5,34 @@
<form role="form">
<div class="form-content">
<div class="form-group">
- <input type="text" [(ngModel)]=model.cedula name="cedula" class="form-control input-underline input-lg" placeholder="Usuario">
+ <input type="text" [(ngModel)]=model.cedula name="cedula" class="form-control input-underline input-lg" placeholder='{{ "login.user" | translate }}'>
</div>
<div class="form-group">
- <input type="password" [(ngModel)]=model.password (keyup.enter)=login() name="password" class="form-control input-underline input-lg" placeholder="Contraseña">
+ <input type="password" [(ngModel)]=model.password (keyup.enter)=login() name="password" class="form-control input-underline input-lg" placeholder='{{ "login.password" | translate }}'>
</div>
- <div class="form-group" style="margin-bottom: 0px;">
- <div ngbDropdown class="d-inline-block">
- <button class="btn btn-outline-secondary" id="input-lang" ngbDropdownToggle>{{model.language.name}}</button>
+ <div class="form-group" style="margin-bottom: 0px; text-align: left;">
+ <div ngbDropdown class="d-inline-block language-switcher">
+ <button class="btn btn-outline-secondary" id="input-lang" ngbDropdownToggle>
+ <span class="flag-icon flag-icon-{{model.language.flagCode}}"></span>
+ {{model.language.name}}
+ </button>
<div class="dropdown-menu" aria-labelledby="input-lang">
- <button class="dropdown-item" *ngFor="let lang of languages" (click)="model.language = lang" >{{lang.name}}</button>
+ <div class="dropdown-menu-front">
+ <div class="dropdown-menu-content">
+ <button class="dropdown-item" *ngFor="let lang of languages" (click)="onChangeLanguage(lang)" >
+ <span class="flag-icon flag-icon-{{lang.flagCode}}"></span>
+ {{lang.name}}
+ </button>
+ </div>
+ </div>
</div>
- </div>
-
+ </div>
</div>
</div>
- <a class="btn rounded-btn" style="background: transparent;color: white;cursor: pointer;width: 159px;margin-right: 3px;" (click)=login()> Iniciar Sesión </a>
- <a class="btn rounded-btn" style="background: transparent;color: white;cursor: pointer;width: 159px;margin-left: 3px;" (click)=invitado()> Invitado </a>
+ <a class="btn rounded-btn" style="background: transparent;color: white;cursor: pointer;width: 159px;margin-right: 3px;" (click)=login()> {{ "login.login" | translate }} </a>
+ <a class="btn rounded-btn" style="background: transparent;color: white;cursor: pointer;width: 159px;margin-left: 3px;" (click)=invitado()> {{ "login.guest" | translate }} </a>
<div class="loading" *ngIf="loading">
<div class="loading-bar"></div>
diff --git a/Frontend Angular 4/src/app/login/login.component.scss b/Frontend Angular 4/src/app/login/login.component.scss
index 92ee546..e0b6be8 100755
--- a/Frontend Angular 4/src/app/login/login.component.scss
+++ b/Frontend Angular 4/src/app/login/login.component.scss
@@ -103,3 +103,35 @@ $topnav-background-color: #222;
position: relative;
top: 20px;
}
+
+
+.language-switcher {
+ button {
+ color: #ccc;
+ border: 0px;
+ background-color: transparent;
+ &:hover, &:active {
+ background-color: rgba(255,255,255,0.15);
+ }
+ &:focus {
+ box-shadow: none;
+ }
+ }
+ .flag-icon {
+ margin-right: 10px;
+ }
+ .dropdown-menu {
+ padding: 0px;
+ margin: 0.5rem 0;
+ background-color: #004869;
+ &-front {
+ background-color: rgba(255,255,255,0.15);
+ }
+ &-content {
+ padding: 0.5rem 0;
+ }
+ }
+ .dropdown-item {
+ padding-left: 15px;
+ }
+}
\ No newline at end of file
diff --git a/Frontend Angular 4/src/app/login/login.component.ts b/Frontend Angular 4/src/app/login/login.component.ts
index 82f555e..49d9079 100755
--- a/Frontend Angular 4/src/app/login/login.component.ts
+++ b/Frontend Angular 4/src/app/login/login.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { SessionService } from '../shared/services/session.service';
import { AuthenticationService } from '../shared/services/authentication.service';
+import { TranslateService } from '@ngx-translate/core';
@Component({
@@ -13,8 +14,8 @@ import { AuthenticationService } from '../shared/services/authentication.service
export class LoginComponent implements OnInit {
languages = [
- {id: 0, name: "Ingles", code: 'en'},
- {id: 1, name: "Español", code: 'es'}
+ {id: 0, name: "Español", code: 'es', flagCode: 'es'},
+ {id: 1, name: "English", code: 'en', flagCode: 'us'}
];
model: any = {
@@ -32,6 +33,7 @@ export class LoginComponent implements OnInit {
private router: Router,
private sessionService: SessionService,
private authenticationService: AuthenticationService,
+ public translate: TranslateService
) { }
ngOnInit() {
@@ -48,6 +50,7 @@ export class LoginComponent implements OnInit {
var that = this;
+ this.translate.use(this.model.language.code);
this.authenticationService.login(this.model.cedula, this.model.password, this.model.language.code)
.subscribe(
data => {
@@ -76,4 +79,9 @@ export class LoginComponent implements OnInit {
});
}
+ onChangeLanguage(lang) {
+ this.model.language = lang;
+ this.translate.use(this.model.language.code);
+ }
+
}
diff --git a/Frontend Angular 4/src/app/login/login.module.ts b/Frontend Angular 4/src/app/login/login.module.ts
index 8d8c187..89a26f2 100755
--- a/Frontend Angular 4/src/app/login/login.module.ts
+++ b/Frontend Angular 4/src/app/login/login.module.ts
@@ -7,12 +7,15 @@ import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';
import { FormsModule } from '@angular/forms';
import { AuthenticationService } from '../shared/services/authentication.service';
+import { I18nModule } from '../shared/modules/translate/i18n.module';
+
@NgModule({
imports: [
FormsModule,
CommonModule,
LoginRoutingModule,
+ I18nModule,
NgbModule.forRoot(),
],
declarations: [LoginComponent],
diff --git a/Frontend Angular 4/src/app/shared/config.ts b/Frontend Angular 4/src/app/shared/config.ts
index ff7baec..cf69c79 100755
--- a/Frontend Angular 4/src/app/shared/config.ts
+++ b/Frontend Angular 4/src/app/shared/config.ts
@@ -17,5 +17,8 @@
// export const GHCI_URL = 'ws://192.168.129.3:9090/endpoint';
// Google cloud platform
-export const SERVER = 'http://35.199.110.129:9090';
-export const GHCI_URL = 'ws://35.199.110.129:9090/endpoint';
+// export const SERVER = 'http://35.199.110.129:9090';
+// export const GHCI_URL = 'ws://35.199.110.129:9090/endpoint';
+
+export const SERVER = 'http://localhost:8080';
+export const GHCI_URL = 'ws://localhost:8080/endpoint';
diff --git a/Frontend Angular 4/src/app/shared/modules/index.ts b/Frontend Angular 4/src/app/shared/modules/index.ts
index 7afde61..b20424b 100755
--- a/Frontend Angular 4/src/app/shared/modules/index.ts
+++ b/Frontend Angular 4/src/app/shared/modules/index.ts
@@ -1,2 +1,3 @@
export * from './stat/stat.module';
export * from './page-header/page-header.module';
+export * from './translate/i18n.module';
diff --git a/Frontend Angular 4/src/app/shared/modules/translate/i18n.module.ts b/Frontend Angular 4/src/app/shared/modules/translate/i18n.module.ts
new file mode 100644
index 0000000..8608ce9
--- /dev/null
+++ b/Frontend Angular 4/src/app/shared/modules/translate/i18n.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@NgModule({
+ exports: [
+ TranslateModule,
+ ]
+})
+
+export class I18nModule { }
\ No newline at end of file
diff --git a/Frontend Angular 4/src/assets/i18n/en.json b/Frontend Angular 4/src/assets/i18n/en.json
index b774ac8..af4479d 100644
--- a/Frontend Angular 4/src/assets/i18n/en.json
+++ b/Frontend Angular 4/src/assets/i18n/en.json
@@ -1,3 +1,8 @@
{
- "HELLO": "Hello"
+ "login" : {
+ "user" : "User",
+ "password" : "Password",
+ "login" : "Login",
+ "guest" : "Guest"
+ }
}
\ No newline at end of file
diff --git a/Frontend Angular 4/src/assets/i18n/es.json b/Frontend Angular 4/src/assets/i18n/es.json
index 9c47392..19b6052 100644
--- a/Frontend Angular 4/src/assets/i18n/es.json
+++ b/Frontend Angular 4/src/assets/i18n/es.json
@@ -1,3 +1,8 @@
{
- "HELLO" : "Hola"
+ "login" : {
+ "user" : "Usuario",
+ "password" : "Contraseña",
+ "login" : "Inciar Sesión",
+ "guest" : "Invitado"
+ }
}
\ No newline at end of file
--
GitLab