added status title
This commit is contained in:
Michael
@@ -1,21 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import {UserstoryTableComponent} from './userstory-table/userstory-table.component';
|
||||
import {TaskTableComponent} from './task-table/task-table.component';
|
||||
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 ]
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
|
||||
@@ -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 { }
|
||||
export class AppModule {}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.text-2em {
|
||||
/* .text-2em {
|
||||
font-size: 2rem;
|
||||
}
|
||||
} */
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
// @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[];
|
||||
// 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);
|
||||
// }
|
||||
// });
|
||||
// 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)},
|
||||
]
|
||||
}
|
||||
// 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(),
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
|
||||
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(),
|
||||
}]
|
||||
}
|
||||
});
|
||||
}
|
||||
// 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;
|
||||
// }
|
||||
|
||||
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 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 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);
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -1,78 +1,124 @@
|
||||
<div class="modal-content p-3">
|
||||
<div class="modal-header">
|
||||
<table>
|
||||
<tr>
|
||||
<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>
|
||||
</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>
|
||||
<div class="modal-header">
|
||||
<table>
|
||||
<tr>
|
||||
<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>
|
||||
</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>
|
||||
</table>
|
||||
<button (click)="onClose()" type="button" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</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"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<option value="low">Low</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="high">High</option>
|
||||
</select>
|
||||
</table>
|
||||
<button (click)="onClose()" type="button" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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>
|
||||
</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">{{
|
||||
status.title
|
||||
}}</option>
|
||||
</select>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
(click)="onClose()"
|
||||
type="dismiss"
|
||||
class="btn btn-secondary"
|
||||
data-dismiss="modal"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</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">
|
||||
</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">
|
||||
<option value="low">Low</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="high">High</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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>
|
||||
</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>
|
||||
<button type="button" data-type="plus">
|
||||
<span class="glyphicon glyphicon-plus"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="Inhalt">Assigned User</label>
|
||||
<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 type="submit" class="btn btn-primary">Erstellen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Erstellen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
// }
|
||||
|
||||
Reference in New Issue
Block a user