Page index sert de compteur de test

assets/js/counter.js

@@ -1,9 +1,9 @@
 export class Countdown {
   constructor(expiredDate, onRender, onComplete) {
-      this.setExpiredDate(expiredDate);
-
       this.onRender = onRender;
       this.onComplete = onComplete;
+      this.setExpiredDate(expiredDate);
+
   }
 
   setExpiredDate(expiredDate) {
@@ -12,7 +12,7 @@ export class Countdown {
 
       // calculate the remaining time 
       this.timeRemaining = expiredDate.getTime() - currentTime;
-
+      console.log(this.timeRemaining)
       this.timeRemaining <= 0 ?
           this.complete() :
           this.start();
@@ -21,7 +21,7 @@ export class Countdown {
 
   complete() {
       if (typeof this.onComplete === 'function') {
-          onComplete();
+          this.onComplete();
       }
   }
   getTime() {
@@ -50,7 +50,7 @@ export class Countdown {
 
           if (this.timeRemaining < 0) {
               // call the callback
-              complete();
+              this.complete();
 
               // clear the interval if expired
               clearInterval(intervalId);

assets/js/fetch.js

@@ -0,0 +1,11 @@
+export class fetchObject{
+    constructor(url, id) {
+        this.url = url + '/' + id
+    }
+
+    async getCounter() {
+        const response = await fetch(this.url);
+        const counter = await response.json();
+        return counter;
+    }
+}

assets/js/main.js

@@ -1,19 +1,25 @@
 import '../styles/counter.css'
 import { Countdown } from './counter.js'
+import { fetchObject } from './fetch.js';
+
+// select elements
+const app = document.querySelector('.countdown-timer');
+const message = document.querySelector('.message');
+const heading = document.querySelector('h1');
+
+const api = new fetchObject("http://localhost:8000/counter", app.dataset.id);
+const counter = await api.getCounter();
+
+heading.innerText = counter.name;
 
 const buttonInit = document.querySelector('#init');
 const buttonStart = document.querySelector('#start');
 
 // Get the new year 
-const getNewYear = () => {
-  const currentYear = new Date().getFullYear();
-  return new Date(`January 01 ${currentYear + 1} 00:00:00`);
+const getEndTime = () => {
+  return new Date(Date.parse(counter.endTime));
 };
 
-// select elements
-const app = document.querySelector('.countdown-timer');
-const message = document.querySelector('.message');
-const heading = document.querySelector('h1');
 
 const format = (t) => {
   return t < 10 ? '0' + t : t;
@@ -22,7 +28,7 @@ const format = (t) => {
 const render = (time) => {
   app.innerHTML = `
       <div class="count-down">
-          <div class="timer">
+          <div class="timer hidden">
               <h2 class="days">${format(time.days)}</h2>
               <small>Days</small>
           </div>
@@ -44,9 +50,9 @@ const render = (time) => {
 
 
 const showMessage = () => {
-  message.innerHTML = `Terminé !`;
+  message.innerHTML = "Le compteur est terminé";
   app.innerHTML = '';
-  heading.style.display = 'none';
+  //heading.style.display = 'none';
 };
 
 const hideMessage = () => {
@@ -55,18 +61,12 @@ const hideMessage = () => {
 };
 
 const complete = () => {
+  console.log("Fonction complete() du main")
   showMessage();
-
-  // restart the countdown after showing the 
-  // greeting message for a day ()
-  setTimeout(() => {
-      hideMessage();
-      countdownTimer.setExpiredDate(getNewYear());
-  }, 1000 * 60 * 60 * 24);
 };
 
 const countdownTimer = new Countdown(
-  getNewYear(),
+  getEndTime(),
   render,
   complete
 );

src/Controller/IndexController.php

@@ -8,11 +8,11 @@ use Symfony\Component\Routing\Attribute\Route;
 
 class IndexController extends AbstractController
 {
-    #[Route('/', name: 'app_index')]
-    public function index(): Response
+    #[Route('/{id}', name: 'app_index')]
+    public function index(?int $id = null): Response
     {
         return $this->render('index/index.html.twig', [
-            'controller_name' => 'IndexController',
+            'id' => $id
         ]);
     }
 }

templates/index/index.html.twig

@@ -6,6 +6,7 @@
     {{ importmap('main') }}
 {% endblock %}
 {% block body %}
+    <h1></h1>
     <div class="countdown-timer" data-id="{{ id }}"></div>
     <div class="message"></div>
 {% endblock %}