Fix getBackgroundColors() in dashboard
This commit is contained in:
Jakob Fahr
parent
b78c3715cf
commit
d6f699e915
@ -8,22 +8,22 @@
|
||||
</div>
|
||||
<ul class="nav">
|
||||
<li class="active ">
|
||||
<a href="/dashboard">
|
||||
<a [routerLink]="['dashboard']">
|
||||
<p>Dashboard</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/sprints">
|
||||
<a [routerLink]="['sprints']">
|
||||
<p>Sprints</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/userstories">
|
||||
<a [routerLink]="['userstories']">
|
||||
<p>Userstories</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/tasks">
|
||||
<a [routerLink]="['tasks']">
|
||||
<p>Tasks</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -5,3 +5,11 @@
|
||||
.text-very-large {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@ -1,97 +1,101 @@
|
||||
<div class="mx-5 my-3">
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
|
||||
<div class="row px-3 py-2">
|
||||
<h1>Dashboard</h1>
|
||||
</div>
|
||||
<h3>Dashboard</h3>
|
||||
|
||||
<div class="row px-3 py-2">
|
||||
<div>
|
||||
|
||||
<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>
|
||||
<div class="row px-3 py-2">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<ng-container *ngIf="selectedSprint !== undefined">
|
||||
|
||||
<label class="mr-3">
|
||||
<select class="select custom-select custom-text-secondary" [(ngModel)]="selectedSprint">
|
||||
<option class="bg-secondary text-dark" [ngValue]="currentSprint">
|
||||
{{currentSprint.title}} (aktuell)
|
||||
</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>
|
||||
<h3 class="mr-3 text-primary" *ngIf="selectedSprint === currentSprint">Aktueller Sprint:</h3>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<label class="mr-3">
|
||||
<select class="select custom-select custom-text-secondary" [(ngModel)]="selectedSprint">
|
||||
<option class="bg-secondary text-dark" [ngValue]="currentSprint">
|
||||
{{currentSprint.title}} (aktuell)
|
||||
</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>
|
||||
|
||||
</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="card">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
|
||||
<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">
|
||||
Userstories
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div *ngIf="selectedSprint !== undefined && usedStatus.length === 0">
|
||||
Zum Sprint "{{selectedSprint.title}}" sind aktuell keine Userstories vorhanden.
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div *ngIf="selectedSprint !== undefined && usedStatus.length === 0">
|
||||
Zum Sprint "{{selectedSprint.title}}" sind aktuell keine Userstories vorhanden.
|
||||
</div>
|
||||
<canvas id="done-stories-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="done-stories-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-deck">
|
||||
<div
|
||||
class="card text-center"
|
||||
*ngFor="let status of usedStatus"
|
||||
>
|
||||
<div class="card-header">
|
||||
<div class="card-deck">
|
||||
<div
|
||||
class="card text-center"
|
||||
*ngFor="let status of usedStatus"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="text-large">
|
||||
{{status.title}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="text-very-large">
|
||||
<b>{{getNumberOfUserstoriesByStatus(status)}}</b>
|
||||
</span>
|
||||
</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="card">
|
||||
<div class="card-body">
|
||||
<app-userstory-inner-table [items]="selectedSprintUserstories"></app-userstory-inner-table>
|
||||
<div class="p-3 col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<app-userstory-inner-table [items]="selectedSprintUserstories"></app-userstory-inner-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -108,9 +108,29 @@ export class DashboardComponent {
|
||||
}
|
||||
}
|
||||
|
||||
// public getNumberOfUserstoriesByStatus(status: ScrumStatus): number {
|
||||
// return this.userstories.filter((us) => us.statusid === status.id).length;
|
||||
// }
|
||||
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.selectedSprintUserstories.filter(us => us.statusid === status.id).length;
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<div class="mx-5 my-3">
|
||||
<h3 class="my-1">Userstories</h3>
|
||||
<app-userstory-inner-table [items]="items"></app-userstory-inner-table>
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
<h3>Userstories</h3>
|
||||
<app-userstory-inner-table [items]="items"></app-userstory-inner-table>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user