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

Fix getBackgroundColors() in dashboard

Browse Source
This commit is contained in:
Jakob Fahr 2020-07-06 22:41:01 +02:00
parent b78c3715cf
commit d6f699e915
No known key found for this signature in database
GPG Key ID: 8873416D8E4CEF6B
5 changed files with 113 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/app.component.html
View File

@ -8,22 +8,22 @@
</div> </div>
<ul class="nav"> <ul class="nav">
<li class="active "> <li class="active ">
<a href="/dashboard"> <a [routerLink]="['dashboard']">
<p>Dashboard</p> <p>Dashboard</p>
</a> </a>
</li> </li>
<li> <li>
<a href="/sprints"> <a [routerLink]="['sprints']">
<p>Sprints</p> <p>Sprints</p>
</a> </a>
</li> </li>
<li> <li>
<a href="/userstories"> <a [routerLink]="['userstories']">
<p>Userstories</p> <p>Userstories</p>
</a> </a>
</li> </li>
<li> <li>
<a href="/tasks"> <a [routerLink]="['tasks']">
<p>Tasks</p> <p>Tasks</p>
</a> </a>
</li> </li>

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

@ -5,3 +5,11 @@
.text-very-large { .text-very-large {
font-size: 2.4rem; font-size: 2.4rem;
} }
.content {
position: relative;
float: left;
margin-top: 10px;
margin-left: 20px;
width: 80%;
}

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

