Skip to content

GitLab

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

Add i18n module shared and fix language switcher styles

parent 9e3db89c
Hide whitespace changes
Inline Side-by-side
Frontend Angular 4/.angular-cli.json
View file @ 75e3b852
......@@ -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",
......
Frontend Angular 4/package-lock.json
View file @ 75e3b852
{
"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",
......
Frontend Angular 4/package.json
View file @ 75e3b852
......@@ -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",
......
Frontend Angular 4/src/app/app.component.html
View file @ 75e3b852
<div>
<router-outlet></router-outlet>
<span class="translate">{{ "HELLO" | translate }}</span>
</div>
<router-outlet></router-outlet>
Frontend Angular 4/src/app/app.component.ts
View file @ 75e3b852
......@@ -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']);
......
Frontend Angular 4/src/app/login/login.component.html
View file @ 75e3b852
......@@ -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>
......
Frontend Angular 4/src/app/login/login.component.scss
View file @ 75e3b852
......@@ -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
Frontend Angular 4/src/app/login/login.component.ts
View file @ 75e3b852
......@@ -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);
}
}
Frontend Angular 4/src/app/login/login.module.ts
View file @ 75e3b852
......@@ -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],
......
Frontend Angular 4/src/app/shared/config.ts
View file @ 75e3b852
......@@ -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';
Frontend Angular 4/src/app/shared/modules/index.ts
View file @ 75e3b852
export * from './stat/stat.module';
export * from './page-header/page-header.module';
export * from './translate/i18n.module';
Frontend Angular 4/src/app/shared/modules/translate/i18n.module.ts 0 → 100644
View file @ 75e3b852
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
exports: [
TranslateModule,
]
})
export class I18nModule { }
\ No newline at end of file
Frontend Angular 4/src/assets/i18n/en.json
View file @ 75e3b852
{
"HELLO": "Hello"
"login" : {
"user" : "User",
"password" : "Password",
"login" : "Login",
"guest" : "Guest"
}
}
\ No newline at end of file
Frontend Angular 4/src/assets/i18n/es.json
View file @ 75e3b852
{
"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