feat: switch language

2022-03-25 17:27:00 +01:00 · 2022-03-25 17:27:00 +01:00 · 85e289778a
parent ae9da4ce35
commit 85e289778a
11 changed files with 89 additions and 16 deletions
--- a/security-c4po-angular/src/app/app.component.html
+++ b/security-c4po-angular/src/app/app.component.html
@ -1,6 +1,6 @@
 <nb-layout>
  <nb-layout-header *ngIf="$authState.getValue()">
-    <app-header></app-header>
+    <app-header class="header"></app-header>
  </nb-layout-header>

  <nb-layout-column>
--- a/security-c4po-angular/src/app/app.component.scss
+++ b/security-c4po-angular/src/app/app.component.scss
@ -1,5 +1,9 @@
@import "../assets/@theme/styles/_variables.scss";

+.header {
+  flex: 1;
+}
+
 .content-container {
  width: 100%;
  height: calc(100% - #{$header-height});
--- a/security-c4po-angular/src/app/app.module.ts
+++ b/security-c4po-angular/src/app/app.module.ts
@ -6,7 +6,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {
  NbLayoutModule,
  NbToastrModule,
-  NbIconModule, NbCardModule, NbButtonModule, NbDialogService, NbDialogModule,
+  NbIconModule, NbCardModule, NbButtonModule, NbDialogService, NbDialogModule, NbSelectModule,
 } from '@nebular/theme';
 import {NbEvaIconsModule} from '@nebular/eva-icons';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
@ -48,6 +48,7 @@ import {OverlayContainer} from '@angular/cdk/overlay';
    BrowserAnimationsModule,
    ThemeModule.forRoot(),
    NbEvaIconsModule,
+    NbSelectModule,
    ConfirmDialogModule,
    NgxsModule.forRoot([SessionState], {developmentMode: !environment.production}),
    HttpClientModule,
--- a/security-c4po-angular/src/app/header/header.component.html
+++ b/security-c4po-angular/src/app/header/header.component.html
@ -1,14 +1,15 @@
-<div class="header" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="2rem">
+<div class="header" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2rem">
  <img *ngIf="currentTheme === 'corporate', else changeImage"
       src="../../assets/images/favicons/favicon.ico" alt="logo dark" class="header-icon" width="60rem" height="60rem">
  <ng-template #changeImage>
    <img src="../../assets/images/favicons/corporate_favicon.ico" alt="logo light" class="header-icon" width="60rem" height="60rem">
  </ng-template>

-  <div class="logo-container" fxLayoutAlign="center center">
+  <div class="logo-container">
    <h1 >{{SECURITYC4PO_TITLE}} </h1>
  </div>
-  <div fxLayoutAlign="end" fxLayoutGap="4rem">
+  <div class="filler"></div>
+  <div fxLayoutGap="4rem">
    <nb-actions size="medium">
      <nb-action class="toggle-theme">
        <button nbButton
@ -22,5 +23,14 @@
      </nb-action>
    </nb-actions>
  </div>
+  <div *ngIf="selectedLanguage && languages" class="languageContainer">
+    <nb-select selected="{{selectedLanguage}}" fullWidth>
+      <nb-option *ngFor="let language of languages"
+                 value="{{language}}" (click)="onClickLanguage(language)" fxLayoutAlign="start center">
+          <img src="../../assets/images/flags/{{language}}.svg" class="flag" width="25rem" height="16rem" alt="">
+          <span fxFlexOffset="0.5rem"> {{'languageKeys.' + language | translate}} </span>
+      </nb-option>
+    </nb-select>
+  </div>
 </div>

--- a/security-c4po-angular/src/app/header/header.component.scss
+++ b/security-c4po-angular/src/app/header/header.component.scss
@ -1,6 +1,24 @@
@import '~@nebular/theme/styles/global/breakpoints';
@import "../../assets/@theme/styles/_variables.scss";

+.header {
+  flex: 1;
+
+  .filler {
+    flex-grow: 1;
+  }
+
+  .languageContainer {
+    display: flex;
+    max-width: 8rem;
+    min-width: 8rem;
+
+    .flag {
+      object-fit: contain;
+    }
+  }
+}
+
@mixin nb-overrides {
  display: inline-flex;
  justify-content: space-between;
--- a/security-c4po-angular/src/app/header/header.component.ts
+++ b/security-c4po-angular/src/app/header/header.component.ts
@ -4,20 +4,23 @@ import {NbThemeService} from '@nebular/theme';
 import {map} from 'rxjs/operators';
 import {untilDestroyed} from 'ngx-take-until-destroy';
 import {GlobalTitlesVariables} from '@shared/config/global-variables';
+import {TranslateService} from '@ngx-translate/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
 })
-export class HeaderComponent implements OnInit, OnDestroy {
+export class HeaderComponent implements OnInit, OnDestroy{

  readonly fa = FA;
  readonly SECURITYC4PO_TITLE = GlobalTitlesVariables.SECURITYC4PO_TITLE;

  currentTheme = '';
+  languages = ['en-US', 'de-DE'];
+  selectedLanguage = '';

-  constructor(private themeService: NbThemeService) { }
+  constructor(private themeService: NbThemeService, private translateService: TranslateService) { }

  ngOnInit(): void {
    this.themeService.onThemeChange()
@ -26,6 +29,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
        untilDestroyed(this),
      )
      .subscribe(themeName => this.currentTheme = themeName);
+    this.selectedLanguage = this.translateService.currentLang;
  }

  onClickSwitchTheme(): void {
@ -36,6 +40,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
    }
  }

+  onClickLanguage(language: string): void {
+    this.translateService.use(language);
+  }
+
  ngOnDestroy(): void {
    // This method must be present when using ngx-take-until-destroy
    // even when empty
--- a/security-c4po-angular/src/app/header/header.module.ts
+++ b/security-c4po-angular/src/app/header/header.module.ts
@ -1,9 +1,10 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {HeaderComponent} from './header.component';
-import {NbActionsModule, NbButtonModule, NbCardModule} from '@nebular/theme';
+import {NbActionsModule, NbButtonModule, NbCardModule, NbSelectModule} from '@nebular/theme';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {TranslateModule} from '@ngx-translate/core';

@NgModule({
  declarations: [
@ -12,14 +13,16 @@ import {FlexLayoutModule} from '@angular/flex-layout';
  exports: [
    HeaderComponent
  ],
-  imports: [
-    CommonModule,
-    NbButtonModule,
-    FontAwesomeModule,
-    NbCardModule,
-    NbActionsModule,
-    FlexLayoutModule
-  ]
+    imports: [
+        CommonModule,
+        NbButtonModule,
+        FontAwesomeModule,
+        NbCardModule,
+        NbActionsModule,
+        FlexLayoutModule,
+        NbSelectModule,
+        TranslateModule
+    ]
 })
 export class HeaderModule {
 }
--- a/security-c4po-angular/src/assets/i18n/de-DE.json
+++ b/security-c4po-angular/src/assets/i18n/de-DE.json
@ -11,6 +11,10 @@
    "username": "Nutzername",
    "password": "Passwort"
  },
+  "languageKeys":{
+    "de-DE": "Deutsch",
+    "en-US": "Englisch"
+  },
  "popup": {
    "success": "✔",
    "failure": "✘",
--- a/security-c4po-angular/src/assets/i18n/en-US.json
+++ b/security-c4po-angular/src/assets/i18n/en-US.json
@ -11,6 +11,10 @@
    "username": "Username",
    "password": "Password"
  },
+  "languageKeys":{
+    "de-DE": "German",
+    "en-US": "English"
+  },
  "popup": {
    "success": "✔",
    "failure": "✘",
--- a/security-c4po-angular/src/assets/images/flags/de-DE.svg
+++ b/security-c4po-angular/src/assets/images/flags/de-DE.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="0 0 5 3">
+	<desc>Flag of Germany</desc>
+	<rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
+	<rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
+	<rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
+</svg>
--- a/security-c4po-angular/src/assets/images/flags/en-US.svg
+++ b/security-c4po-angular/src/assets/images/flags/en-US.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650">
+<defs>
+<polygon id="pt" points="-0.1624598481164531,0 0,-0.5 0.1624598481164531,0" transform="scale(0.0616)" fill="#FFF"/>
+<g id="star"><use xlink:href="#pt" transform="rotate(-144)"/><use xlink:href="#pt" transform="rotate(-72)"/><use xlink:href="#pt"/><use xlink:href="#pt" transform="rotate(72)"/><use xlink:href="#pt" transform="rotate(144)"/></g>
+<g id="s5"><use xlink:href="#star" x="-0.252"/><use xlink:href="#star" x="-0.126"/><use xlink:href="#star"/><use xlink:href="#star" x="0.126"/><use xlink:href="#star" x="0.252"/></g>
+<g id="s6"><use xlink:href="#s5" x="-0.063"/><use xlink:href="#star" x="0.315"/></g>
+<g id="x4"><use xlink:href="#s6"/><use xlink:href="#s5" y="0.054"/><use xlink:href="#s6" y="0.108"/><use xlink:href="#s5" y="0.162"/></g>
+<g id="u"><use xlink:href="#x4" y="-0.216"/><use xlink:href="#x4"/><use xlink:href="#s6" y="0.216"/></g>
+<rect id="stripe" width="1235" height="50" fill="#B22234"/>
+</defs>
+<rect width="1235" height="650" fill="#FFF"/><use xlink:href="#stripe"/><use xlink:href="#stripe" y="100"/><use xlink:href="#stripe" y="200"/><use xlink:href="#stripe" y="300"/><use xlink:href="#stripe" y="400"/><use xlink:href="#stripe" y="500"/><use xlink:href="#stripe" y="600"/><rect width="494" height="350" fill="#3C3B6E"/><use xlink:href="#u" transform="translate(247,175) scale(650)"/></svg>