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

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

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

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

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

@ -1,3 +1,3 @@
.text-2em { /* .text-2em {
font-size: 2rem; 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"> <div class="row px-3 py-2">
<h1>Dashboard</h1> <h1>Dashboard</h1>
@ -57,4 +57,4 @@
</div> </div>
</div> </div> {% endcomment %}

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

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

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

@ -1,78 +1,124 @@
<div class="modal-content p-3"> <div class="modal-content p-3">
<div class="modal-header"> <div class="modal-header">
<table> <table>
<tr> <tr>
<h4 class="modal-title">Neuen Task anlegen</h4> <h4 class="modal-title">Neuen Task anlegen</h4>
</tr> </tr>
<tr> <tr>
<h6 class="modal-caption text-muted"> Gehört zu Story: <a href="#" <h6 class="modal-caption text-muted">
id="userstoryTitle">{{this.userstoryId}}</a></h6> Gehört zu Story:
</tr> <a href="#" id="userstoryTitle">{{ this.userstoryId }}</a>
<select class="form-control custom-select mr-sm-2" id="prio" required name="prio" </h6>
[(ngModel)]="task.priority"> </tr>
<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">
<span aria-hidden="true">&times;</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> </select>
</table> </div>
<button (click)="onClose()" type="button" class="close" aria-label="Close"> </div>
<span aria-hidden="true">&times;</span> </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> </button>
</div> <button type="submit" class="btn btn-primary">Erstellen</button>
<div class="modal-body"> </div>
<form (ngSubmit)="onSubmit()"> </form>
</div>
<div class="row"> </div>
<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>

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

@ -24,6 +24,7 @@ export class TaskFormComponent implements OnInit {
public userstoryId: string; public userstoryId: string;
public userstories: any[] = []; public userstories: any[] = [];
public allStatus: any[] = []; public allStatus: any[] = [];
public status: ScrumStatus;
constructor( constructor(
private backendService: BackendService, 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() { // addNewStatus() {
// this.allStatus; // this.allStatus;
// } // }