diff --git a/Frontend Angular 4/.angular-cli.json b/Frontend Angular 4/.angular-cli.json
index ce654106465498153093c13f88c34696eaa0252b..b034b5836863586a0adc6782e21b9e38f5e14747 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 3b36451aba24ccf4db92e203a1a143df273c5f47..0339d889118f1e7972554025ad4173a9d09262cc 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 33c5175c061dc126f7bd3fbb91e84c9d7747e1c0..b2605e1907836c13de998db98667cc4055a38580 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 eb9fe87ff82870fce7a7979e83abb3d5fece5e19..0680b43f9c6ae05df91c576141f20ed411d07c7d 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 a1f2a8d420289859c922c72141a59c22b82b2082..4e2243fc532fd84fc2dc139cfbb42bbda2e24266 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 25c3e4c7211070097f2c368be215201eb7ced458..d921ec3fa4851e02baffd7fc37f38cf4dcded246 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 92ee5466c358a42d782a3892bebf02c3424934c1..e0b6be881c0494298ddfc6c64b51bde028af4f97 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 82f555ebd087abd9cde6dab32f0f04632cd2e42a..49d9079f7c89b10b4ba82ab8acfc687b32a53fd3 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 8d8c187f673ea0d5097a98198783212ed16f67a9..89a26f2a54cf28eea7e7376e581054061a6c720b 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 ff7baec48f045a2981973a0700d5e3fd6ff60bc2..cf69c797b7712cec4f6b6cc835be45a3d5629678 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 7afde6126c9534188e86e3872197a7e7d91888d4..b20424b72f409f49278df210a4649375657a00d8 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 0000000000000000000000000000000000000000..8608ce9a359ace9865c01b4a7ae989addb2c46ac
--- /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 b774ac8b3692f40f81524e9e4ff100cd2ca1263a..af4479d019a832e17480ecb25674b146bb72ecad 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 9c47392fb38d0bc11654c779ab7e58581d0dafc9..19b60521391f8b324cc49f0dffb21ad6f16f237d 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