more translations and styling

This commit is contained in:
simon987 2019-02-06 19:12:07 -05:00
parent 367a81ac76
commit 920647b4aa
12 changed files with 170 additions and 105 deletions

View File

@ -37,7 +37,9 @@ export class AppRoutingModule {
} }
private updateTitle(tr: TranslateService, title: Title, url: string) { 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))
} }
} }

View File

@ -1,8 +1,8 @@
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<button mat-button class="nav-title" [routerLink]="''">{{"nav.title" | translate}}</button> <button mat-button [class.mat-accent]="router.url == '/'" class="nav-title" [routerLink]="''">{{"nav.title" | translate}}</button>
<button mat-button class="nav-link" [routerLink]="'log'">{{"nav.logs" | translate}}</button> <button mat-button [class.mat-accent]="router.url == '/log'" 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.mat-accent]="router.url == '/projects'" 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 == '/new_project'" class="nav-link" [routerLink]="'new_project'">{{"nav.new_project" | translate}}</button>
<span class="nav-spacer"></span> <span class="nav-spacer"></span>
<mat-form-field [floatLabel]="'never'"> <mat-form-field [floatLabel]="'never'">
<mat-select [placeholder]="'nav.langSelect' | translate" (selectionChange)="langChange($event)"> <mat-select [placeholder]="'nav.langSelect' | translate" (selectionChange)="langChange($event)">

View File

