srumboard_frontend/src/app/components/dashboard/dashboard.component.html

125 lines
4.4 KiB
HTML

<div class="container-fluid">
<div class="content">
<h3>Dashboard</h3>
<div>
<div class="row px-3 py-2">
<!-- Show a message if no sprints exist yet, with a link to the page where a new one can be created -->
<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>
<ng-container *ngIf="selectedSprint !== undefined">
<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>
<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>
<!-- If the active sprint is selected: Show the number of remaining days + urgency -->
<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>
</ng-container>
</div>
<div class="row">
<!-- Info on the userstories in the selected sprint -->
<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>
<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">
<span class="text-large">
{{ status.title }}
</span>
</div>
<div class="card-body">
<span class="text-very-large">
<b>{{ getNumberOfUserstoriesByStatus(status) }}</b>
</span>
</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>
</div>
</div>
</div>
</div>
</div>
</div>