From 920647b4aa2ebe198486f8c3aac4b4dc808190fa Mon Sep 17 00:00:00 2001
From: simon987 <fortier.simon@protonmail.com>
Date: Wed, 6 Feb 2019 19:12:07 -0500
Subject: [PATCH] more translations and styling

---
 web/angular/src/app/app-routing.module.ts     |  4 +-
 web/angular/src/app/app.component.html        |  8 +--
 web/angular/src/app/app.component.ts          |  3 +-
 web/angular/src/app/app.module.ts             |  1 +
 .../create-project.component.html             | 66 +++++++++----------
 .../project-dashboard.component.html          | 45 +++++--------
 .../project-dashboard.component.ts            | 29 +++++++-
 .../project-list/project-list.component.css   |  3 +
 .../project-list/project-list.component.html  | 13 ++--
 .../update-project.component.html             | 57 ++++++++--------
 web/angular/src/assets/i18n/en.json           | 22 ++++++-
 web/angular/src/assets/i18n/fr.json           | 24 ++++++-
 12 files changed, 170 insertions(+), 105 deletions(-)

diff --git a/web/angular/src/app/app-routing.module.ts b/web/angular/src/app/app-routing.module.ts
index 978d133..1aefed9 100755
--- a/web/angular/src/app/app-routing.module.ts
+++ b/web/angular/src/app/app-routing.module.ts
@@ -37,7 +37,9 @@ export class AppRoutingModule {
     }
 
     private updateTitle(tr: TranslateService, title: Title, url: string) {
-        tr.get("title." + url.slice(1)).subscribe((t) => title.setTitle(t))
+        url = url.substr(1);
+        tr.get("title." + url.substring(0, url.indexOf("/") == -1 ? url.length : url.indexOf("/")))
+            .subscribe((t) => title.setTitle(t))
     }
 }
 
diff --git a/web/angular/src/app/app.component.html b/web/angular/src/app/app.component.html
index 0b2ebdd..5130957 100755
--- a/web/angular/src/app/app.component.html
+++ b/web/angular/src/app/app.component.html
@@ -1,8 +1,8 @@
 <mat-toolbar color="primary">
-    <button mat-button class="nav-title" [routerLink]="''">{{"nav.title" | translate}}</button>
-    <button mat-button class="nav-link" [routerLink]="'log'">{{"nav.logs" | translate}}</button>
-    <button mat-button class="nav-link" [routerLink]="'projects'">{{"nav.project_list" | translate}}</button>
-    <button mat-button class="nav-link" [routerLink]="'new_project'">{{"nav.new_project" | translate}}</button>
+    <button mat-button [class.mat-accent]="router.url == '/'" class="nav-title" [routerLink]="''">{{"nav.title" | translate}}</button>
+    <button mat-button [class.mat-accent]="router.url == '/log'" class="nav-link" [routerLink]="'log'">{{"nav.logs" | translate}}</button>
+    <button mat-button [class.mat-accent]="router.url == '/projects'" class="nav-link" [routerLink]="'projects'">{{"nav.project_list" | translate}}</button>
+    <button mat-button [class.mat-accent]="router.url == '/new_project'" class="nav-link" [routerLink]="'new_project'">{{"nav.new_project" | translate}}</button>
     <span class="nav-spacer"></span>
     <mat-form-field [floatLabel]="'never'">
         <mat-select [placeholder]="'nav.langSelect' | translate" (selectionChange)="langChange($event)">
diff --git a/web/angular/src/app/app.component.ts b/web/angular/src/app/app.component.ts
index df8990d..ed37894 100644
--- a/web/angular/src/app/app.component.ts
+++ b/web/angular/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {Router} from '@angular/router';
 import {TranslateService} from "@ngx-translate/core";
 import {MatSelectChange} from "@angular/material";
 
@@ -18,7 +19,7 @@ export class AppComponent {
         {lang: "en", display: "English"},
     ];
 
