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) {
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">
<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)">

View File

@ -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",

View File

@ -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) {

View File

@ -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-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>Git clone URL</mat-label>
<mat-label>{{ "project.clone_url" | translate}}</mat-label>
<input type="text" matInput [(ngModel)]="project.clone_url" name="clone_url"
placeholder="Git clone url">
[placeholder]="'project.clone_url_placeholder' | translate">
</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-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">
Changes on the <strong>master</strong> branch will be tracked if webhooks are enabled
{{"project.git_repo_hint" | translate}}
</mat-hint>
</mat-form-field>
<mat-checkbox matInput [(ngModel)]="project.public" name="public" stype="padding-top: 1em">Public project
</mat-checkbox>
<mat-checkbox matInput [(ngModel)]="project.public" name="public" style="padding-top: 1em">
{{"project.public" | translate}}</mat-checkbox>
<input type="hidden" name="version" value="{{project.version}}">
<input type="submit" value="Create">
</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>

View File

@ -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>

View File

@ -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"],
}
})
}
}

View File

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

View File

@ -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>

View File

@ -1,14 +1,16 @@
<mat-card>
<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">
<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>
<textarea matInput [(ngModel)]="project.motd" placeholder="Message of the day"
name="motd"></textarea>
</mat-form-field>
<mat-form-field appearance="outline">
@ -18,12 +20,15 @@
<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
<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-actions>
<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",
"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"
}
}

View File

@ -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"
}
}