From 367a81ac764807a2dfb5d205f234af2b4833edee Mon Sep 17 00:00:00 2001
From: simon987 <fortier.simon@protonmail.com>
Date: Tue, 5 Feb 2019 21:44:15 -0500
Subject: [PATCH] translated projects page & title

---
 web/angular/src/app/app-routing.module.ts     | 23 +++++++++-
 .../project-list/project-list.component.html  | 44 ++++++++++---------
 web/angular/src/assets/i18n/en.json           | 12 ++++-
 web/angular/src/assets/i18n/fr.json           | 11 +++++
 4 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/web/angular/src/app/app-routing.module.ts b/web/angular/src/app/app-routing.module.ts
index 699534b..978d133 100755
--- a/web/angular/src/app/app-routing.module.ts
+++ b/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))
+    }
 }
+
diff --git a/web/angular/src/app/project-list/project-list.component.html b/web/angular/src/app/project-list/project-list.component.html
index c8fce03..be095e5 100755
--- a/web/angular/src/app/project-list/project-list.component.html
+++ b/web/angular/src/app/project-list/project-list.component.html
@@ -1,20 +1,24 @@
-<mat-card>
-    <mat-card-header>
-        <mat-card-title>Projects</mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-        <mat-accordion>
-            <mat-expansion-panel *ngFor="let project of projects">
-                <mat-expansion-panel-header>
-                    <mat-panel-title>{{project.id}}: {{project.name}}</mat-panel-title>
-                    <mat-panel-description>{{project.motd}}</mat-panel-description>
-                </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>
-                </div>
-            </mat-expansion-panel>
-        </mat-accordion>
-    </mat-card-content>
-</mat-card>
+<div class="container">
+    <mat-card>
+        <mat-card-header>
+            <mat-card-title>{{"projects.projects" | translate}}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <mat-accordion>
+                <mat-expansion-panel *ngFor="let project of projects">
+                    <mat-expansion-panel-header>
+                        <mat-panel-title>{{project.id}}: {{project.name}}</mat-panel-title>
+                        <mat-panel-description>{{project.motd}}</mat-panel-description>
+                    </mat-expansion-panel-header>
+                    <pre>{{project | json}}</pre>
+                    <div style="display: flex;">
+                        <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>
+</div>
diff --git a/web/angular/src/assets/i18n/en.json b/web/angular/src/assets/i18n/en.json
index 86a1c61..b82d499 100644
--- a/web/angular/src/assets/i18n/en.json
+++ b/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"
     }
 }
diff --git a/web/angular/src/assets/i18n/fr.json b/web/angular/src/assets/i18n/fr.json
index 8ae38ba..bd24d59 100644
--- a/web/angular/src/assets/i18n/fr.json
+++ b/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"
     }
 }