From d6f699e9151122012dcc18266c37b86eb4f36f5c Mon Sep 17 00:00:00 2001
From: Jakob Fahr <me@jfhr.de>
Date: Mon, 6 Jul 2020 22:41:01 +0200
Subject: [PATCH] Fix getBackgroundColors() in dashboard

---
 src/app/app.component.html                    |   8 +-
 src/app/dashboard/dashboard.component.css     |   8 +
 src/app/dashboard/dashboard.component.html    | 140 +++++++++---------
 src/app/dashboard/dashboard.component.ts      |  26 +++-
 .../userstory-table.component.html            |  10 +-
 5 files changed, 113 insertions(+), 79 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index c7d0a40..4ae5f26 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -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>
diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css
index e67ab28..eaf95ec 100644
--- a/src/app/dashboard/dashboard.component.css
+++ b/src/app/dashboard/dashboard.component.css
@@ -5,3 +5,11 @@
 .text-very-large {
   font-size: 2.4rem;
 }
+
+.content {
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-left: 20px;
+  width: 80%;
+}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 73238c1..471a142 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -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>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index e8e4c92..2ea774d 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -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;
diff --git a/src/app/userstory-table/userstory-table.component.html b/src/app/userstory-table/userstory-table.component.html
index 75b9cf0..0203afa 100644
--- a/src/app/userstory-table/userstory-table.component.html
+++ b/src/app/userstory-table/userstory-table.component.html
@@ -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>
+<div class="container-fluid">
+  <div class="content">
+    <h3>Userstories</h3>
+    <app-userstory-inner-table [items]="items"></app-userstory-inner-table>
+  </div>
+</div>
\ No newline at end of file