Add language switch

Author: fboeller

package-lock.json

@@ -44,9 +44,13 @@
     "@angular/common": "~11.1.0",
     "@angular/compiler": "~11.1.0",
     "@angular/core": "~11.1.0",
+    "@angular/forms": "^11.1.0",
     "@angular/platform-browser": "~11.1.0",
     "@angular/platform-browser-dynamic": "~11.1.0",
     "@angular/router": "~11.1.0",
+    "@ngneat/hot-toast": "^3.4.3",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
     "ngx-elements-router": "^0.1.3",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",

package.json

@@ -1,34 +1,24 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { LoadBundleGuard } from 'ngx-elements-router';
-import { PlatformMainPageComponent } from './platform-main-page.component';
-import { PlatformChildPageComponent } from './platform-child-page.component';
+import { BookingModule } from '../booking/booking.module';
+import { BookingComponent } from '../booking/booking/booking.component';
+import { JourneySelectionComponent } from '../journey/journey-selection/journey-selection.component';
+import { JourneyModule } from '../journey/journey.module';
 
 const routes: Routes = [
   {
     path: '',
     pathMatch: 'full',
-    component: PlatformMainPageComponent,
+    component: JourneySelectionComponent,
   },
   {
-    path: 'child',
-    component: PlatformChildPageComponent,
-  },
-  {
-    path: 'micro-frontend',
-    canActivate: [LoadBundleGuard],
-    data: {
-      bundleUrl: 'http://localhost:4201/main-es2015.js',
-    },
-    loadChildren: () =>
-      import('./micro-frontend-host/micro-frontend-host.module').then(
-        (m) => m.MicroFrontendHostModule
-      ),
+    path: 'bookings/journey/:journeyId',
+    component: BookingComponent,
   },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes), JourneyModule, BookingModule],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

projects/train-platform/src/app/app-routing.module.ts

@@ -3,11 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   template: `
-    <h1>The platform</h1>
-    <a routerLink="/">/</a>
-    <a routerLink="/child">/child</a>
-    <a routerLink="/micro-frontend">/micro-frontend</a>
-    <a routerLink="/micro-frontend/child">/micro-frontend/child</a>
+    <app-navbar></app-navbar>
     <router-outlet></router-outlet>
   `,
 })

projects/train-platform/src/app/app.component.ts

@@ -3,16 +3,32 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { PlatformMainPageComponent } from './platform-main-page.component';
-import { PlatformChildPageComponent } from './platform-child-page.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { FormsModule } from '@angular/forms';
+
+export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    PlatformMainPageComponent,
-    PlatformChildPageComponent,
+  declarations: [AppComponent, NavbarComponent],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: createTranslateLoader,
+        deps: [HttpClient],
+      },
+    }),
+    FormsModule,
   ],
-  imports: [BrowserModule, AppRoutingModule],
   providers: [],
   bootstrap: [AppComponent],
 })

projects/train-platform/src/app/app.module.ts

@@ -0,0 +1,35 @@
+nav {
+  height: 40px;
+  width: 100%;
+  background-color: aqua;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+li {
+  line-height: 40px;
+  vertical-align: middle;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.page-options {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  line-height: 40px;
+}
+
+label {
+  margin-right: 10px;
+}

projects/train-platform/src/app/navbar/navbar.component.css

@@ -0,0 +1,16 @@
+<nav>
+  <ul>
+    <li>
+      <a routerLink="/">{{ "navbar.home" | translate }}</a>
+    </li>
+  </ul>
+  <div class="page-options">
+    <div>
+      <label>{{ "navbar.language.text" | translate }}</label>
+      <select [ngModel]="language" (ngModelChange)="updateLanguage($event)">
+        <option value="en">{{ "navbar.language.en" | translate }}</option>
+        <option value="de">{{ "navbar.language.de" | translate }}</option>
+      </select>
+    </div>
+  </div>
+</nav>

projects/train-platform/src/app/navbar/navbar.component.html

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css'],
+})
+export class NavbarComponent {
+  language: 'en' | 'de' = 'en';
+
+  constructor(private translateService: TranslateService) {}
+
+  updateLanguage(lang: 'en' | 'de'): void {
+    this.language = lang;
+    this.translateService.use(lang);
+  }
+}