Add dev platform module

Author: xkons

README.md

@@ -11,6 +11,19 @@ $ npm start
 
 A visit to `localhost:4200` shows the application.
 
+## Bookings local development
+
+Serve the bookings microfrontend inside the train-platform application (does not support live-reload for microfrontend):
+```
+npm start train-platform
+npm run ng run bookings:build:local-web-components && npx http-server projects/bookings/dist --port 4201
+```
+
+Serve the bookings microfrontend in isolation using the angular dev server:
+```
+npm start bookings
+```
+
 ## Benefits of microfrontends
 
 - Vertical services (backend and frontend are fully owned by one team, see [micro-frontends.org](https://micro-frontends.org/))

angular.json

@@ -190,6 +190,14 @@
                   "with": "projects/bookings/src/environments/environment.prod.ts"
                 }
               ]
+            },
+            "local-web-components": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/bookings/src/environments/environment.ts",
+                  "with": "projects/bookings/src/environments/environment.local-web-components.ts"
+                }
+              ]
             }
           }
         },

projects/bookings/src/dev-platform/dev-platform-page/dev-platform-page.component.html

@@ -0,0 +1,8 @@
+<h2>Bookings DEV Platform</h2>
+<ul *ngFor="let journey of journeys">
+  <li>
+    <a [routerLink]="['bookings', 'journey', journey.id]"
+      >Journey {{ journey.id }}</a
+    >
+  </li>
+</ul>

projects/bookings/src/dev-platform/dev-platform-page/dev-platform-page.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'mf-dev-platform-page',
+  templateUrl: './dev-platform-page.component.html',
+})
+export class DevPlatformPageComponent {
+  journeys: { id: string }[] = [{ id: '1' }, { id: '2' }];
+}

projects/bookings/src/dev-platform/dev-platform.module.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BookingModule } from '../app/booking.module';
+import { DevPlatformPageComponent } from './dev-platform-page/dev-platform-page.component';
+import { DevPlatformComponent } from './dev-platform/dev-platform.component';
+
+@NgModule({
+  declarations: [DevPlatformComponent, DevPlatformPageComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule.forRoot([
+      {
+        path: '',
+        pathMatch: 'full',
+        component: DevPlatformPageComponent,
+        data: { title: 'Journeys' },
+      },
+    ]),
+    BookingModule,
+  ],
+  bootstrap: [DevPlatformComponent],
+})
+export class DevPlatformModule {}

projects/bookings/src/dev-platform/dev-platform/dev-platform.component.css

@@ -0,0 +1,55 @@
+:host {
+  --background-color: white;
+  --font-color: black;
+  display: block;
+  background-color: var(--background-color);
+  color: var(--font-color);
+  height: 100vh;
+  padding: 8px;
+}
+
+:host.dark {
+  --background-color: black;
+  --font-color: white;
+}
+
+nav {
+  height: 40px;
+  width: 100%;
+  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: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.active-nav-item {
+  cursor: default;
+  text-decoration: none;
+}
+
+.page-options {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 1rem;
+  line-height: 40px;
+}
+
+label {
+  margin-right: 0.5rem;
+}

projects/bookings/src/dev-platform/dev-platform/dev-platform.component.html

@@ -0,0 +1,25 @@
+<nav>
+  <ul>
+    <li>
+      <a routerLink="/" routerLinkActive="active-nav-item" [routerLinkActiveOptions]="{exact: true}">Home</a>
+    </li>
+  </ul>
+  <div class="page-options">
+    <div>
+      <label>Theme:</label>
+      <select [ngModel]="theme" (ngModelChange)="updateTheme($event)">
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+    </div>
+    <div>
+      <label>Language:</label>
+      <select [ngModel]="language" (ngModelChange)="updateLanguage($event)">
+        <option value="en">English</option>
+        <option value="de">Deutsch</option>
+      </select>
+    </div>
+  </div>
+</nav>
+
+<mf-booking></mf-booking>

projects/bookings/src/dev-platform/dev-platform/dev-platform.component.ts

@@ -0,0 +1,57 @@
+import { Component, HostBinding, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { filter, map } from 'rxjs/operators';
+
+@Component({
+  selector: 'mf-dev-platform',
+  templateUrl: './dev-platform.component.html',
+  styleUrls: ['./dev-platform.component.css'],
+})
+export class DevPlatformComponent implements OnInit {
+  language: 'en' | 'de' = 'en';
+  @HostBinding('class') theme: 'light' | 'dark' = 'light';
+
+  constructor(
+    private router: Router,
+    private titleService: Title,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit(): void {
+    this.updatePageTitleOnRouteChange();
+  }
+
+  updateTheme(theme: 'light' | 'dark'): void {
+    this.theme = theme;
+  }
+
+  updateLanguage(lang: 'en' | 'de'): void {
+    this.language = lang;
+    this.translateService.use(lang);
+  }
+
+  private updatePageTitleOnRouteChange() {
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        map(() => {
+          let route: ActivatedRoute = this.router.routerState.root;
+          let routeTitle = '';
+          while (route!.firstChild) {
+            route = route.firstChild;
+          }
+          if (route.snapshot.data['title']) {
+            routeTitle = route!.snapshot.data['title'];
+          }
+          return routeTitle;
+        })
+      )
+      .subscribe((title) => {
+        if (title) {
+          this.titleService.setTitle(`${title} - Microtrains`);
+        }
+      });
+  }
+}

projects/bookings/src/environments/environment.local-web-components.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  embedded: true,
+};

projects/bookings/src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  embedded: true,
 };