Get page title from routes, including for menu items

- Fixed the user always being set to root instead of node because of the $USERNAME variable

deploy-backend.sh

@@ -2,4 +2,4 @@
 
 cd backend || exit
 docker-compose build backend
-USERNAME="0" docker-compose run -e COMMAND=deploy -v /var/run/docker.sock:/var/run/docker.sock backend
+SZD_USERNAME="0" docker-compose run -e COMMAND=deploy -v /var/run/docker.sock:/var/run/docker.sock backend

docker-compose.yml

@@ -16,7 +16,7 @@ services:
     environment:
       - COMMAND=run
       - DATABASE_URL=mysql://szakdolgozat:DevelopmentPassword@database/szakdolgozat
-    user: ${USERNAME:-node}
+    user: ${SZD_USERNAME:-node}
   database:
     image: mysql:5.6
     ports:

frontend/src/app/app-routing.module.ts

@@ -13,7 +13,11 @@ const routes: Routes = [
     path: '',
     canActivate: [AuthCheck],
     children: [
-      {path: 'users', loadChildren: async () => (await import('./users/users.module')).UsersModule}
+      {
+        path: 'users',
+        loadChildren: async () => (await import('./users/users.module')).UsersModule,
+        data: {title: 'Felhasználók'} as RouteData
+      }
     ]
   }
 ];
@@ -24,3 +28,5 @@ const routes: Routes = [
 })
 export class AppRoutingModule {
 }
+
+export type RouteData = { title: string; };

frontend/src/app/app.component.html

@@ -19,7 +19,7 @@
         *ngIf="isHandset$ | async">
         <mat-icon aria-label="Oldalsáv">menu</mat-icon>
       </button>
-      <span>Szakdolgozat</span>
+      <span>{{ pageTitle }}</span>
       <span class="toolbar-spacer"></span>
       <span *ngIf="loginService.token">
         <span>{{ loginService.user.name }}</span>

frontend/src/app/app.component.ts

@@ -1,11 +1,13 @@
-import {Component, OnInit} from '@angular/core';
-import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
-import {Observable} from 'rxjs';
-import {map, shareReplay} from 'rxjs/operators';
-import {LoginService} from './auth/login.service';
-import {Router} from '@angular/router';
-import {ApiService} from './api.service';
-import {UserRole} from './model/user.model';
+import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Observable } from 'rxjs';
+import { filter, map, shareReplay } from 'rxjs/operators';
+import { LoginService } from './auth/login.service';
+import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Route, Router, Routes } from '@angular/router';
+import { ApiService } from './api.service';
+import { UserRole } from './model/user.model';
+import { RouteData } from './app-routing.module';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-root',
@@ -21,14 +23,89 @@ export class AppComponent implements OnInit {
     );
 
   menu: MenuItem[] = [
-    {path: 'users', title: 'Felhasználók', requiredRole: 'admin'}
+    {path: 'users', requiredRole: 'admin'}
   ];
 
+  routeSegments: RouteSegment[];
+
+  pageTitle: string;
+
   constructor(private breakpointObserver: BreakpointObserver, public loginService: LoginService, private api: ApiService,
-              private router: Router, private login: LoginService) {
+              private router: Router, private login: LoginService, private activeRoute: ActivatedRoute,
+              private title: Title) {
   }
 
   ngOnInit(): void {
+    for (const item of this.menu) {
+      const res = this.getRoutes([{path: item.path, routes: this.router.config}]);
+      if (res.length) {
+        const data = res[0].currentRoute.data as RouteData;
+        item.title = data.title;
+      } else {
+        item.title = 'NOTFOUND';
+      }
+    }
+    this.setPageTitle();
+  }
+
+  getRoutes(data: { path: string, routes: Routes }[]): { routes: Routes, path: string, currentRoute: Route }[] {
+    for (const datum of data) {
+      const path = datum.path;
+      const res = datum.routes.filter(route => path.startsWith(route.path)).map(route => {
+        return {
+          currentRoute: route,
+          routes: route.children ?? [],
+          path: path.substring(route.path.length).replace(/^\//, '')
+        };
+      });
+      if (!res.length) {
+        continue;
+      }
+      const ret = this.getRoutes(res);
+      if (!ret.length && res.length && res[0].path.length === 0) { // Ha a következő már üres, akkor leellenőrizzük, hogy megtaláltuk-e
+        return res;
+      } else { // Ha megtaláltuk a megoldást, visszaadjuk végig
+        const results = ret.filter(obj => obj.path.length === 0);
+        if (results.length) {
+          return results;
+        }
+      }
+    }
+    return [];
+  }
+
+  getRouteSegments(snapshot: ActivatedRouteSnapshot): RouteSegment[] {
+    let routeParts: RouteSegment[] = [];
+    if (snapshot) {
+      if (snapshot.firstChild) {
+        routeParts = routeParts.concat(this.getRouteSegments(snapshot.firstChild));
+      }
+      if (!snapshot.data) {
+        return routeParts;
+      }
+      const data = snapshot.data as RouteData;
+      if (data.title && snapshot.url.length) {
+        routeParts.push({
+          title: data.title,
+          url: snapshot.url[0].path
+        });
+      }
+    }
+    return routeParts;
+  }
+
+  setPageTitle(): void {
+    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+      const routeParts = this.getRouteSegments(this.activeRoute.snapshot);
+      if (!routeParts.length) {
+        this.pageTitle = 'Szakdolgozat';
+        return this.title.setTitle('Szakdolgozat');
+      }
+      let pageTitle = routeParts.reverse().map(part => part.title).reduce((partA, partI) => `${partA} > ${partI}`);
+      this.pageTitle = pageTitle;
+      pageTitle += ` | Szakdolgozat`;
+      this.title.setTitle(pageTitle);
+    });
   }
 
   async logout(): Promise<void> {
@@ -41,4 +118,5 @@ export class AppComponent implements OnInit {
   }
 }
 
-type MenuItem = { path: string, title: string, requiredRole: UserRole | 'admin' };
+type MenuItem = { path: string, requiredRole: UserRole | 'admin', title?: string };
+type RouteSegment = { title: string, url: string };

frontend/src/app/auth/auth.module.ts

@@ -7,10 +7,11 @@ import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { RouterModule, Routes } from '@angular/router';
+import { RouteData } from '../app-routing.module';
 
 const routes: Routes = [
-  {path: 'login', component: LoginComponent},
-  {path: 'register', component: RegisterComponent}
+  {path: 'login', component: LoginComponent, data: {title: 'Bejelentkezés'} as RouteData},
+  {path: 'register', component: RegisterComponent, data: {title: 'Regisztráció'} as RouteData}
 ];
 
 @NgModule({

frontend/src/app/users/users.module.ts

@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UserListComponent } from './user-list/user-list.component';
 import { RouterModule, Routes } from '@angular/router';
+import { RouteData } from '../app-routing.module';
 
 const routes: Routes = [
-  {path: '', component: UserListComponent}
+  {path: '', component: UserListComponent, data: {title: 'Felhasználók'} as RouteData}
 ];
 
 @NgModule({