translated projects page & title

web/angular/src/app/app-routing.module.ts

@@ -1,10 +1,13 @@
 import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import {NavigationEnd, NavigationStart, Router, RouterModule, Routes} from '@angular/router';
 import {LogsComponent} from "./logs/logs.component";
 import {ProjectDashboardComponent} from "./project-dashboard/project-dashboard.component";
 import {ProjectListComponent} from "./project-list/project-list.component";
 import {CreateProjectComponent} from "./create-project/create-project.component";
 import {UpdateProjectComponent} from "./update-project/update-project.component";
+import {Title} from "@angular/platform-browser";
+import {filter} from "rxjs/operators";
+import {TranslateService} from "@ngx-translate/core";
 
 const routes: Routes = [
     {path: "log", component: LogsComponent},
@@ -19,4 +22,22 @@ const routes: Routes = [
     exports: [RouterModule]
 })
 export class AppRoutingModule {
+
+    constructor(private title: Title, private router: Router, private translate: TranslateService) {
+        router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe((event: NavigationStart) => {
+                    this.updateTitle(translate, title, event.url)
+                }
+            );
+
+        translate.onLangChange.subscribe(() =>
+            this.updateTitle(translate, title, router.url)
+        )
+    }
+
+    private updateTitle(tr: TranslateService, title: Title, url: string) {
+        tr.get("title." + url.slice(1)).subscribe((t) => title.setTitle(t))
+    }
 }
+

web/angular/src/app/project-list/project-list.component.html

@@ -1,6 +1,7 @@
-<mat-card>
+<div class="container">
+    <mat-card>
         <mat-card-header>
-        <mat-card-title>Projects</mat-card-title>
+            <mat-card-title>{{"projects.projects" | translate}}</mat-card-title>
         </mat-card-header>
         <mat-card-content>
             <mat-accordion>
@@ -11,10 +12,13 @@
                     </mat-expansion-panel-header>
                     <pre>{{project | json}}</pre>
                     <div style="display: flex;">
-                    <a [routerLink]="'/project/' + project.id">Dashboard</a>
-                    <a [routerLink]="'/project/' + project.id + '/update'">Update</a>
+                        <button mat-button [routerLink]="'/project/' + project.id">
+                            <mat-icon>timeline</mat-icon>{{"projects.dashboard" | translate}}</button>
+                        <button mat-button [routerLink]="'/project/' + project.id + '/update'">
+                            <mat-icon>build</mat-icon>{{"projects.update" | translate}}</button>
                     </div>
                 </mat-expansion-panel>
             </mat-accordion>
         </mat-card-content>
-</mat-card>
+    </mat-card>
+</div>

web/angular/src/assets/i18n/en.json

@@ -18,6 +18,16 @@
         "items_per_page": "Items per page",
         "next_page": "Next page",
         "prev_page": "Previous page"
-
+    },
+    "projects": {
+        "projects": "Projects",
+        "dashboard": "Dashboard",
+        "update": "Update"
+    },
+    "title": {
+        "": "Index",
+        "projects": "Projects",
+        "log": "Logs",
+        "new_project": "New project"
     }
 }

web/angular/src/assets/i18n/fr.json

@@ -18,6 +18,17 @@
         "items_per_page": "Items par page",
         "next_page": "Page suivante",
         "prev_page": "Page précédante"
+    },
+    "projects": {
+        "projects": "Projets",
+        "dashboard": "Tableau de bord",
+        "update": "Modifier"
+    },
+    "title": {
+        "": "Accueil",
+        "projects": "Projets",
+        "log": "Journal",
+        "new_project": "Nouveau projet"
     }
 }