Green circle if all tasks complete

hobbyfarm · Apr 9, 2024 · feddc6a · feddc6a
1 parent 8fac24d
commit feddc6a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 26 deletions.
diff --git a/src/app/scenario/task-progress/task-progress.component.html b/src/app/scenario/task-progress/task-progress.component.html
@@ -1,26 +1,18 @@
 <div class="flex-container task-container">
-  <ng-container *ngIf="!allTasksSuccessful()">
-    <div class="flex-element" (click)="onClickVerify()">
-      <svg class="progress-ring" height="30" width="30">
-        <circle
-          #circle
-          class="circle"
-          stroke="var(--clr-nav-active-box-shadow-color, #54cbf2)"
-          stroke-width="3"
-          fill="var(--clr-global-hover-bg-color, #f6f6f6)"
-          r="10"
-          cx="15"
-          cy="15"
-        />
-      </svg>
-    </div>
-  </ng-container>
-  <ng-container *ngIf="allTasksSuccessful()">
-    <span class="label label-success label-task">
-      <cds-icon shape="check" height="30" width="30" inverse></cds-icon>
-    </span>
-  </ng-container>
-
+  <div class="flex-element" (click)="onClickVerify()">
+    <svg class="progress-ring" height="30" width="30">
+      <circle
+        #circle
+        class="circle"
+        stroke="var(--clr-nav-active-box-shadow-color, #54cbf2)"
+        stroke-width="3"
+        fill="var(--clr-global-hover-bg-color, #f6f6f6)"
+        r="10"
+        cx="15"
+        cy="15"
+      />
+    </svg>
+  </div>
   <div class="flex-element text-box">
     <div class="info-text">{{ index }} of {{ tasks }} Tasks</div>
     <div class="info-text-hover">Show more</div>

diff --git a/src/app/scenario/task-progress/task-progress.component.ts b/src/app/scenario/task-progress/task-progress.component.ts
@@ -55,6 +55,18 @@ export class TaskProgressComponent implements AfterViewInit, OnDestroy {
         if (this.percentages) {
           this.setProgress(this.percentages[this.index]);
         }
+
+        if (this.tasks == this.index) {
+          this.circle.nativeElement.style.stroke =
+            'var(--clr-label-success-border-color, hsl(93, 100%, 21%))'; // Success color
+          this.circle.nativeElement.style.fill =
+            'var(--clr-label-success-bg-color, hsl(93, 52%, 88%))'; // Success BG color
+        } else {
+          this.circle.nativeElement.style.stroke =
+            'var(--clr-nav-active-box-shadow-color, #54cbf2)'; // Normal task color
+          this.circle.nativeElement.style.fill =
+            'var(--clr-global-hover-bg-color, #f6f6f6)'; // Task BG color
+        }
       },
     );
     const radius = this.circle.nativeElement.r.baseVal.value;
@@ -70,10 +82,6 @@ export class TaskProgressComponent implements AfterViewInit, OnDestroy {
       .subscribe();
   }
 
-  allTasksSuccessful(): boolean {
-    return this.tasks != 0 && this.index == this.tasks;
-  }
-
   onClickVerify() {
     this.verifyAll().subscribe();
   }