mirror of
https://github.com/appen-isen/site-interpromo-2024.git
synced 2026-03-18 21:40:39 +01:00
Remove async and fix index.html display
This commit is contained in:
Félix MARQUET
@@ -71,7 +71,7 @@
|
||||
<!-- ALERTS HTML WILL APPEAR HERE -->
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container" id="matchContainer">
|
||||
<div class="col-8 offset-2 mt-6" id="cardContainer">
|
||||
</div>
|
||||
<div class="col-8 offset-2 mt-6" id="cardContainer2"></div>
|
||||
|
||||
@@ -1,173 +1,288 @@
|
||||
console.log("Backend match start loading...");
|
||||
import pb from './login.js'
|
||||
|
||||
(async () => {
|
||||
const matchList = await pb.collection('match').getFullList({
|
||||
sort: '+heure_debut',
|
||||
expand: 'team1,team2,sport',
|
||||
});
|
||||
let matchList = await pb.collection('match').getFullList({
|
||||
sort: '+heure_debut',
|
||||
expand: 'team1,team2,sport',
|
||||
});
|
||||
|
||||
//Check if navigator supports notifications
|
||||
if (!("Notification" in window)) {
|
||||
console.error("Ce navigateur ne supporte pas les notifications desktop");
|
||||
} else {
|
||||
//Ask for notifications permission on page load
|
||||
window.addEventListener('load', function () {
|
||||
if (Notification.permission !== "granted") {
|
||||
Notification.requestPermission();
|
||||
//Check if navigator supports notifications
|
||||
if (!("Notification" in window)) {
|
||||
console.error("Ce navigateur ne supporte pas les notifications desktop");
|
||||
} else {
|
||||
//Ask for notifications permission on page load
|
||||
window.addEventListener('load', function () {
|
||||
if (Notification.permission !== "granted") {
|
||||
Notification.requestPermission();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const equipeList = await pb.collection('equipes').getFullList({});
|
||||
|
||||
const sportList = await pb.collection('sport').getFullList({});
|
||||
|
||||
//Gestion des mises à jour en temps réel des matchs
|
||||
matchList.forEach(match => {
|
||||
//Si le match est en cours
|
||||
if (match.status === "in_progress" || match.status === "waiting") {
|
||||
//Abonnement au match
|
||||
pb.collection('match').subscribe(match.id, async function (e) {
|
||||
console.log(`Match ${match.id} updated`);
|
||||
//Si le match a été mis à jour
|
||||
if (e.action === "update") {
|
||||
//Mise à jour des points
|
||||
if (e.record.point1 !== match.point1) {
|
||||
if (!document.getElementById("cardHeader" + match.id).classList.contains("text-warning-emphasis")) {
|
||||
document.getElementById("cardHeader" + match.id).classList.add("text-warning-emphasis");
|
||||
}
|
||||
document.getElementById("pointT1" + match.id).innerHTML = e.record.point1;
|
||||
match.point1 = e.record.point1
|
||||
newGoalAlert(match, "team1")
|
||||
}
|
||||
if (e.record.point2 !== match.point2) {
|
||||
if (!document.getElementById("cardHeader" + match.id).classList.contains("text-warning-emphasis")) {
|
||||
document.getElementById("cardHeader" + match.id).classList.add("text-warning-emphasis");
|
||||
}
|
||||
document.getElementById("pointT2" + match.id).innerHTML = e.record.point2;
|
||||
match.point2 = e.record.point2
|
||||
newGoalAlert(match, "team2")
|
||||
}
|
||||
if (e.record.status === "in_progress") {
|
||||
document.getElementById("cardHeader" + match.id).classList.remove("text-primary-emphasis");
|
||||
document.getElementById("cardHeader" + match.id).classList.add("text-warning-emphasis");
|
||||
document.getElementById("cardFooter" + match.id).classList.remove("text-primary-emphasis");
|
||||
document.getElementById("cardFooter" + match.id).classList.add("text-warning-emphasis");
|
||||
document.getElementById("cardFooter" + match.id).innerHTML = "Match en cours";
|
||||
document.getElementById("cardHeader" + match.id).innerHTML = `
|
||||
<div class="d-flex justify-content-evenly">
|
||||
<p id="pointT1${match.id}">${match.point1}</p>
|
||||
<p>-</p>
|
||||
<p id="pointT2${match.id}">${match.point2}</p>
|
||||
</div>
|
||||
`;
|
||||
if (match.expand.sport.name === "badminton" || match.expand.sport.name === "volleyball") {
|
||||
document.getElementById(`pointT1${match.id}`).innerText = `${match.point1} (${match.set1})`;
|
||||
document.getElementById(`pointT2${match.id}`).innerText = `${match.point2} (${match.set2})`;
|
||||
}
|
||||
}
|
||||
//Mise à jour du statut si le match est terminé
|
||||
if (e.record.status === "finished") {
|
||||
document.getElementById("cardHeader" + match.id).classList.remove("text-warning-emphasis");
|
||||
document.getElementById("cardHeader" + match.id).classList.add("text-success-emphasis");
|
||||
document.getElementById("cardFooter" + match.id).classList.remove("text-warning-emphasis");
|
||||
document.getElementById("cardFooter" + match.id).classList.add("text-success-emphasis");
|
||||
document.getElementById("cardFooter" + match.id).innerHTML = "Match terminé";
|
||||
//Déplace le match dans la div des matchs terminés
|
||||
const card = document.getElementById("card" + match.id);
|
||||
card.remove();
|
||||
const container = document.getElementById('cardContainer2');
|
||||
container.appendChild(card);
|
||||
matchEndAlert(match);
|
||||
}
|
||||
if (e.record.set1 !== match.set1 || e.record.set2 !== match.set2) {
|
||||
newSetAlert(match);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const equipeList = await pb.collection('equipes').getFullList({});
|
||||
//Affichage des matchs sur la page d'arbitrage
|
||||
if (window.location.href.includes("arbitrage.html")) {
|
||||
//Affichage des matchs
|
||||
matchList.forEach(record => {
|
||||
let container = document.getElementById('cardContainer');
|
||||
const cardHTML = `
|
||||
<div class="card my-3">
|
||||
<div class="card-header text-center bg-light-subtle text-emphasis-light">
|
||||
${new Date(record.heure_debut).toLocaleString()}
|
||||
</div>
|
||||
<div class="card-body bg-light-subtle text-emphasis-light">
|
||||
${record.team1 && record.team2 ? `<h5 class="card-title text-center">${record.expand.team1.name} VS ${record.expand.team2.name}</h5>` : ''}
|
||||
<p class="card-text text-center text-capitalize mb-0">${record.expand.sport.name}</p>
|
||||
${record.name !== "" ? `<p class="card-text text-center fw-semibold text-body-secondary">${record.name}</p>` : ''}
|
||||
<div class="text-center">
|
||||
<a class="btn ${record.status === "waiting" ? "btn-primary" : record.status === "in_progress" ? "btn-warning" : record.status === "finished" ? "btn-success" : "btn-secondary"} mt-2">
|
||||
${record.status === "waiting" ? "Démarrer et arbitrer ce match" : record.status === "in_progress" ? "Arbitrer ce match" : record.status === "finished" ? "Match terminé" : "Erreur de statut"}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
container.innerHTML += cardHTML;
|
||||
});
|
||||
}
|
||||
|
||||
const sportList = await pb.collection('sport').getFullList({});
|
||||
//Gestion des informations dans la modal
|
||||
if (window.location.href.includes("arbitrage.html")) {
|
||||
const modalHTML = `
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Ajouter un match</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="addMatchForm">
|
||||
<div class="mb-3">
|
||||
<label for="equipe1" class="form-label">Equipe 1</label>
|
||||
<select class="form-control" id="equipe1">
|
||||
${equipeList.map(equipe => `<option>${equipe.name}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="equipe2" class="form-label">Equipe 2</label>
|
||||
<select class="form-control" id="equipe2">
|
||||
${equipeList.map(equipe => `<option>${equipe.name}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="sport" class="form-label">Sport</label>
|
||||
<select class="form-control" id="sport">
|
||||
${sportList.map(sport => `<option>${sport.name}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="date" class="form-label">Date</label>
|
||||
<input type="date" class="form-control" id="date">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="time" class="form-label">Heure</label>
|
||||
<input type="time" class="form-control" id="time">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Ajouter ce match</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('modalAddMatch').innerHTML = modalHTML;
|
||||
}
|
||||
|
||||
//Gestion des mises à jour en temps réel des matchs
|
||||
matchList.forEach(match => {
|
||||
//Si le match est en cours
|
||||
if (match.status === "in_progress" || match.status === "waiting") {
|
||||
//Abonnement au match
|
||||
pb.collection('match').subscribe(match.id, async function (e) {
|
||||
console.log(`Match ${match.id} updated`);
|
||||
});
|
||||
//Gestion de l'ajout d'un match
|
||||
if (window.location.href.includes("arbitrage.html")) {
|
||||
const addMatchForm = document.getElementById('addMatchForm');
|
||||
addMatchForm.addEventListener('submit', async function (event) {
|
||||
//Empêche le rechargement de la page
|
||||
event.preventDefault();
|
||||
|
||||
//Récupération des données du formulaire
|
||||
let equipe1 = document.getElementById('equipe1').value;
|
||||
//Récupération de l'id de l'équipe
|
||||
equipe1 = equipeList.find(equipe => equipe.name === equipe1);
|
||||
let equipe2 = document.getElementById('equipe2').value;
|
||||
equipe2 = equipeList.find(equipe => equipe.name === equipe2);
|
||||
let sportID = document.getElementById("sport").value;
|
||||
//Récupération de l'id du sport
|
||||
sportID = sportList.find(sport => sport.name === sportID);
|
||||
const date = document.getElementById('date').value;
|
||||
const time = document.getElementById('time').value;
|
||||
//Création de la date de début du match
|
||||
const time_start = new Date(date + " " + time + ":00.000Z");
|
||||
//Décalage de l'heure de début de 1h pour la gestion du fuseau horaire
|
||||
time_start.setHours(time_start.getHours() - 1);
|
||||
let currentMode = "";
|
||||
if (sportID.name === "badminton") {
|
||||
currentMode = "tournoi";
|
||||
} else {
|
||||
currentMode = "poules"
|
||||
}
|
||||
const data = {
|
||||
"team1": equipe1.id,
|
||||
"team2": equipe2.id,
|
||||
"sport": sportID.id,
|
||||
"heure_debut": time_start.toISOString(),
|
||||
"point1": 0,
|
||||
"point2": 0,
|
||||
"mode": currentMode,
|
||||
"status": "waiting",
|
||||
};
|
||||
|
||||
try {
|
||||
//Ajout du match
|
||||
await pb.collection('match').create(data);
|
||||
//Rechargement de la page
|
||||
window.location.href = "arbitrage.html";
|
||||
} catch (error) {
|
||||
//Affichage de l'erreur dans la console
|
||||
console.error('Erreur d\'ajout du match :', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createMatchCard(record) {
|
||||
const time_start = new Date(record.heure_debut).toLocaleString();
|
||||
const team1Name = record.expand.team1 ? record.expand.team1.name : '';
|
||||
const team2Name = record.expand.team2 ? record.expand.team2.name : '';
|
||||
const sportName = record.expand.sport.name;
|
||||
const matchName = record.name;
|
||||
const statusClass = record.status === "waiting" ? "btn-primary" :
|
||||
record.status === "in_progress" ? "btn-warning" :
|
||||
record.status === "finished" ? "btn-success" : "btn-secondary";
|
||||
const statusText = record.status === "waiting" ? "Démarrer et arbitrer ce match" :
|
||||
record.status === "in_progress" ? "Arbitrer ce match" :
|
||||
record.status === "finished" ? "Match terminé" : "Erreur de statut";
|
||||
const association = [];
|
||||
|
||||
return `
|
||||
<div class="card my-3">
|
||||
<div class="card-header text-center bg-light-subtle text-emphasis-light">${time_start}</div>
|
||||
//Gestion de la modal de supression d'un match
|
||||
if (window.location.href.includes("arbitrage.html")) {
|
||||
const delMatchHTML = `
|
||||
<label for="matchdel" class="form-label">Match à supprimer</label>
|
||||
<select class="form-control" id="matchdel">
|
||||
${matchList.map(record => {
|
||||
const time_start = new Date(record.heure_debut);
|
||||
const title = record.team1 && record.team2 ? `${record.expand.team1.name} VS ${record.expand.team2.name} - ${record.expand.sport.name} - ${time_start.toLocaleString()}` : `${record.name} - ${record.expand.sport.name} - ${time_start.toLocaleString()}`;
|
||||
association.push({ "title": title, "id": record.id });
|
||||
return `<option>${title}</option>`;
|
||||
}).join('')}
|
||||
</select>
|
||||
`;
|
||||
document.getElementById('matchdelJS').innerHTML = delMatchHTML;
|
||||
}
|
||||
|
||||
//Gestion de la supression d'un match
|
||||
if (window.location.href.includes("arbitrage.html")) {
|
||||
//Récupération du formulaire
|
||||
const delMatchForm = document.getElementById('delMatchForm');
|
||||
delMatchForm.addEventListener('submit', async function (event) {
|
||||
//Empêche le rechargement de la page
|
||||
event.preventDefault();
|
||||
|
||||
//Récupération du nom du match
|
||||
let matchID = document.getElementById('matchdel').value;
|
||||
//Récupération de l'id du match dans l'association grace au nom du match
|
||||
matchID = association.find(match => match.title === matchID);
|
||||
try {
|
||||
//Supression du match
|
||||
await pb.collection('match').delete(matchID.id);
|
||||
//Rechargement de la page
|
||||
window.location.href = "arbitrage.html"
|
||||
} catch (error) {
|
||||
//Affichage de l'erreur dans la console
|
||||
console.error('Erreur de suppression du match :', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//Affichage des matchs sur la page d'accueil
|
||||
//Elle s'appele indox.html ou bien n'as pas d'autre juste /
|
||||
if (window.location.href.includes("index.html") || window.location.href === "https://interpromo.appen.fr/") {
|
||||
//Affichage des matchs
|
||||
matchList.forEach(match => {
|
||||
let container = document.getElementById('cardContainer');
|
||||
const cardHTML = `
|
||||
<div class="card my-3" id="card${match.id}">
|
||||
<div class="card-header text-center bg-light-subtle ${match.status === "waiting" ? "text-primary-emphasis" : match.status === "in_progress" ? "text-warning-emphasis" : match.status === "finished" ? "text-success-emphasis" : "text-emphasis-light"}" id="cardHeader${match.id}">
|
||||
${match.status === "in_progress" || match.status === "finished" ? '' : new Date(match.heure_debut).toLocaleString()}
|
||||
${match.status === "in_progress" || match.status === "finished" ? `
|
||||
<div class="d-flex justify-content-evenly">
|
||||
<p id="pointT1${match.id}">${match.point1}</p>
|
||||
<p>-</p>
|
||||
<p id="pointT2${match.id}">${match.point2}</p>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="card-body bg-light-subtle text-emphasis-light">
|
||||
<h5 class="card-title text-center">${team1Name} VS ${team2Name}</h5>
|
||||
<p class="card-text text-center text-capitalize mb-0">${sportName}</p>
|
||||
<p class="card-text text-center fw-semibold text-body-secondary">${matchName}</p>
|
||||
<div class="text-center">
|
||||
<a class="btn mt-2 ${statusClass}" href="arbimatch.html?id=${record.id}">${statusText}</a>
|
||||
</div>
|
||||
${match.team1 && match.team2 ? `<h5 class="card-title text-center">${match.expand.team1.name} VS ${match.expand.team2.name}</h5>` : ''}
|
||||
<p class="card-text text-center text-capitalize mb-0">${match.expand.sport.name}</p>
|
||||
${match.name !== "" ? `<p class="card-text text-center fw-semibold text-body-secondary">${match.name}</p>` : ''}
|
||||
</div>
|
||||
<div class="card-footer bg-light-subtle ${match.status === "waiting" ? "text-primary-emphasis" : match.status === "in_progress" ? "text-warning-emphasis" : match.status === "finished" ? "text-success-emphasis" : "text-emphasis-light"}" id="cardFooter${match.id}">
|
||||
${match.status === "waiting" ? "Match en attente" : match.status === "in_progress" ? "Match en cours" : match.status === "finished" ? "Match terminé" : "Erreur de statut"}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
container.innerHTML += cardHTML;
|
||||
});
|
||||
}
|
||||
|
||||
//Affichage des matchs sur la page d'arbitrage
|
||||
if (window.location.href.includes("arbitrage.html")) {
|
||||
const container = document.getElementById('cardContainer');
|
||||
if (container) {
|
||||
matchList.forEach(record => {
|
||||
const cardHTML = createMatchCard(record);
|
||||
container.insertAdjacentHTML('beforeend', cardHTML);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//Gestion des informations dans la modal
|
||||
if (window.location.href.includes("arbitrage.html")) {
|
||||
const modalHTML = `
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Ajouter un match</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="addMatchForm">
|
||||
<div class="mb-3">
|
||||
<label for="equipe1" class="form-label">Equipe 1</label>
|
||||
<select class="form-control" id="equipe1">
|
||||
${equipeList.map(equipe => `<option>${equipe.name}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="equipe2" class="form-label">Equipe 2</label>
|
||||
<select class="form-control" id="equipe2">
|
||||
${equipeList.map(equipe => `<option>${equipe.name}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="sport" class="form-label">Sport</label>
|
||||
<select class="form-control" id="sport">
|
||||
${sportList.map(sport => `<option>${sport.name}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="date" class="form-label">Date</label>
|
||||
<input type="date" class="form-control" id="date">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="time" class="form-label">Heure</label>
|
||||
<input type="time" class="form-control" id="time">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Ajouter ce match</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
const modalAddMatch = document.getElementById('modalAddMatch');
|
||||
if (modalAddMatch) {
|
||||
modalAddMatch.innerHTML = modalHTML;
|
||||
}
|
||||
}
|
||||
|
||||
//Gestion de l'ajout d'un match
|
||||
if (window.location.href.includes("arbitrage.html")) {
|
||||
const addMatchForm = document.getElementById('addMatchForm');
|
||||
if (addMatchForm) {
|
||||
addMatchForm.addEventListener('submit', async function (event) {
|
||||
event.preventDefault();
|
||||
// Ajoutez ici la logique pour ajouter un match
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//Gestion de la modal de supression d'un match
|
||||
if (window.location.href.includes("arbitrage.html")) {
|
||||
const delMatchHTML = `
|
||||
<label for="matchdel" class="form-label">Match à supprimer</label>
|
||||
<select class="form-control" id="matchdel">
|
||||
${matchList.map(record => `<option value="${record.id}">${record.name}</option>`).join('')}
|
||||
</select>
|
||||
`;
|
||||
const matchdelJS = document.getElementById('matchdelJS');
|
||||
if (matchdelJS) {
|
||||
matchdelJS.innerHTML = delMatchHTML;
|
||||
}
|
||||
}
|
||||
|
||||
//Gestion de la supression d'un match
|
||||
if (window.location.href.includes("arbitrage.html")) {
|
||||
const delMatchForm = document.getElementById('delMatchForm');
|
||||
if (delMatchForm) {
|
||||
delMatchForm.addEventListener('submit', async function (event) {
|
||||
event.preventDefault();
|
||||
// Ajoutez ici la logique pour supprimer un match
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//Affichage des matchs sur la page d'accueil
|
||||
if (window.location.href.includes("index.html") || window.location.href === "https://interpromo.appen.fr/") {
|
||||
const container = document.getElementById('matchContainer');
|
||||
if (container) {
|
||||
matchList.forEach(match => {
|
||||
const cardHTML = createMatchCard(match);
|
||||
container.insertAdjacentHTML('beforeend', cardHTML);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Backend match loaded!");
|
||||
})();
|
||||
console.log("Backend match loaded!");
|
||||
Reference in New Issue
Block a user