countdown-symfony/assets/js/main.js

//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);
constcheckCounter();

// Get the new year 
const getEndTime = (counter) => {
  return new Date(Date.parse(counter.endTime));
};


const format = (t) => {
  return t < 10 ? '0' + t : t;
};

const render = (time) => {
  app.innerHTML = `
      <div class="count-down">
          <div class="timer hidden">
              <h2 class="days">${format(time.days)}</h2>
              <small>Days</small>
          </div>
          <div class="timer">
              <h2 class="hours">${format(time.hours)}</h2>
              <small>Hours</small>
          </div>
          <div class="timer">
              <h2 class="minutes">${format(time.minutes)}</h2>
              <small>Minutes</small>
          </div>
          <div class="timer">
              <h2 class="seconds">${format(time.seconds)}</h2>
              <small>Seconds</small>
          </div>
      </div>
      `;
};


const showMessage = () => {
  message.innerHTML = "Le compteur est terminé";
  //app.innerHTML = '';
  //heading.style.display = 'none';
};

const hideMessage = () => {
  message.innerHTML = '';
  heading.style.display = 'block';
};

const complete = () => {
  showMessage();
  constcheckCounter();
};


function constcheckCounter () {
  const intervalId = setInterval(async () => {
    const counter = await api.getCounter();
    heading.innerText = counter.name;
    if (counter.state === 'ready') {
      hideMessage();
      const period = new Date(counter.minutes * 1000 * 60);
      render(Countdown.getTime(period));
    } else if (counter.state === 'completed') {
      const zero = new Date(0);
      showMessage();
      render(Countdown.getTime(zero));
    } else {
      clearInterval(intervalId);
      const countdownTimer = new Countdown(
        getEndTime(counter),
        render,
        complete
      )
    }
  }, 1000)
}