-    constructor(private translate: TranslateService) {
+    constructor(private translate: TranslateService, private router: Router) {
 
         translate.addLangs([
             "en",
diff --git a/web/angular/src/app/app.module.ts b/web/angular/src/app/app.module.ts
index fa6974e..cdc915a 100755
--- a/web/angular/src/app/app.module.ts
+++ b/web/angular/src/app/app.module.ts
@@ -40,6 +40,7 @@ import {SnackBarComponent} from "./messenger/snack-bar.component";
 import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core";
 import {TranslateHttpLoader} from "@ngx-translate/http-loader";
 import {TranslatedPaginator} from "./TranslatedPaginatorConfiguration";
+import {Router} from "@angular/router";
 
 
 export function createTranslateLoader(http: HttpClient) {
diff --git a/web/angular/src/app/create-project/create-project.component.html b/web/angular/src/app/create-project/create-project.component.html
index 9cc8711..dbeb4ef 100644
--- a/web/angular/src/app/create-project/create-project.component.html
+++ b/web/angular/src/app/create-project/create-project.component.html
@@ -1,38 +1,38 @@
-<mat-card>
-    <mat-card-title>Create new project</mat-card-title>
-    <mat-card-subtitle></mat-card-subtitle>
+<div class="container">
+    <mat-card class="mat-elevation-z8">
+		<mat-card-title>{{"project.create_title" | translate}}</mat-card-title>
+	    <mat-card-subtitle>{{"project.create_subtitle" | translate}}</mat-card-subtitle>
 
-    <mat-card-content>
-        <form (ngSubmit)="onSubmit()">
-            <mat-form-field appearance="outline">
-                <mat-label>Project name</mat-label>
-                <input type="text" matInput [(ngModel)]="project.name" name="name" placeholder="Project name">
-            </mat-form-field>
+	    <mat-card-content>
+		<form (ngSubmit)="onSubmit()">
+		    <mat-form-field appearance="outline">
+			    <mat-label>{{"project.name" | translate}}</mat-label>
+			<input type="text" matInput [(ngModel)]="project.name" name="name" [placeholder]="'project.name' | translate">
+		    </mat-form-field>
 
+		    <mat-form-field appearance="outline">
+			    <mat-label>{{ "project.clone_url" | translate}}</mat-label>
+			<input type="text" matInput [(ngModel)]="project.clone_url" name="clone_url"
+			       [placeholder]="'project.clone_url_placeholder' | translate">
+		    </mat-form-field>
+		    <mat-form-field appearance="outline">
+			    <mat-label>{{ "project.git_repo" | translate }}</mat-label>
+			<input type="text" matInput [(ngModel)]="project.git_repo" name="git_repo"
+			       [placeholder]="'project.git_repo_placeholder' | translate">
+			<mat-hint align="start">
+				{{"project.git_repo_hint" | translate}}
+			</mat-hint>
+		    </mat-form-field>
 
-            <mat-form-field appearance="outline">
-                <mat-label>Git clone URL</mat-label>
-                <input type="text" matInput [(ngModel)]="project.clone_url" name="clone_url"
-                       placeholder="Git clone url">
-            </mat-form-field>
-            <mat-form-field appearance="outline">
-                <mat-label>Repository name</mat-label>
-                <input type="text" matInput [(ngModel)]="project.git_repo" name="clone_url"
-                       placeholder='Full repository name (e.g. "simon987/task_tracker")'>
-                <mat-hint align="start">
-                    Changes on the <strong>master</strong> branch will be tracked if webhooks are enabled
-                </mat-hint>
-            </mat-form-field>
+		    <mat-checkbox matInput [(ngModel)]="project.public" name="public" style="padding-top: 1em">
+			    {{"project.public" | translate}}</mat-checkbox>
 
-            <mat-checkbox matInput [(ngModel)]="project.public" name="public" stype="padding-top: 1em">Public project
-            </mat-checkbox>
+		    <input type="hidden" name="version" value="{{project.version}}">
 
-
-            <input type="hidden" name="version" value="{{project.version}}">
-
-            <input type="submit" value="Create">
-        </form>
-    </mat-card-content>
-
-
-</mat-card>
+		</form>
+	    </mat-card-content>
+        <mat-card-actions>
+            <button mat-raised-button color="primary" type="submit">{{'project.create' | translate}}</button>
+        </mat-card-actions>
+	</mat-card>
+</div>
diff --git a/web/angular/src/app/project-dashboard/project-dashboard.component.html b/web/angular/src/app/project-dashboard/project-dashboard.component.html
index abfa326..59e2084 100644
--- a/web/angular/src/app/project-dashboard/project-dashboard.component.html
+++ b/web/angular/src/app/project-dashboard/project-dashboard.component.html
@@ -1,44 +1,33 @@
-<div>
+<div class="container">
     <mat-card>
-        <mat-card-title *ngIf="projectStats">Stats for project "{{projectStats["project"]["name"]}}"</mat-card-title>
+        <mat-card-title *ngIf="project">{{"dashboard.title" | translate}} "{{project.name}}"</mat-card-title>
         <mat-card-content style="padding: 2em 0 1em">
 
-            <p *ngIf="projectStats">Git repository: <a target="_blank"
-                                                       [href]="projectStats['project']['clone_url']">{{projectStats["project"]["git_repo"]}}</a>
+            <p *ngIf="project">
+                {{"project.git_repo" | translate}}:
+                <a target="_blank" [href]="project['clone_url']">{{project.git_repo}}</a>
             </p>
-            <p>Message of the day: </p>
-            <pre *ngIf="projectStats">{{projectStats["project"]["motd"]}}</pre>
+            <p>{{"project.motd" | translate}}:</p>
+            <pre *ngIf="project">{{project.motd}}</pre>
 
             <div style="display: flex; align-items: center; justify-content: center">
-                <div id="line"></div>
+                <div id="timeline"></div>
 
-                <div id="status">
-                    <div class="tooltip" id="stooltip">
-                        <div class="label"></div>
-                        <div class="count"></div>
-                        <div class="percent"></div>
-                    </div>
-                    <div class="pie-label">Task Status</div>
-                </div>
-                <div id="assignees">
-                    <div class="tooltip" id="atooltip">
-                        <div class="label"></div>
-                        <div class="count"></div>
-                        <div class="percent"></div>
-                    </div>
-                    <div class="pie-label">Assignees</div>
-                </div>
+                <div id="status-pie"></div>
+                <div id="assignees-pie"></div>
             </div>
 
-            <mat-expansion-panel *ngIf="projectStats" style="margin-top: 1em">
+            <mat-expansion-panel *ngIf="project" style="margin-top: 1em">
                 <mat-expansion-panel-header>
-                    <mat-panel-title>Project metadata</mat-panel-title>
+                    <mat-panel-title>{{"dashboard.metadata" | translate}}</mat-panel-title>
                 </mat-expansion-panel-header>
-                <pre>{{projectStats | json}}</pre>
+                <pre>{{project | json}}</pre>
             </mat-expansion-panel>
 
-            <a [routerLink]="'/project/' + projectStats.project.id + '/update'">Update</a>
-
         </mat-card-content>
+        <mat-card-actions>
+            <button mat-raised-button color="primary"
+                    [routerLink]="'/project/' + project.id + '/update'">{{"project.update" | translate}}</button>
+        </mat-card-actions>
     </mat-card>
 </div>
diff --git a/web/angular/src/app/project-dashboard/project-dashboard.component.ts b/web/angular/src/app/project-dashboard/project-dashboard.component.ts
index 9e51d97..57269aa 100644
--- a/web/angular/src/app/project-dashboard/project-dashboard.component.ts
+++ b/web/angular/src/app/project-dashboard/project-dashboard.component.ts
@@ -1,4 +1,7 @@
 import {Component, OnInit} from '@angular/core';
+import {ApiService} from "../api.service";
+import {Project} from "../models/project";
+import {ActivatedRoute} from "@angular/router";
 
 
 @Component({
@@ -9,8 +12,32 @@ import {Component, OnInit} from '@angular/core';
 export class ProjectDashboardComponent implements OnInit {
 
     private projectId;
-    projectStats;
+    project: Project;
+
+
+    constructor(private apiService: ApiService, private route: ActivatedRoute) {
+    }
+
 
     ngOnInit(): void {
+        this.route.params.subscribe(params => {
+            this.projectId = params["id"];
+            this.getProject();
+        })
+    }
+
+    private getProject() {
+        this.apiService.getProject(this.projectId).subscribe(data => {
+            this.project = <Project>{
+                id: data["project"]["id"],
+                name: data["project"]["name"],
+                clone_url: data["project"]["clone_url"],
+                git_repo: data["project"]["git_repo"],
+                motd: data["project"]["motd"],
+                priority: data["project"]["priority"],
+                version: data["project"]["version"],
+                public: data["project"]["public"],
+            }
+        })
     }
 }
diff --git a/web/angular/src/app/project-list/project-list.component.css b/web/angular/src/app/project-list/project-list.component.css
index e69de29..903540a 100755
--- a/web/angular/src/app/project-list/project-list.component.css
+++ b/web/angular/src/app/project-list/project-list.component.css
@@ -0,0 +1,3 @@
+button {
+    margin-right: 15px;
+}
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 be095e5..d0d8962 100755
--- a/web/angular/src/app/project-list/project-list.component.html
+++ b/web/angular/src/app/project-list/project-list.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <mat-card>
+    <mat-card class="mat-elevation-z8">
         <mat-card-header>
             <mat-card-title>{{"projects.projects" | translate}}</mat-card-title>
         </mat-card-header>
@@ -7,15 +7,16 @@
             <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-title><span style="width: 3em">{{project.id}}</span>{{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">
+                    <div>
+                        <button mat-raised-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>
+                        <button mat-raised-button [routerLink]="'/project/' + project.id + '/update'">
+                            <mat-icon>build</mat-icon>{{"project.update" | translate}}</button>
                     </div>
                 </mat-expansion-panel>
             </mat-accordion>
diff --git a/web/angular/src/app/update-project/update-project.component.html b/web/angular/src/app/update-project/update-project.component.html
index 9c9076d..aa04016 100644
--- a/web/angular/src/app/update-project/update-project.component.html
+++ b/web/angular/src/app/update-project/update-project.component.html
@@ -1,29 +1,34 @@
-<mat-card>
-    <mat-card-title>Update project</mat-card-title>
+<div class="container">
+    <mat-card class="mat-elevation-z8">
+        <mat-card-title>Update project</mat-card-title>
 
-    <mat-card-content>
-        <form (ngSubmit)="onSubmit()" *ngIf="project != undefined">
-            <mat-form-field appearance="outline">
-                <input type="text" matInput [(ngModel)]="project.name" name="name" placeholder="Name">
-            </mat-form-field>
+        <mat-card-content>
+            <form (ngSubmit)="onSubmit()" *ngIf="project != undefined" id="uf">
+                <mat-form-field appearance="outline">
+                    <input type="text" matInput [(ngModel)]="project.name" name="name" placeholder="Name">
+                </mat-form-field>
 
-            <mat-form-field appearance="outline">
-                <textarea matInput [(ngModel)]="project.motd" placeholder="Message of the day" name="motd"></textarea>
-            </mat-form-field>
+                <mat-form-field appearance="outline">
+                    <textarea matInput [(ngModel)]="project.motd" placeholder="Message of the day"
+                              name="motd"></textarea>
+                </mat-form-field>
 
-            <mat-form-field appearance="outline">
-                <input type="text" matInput [(ngModel)]="project.clone_url" name="clone_url"
-                       placeholder="Git clone url">
-            </mat-form-field>
-            <mat-form-field appearance="outline">
-                <input type="text" matInput [(ngModel)]="project.git_repo" name="git_repo"
-                       placeholder='Full repository name (e.g. "simon987/task_tracker")'>
-                <mat-hint align="start">Changes on the <strong>master</strong> branch will be tracked if webhooks are
-                    enabled
-                </mat-hint>
-            </mat-form-field>
-
-            <input type="submit" value="Update">
-        </form>
-    </mat-card-content>
-</mat-card>
+                <mat-form-field appearance="outline">
+                    <input type="text" matInput [(ngModel)]="project.clone_url" name="clone_url"
+                           placeholder="Git clone url">
+                </mat-form-field>
+                <mat-form-field appearance="outline">
+                    <input type="text" matInput [(ngModel)]="project.git_repo" name="git_repo"
+                           placeholder='Full repository name (e.g. "simon987/task_tracker")'>
+                    <mat-hint align="start">Changes on the <strong>master</strong> branch will be tracked if webhooks
+                        are
+                        enabled
+                    </mat-hint>
+                </mat-form-field>
+            </form>
+        </mat-card-content>
+        <mat-card-actions>
+            <button type="submit" form="uf" mat-raised-button color="primary">{{"project.update" | translate}}</button>
+        </mat-card-actions>
+    </mat-card>
+</div>
diff --git a/web/angular/src/assets/i18n/en.json b/web/angular/src/assets/i18n/en.json
index b82d499..623ee7c 100644
--- a/web/angular/src/assets/i18n/en.json
+++ b/web/angular/src/assets/i18n/en.json
@@ -21,13 +21,31 @@
     },
     "projects": {
         "projects": "Projects",
-        "dashboard": "Dashboard",
-        "update": "Update"
+        "dashboard": "Dashboard"
     },
     "title": {
         "": "Index",
+        "project": "Project",
         "projects": "Projects",
         "log": "Logs",
         "new_project": "New project"
+    },
+    "project": {
+        "name": "Project name",
+        "clone_url": "Clone url",
+        "clone_url_placeholder": "Example: \"https://github.com/simon987/task_tracker\"",
+        "git_repo_placeholder": "Example: \"simon987/task_tracker\"",
+        "git_repo_hint": "Changes in the master branch will be tracked if webhooks are enabled",
+        "create_title": "Create new project",
+        "create_subtitle": "Todo: subtitle",
+        "public": "Public",
+        "create": "Create",
+        "git_repo": "Git repository name",
+        "motd": "Message of the day",
+        "update": "Update"
+    },
+    "dashboard": {
+        "title": "Dashboard for",
+        "metadata": "Project metadata"
     }
 }
diff --git a/web/angular/src/assets/i18n/fr.json b/web/angular/src/assets/i18n/fr.json
index bd24d59..baf4d87 100644
--- a/web/angular/src/assets/i18n/fr.json
+++ b/web/angular/src/assets/i18n/fr.json
@@ -21,14 +21,32 @@
     },
     "projects": {
         "projects": "Projets",
-        "dashboard": "Tableau de bord",
-        "update": "Modifier"
+        "dashboard": "Tableau de bord"
     },
     "title": {
         "": "Accueil",
+        "project": "Projet",
         "projects": "Projets",
         "log": "Journal",
-        "new_project": "Nouveau projet"
+        "new_project": "Nouveau projet",
+        "update": "Modifier"
+    },
+    "project": {
+        "name": "Nom du projet",
+        "clone_url": "Url de clone git",
+        "clone_url_placeholder": "Exemple: \"https://github.com/simon987/task_tracker\"",
+        "git_repo_placeholder": "Exemple: \"simon987/task_tracker\"",
+        "git_repo": "Nom du repository git",
+        "git_repo_hint": "Les changements dans la branche master vont êtres pris en compte si les webhooks sont activés",
+        "create_title": "Créer un nouveau projet",
+        "create_subtitle": "todo: sous-titre",
+        "public": "Publique",
+        "create": "Créer",
+        "motd": "Message du jour"
+    },
+    "dashboard": {
+        "title": "Tableau de bord pour ",
+        "metadata": "Métadonnés du projet"
     }
 }