niggl/srumboard_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added status title

Browse Source
This commit is contained in:
Michael 2020-06-30 13:23:08 +02:00
parent 8a7e480bf7
commit 89429b49b3
7 changed files with 296 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app-routing.module.ts
View File

@ -4,18 +4,18 @@ import { Routes, RouterModule } from '@angular/router';
import { UserstoryTableComponent } from './userstory-table/userstory-table.component';
import { TaskTableComponent } from './task-table/task-table.component';
import { SprintTableComponent } from './sprint-table/sprint-table.component';
import { DashboardComponent } from './dashboard/dashboard.component';
// import { DashboardComponent } from './dashboard/dashboard.component';
const routes: Routes = [
{ path: 'tasks', component: TaskTableComponent },
{ path: 'userstories', component: UserstoryTableComponent },
{ path: 'sprints', component: SprintTableComponent },
{ path: 'dashboard', component: DashboardComponent },
// { path: 'dashboard', component: DashboardComponent },
{ path: '', redirectTo: '/tasks', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [ RouterModule ]
exports: [RouterModule],
})
export class AppRoutingModule {}

12
src/app/app.module.ts
View File

@ -14,7 +14,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { UserstoryTableComponent } from './userstory-table/userstory-table.component';
import { TaskTableComponent } from './task-table/task-table.component';
import { SprintTableComponent } from './sprint-table/sprint-table.component';
import { DashboardComponent } from './dashboard/dashboard.component';
// import { DashboardComponent } from './dashboard/dashboard.component';
@NgModule({
declarations: [
@ -26,18 +26,16 @@ import { DashboardComponent } from './dashboard/dashboard.component';
UserstoryTableComponent,
SprintFormComponent,
SprintTableComponent,
DashboardComponent
// DashboardComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
NgbModule
NgbModule,
],
providers: [
BackendService,
],
bootstrap: [AppComponent]
providers: [BackendService],
bootstrap: [AppComponent],
})
export class AppModule {}

4
src/app/dashboard/dashboard.component.css
View File