@ -1,97 +1,101 @@
<div class="mx-5 my-3"> <div class="container-fluid">
<div class="content">
<div class="row px-3 py-2"> <h3>Dashboard</h3>
<h1>Dashboard</h1>
</div>
<div class="row px-3 py-2"> <div>
<ng-container *ngIf="selectedSprint === undefined"> <div class="row px-3 py-2">
<h3 class="mr-3 text-primary">Alle Userstories</h3>
<a [routerLink]="['sprints']">Lege einen Sprint an, um Userstories zu organisieren.</a>
</ng-container>
<ng-container *ngIf="selectedSprint !== undefined"> <ng-container *ngIf="selectedSprint === undefined">
<h3 class="mr-3 text-primary">Alle Userstories</h3>
<a [routerLink]="['sprints']">Lege einen Sprint an, um Userstories zu organisieren.</a>
</ng-container>
<h3 class="mr-3 text-primary" *ngIf="selectedSprint === currentSprint">Aktueller Sprint:</h3> <ng-container *ngIf="selectedSprint !== undefined">
<h3 class="mr-3 text-primary" *ngIf="selectedSprint !== currentSprint">Sprint:</h3>
<h3 class="mr-3 custom-text-secondary">{{selectedSprint.title}}</h3>
<h3 class="mr-3">{{toDateString(selectedSprint.startDate)}} - {{toDateString(selectedSprint.endDate)}}</h3>
<label class="mr-3"> <h3 class="mr-3 text-primary" *ngIf="selectedSprint === currentSprint">Aktueller Sprint:</h3>
<select class="select custom-select custom-text-secondary" [(ngModel)]="selectedSprint"> <h3 class="mr-3 text-primary" *ngIf="selectedSprint !== currentSprint">Sprint:</h3>
<option class="bg-secondary text-dark" [ngValue]="currentSprint"> <h3 class="mr-3 custom-text-secondary">{{selectedSprint.title}}</h3>
{{currentSprint.title}} (aktuell) <h3 class="mr-3">{{toDateString(selectedSprint.startDate)}} - {{toDateString(selectedSprint.endDate)}}</h3>
</option>
<option value="" disabled="disabled">─────────────────────────</option>
<option class="text-dark" *ngFor="let sprint of sprints" [ngValue]="sprint">
<ng-container *ngIf="sprint === currentSprint">
{{sprint.title}} (aktuell)
</ng-container>
<ng-container *ngIf="sprint !== currentSprint">
{{sprint.title}} ({{toDateString(sprint.startDate)}} - {{toDateString(sprint.endDate)}})
</ng-container>
</option>
</select>
</label>
<span class="mr-5"></span> <label class="mr-3">
<h3 <select class="select custom-select custom-text-secondary" [(ngModel)]="selectedSprint">
*ngIf="selectedSprint === currentSprint" <option class="bg-secondary text-dark" [ngValue]="currentSprint">
class="mr-3 custom-text-secondary" {{currentSprint.title}} (aktuell)
[class.text-success]="getSprintUrgency() === 2" </option>
[class.text-warning]="getSprintUrgency() === 1" <option value="" disabled="disabled">─────────────────────────</option>
[class.text-danger]="getSprintUrgency() === 0" <option class="text-dark" *ngFor="let sprint of sprints" [ngValue]="sprint">
> <ng-container *ngIf="sprint === currentSprint">
Verbleibende Tage: {{getRemainingDaysInSprint()}} {{sprint.title}} (aktuell)
</h3> </ng-container>
<ng-container *ngIf="sprint !== currentSprint">
{{sprint.title}} ({{toDateString(sprint.startDate)}} - {{toDateString(sprint.endDate)}})
</ng-container>
</option>
</select>
</label>
</ng-container> <span class="mr-5"></span>
<h3
*ngIf="selectedSprint === currentSprint"
class="mr-3 custom-text-secondary"
[class.text-success]="getSprintUrgency() === 2"
[class.text-warning]="getSprintUrgency() === 1"
[class.text-danger]="getSprintUrgency() === 0"
>
Verbleibende Tage: {{getRemainingDaysInSprint()}}
</h3>
</div> </ng-container>
<div class="row"> </div>
<div class="p-3 col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12"> <div class="row">
<div class="card">
<div class="card-header"> <div class="p-3 col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
<div class="card">
<div class="card-header">
<span class="text-large"> <span class="text-large">
Userstories Userstories
</span> </span>
</div> </div>
<div class="card-body"> <div class="card-body">
<div *ngIf="selectedSprint !== undefined && usedStatus.length === 0"> <div *ngIf="selectedSprint !== undefined && usedStatus.length === 0">
Zum Sprint "{{selectedSprint.title}}" sind aktuell keine Userstories vorhanden. Zum Sprint "{{selectedSprint.title}}" sind aktuell keine Userstories vorhanden.
</div>
<canvas id="done-stories-chart"></canvas>
</div>
</div> </div>
<canvas id="done-stories-chart"></canvas> <div class="card-deck">
</div> <div
</div> class="card text-center"
<div class="card-deck"> *ngFor="let status of usedStatus"
<div >
class="card text-center" <div class="card-header">
*ngFor="let status of usedStatus"
>
<div class="card-header">
<span class="text-large"> <span class="text-large">
{{status.title}} {{status.title}}
</span> </span>
</div> </div>
<div class="card-body"> <div class="card-body">
<span class="text-very-large"> <span class="text-very-large">
<b>{{getNumberOfUserstoriesByStatus(status)}}</b> <b>{{getNumberOfUserstoriesByStatus(status)}}</b>
</span> </span>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
<div class="p-3 col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12"> <div class="p-3 col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<app-userstory-inner-table [items]="selectedSprintUserstories"></app-userstory-inner-table> <app-userstory-inner-table [items]="selectedSprintUserstories"></app-userstory-inner-table>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

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

@ -108,9 +108,29 @@ export class DashboardComponent {
} }
} }
// public getNumberOfUserstoriesByStatus(status: ScrumStatus): number { private getBackgroundColors(): string[] {
// return this.userstories.filter((us) => us.statusid === status.id).length; 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 { public getNumberOfUserstoriesByStatus(status: ScrumStatus): number {
return this.selectedSprintUserstories.filter(us => us.statusid === status.id).length; return this.selectedSprintUserstories.filter(us => us.statusid === status.id).length;

10
src/app/userstory-table/userstory-table.component.html
View File

@ -1,4 +1,6 @@
<div class="mx-5 my-3"> <div class="container-fluid">
<h3 class="my-1">Userstories</h3> <div class="content">
<app-userstory-inner-table [items]="items"></app-userstory-inner-table> <h3>Userstories</h3>
</div> <app-userstory-inner-table [items]="items"></app-userstory-inner-table>
</div>
</div>