Remove code block for template in arbitrage

Front/js/backend/arbitrage.js

@@ -40,71 +40,27 @@ if (currentStatus.expand.sport.name === "basketball") {
     document.getElementById("arbitrage").innerHTML = "";
     const arbitrageDiv = document.getElementById("arbitrage");
     //Création des boutons pour les différents points
-    const arbitragePoint1 = document.createElement("div");
-    arbitragePoint1.className = "text-center d-flex justify-content-evenly";
-    const arbitragePoint1Btn1 = document.createElement("a");
-    arbitragePoint1Btn1.className = "btn btn-primary";
-    arbitragePoint1Btn1.id = "btnPoint1Btn1";
-    arbitragePoint1Btn1.innerHTML = "1 point pour " + currentStatus.expand.team1.name;
-    const arbitragePoint1Btn2 = document.createElement("a");
-    arbitragePoint1Btn2.className = "btn btn-primary";
-    arbitragePoint1Btn2.id = "btnPoint1Btn2";
-    arbitragePoint1Btn2.innerHTML = "2 points pour " + currentStatus.expand.team1.name;
-    const arbitragePoint1Btn3 = document.createElement("a");
-    arbitragePoint1Btn3.className = "btn btn-primary";
-    arbitragePoint1Btn3.id = "btnPoint1Btn3";
-    arbitragePoint1Btn3.innerHTML = "3 points pour " + currentStatus.expand.team1.name;
-    arbitragePoint1.appendChild(arbitragePoint1Btn1);
-    arbitragePoint1.appendChild(arbitragePoint1Btn2);
-    arbitragePoint1.appendChild(arbitragePoint1Btn3);
-    arbitrageDiv.appendChild(arbitragePoint1);
-    //Création de l'affichage des points
-    const arbitrageDisplayPoint1 = document.createElement("h5");
-    arbitrageDisplayPoint1.className = "text-center";
-    arbitrageDisplayPoint1.id = "textPoint1";
-    arbitrageDisplayPoint1.innerHTML = currentStatus.point1;
-    arbitrageDiv.appendChild(arbitrageDisplayPoint1);
-    arbitrageDiv.appendChild(document.createElement("br"));
-    //Création de l'affichage des points
-    const arbitrageDisplayPoint2 = document.createElement("h5");
-    arbitrageDisplayPoint2.className = "text-center";
-    arbitrageDisplayPoint2.id = "textPoint2";
-    arbitrageDisplayPoint2.innerHTML = currentStatus.point2;
-    arbitrageDiv.appendChild(arbitrageDisplayPoint2);
-    //Création des boutons pour les différents points
-    const arbitragePoint2 = document.createElement("div");
-    arbitragePoint2.className = "text-center d-flex justify-content-evenly";
-    const arbitragePoint2Btn1 = document.createElement("a");
-    arbitragePoint2Btn1.className = "btn btn-primary";
-    arbitragePoint2Btn1.id = "btnPoint2Btn1";
-    arbitragePoint2Btn1.innerHTML = "1 point pour " + currentStatus.expand.team2.name;
-    const arbitragePoint2Btn2 = document.createElement("a");
-    arbitragePoint2Btn2.className = "btn btn-primary";
-    arbitragePoint2Btn2.id = "btnPoint2Btn2";
-    arbitragePoint2Btn2.innerHTML = "2 points pour " + currentStatus.expand.team2.name;
-    const arbitragePoint2Btn3 = document.createElement("a");
-    arbitragePoint2Btn3.className = "btn btn-primary";
-    arbitragePoint2Btn3.id = "btnPoint2Btn3";
-    arbitragePoint2Btn3.innerHTML = "3 points pour " + currentStatus.expand.team2.name;
-    arbitragePoint2.appendChild(arbitragePoint2Btn1);
-    arbitragePoint2.appendChild(arbitragePoint2Btn2);
-    arbitragePoint2.appendChild(arbitragePoint2Btn3);
-    arbitrageDiv.appendChild(arbitragePoint2);
-    arbitrageDiv.appendChild(document.createElement("br"));
-    //Création du bouton pour arrêter le match
-    const arbitrageStopForm = document.createElement("form");
-    arbitrageStopForm.id = "stopMatch";
-    const arbitrageStopFormDiv = document.createElement("div");
-    arbitrageStopFormDiv.className = "text-center";
-    const arbitrageStopFormBtn = document.createElement("button");
-    arbitrageStopFormBtn.type = "submit";
-    arbitrageStopFormBtn.className = "btn btn-danger";
-    arbitrageStopFormBtn.id = "btnStop";
-    arbitrageStopFormBtn.innerHTML = "Arrêter le match";
-    //Gestion de l'arrêt du match
-    arbitrageStopFormDiv.appendChild(arbitrageStopFormBtn);
-    arbitrageStopForm.appendChild(arbitrageStopFormDiv);
-    arbitrageDiv.appendChild(arbitrageStopForm);
+    arbitrageDiv.innerHTML = `
+        <div class="text-center d-flex justify-content-evenly">
+            <a class="btn btn-primary" id="btnPoint1Btn1">1 point pour ${currentStatus.expand.team1.name}</a>
+            <a class="btn btn-primary" id="btnPoint1Btn2">2 points pour ${currentStatus.expand.team1.name}</a>
+            <a class="btn btn-primary" id="btnPoint1Btn3">3 points pour ${currentStatus.expand.team1.name}</a>
+        </div>
+        <h5 class="text-center" id="textPoint1">${currentStatus.point1}</h5>
+        <br>
+        <h5 class="text-center" id="textPoint2">${currentStatus.point2}</h5>
+        <div class="text-center d-flex justify-content-evenly">
+            <a class="btn btn-primary" id="btnPoint2Btn1">1 point pour ${currentStatus.expand.team2.name}</a>
+            <a class="btn btn-primary" id="btnPoint2Btn2">2 points pour ${currentStatus.expand.team2.name}</a>
+            <a class="btn btn-primary" id="btnPoint2Btn3">3 points pour ${currentStatus.expand.team2.name}</a>
+        </div>
+        <br>
+        <form id="stopMatch">
+            <div class="text-center">
+                <button type="submit" class="btn btn-danger" id="btnStop">Arrêter le match</button>
+            </div>
+        </form>
+    `;
 
     //Comptage des points
     const point1Team1 = document.getElementById("btnPoint1Btn1");
@@ -116,71 +72,48 @@ if (currentStatus.expand.sport.name === "basketball") {
 
     //Gestion des points
     point1Team1.addEventListener('click', async function (event) {
-        //Annulation du comportement par défaut
         event.preventDefault();
-
-        //Mise à jour du nombre de points
-        const data = {
-            "point1": currentStatus.point1 + 1,
-        };
-        //Envoi de la requête
+        const data = { "point1": currentStatus.point1 + 1 };
         const record = await pb.collection('match').update(idMatch, data);
-        //Mise à jour de l'affichage
         textPoint1.innerHTML = currentStatus.point1 + 1;
-        //Rechargement de la page pour mettre à jour les données
         location.reload();
     });
 
-    //Même chose pour les autres boutons
     point2Team1.addEventListener('click', async function (event) {
         event.preventDefault();
-        const data = {
-            "point1": currentStatus.point1 + 2,
-        };
+        const data = { "point1": currentStatus.point1 + 2 };
         const record = await pb.collection('match').update(idMatch, data);
         textPoint1.innerHTML = currentStatus.point1 + 2;
         location.reload();
     });
 
-    //Même chose pour les autres boutons
     point3Team1.addEventListener('click', async function (event) {
         event.preventDefault();
-        const data = {
-            "point1": currentStatus.point1 + 3,
-        };
+        const data = { "point1": currentStatus.point1 + 3 };
         const record = await pb.collection('match').update(idMatch, data);
         textPoint1.innerHTML = currentStatus.point1 + 3;
         location.reload();
     });
 
-    //Même chose pour les autres boutons
     point1Team2.addEventListener('click', async function (event) {
         event.preventDefault();
-        const data = {
-            "point2": currentStatus.point2 + 1,
-        };
+        const data = { "point2": currentStatus.point2 + 1 };
         const record = await pb.collection('match').update(idMatch, data);
         textPoint2.innerHTML = currentStatus.point2 + 1;
         location.reload();
     });
 
-    //Même chose pour les autres boutons
     point2Team2.addEventListener('click', async function (event) {
         event.preventDefault();
-        const data = {
-            "point2": currentStatus.point2 + 2,
-        };
+        const data = { "point2": currentStatus.point2 + 2 };
         const record = await pb.collection('match').update(idMatch, data);
         textPoint2.innerHTML = currentStatus.point2 + 2;
         location.reload();
     });
 
-    //Même chose pour les autres boutons
     point3Team2.addEventListener('click', async function (event) {
         event.preventDefault();
-        const data = {
-            "point2": currentStatus.point2 + 3,
-        };
+        const data = { "point2": currentStatus.point2 + 3 };
         const record = await pb.collection('match').update(idMatch, data);
         textPoint2.innerHTML = currentStatus.point2 + 3;
         location.reload();
@@ -192,48 +125,40 @@ if (currentStatus.expand.sport.name === "basketball") {
 
     //Comptage des points
     buttonPoint1.addEventListener('click', async function (event) {
-        //Annulation du comportement par défaut
         event.preventDefault();
-
-        //Mise à jour du nombre de points
-        const data = {
-            "point1": currentStatus.point1 + 1,
-        };
-        //Envoi de la requête
+        const data = { "point1": currentStatus.point1 + 1 };
         const record = await pb.collection('match').update(idMatch, data);
-        //Mise à jour de l'affichage
         textPoint1.innerHTML = currentStatus.point1 + 1;
-        //Rechargement de la page pour mettre à jour les données
         location.reload();
     });
 
-    //Même chose pour l'autre bouton
     buttonPoint2.addEventListener('click', async function (event) {
         event.preventDefault();
-        const data = {
-            "point2": currentStatus.point2 + 1,
-        };
+        const data = { "point2": currentStatus.point2 + 1 };
         const record = await pb.collection('match').update(idMatch, data);
         textPoint2.innerHTML = currentStatus.point2 + 1;
         location.reload();
     });
 
     //Ajoute un bouton pour le set sous le button pour finir le match
-    //Un set remets les scores à 0 et affiche le nombre de set gagné par chaque équipe a coté du nom de l'équipe
     const arbitrageDiv = document.getElementById("arbitrage");
-    const arbitrageSet = document.createElement("div");
-    arbitrageSet.className = "text-center d-flex justify-content-evenly";
-    const arbitrageSetBtn1 = document.createElement("a");
-    arbitrageSetBtn1.className = "btn btn-primary";
-    arbitrageSetBtn1.id = "btnSet1";
-    arbitrageSetBtn1.innerHTML = "1 set pour " + currentStatus.expand.team1.name;
-    const arbitrageSetBtn2 = document.createElement("a");
-    arbitrageSetBtn2.className = "btn btn-primary";
-    arbitrageSetBtn2.id = "btnSet2";
-    arbitrageSetBtn2.innerHTML = "1 set pour " + currentStatus.expand.team2.name;
-    arbitrageSet.appendChild(arbitrageSetBtn1);
-    arbitrageSet.appendChild(arbitrageSetBtn2);
-    arbitrageDiv.appendChild(arbitrageSet);
+    arbitrageDiv.innerHTML = `
+        <div class="text-center d-flex justify-content-evenly">
+            <a class="btn btn-primary" id="btnPoint1">1 point pour ${currentStatus.expand.team1.name}</a>
+            <a class="btn btn-primary" id="btnPoint2">1 point pour ${currentStatus.expand.team2.name}</a>
+        </div>
+        <h5 class="text-center" id="textPoint1">${currentStatus.point1}</h5>
+        <h5 class="text-center" id="textPoint2">${currentStatus.point2}</h5>
+        <div class="text-center d-flex justify-content-evenly">
+            <a class="btn btn-primary" id="btnSet1">1 set pour ${currentStatus.expand.team1.name}</a>
+            <a class="btn btn-primary" id="btnSet2">1 set pour ${currentStatus.expand.team2.name}</a>
+        </div>
+        <form id="stopMatch">
+            <div class="text-center">
+                <button type="submit" class="btn btn-danger" id="btnStop">Arrêter le match</button>
+            </div>
+        </form>
+    `;
     const pointTeam1 = document.getElementById("textPoint1");
     const pointTeam2 = document.getElementById("textPoint2");
     pointTeam1.innerHTML = currentStatus.point1 + " (" + currentStatus.set1 + ")";
@@ -241,67 +166,38 @@ if (currentStatus.expand.sport.name === "basketball") {
     const set1Team1 = document.getElementById("btnSet1");
     const set1Team2 = document.getElementById("btnSet2");
     set1Team1.addEventListener('click', async function (event) {
-        //Annulation du comportement par défaut
         event.preventDefault();
-
-        //Mise à jour du nombre de points
-        const data = {
-            "set1": currentStatus.set1 + 1, "point1": 0, "point2": 0,
-        };
-        //Envoi de la requête
+        const data = { "set1": currentStatus.set1 + 1, "point1": 0, "point2": 0 };
         const record = await pb.collection('match').update(idMatch, data);
-        //Mise à jour de l'affichage
         textPoint1.innerHTML = 0;
         textPoint2.innerHTML = 0;
-        //Rechargement de la page pour mettre à jour les données
         location.reload();
     });
     set1Team2.addEventListener('click', async function (event) {
-        //Annulation du comportement par défaut
         event.preventDefault();
-
-        //Mise à jour du nombre de points
-        const data = {
-            "set2": currentStatus.set2 + 1, "point1": 0, "point2": 0,
-        };
-        //Envoi de la requête
+        const data = { "set2": currentStatus.set2 + 1, "point1": 0, "point2": 0 };
         const record = await pb.collection('match').update(idMatch, data);
-        //Mise à jour de l'affichage
         textPoint1.innerHTML = 0;
         textPoint2.innerHTML = 0;
-        //Rechargement de la page pour mettre à jour les données
         location.reload();
     });
-}
-//Gestion des autres sports
-else {
+} else {
     //Mise à jour de l'affichage des boutons
     buttonPoint1.innerHTML = "1 point pour " + currentStatus.expand.team1.name;
     buttonPoint2.innerHTML = "1 point pour " + currentStatus.expand.team2.name;
 
     //Comptage des points
     buttonPoint1.addEventListener('click', async function (event) {
-        //Annulation du comportement par défaut
         event.preventDefault();
-
-        //Mise à jour du nombre de points
-        const data = {
-            "point1": currentStatus.point1 + 1,
-        };
-        //Envoi de la requête
+        const data = { "point1": currentStatus.point1 + 1 };
         const record = await pb.collection('match').update(idMatch, data);
-        //Mise à jour de l'affichage
         textPoint1.innerHTML = currentStatus.point1 + 1;
-        //Rechargement de la page pour mettre à jour les données
         location.reload();
     });
 
-    //Même chose pour l'autre bouton
     buttonPoint2.addEventListener('click', async function (event) {
         event.preventDefault();
-        const data = {
-            "point2": currentStatus.point2 + 1,
-        };
+        const data = { "point2": currentStatus.point2 + 1 };
         const record = await pb.collection('match').update(idMatch, data);
         textPoint2.innerHTML = currentStatus.point2 + 1;
         location.reload();