@ -1,3 +1,3 @@
.text-2em {
/* .text-2em {
font-size: 2rem;
}
} */

4
src/app/dashboard/dashboard.component.html
View File

@ -1,4 +1,4 @@
<div class="container-fluid">
{% comment %} <div class="container-fluid">
<div class="row px-3 py-2">
<h1>Dashboard</h1>
@ -57,4 +57,4 @@
</div>
</div>
</div> {% endcomment %}

268
src/app/dashboard/dashboard.component.ts
View File

@ -1,127 +1,159 @@
import {Component, OnInit} from '@angular/core';
import Chart from 'chart.js';
import {BackendService, ScrumStatus, ScrumUser, ScrumUserstory, ScrumSprint} from '../services/backend.service';
// import { Component, OnInit } from '@angular/core';
// // import Chart from 'chart.js';
// import {
// BackendService,
// ScrumStatus,
// ScrumUser,
// ScrumUserstory,
// ScrumSprint,
// } from '../services/backend.service';
@Component({
selector: 'app-dashboard',
templateUrl: 'dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
/**
* Returns the status that are used by at least one userstory.
*/
public get usedStatus(): ScrumStatus[] {
return this.status.filter(s => this.userstories.find(us => us.statusid === s.id) !== undefined);
}
private status: ScrumStatus[];
private userstories: ScrumUserstory[];
private sprints: ScrumSprint[];
constructor(private backendService: BackendService) {
// backendService.getUserstories().subscribe(response => {
// if (response.status > 399) {
// alert('Fehler');
// } else {
// this.userstories.push(...response.body);
// @Component({
// selector: 'app-dashboard',
// templateUrl: 'dashboard.component.html',
// styleUrls: ['./dashboard.component.css'],
// })
// export class DashboardComponent implements OnInit {
// /**
// * Returns the status that are used by at least one userstory.
// */
// public get usedStatus(): ScrumStatus[] {
// return this.status.filter(
// (s) => this.userstories.find((us) => us.statusid === s.id) !== undefined
// );
// }
// });
// backendService.getAllStatus().subscribe(response => {
// if (response.status > 399) {
// alert('Fehler');
// } else {
// this.status.push(...response.body);
// private status: ScrumStatus[];
// private userstories: ScrumUserstory[];
// private sprints: ScrumSprint[];
// constructor(private backendService: BackendService) {
// // backendService.getUserstories().subscribe(response => {
// // if (response.status > 399) {
// // alert('Fehler');
// // } else {
// // this.userstories.push(...response.body);
// // }
// // });
// // backendService.getAllStatus().subscribe(response => {
// // if (response.status > 399) {
// // alert('Fehler');
// // } else {
// // this.status.push(...response.body);
// // }
// // });
// // backendService.getSprints().subscribe(response => {
// // if (response.status > 399) {
// // alert('Fehler');
// // } else {
// // this.sprints.push(...response.body);
// // }
// // });
// this.status = [
// { id: 0, title: 'In progress', description: '' },
// { id: 1, title: 'Done', description: '' },
// ];
// this.userstories = [
// { statusid: 0, title: '' },
// { statusid: 0, title: '' },
// { statusid: 0, title: '' },
// { statusid: 1, title: '' },
// { statusid: 1, title: '' },
// ];
// this.sprints = [
// {
// description: '',
// title: '',
// project: 0,
// startDate: new Date(2020, 5, 22),
// endDate: new Date(2020, 5, 28),
// },
// {
// description: '',
// title: '',
// project: 0,
// startDate: new Date(2020, 5, 29),
// endDate: new Date(2020, 6, 5),
// },
// ];
// }
// ngOnInit(): void {
// // @ts-ignore
// const context = document
// .getElementById('done-stories-chart')
// .getContext('2d');
// const chart = new Chart(context, {
// type: 'pie',
// data: {
// labels: this.usedStatus.map((s) => s.title),
// datasets: [
// {
// label: 'Done stories',
// data: this.usedStatus.map((s) =>
// this.getNumberOfUserstoriesByStatus(s)
// ),
// backgroundColor: this.getBackgroundColors(),
// },
// ],
// },
// });
// backendService.getSprints().subscribe(response => {
// if (response.status > 399) {
// alert('Fehler');
// } else {
// this.sprints.push(...response.body);
// }
// });
this.status = [
{id: 0, title: "In progress", description:""},
{id: 1, title: "Done", description:""},
];
this.userstories = [
{statusid: 0, title:""},
{statusid: 0, title:""},
{statusid: 0, title:""},
{statusid: 1, title:""},
{statusid: 1, title:""},
];
this.sprints = [
{description:"", title:"", project: 0, startDate: new Date(2020, 5, 22), endDate: new Date(2020, 5, 28)},
{description:"", title:"", project: 0, startDate: new Date(2020, 5, 29), endDate: new Date(2020, 6, 5)},
]
}
// private getBackgroundColors(): string[] {
// const baseColors = [
// 'rgb(255, 153, 102)',
// 'rgb(255, 102, 102)',
// 'rgb(153, 204, 255)',
// 'rgb(102, 153, 102)',
// 'rgb(204, 204, 153)',
// 'rgb(153, 102, 204)',
// 'rgb(204, 102, 102)',
// 'rgb(255, 204, 153)',
// 'rgb(153, 102, 255)',
// 'rgb(204, 204, 204)',
// 'rgb(102, 255, 204)',
// 'rgb(102, 153, 255)',
// 'rgb(153, 102, 153)',
// 'rgb(204, 204, 255)',
// ];
// const colors = [];
// while (colors.length < this.usedStatus.length) {
// colors.push(...baseColors);
// }
// return colors;
// }
// public getNumberOfUserstoriesByStatus(status: ScrumStatus): number {
// return this.userstories.filter((us) => us.statusid === status.id).length;
// }
ngOnInit(): void {
// @ts-ignore
const context = document.getElementById('done-stories-chart').getContext('2d');
const chart = new Chart(context, {
type: 'pie',
data: {
labels: this.usedStatus.map(s => s.title),
datasets: [{
label: 'Done stories',
data: this.usedStatus.map(s => this.getNumberOfUserstoriesByStatus(s)),
backgroundColor: this.getBackgroundColors(),
}]
}
});
}
// public getRemainingDaysInSprint(): number {
// const now = new Date();
// const currentSprint = this.sprints.find(
// (s) => s.endDate > now && s.startDate < now
// );
// if (currentSprint === undefined) {
// return undefined;
// }
// const daysDelta = Math.floor(
// (currentSprint.endDate.getTime() - now.getTime()) / 86400000
// );
// return daysDelta;
// }
private getBackgroundColors(): string[] {
const baseColors = [
'rgb(255, 153, 102)',
'rgb(255, 102, 102)',
'rgb(153, 204, 255)',
'rgb(102, 153, 102)',
'rgb(204, 204, 153)',
'rgb(153, 102, 204)',
'rgb(204, 102, 102)',
'rgb(255, 204, 153)',
'rgb(153, 102, 255)',
'rgb(204, 204, 204)',
'rgb(102, 255, 204)',
'rgb(102, 153, 255)',
'rgb(153, 102, 153)',
'rgb(204, 204, 255)',
];
const colors = [];
while (colors.length < this.usedStatus.length) {
colors.push(...baseColors);
}
return colors;
}
public getNumberOfUserstoriesByStatus(status: ScrumStatus): number {
return this.userstories.filter(us => us.statusid === status.id).length;
}
public getRemainingDaysInSprint(): number {
const now = new Date();
const currentSprint = this.sprints.find(s => s.endDate > now && s.startDate < now);
if (currentSprint === undefined) {
return undefined;
}
const daysDelta = Math.floor((currentSprint.endDate.getTime() - now.getTime()) / 86400000);
return daysDelta;
}
public getSprintUrgency(): number {
const now = new Date();
const currentSprint = this.sprints.find(s => s.endDate > now && s.startDate < now);
if (currentSprint === undefined) {
return undefined;
}
const deltaFromNow = currentSprint.endDate.getTime() - now.getTime();
const deltaFromStart = currentSprint.endDate.getTime() - currentSprint.startDate.getTime();
return Math.floor(3 * deltaFromNow / deltaFromStart);
}
}
// public getSprintUrgency(): number {
// const now = new Date();
// const currentSprint = this.sprints.find(
// (s) => s.endDate > now && s.startDate < now
// );
// if (currentSprint === undefined) {
// return undefined;
// }
// const deltaFromNow = currentSprint.endDate.getTime() - now.getTime();
// const deltaFromStart =
// currentSprint.endDate.getTime() - currentSprint.startDate.getTime();
// return Math.floor((3 * deltaFromNow) / deltaFromStart);
// }
// }

86
src/app/task-form/task-form.component.html
View File

@ -5,12 +5,21 @@
<h4 class="modal-title">Neuen Task anlegen</h4>
</tr>
<tr>
<h6 class="modal-caption text-muted"> Gehört zu Story: <a href="#"
id="userstoryTitle">{{this.userstoryId}}</a></h6>
<h6 class="modal-caption text-muted">
Gehört zu Story:
<a href="#" id="userstoryTitle">{{ this.userstoryId }}</a>
</h6>
</tr>
<select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
[(ngModel)]="task.priority">
<option *ngFor="let userstory of userstories" value="low">{{userstory.title}}</option>
<select
class="form-control custom-select mr-sm-2"
id="prio"
required
name="prio"
[(ngModel)]="task.priority"
>
<option *ngFor="let userstory of userstories" value="low">{{
userstory.title
}}</option>
</select>
</table>
<button (click)="onClose()" type="button" class="close" aria-label="Close">
@ -19,21 +28,32 @@
</div>
<div class="modal-body">
<form (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label for="Title">Titel</label>
<input type="text" class="form-control" id="Title" required name="title"
[(ngModel)]="task.title" id="titleField">
<input
type="text"
class="form-control"
id="Title"
required
name="title"
[(ngModel)]="task.title"
id="titleField"
/>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-2">
<div class="form-group">
<label for="Prio">Prio</label>
<select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
[(ngModel)]="task.priority">
<select
class="form-control custom-select mr-sm-2"
id="prio"
required
name="prio"
[(ngModel)]="task.priority"
>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
@ -45,32 +65,58 @@
<div class="col-md-9">
<div class="form-group">
<label for="Inhalt">What to do?</label>
<textarea type="text" class="form-control" id="Story" required name="story" rows="5"
[(ngModel)]="task.content"></textarea>
<textarea
type="text"
class="form-control"
id="Story"
required
name="story"
rows="5"
[(ngModel)]="task.content"
></textarea>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-2">
<div class="form-group">
<label for="Inhalt">Status</label>
<select class="form-control custom-select mr-sm-2" id="prio" required name="prio"
[(ngModel)]="task.statusid">
<option *ngFor="let status of allStatus">{{task.statusid}}</option>
<select
class="form-control custom-select mr-sm-2"
id="prio"
required
name="prio"
[(ngModel)]="task.statusid"
>
<option *ngFor="let status of allStatus">{{
status.title
}}</option>
</select>
<button type="button" data-type="plus">
<span class="glyphicon glyphicon-plus"></span>
<button type="button" data-type="plus" (click)="createTaskStatus()">
<span class="glyphicon glyphicon-plus">Add</span>
</button>
</div>
<div class="form-group">
<label for="Inhalt">Assigned User</label>
<input type="text" class="form-control" id="Author" required name="author">
<input
type="text"
class="form-control"
id="Author"
required
name="author"
/>
</div>
</div>
</div>
<div class="modal-footer">
<button (click)="onClose()" type="dismiss" class="btn btn-secondary"
data-dismiss="modal">Abbrechen</button>
<button
(click)="onClose()"
type="dismiss"
class="btn btn-secondary"
data-dismiss="modal"
>
Abbrechen
</button>
<button type="submit" class="btn btn-primary">Erstellen</button>
</div>
</form>

9
src/app/task-form/task-form.component.ts
View File

@ -24,6 +24,7 @@ export class TaskFormComponent implements OnInit {
public userstoryId: string;
public userstories: any[] = [];
public allStatus: any[] = [];
public status: ScrumStatus;
constructor(
private backendService: BackendService,
@ -95,6 +96,14 @@ export class TaskFormComponent implements OnInit {
});
}
createTaskStatus() {
this.backendService.postStatus(this.status).subscribe((response) => {
if (response.status > 399) {
alert('Fehler');
}
});
}
// addNewStatus() {
// this.allStatus;
// }