Commit 75e3b852 authored by Diego Rey's avatar Diego Rey
Browse files

Add i18n module shared and fix language switcher styles

parent 9e3db89c
......@@ -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",
......
{
"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",
......
......@@ -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",
......
<div>
<router-outlet></router-outlet>
<span class="translate">{{ "HELLO" | translate }}</span>
</div>
<router-outlet></router-outlet>
......@@ -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']);
......
......@@ -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>
&nbsp;
<div class="loading" *ngIf="loading">
<div class="loading-bar"></div>
......
......@@ -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
......@@ -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);
}
}
......@@ -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],
......
......@@ -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';
export * from './stat/stat.module';
export * from './page-header/page-header.module';
export * from './translate/i18n.module';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
exports: [
TranslateModule,
]
})
export class I18nModule { }
\ No newline at end of file
{
"HELLO": "Hello"
"login" : {
"user" : "User",
"password" : "Password",
"login" : "Login",
"guest" : "Guest"
}
}
\ No newline at end of file
{
"HELLO" : "Hola"
"login" : {
"user" : "Usuario",
"password" : "Contraseña",
"login" : "Inciar Sesión",
"guest" : "Invitado"
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment