Add the basketball support for the arbitrage, Start of the display of the sport and start of the display for the team

Front/arbimatch.html

@@ -67,7 +67,7 @@
     </header>
 
     <div class="container">
-        <div class="col-8 offset-2 mt-6">
+        <div class="col-8 offset-2 mt-6" id="arbitrage">
             <div class="text-center"><a href="" class="btn btn-primary" id="btnPoint1">But pour promo X</a></div>
             <h5 class="text-center" id="textPoint1"></h5>
             <br>

Front/js/backend/arbitrage.js

@@ -9,7 +9,7 @@ const data = {
 const record = await pb.collection('match').update(idMatch, data);
 
 const currentStatus = await pb.collection('match').getOne(idMatch, {
-    expand: 'sport',
+    expand: 'sport,team1,team2',
 });
 
 const textPoint1 = document.getElementById("textPoint1")
@@ -22,10 +22,100 @@ const buttonPoint1 = document.getElementById("btnPoint1")
 const buttonPoint2 = document.getElementById("btnPoint2")
 
 
-console.log(currentStatus);
-
 if(currentStatus.expand.sport.name === "basketball"){
-    buttonPoint1.addEventListener('click', async function(event) {
+    document.getElementById("arbitrage").innerHTML = "";
+    const arbitrageDiv = document.getElementById("arbitrage");
+    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);
+    const arbitrageDisplayPoint1 = document.createElement("h5");
+    arbitrageDisplayPoint1.className = "text-center";
+    arbitrageDisplayPoint1.id = "textPoint1";
+    arbitrageDisplayPoint1.innerHTML = currentStatus.point1;
+    arbitrageDiv.appendChild(arbitrageDisplayPoint1);
+    arbitrageDiv.appendChild(document.createElement("br"));
+    const arbitrageDisplayPoint2 = document.createElement("h5");
+    arbitrageDisplayPoint2.className = "text-center";
+    arbitrageDisplayPoint2.id = "textPoint2";
+    arbitrageDisplayPoint2.innerHTML = currentStatus.point2;
+    arbitrageDiv.appendChild(arbitrageDisplayPoint2);
+    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"));
+    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";
+    arbitrageStopFormDiv.appendChild(arbitrageStopFormBtn);
+    arbitrageStopForm.appendChild(arbitrageStopFormDiv);
+    arbitrageDiv.appendChild(arbitrageStopForm);
+
+
+    //Comptage des points
+    const point1Team1 = document.getElementById("btnPoint1Btn1");
+    const point2Team1 = document.getElementById("btnPoint1Btn2");
+    const point3Team1 = document.getElementById("btnPoint1Btn3");
+    const point1Team2 = document.getElementById("btnPoint2Btn1");
+    const point2Team2 = document.getElementById("btnPoint2Btn2");
+    const point3Team2 = document.getElementById("btnPoint2Btn3");
+
+    point1Team1.addEventListener('click', async function(event) {
+        event.preventDefault();
+        const data = {
+            "point1": currentStatus.point1 + 1,
+        };
+        const record = await pb.collection('match').update(idMatch, data);
+        textPoint1.innerHTML = currentStatus.point1 + 1;
+        location.reload();
+    });
+
+    point2Team1.addEventListener('click', async function(event) {
+        event.preventDefault();
+        const data = {
+            "point1": currentStatus.point1 + 2,
+        };
+        const record = await pb.collection('match').update(idMatch, data);
+        textPoint1.innerHTML = currentStatus.point1 + 2;
+        location.reload();
+    });
+
+    point3Team1.addEventListener('click', async function(event) {
         event.preventDefault();
         const data = {
             "point1": currentStatus.point1 + 3,
@@ -35,7 +125,27 @@ if(currentStatus.expand.sport.name === "basketball"){
         location.reload();
     });
 
-    buttonPoint2.addEventListener('click', async function(event) {
+    point1Team2.addEventListener('click', async function(event) {
+        event.preventDefault();
+        const data = {
+            "point2": currentStatus.point2 + 1,
+        };
+        const record = await pb.collection('match').update(idMatch, data);
+        textPoint2.innerHTML = currentStatus.point2 + 1;
+        location.reload();
+    });
+
+    point2Team2.addEventListener('click', async function(event) {
+        event.preventDefault();
+        const data = {
+            "point2": currentStatus.point2 + 2,
+        };
+        const record = await pb.collection('match').update(idMatch, data);
+        textPoint2.innerHTML = currentStatus.point2 + 2;
+        location.reload();
+    });
+
+    point3Team2.addEventListener('click', async function(event) {
         event.preventDefault();
         const data = {
             "point2": currentStatus.point2 + 3,
@@ -46,6 +156,9 @@ if(currentStatus.expand.sport.name === "basketball"){
     });
 }
 else{
+    buttonPoint1.innerHTML = "1 point pour " + currentStatus.expand.team1.name;
+    buttonPoint2.innerHTML = "1 point pour " + currentStatus.expand.team2.name;
+
     buttonPoint1.addEventListener('click', async function(event) {
         event.preventDefault();
         const data = {

Front/js/backend/sport.js

@@ -0,0 +1,33 @@
+console.log("Backend sport start loading...");
+import pb from './login.js'
+
+const SportList = await pb.collection('sport').getFullList({});
+
+const sportCardContainer = document.getElementById("sportContainer");
+SportList.forEach(sport => {
+    const card = document.createElement('div');
+    card.classList.add('card', 'my-3');
+    const cardHeader = document.createElement('div');
+    cardHeader.classList.add('card-header', 'text-center', 'bg-light-subtle', 'text-emphasis-light');
+    cardHeader.innerHTML = sport.name.toUpperCase();
+    card.appendChild(cardHeader);
+    const cardBody = document.createElement('div');
+    cardBody.classList.add('card-body', 'bg-light-subtle', 'text-emphasis-light');
+    const cardTitle = document.createElement('h5');
+    cardTitle.classList.add('card-title');
+    cardTitle.innerHTML = "En tête : " + "BACK A FAIRE";
+    const cardText = document.createElement('p');
+    cardText.classList.add('card-text');
+    cardText.innerHTML = "(PHASE A REMPLACER PAR LE BACK QUAND IL SERA FAIT)";
+    cardBody.appendChild(cardTitle);
+    cardBody.appendChild(cardText);
+    card.appendChild(cardBody);
+    const cardFooter = document.createElement('div');
+    cardFooter.classList.add('card-footer', 'bg-light-subtle', 'text-emphasis-light');
+    cardFooter.innerHTML = "Prochain match : " + "BACK A FAIRE";
+    card.appendChild(cardFooter);
+    sportCardContainer.appendChild(card);
+});
+
+
+console.log("Backend sport loaded!");

Front/js/backend/team.js

@@ -0,0 +1,74 @@
+console.log("Backend team start loading...");
+import pb from './login.js'
+
+const EquipeList = await pb.collection('equipes').getFullList({
+    expand: 'promo,sport',
+});
+
+const PromoList = await pb.collection('promo').getFullList({
+});
+
+const promoCardContainer = document.getElementById("promoCardContainer");
+PromoList.forEach(promo => {
+    const card = document.createElement('div');
+    card.classList.add('card', 'my-3');
+    const cardHeader = document.createElement('div');
+    cardHeader.classList.add('card-header', 'text-center', 'bg-light-subtle', 'text-emphasis-light');
+    cardHeader.innerHTML = promo.name;
+    card.appendChild(cardHeader);
+    const cardBody = document.createElement('div');
+    cardBody.classList.add('card-body', 'bg-light-subtle', 'text-emphasis-light');
+    const cardText = document.createElement('p');
+    EquipeList.forEach(equipe => {
+        if(equipe.expand.promo.name === promo.name){
+            cardText.innerHTML += equipe.expand.sport.name + ": " + equipe.name + " (" + "CLASSEMENT A REMPLACER PAR LE BACK QUAND IL SERA FAIT" + ")" + "<br>";
+        }
+    });
+    cardBody.appendChild(cardText);
+    card.appendChild(cardBody);
+    promoCardContainer.appendChild(card);
+});
+
+
+const teamCardContainer = document.getElementById("teamCardContainer");
+EquipeList.forEach(equipe => {
+    const card = document.createElement('div');
+    card.classList.add('card', 'my-3');
+
+    const cardHeader = document.createElement('div');
+    cardHeader.classList.add('card-header', 'text-center', 'bg-light-subtle', 'text-emphasis-light');
+    cardHeader.innerHTML = equipe.name;
+
+    const cardBody = document.createElement('div');
+    cardBody.classList.add('card-body', 'bg-light-subtle', 'text-emphasis-light');
+
+    const cardText1 = document.createElement('h5');
+    cardText1.classList.add('card-title');
+    cardText1.innerHTML = "Sport : " + equipe.expand.sport.name;
+
+
+    const cardText2 = document.createElement('p');
+    cardText2.classList.add('card-text');
+    cardText2.innerHTML = "Promo : " + equipe.expand.promo.name;
+
+    const cardMember = document.createElement('p');
+    cardMember.classList.add('card-text');
+    cardMember.innerHTML = "Membres : " + equipe.capitaine + ", " + equipe.membres;
+
+    const cardFooter = document.createElement('div');
+    cardFooter.classList.add('card-footer', 'bg-light-subtle', 'text-emphasis-light');
+    cardFooter.innerHTML = "Prochain match : " + equipe.nextMatch;
+
+    cardBody.appendChild(cardText1);
+    cardBody.appendChild(cardText2);
+    cardBody.appendChild(cardMember);
+
+    card.appendChild(cardHeader);
+    card.appendChild(cardBody);
+    card.appendChild(cardFooter);
+
+    teamCardContainer.appendChild(card);
+});
+
+
+console.log("Backend team loaded!");

Front/sports.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="style.css" />
     <script src="js/cookie.js" defer></script>
     <link rel="icon" href="assets/appen.png">
+    <script src="js/backend/sport.js" type="module" defer></script>
   </head>
   <body>
     <header>
@@ -60,67 +61,8 @@
 
 
     <div class="container mt-6">
-      <div class="col-8 offset-2">
-        <div class="card my-3">
-          <div class="card-header text-center bg-light-subtle text-emphasis-light">
-            BASKETBALL
-          </div>
-          <div class="card-body bg-light-subtle text-emphasis-light">
-            <h5 class="card-title">En tête: Promo X</h5>
-            <p class="card-text">Quarts de finale</p>
-          </div>
-          <div class="card-footer bg-light-subtle text-emphasis-light">06/11 21:00 Promo X VS Promo Y</div>
-        </div>
-        <div class="card my-3">
-          <div class="card-header text-center bg-light-subtle text-emphasis-light">
-            HANDBALL
-          </div>
-          <div class="card-body bg-light-subtle text-emphasis-light">
-            <h5 class="card-title">En tête: Promo Y</h5>
-            <p class="card-text">Quarts de finale</p>
-          </div>
-          <div class="card-footer bg-light-subtle text-emphasis-light">06/11 21:00 Promo X VS Promo Y</div>
-        </div>
-        <div class="card my-3">
-          <div class="card-header text-center bg-light-subtle text-emphasis-light">
-            FOOTBALL
-          </div>
-          <div class="card-body bg-light-subtle text-emphasis-light">
-            <h5 class="card-title">En tête: Promo Z</h5>
-            <p class="card-text">Quarts de finale</p>
-          </div>
-          <div class="card-footer bg-light-subtle text-emphasis-light">06/11 21:00 Promo X VS Promo Y</div>
-        </div>
-        <div class="card my-3">
-          <div class="card-header text-center bg-light-subtle text-emphasis-light">
-            VOLLEY
-          </div>
-          <div class="card-body bg-light-subtle text-emphasis-light">
-            <h5 class="card-title">En tête: Promo Z</h5>
-            <p class="card-text">Quarts de finale</p>
-          </div>
-          <div class="card-footer bg-light-subtle text-emphasis-light">06/11 21:00 Promo X VS Promo Y</div>
-        </div>
-        <div class="card my-1">
-          <div class="card-header text-center bg-light-subtle text-emphasis-light">
-            BADMINTON
-          </div>
-          <div class="card-body bg-light-subtle text-emphasis-light">
-            <h5 class="card-title">En tête: Promo Z</h5>
-            <p class="card-text">Tournoi</p>
-          </div>
-          <div class="card-footer bg-light-subtle text-emphasis-light">06/11 21:00 Promo X VS Promo Y</div>
-        </div>
-        <div class="card my-3">
-          <div class="card-header text-center bg-light-subtle text-emphasis-light">
-            DÉFIS ENDURO
-          </div>
-          <div class="cord-body bg-light-subtle text-emphasis-light">
-            <h5 class="card-title">En tête: Promo Z</h5>
-            <p class="card-text">Tournoi</p>
-          </div>
-          <div class="card-footer bg-light-subtle text-emphasis-light">06/11 21:00 Promo X VS Promo Y</div>
-        </div>
+      <div class="col-8 offset-2" id="sportContainer">
+
       </div>
     </div>
 

Front/teamDetail.html

@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr" data-bs-theme="dark">
-<head>
-    <meta charset="UTF-8">
-    <title>Detail de l'équipe</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <!--- Ajout d'un fichier css pour les classes personalisé  --->
-    <link rel="stylesheet" href="style.css" />
-    <script src="js/cookie.js" defer></script>
-    <link rel="icon" href="assets/appen.png">
-</head>
-<body>
-    <header>
-        <nav class="navbar navbar-dark bg-dark fixed-top">
-            <div class="container-fluid">
-                <a class="navbar-brand" href="index.html">
-                    <img src="/Front/assets/appen.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top logo-appen">
-                    Interpromos 2023
-                </a>
-
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Ouvrir la navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <div class="collapse text-bg-dark" id="navbarToggleExternalContent" data-bs-theme="dark">
-                    <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
-                        <li class="nav-item">
-                            <a class="nav-link active d-inline-flex align-items-center" aria-current="page" href="index.html">
-                                <div class="pe-3 icons-display"></div>
-                                Matchs en direct
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link d-inline-flex align-items-center" href="teams.html">
-                                <div class="pe-3 icons-display"></div>
-                                Classement et équipes
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link d-inline-flex align-items-center" href="sports.html">
-                                <div class="pe-3 icons-display"></div>
-                                Liste des sports
-                            </a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link d-inline-flex align-items-center" href="login.html">
-                                <div class="pe-3 icons-display"></div>
-                                Connexion
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-
-            </div>
-        </nav>
-    </header>
-    <div class="container">
-        <div class="row mt-4">
-            <div class="col-12">
-                <h1 class="text-center mt-5">Détail de l'équipe</h1>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-12">
-                <h2 class="text-center mt-5">Nom de l'équipe</h2>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-12">
-                <h3 class="text-center mt-5">Liste des joueurs</h3>
-            </div>
-        </div>
-    </div>
-</body>
-</html>

Front/teams.html

@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="style.css" />
     <script src="js/cookie.js" defer></script>
     <link rel="icon" href="assets/appen.png">
+    <script src="js/backend/team.js" type="module" defer></script>
   </head>
   <body>
     <header>
@@ -60,56 +61,8 @@
 
 
     <div class="container mt-6">
-      <div class="col-8 offset-2">
-        <div class="card my-3">
-          <div class="card-header text-center bg-light-subtle text-emphasis-light">
-            Promo X
-          </div>
-          <div class="card-body bg-light-subtle text-emphasis-light">
-            <h5 class="card-title">Classement Provisoire : 1er</h5>
-            <p class="card-text">Football: phases de poule
-              Basketball: demi-finale
-              Volley: phase de poule (éliminé)
-              Handball: quarts de final (en jeu)
-              Badminton: tournoi (3e)
-              Défis Enduro: 1er
-            </p>
-          </div>
-          <div class="card-footer bg-light-subtle text-emphasis-light">Prochain match: Football à 21:00</div>
-        </div>
-        <div class="card my-3">
-          <div class="card-header text-center bg-light-subtle text-emphasis-light">
-            Promo Y
-          </div>
-          <div class="card-body bg-light-subtle text-emphasis-light">
-            <h5 class="card-title">Classement Provisoire : 2e</h5>
-            <p class="card-text">Football: phases de poule
-              Basketball: demi-finale
-              Volley: phase de poule (éliminé)
-              Handball: quarts de final (en jeu)
-              Badminton: tournoi (3e)
-              Défis Enduro: 1er
-            </p>
-          </div>
-          <div class="card-footer bg-light-subtle text-emphasis-light">Prochain match: Football à 21:00</div>
-        </div>
-        <div class="card my-3">
-          <div class="card-header text-center bg-light-subtle text-emphasis-light">
-            Promo Z
-          </div>
-          <div class="card-body bg-light-subtle text-emphasis-light">
-            <h5 class="card-title">Classement Provisoire : 3e</h5>
-            <p class="card-text">Football: phases de poule
-              Basketball: demi-finale
-              Volley: phase de poule (éliminé)
-              Handball: quarts de final (en jeu)
-              Badminton: tournoi (3e)
-              Défis Enduro: 1er
-            </p>
-          </div>
-          <div class="card-footer bg-light-subtle text-emphasis-light">Prochain match: Football à 21:00</div>
-        </div>
-      </div>
+      <div class="col-8 offset-2" id="promoCardContainer"></div>
+      <div class="col-8 offset-2" id="teamCardContainer"></div>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>