Display checkmark if all tasks are successful

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

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/src/app/scenario/task-progress/task-progress.component.html b/src/app/scenario/task-progress/task-progress.component.html
@@ -1,18 +1,26 @@
 <div class="flex-container task-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>
+  <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 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.scss b/src/app/scenario/task-progress/task-progress.component.scss
@@ -75,3 +75,11 @@
     color: var(--clr-btn-default-outline-hover-color, #3bb1d8);
   }
 }
+
+.label-task {
+  width: 25px;
+  height: 25px;
+  left: 2px;
+  margin-left: 5px;
+  margin-top: 2px;
+}
diff --git a/src/app/scenario/task-progress/task-progress.component.ts b/src/app/scenario/task-progress/task-progress.component.ts
@@ -70,6 +70,10 @@ export class TaskProgressComponent implements AfterViewInit, OnDestroy {
       .subscribe();
   }
 
+  allTasksSuccessful(): boolean {
+    return this.tasks != 0 && this.index == this.tasks;
+  }
+
   onClickVerify() {
     this.verifyAll().subscribe();
   }