made countdown on buttons

PacifistaMC · Jul 17, 2024 · 94a60cb · 94a60cb
1 parent 5eb8a0a
commit 94a60cb
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/src/app/pages/vote/components/vote-user/vote-user-website/vote-user-website.component.html b/src/app/pages/vote/components/vote-user/vote-user-website/vote-user-website.component.html
@@ -5,8 +5,8 @@
     </button>
     <ng-template #voteCooldown>
         <button class="btn btn-secondary" disabled>
-            <i class="bi bi-box-arrow-up-right"></i>
-            {{ voteWebsite.displayName }}
+            <i class="bi bi-clock-fill"></i>
+            {{ countdown }}
         </button>
     </ng-template>
 </div>

diff --git a/src/app/pages/vote/components/vote-user/vote-user-website/vote-user-website.component.ts b/src/app/pages/vote/components/vote-user/vote-user-website/vote-user-website.component.ts
@@ -18,6 +18,7 @@ export class VoteUserWebsiteComponent implements OnInit {
   private readonly voteService: VoteService;
 
   availableAt?: Date;
+  countdown: string = '00:00:00';
   loading: boolean = false;
 
   constructor(httpClient: HttpClient,
@@ -29,6 +30,10 @@ export class VoteUserWebsiteComponent implements OnInit {
     this.voteService.checkVote(this.voteWebsite.enumName).subscribe({
       next: (voteDTO) => {
         this.availableAt = voteDTO.nextVoteDate;
+
+        if (this.availableAt) {
+          this.startCountdown(new Date(this.availableAt));
+        }
       }
     })
   }
@@ -60,6 +65,7 @@ export class VoteUserWebsiteComponent implements OnInit {
         if (voteDTO.voteValidationDate && voteDTO.nextVoteDate) {
           this.availableAt = voteDTO.nextVoteDate;
           this.loading = false;
+          this.startCountdown(this.availableAt);
         }
       }
     })
@@ -69,4 +75,27 @@ export class VoteUserWebsiteComponent implements OnInit {
     window.open(this.voteWebsite.urlVote, '_blank');
   }
 
+  private startCountdown(targetDate: Date): void {
+    const intervalId = setInterval(() => {
+
+      const now = new Date();
+      const diff = targetDate.getTime() - now.getTime();
+
+      if (diff <= 0) {
+        clearInterval(intervalId);
+        this.countdown = '00:00:00';
+      } else {
+        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+        this.countdown = `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}`;
+      }
+    }, 1000);
+  }
+
+  private pad(num: number): string {
+    return num < 10 ? '0' + num : num.toString();
+  }
+
 }
diff --git a/src/app/pages/vote/vote.component.html b/src/app/pages/vote/vote.component.html
@@ -17,7 +17,7 @@ <h2>Séléction du site de vote</h2>
 
         <div class="col-md-4 pb-4">
             <div class="card" style="width: 18rem;">
-                <img ngSrc="assets/img/vote/box-vote-reward-logo.webp" width="227" height="224" class="card-img-top p-3" alt="Image d'illustration de la récompense de vote pour Pacifista Minecraft.">
+                <img ngSrc="assets/img/vote/box-vote-reward-logo.webp" priority="0" width="227" height="224" class="card-img-top p-3" alt="Image d'illustration de la récompense de vote pour Pacifista Minecraft.">
                 <div class="card-header">
                     <span class="badge bg-success">🎁</span> Récompense par vote
                 </div>