@ -1,4 +1,5 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {Router} from '@angular/router';
import {TranslateService} from "@ngx-translate/core"; import {TranslateService} from "@ngx-translate/core";
import {MatSelectChange} from "@angular/material"; import {MatSelectChange} from "@angular/material";
@ -18,7 +19,7 @@ export class AppComponent {
{lang: "en", display: "English"}, {lang: "en", display: "English"},
]; ];
constructor(private translate: TranslateService) { constructor(private translate: TranslateService, private router: Router) {
translate.addLangs([ translate.addLangs([
"en", "en",

View File

@ -40,6 +40,7 @@ import {SnackBarComponent} from "./messenger/snack-bar.component";
import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core"; import {TranslateLoader, TranslateModule, TranslateService} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader"; import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import {TranslatedPaginator} from "./TranslatedPaginatorConfiguration"; import {TranslatedPaginator} from "./TranslatedPaginatorConfiguration";
import {Router} from "@angular/router";
export function createTranslateLoader(http: HttpClient) { export function createTranslateLoader(http: HttpClient) {

View File

@ -1,38 +1,38 @@
<mat-card> <div class="container">
<mat-card-title>Create new project</mat-card-title> <mat-card class="mat-elevation-z8">
<mat-card-subtitle></mat-card-subtitle> <mat-card-title>{{"project.create_title" | translate}}</mat-card-title>
<mat-card-subtitle>{{"project.create_subtitle" | translate}}</mat-card-subtitle>
<mat-card-content> <mat-card-content>
<form (ngSubmit)="onSubmit()"> <form (ngSubmit)="onSubmit()">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Project name</mat-label> <mat-label>{{"project.name" | translate}}</mat-label>
<input type="text" matInput [(ngModel)]="project.name" name="name" placeholder="Project name"> <input type="text" matInput [(ngModel)]="project.name" name="name" [placeholder]="'project.name' | translate">
</mat-form-field> </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-checkbox matInput [(ngModel)]="project.public" name="public" style="padding-top: 1em">
<mat-label>Git clone URL</mat-label> {{"project.public" | translate}}</mat-checkbox>
<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" stype="padding-top: 1em">Public project <input type="hidden" name="version" value="{{project.version}}">
</mat-checkbox>
</form>
<input type="hidden" name="version" value="{{project.version}}"> </mat-card-content>
<mat-card-actions>
<input type="submit" value="Create"> <button mat-raised-button color="primary" type="submit">{{'project.create' | translate}}</button>
</form> </mat-card-actions>
</mat-card-content> </mat-card>
</div>
</mat-card>

View File

@ -1,44 +1,33 @@
<div> <div class="container">
<mat-card> <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"> <mat-card-content style="padding: 2em 0 1em">
<p *ngIf="projectStats">Git repository: <a target="_blank" <p *ngIf="project">
[href]="projectStats['project']['clone_url']">{{projectStats["project"]["git_repo"]}}</a> {{"project.git_repo" | translate}}:
<a target="_blank" [href]="project['clone_url']">{{project.git_repo}}</a>
</p> </p>
<p>Message of the day: </p> <p>{{"project.motd" | translate}}:</p>
<pre *ngIf="projectStats">{{projectStats["project"]["motd"]}}</pre> <pre *ngIf="project">{{project.motd}}</pre>
<div style="display: flex; align-items: center; justify-content: center"> <div style="display: flex; align-items: center; justify-content: center">
<div id="line"></div> <div id="timeline"></div>
<div id="status"> <div id="status-pie"></div>
<div class="tooltip" id="stooltip"> <div id="assignees-pie"></div>
<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> </div>
<mat-expansion-panel *ngIf="projectStats" style="margin-top: 1em"> <mat-expansion-panel *ngIf="project" style="margin-top: 1em">
<mat-expansion-panel-header> <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> </mat-expansion-panel-header>
<pre>{{projectStats | json}}</pre> <pre>{{project | json}}</pre>
</mat-expansion-panel> </mat-expansion-panel>
<a [routerLink]="'/project/' + projectStats.project.id + '/update'">Update</a>
</mat-card-content> </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> </mat-card>
</div> </div>

View File

@ -1,4 +1,7 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {ApiService} from "../api.service";
import {Project} from "../models/project";
import {ActivatedRoute} from "@angular/router";
@Component({ @Component({
@ -9,8 +12,32 @@ import {Component, OnInit} from '@angular/core';
export class ProjectDashboardComponent implements OnInit { export class ProjectDashboardComponent implements OnInit {
private projectId; private projectId;
projectStats; project: Project;
constructor(private apiService: ApiService, private route: ActivatedRoute) {
}
ngOnInit(): void { 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"],
}
})
} }
} }

View File

@ -0,0 +1,3 @@
button {
margin-right: 15px;
}

View File

@ -1,5 +1,5 @@
<div class="container"> <div class="container">
<mat-card> <mat-card class="mat-elevation-z8">
<mat-card-header> <mat-card-header>
<mat-card-title>{{"projects.projects" | translate}}</mat-card-title> <mat-card-title>{{"projects.projects" | translate}}</mat-card-title>
</mat-card-header> </mat-card-header>
@ -7,15 +7,16 @@
<mat-accordion> <mat-accordion>
<mat-expansion-panel *ngFor="let project of projects"> <mat-expansion-panel *ngFor="let project of projects">
<mat-expansion-panel-header> <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-panel-description>{{project.motd}}</mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<pre>{{project | json}}</pre> <pre>{{project | json}}</pre>
<div style="display: flex;"> <div>
<button mat-button [routerLink]="'/project/' + project.id"> <button mat-raised-button [routerLink]="'/project/' + project.id">
<mat-icon>timeline</mat-icon>{{"projects.dashboard" | translate}}</button> <mat-icon>timeline</mat-icon>{{"projects.dashboard" | translate}}</button>
<button mat-button [routerLink]="'/project/' + project.id + '/update'"> <button mat-raised-button [routerLink]="'/project/' + project.id + '/update'">
<mat-icon>build</mat-icon>{{"projects.update" | translate}}</button> <mat-icon>build</mat-icon>{{"project.update" | translate}}</button>
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>

View File

@ -1,29 +1,34 @@
<mat-card> <div class="container">
<mat-card-title>Update project</mat-card-title> <mat-card class="mat-elevation-z8">
<mat-card-title>Update project</mat-card-title>
<mat-card-content> <mat-card-content>
<form (ngSubmit)="onSubmit()" *ngIf="project != undefined"> <form (ngSubmit)="onSubmit()" *ngIf="project != undefined" id="uf">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<input type="text" matInput [(ngModel)]="project.name" name="name" placeholder="Name"> <input type="text" matInput [(ngModel)]="project.name" name="name" placeholder="Name">
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<textarea matInput [(ngModel)]="project.motd" placeholder="Message of the day" name="motd"></textarea> <textarea matInput [(ngModel)]="project.motd" placeholder="Message of the day"
</mat-form-field> name="motd"></textarea>
</mat-form-field>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<input type="text" matInput [(ngModel)]="project.clone_url" name="clone_url" <input type="text" matInput [(ngModel)]="project.clone_url" name="clone_url"
placeholder="Git clone url"> placeholder="Git clone url">
</mat-form-field> </mat-form-field>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<input type="text" matInput [(ngModel)]="project.git_repo" name="git_repo" <input type="text" matInput [(ngModel)]="project.git_repo" name="git_repo"
placeholder='Full repository name (e.g. "simon987/task_tracker")'> 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 <mat-hint align="start">Changes on the <strong>master</strong> branch will be tracked if webhooks
enabled are
</mat-hint> enabled
</mat-form-field> </mat-hint>
</mat-form-field>
<input type="submit" value="Update"> </form>
</form> </mat-card-content>
</mat-card-content> <mat-card-actions>
</mat-card> <button type="submit" form="uf" mat-raised-button color="primary">{{"project.update" | translate}}</button>
</mat-card-actions>
</mat-card>
</div>

View File

@ -21,13 +21,31 @@
}, },
"projects": { "projects": {
"projects": "Projects", "projects": "Projects",
"dashboard": "Dashboard", "dashboard": "Dashboard"
"update": "Update"
}, },
"title": { "title": {
"": "Index", "": "Index",
"project": "Project",
"projects": "Projects", "projects": "Projects",
"log": "Logs", "log": "Logs",
"new_project": "New project" "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"
} }
} }

View File

@ -21,14 +21,32 @@
}, },
"projects": { "projects": {
"projects": "Projets", "projects": "Projets",
"dashboard": "Tableau de bord", "dashboard": "Tableau de bord"
"update": "Modifier"
}, },
"title": { "title": {
"": "Accueil", "": "Accueil",
"project": "Projet",
"projects": "Projets", "projects": "Projets",
"log": "Journal", "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"
} }
} }