|
|
@@ -3,11 +3,17 @@ 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 main = document.querySelector('#app');
|
|
|
+const heading = document.createElement('h1');
|
|
|
+const message = document.createElement('div');
|
|
|
+message.classList.add('message');
|
|
|
+const app = document.createElement('div');
|
|
|
+app.classList.add('countdown-timer');
|
|
|
+main.appendChild(heading);
|
|
|
+main.appendChild(app);
|
|
|
+main.appendChild(message);
|
|
|
|
|
|
-const api = new fetchObject("http://localhost:8000/counter", app.dataset.id);
|
|
|
+const api = new fetchObject("http://localhost:8000/counter", main.dataset.id);
|
|
|
constcheckCounter();
|
|
|
|
|
|
// Get the new year
|
|
|
@@ -60,10 +66,26 @@ const complete = () => {
|
|
|
constcheckCounter();
|
|
|
};
|
|
|
|
|
|
+const showErrorMessage = (error) => {
|
|
|
+ message.innerHTML = 'Erreur ' + error.code + ' - ' + error.message;
|
|
|
+ const buttonRestart = document.createElement('button');
|
|
|
+ buttonRestart.innerText = "Réessayer";
|
|
|
+ app.appendChild(buttonRestart);
|
|
|
+ buttonRestart.addEventListener('click', (e) => {
|
|
|
+ buttonRestart.remove();
|
|
|
+ constcheckCounter();
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
function constcheckCounter () {
|
|
|
const intervalId = setInterval(async () => {
|
|
|
const counter = await api.getCounter();
|
|
|
+ if (counter.error) {
|
|
|
+ clearInterval(intervalId);
|
|
|
+ showErrorMessage(counter.error);
|
|
|
+ return;
|
|
|
+ }
|
|
|
heading.innerText = counter.name;
|
|
|
if (counter.state === 'ready') {
|
|
|
hideMessage();
|
