diff --git a/index.html b/index.html index 5c81b76..1fad84d 100644 --- a/index.html +++ b/index.html @@ -545,40 +545,49 @@ filteredEvents.forEach(event => { const eventCard = document.createElement("div"); eventCard.className = "bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-105 transition-all duration-300 cursor-pointer"; - eventCard.innerHTML = ` -
-
-
-

${event.agegroup} - ${event.name}

-

${event.title}

-
-
-
-

- - - - Adversaire: ${event.opponent} -

+ const card = document.createElement("div"); + card.className = "p-6 border-l-4"; + card.style.borderColor = event.color || "#818cf8"; -

- - - - - Lieu: ${event.place} -

+ const inner = document.createElement("div"); + inner.className = "flex justify-between items-start"; -

- - - - Heure: ${event.start} - ${event.end} -

-
-
- `; + const innerDiv = document.createElement("div"); + const h3 = document.createElement("h3"); + h3.className = "text-xl font-bold text-gray-800"; + h3.textContent = event.agegroup + " - " + event.name; + const subtitle = document.createElement("p"); + subtitle.className = "text-gray-600 mt-1"; + subtitle.textContent = event.title; + innerDiv.appendChild(h3); + innerDiv.appendChild(subtitle); + inner.appendChild(innerDiv); + card.appendChild(inner); + + const detailsDiv = document.createElement("div"); + detailsDiv.className = "mt-4 space-y-2"; + + const p1 = document.createElement("p"); + p1.className = "flex items-center text-gray-700"; + p1.innerHTML = 'Adversaire: '; + p1.appendChild(document.createTextNode(event.opponent)); + detailsDiv.appendChild(p1); + + const p2 = document.createElement("p"); + p2.className = "flex items-center text-gray-700"; + p2.innerHTML = 'Lieu: '; + p2.appendChild(document.createTextNode(event.place)); + detailsDiv.appendChild(p2); + + const p3 = document.createElement("p"); + p3.className = "flex items-center text-gray-700"; + p3.innerHTML = 'Heure: '; + p3.appendChild(document.createTextNode(event.start + " - " + event.end)); + detailsDiv.appendChild(p3); + + card.appendChild(detailsDiv); + eventCard.appendChild(card); eventCard.addEventListener("click", () => fetchEventDetails(event.id_event)); eventList.appendChild(eventCard); }); @@ -591,129 +600,172 @@ }) .then(response => response.json()) .then(data => { - // Check if available players data exists const availablePlayers = data.convocation.available || []; const sortedPlayers = availablePlayers .sort((a, b) => (a.number || 0) - (b.number || 0)); - // Calculate player statistics - const totalPlayers = sortedPlayers.length; - const positionCount = {}; - sortedPlayers.forEach(player => { - const position = player.position || "N/A"; - positionCount[position] = (positionCount[position] || 0) + 1; - }); + const totalPlayers = sortedPlayers.length; + const positionCount = {}; + sortedPlayers.forEach(player => { + const position = player.position || "N/A"; + positionCount[position] = (positionCount[position] || 0) + 1; + }); - // Generate position breakdown - const positionBreakdown = Object.entries(positionCount) - .map(([position, count]) => `${position}: ${count}`) - .join(', '); + const positionBreakdown = Object.entries(positionCount) + .map(([position, count]) => position + ": " + count) + .join(", "); - // Sort players by position first, then by number - const playersByPosition = [...sortedPlayers].sort((a, b) => { - // Sort by position first - const positionA = a.position || "ZZZ"; // Put undefined positions at the end - const positionB = b.position || "ZZZ"; - - if (positionA !== positionB) { - return positionA.localeCompare(positionB); - } - - // If positions are the same, sort by number - const numA = parseInt(a.number) || 0; - const numB = parseInt(b.number) || 0; - return numA - numB; - }); - - // Process staff data - const staffList = data.convocation.staff || []; - const totalStaff = staffList.length; - - // Check if there are no players - if (totalPlayers === 0 && totalStaff === 0) { - eventDetailsContent.innerHTML = ` -
-
-
${data.title}
-
-

Type: ${data.type}

-

Lieu: ${data.place}

-

Heure: ${data.time_start} - ${data.time_end}

-
-
-
Aucun joueur ni personnel convoqué
-

Il n'y a actuellement aucun joueur ni personnel convoqué pour ce match.

-
-
-
- `; - } else { - let staffHtml = ''; - if (totalStaff > 0) { - staffHtml = ` -
-
Personnel (${totalStaff}):
- -
- `; - } else { - staffHtml = ` -
-
Aucun personnel convoqué
-

Il n'y a actuellement aucun personnel convoqué pour ce match.

-
- `; - } - - if (totalPlayers === 0) { - eventDetailsContent.innerHTML = ` -
-
${data.title}
-
-

Type: ${data.type}

-

Lieu: ${data.place}

-

Heure: ${data.time_start} - ${data.time_end}

-
-
-
Aucun joueur convoqué
-

Il n'y a actuellement aucun joueur convoqué pour ce match.

-
- ${staffHtml} -
- `; - } else { - eventDetailsContent.innerHTML = ` -
-
${data.title}
-
-

Type: ${data.type}

-

Lieu: ${data.place}

-

Heure: ${data.time_start} - ${data.time_end}

-

Joueurs convoqués: ${totalPlayers} joueur${totalPlayers > 1 ? 's' : ''} (${positionBreakdown})

-
- -
-
Liste des joueurs:
- -
- - ${staffHtml} -
- `; - } + const playersByPosition = [...sortedPlayers].sort((a, b) => { + const positionA = a.position || "ZZZ"; + const positionB = b.position || "ZZZ"; + if (positionA !== positionB) { + return positionA.localeCompare(positionB); } - eventDetailsModal.classList.remove("hidden"); - }) + const numA = parseInt(a.number) || 0; + const numB = parseInt(b.number) || 0; + return numA - numB; + }); + + const staffList = data.convocation.staff || []; + const totalStaff = staffList.length; + + eventDetailsContent.innerHTML = ""; + + if (totalPlayers === 0 && totalStaff === 0) { + const wrapper = document.createElement("div"); + wrapper.className = "rounded-xl border border-amber-300 bg-amber-50 p-6"; + const centerDiv = document.createElement("div"); + centerDiv.className = "text-center"; + const h5 = document.createElement("h5"); + h5.className = "text-2xl font-bold text-gray-800 mb-4"; + h5.textContent = data.title; + centerDiv.appendChild(h5); + + const infoDiv = document.createElement("div"); + infoDiv.className = "space-y-2 text-gray-700 mb-6"; + const pType = document.createElement("p"); + pType.innerHTML = "Type: "; + pType.appendChild(document.createTextNode(data.type)); + infoDiv.appendChild(pType); + const pLieu = document.createElement("p"); + pLieu.innerHTML = "Lieu: "; + pLieu.appendChild(document.createTextNode(data.place)); + infoDiv.appendChild(pLieu); + const pHeure = document.createElement("p"); + pHeure.innerHTML = "Heure: "; + pHeure.appendChild(document.createTextNode(data.time_start + " - " + data.time_end)); + infoDiv.appendChild(pHeure); + centerDiv.appendChild(infoDiv); + + const msgDiv = document.createElement("div"); + msgDiv.className = "bg-amber-100 border border-amber-300 text-amber-800 px-4 py-3 rounded-lg"; + const msgH6 = document.createElement("h6"); + msgH6.className = "font-bold text-lg mb-1"; + msgH6.textContent = "Aucun joueur ni personnel convoqué"; + msgDiv.appendChild(msgH6); + const msgP = document.createElement("p"); + msgP.textContent = "Il n'y a actuellement aucun joueur ni personnel convoqué pour ce match."; + msgDiv.appendChild(msgP); + centerDiv.appendChild(msgDiv); + wrapper.appendChild(centerDiv); + eventDetailsContent.appendChild(wrapper); + } else { + const container = document.createElement("div"); + const h5 = document.createElement("h5"); + h5.className = "text-2xl font-bold text-gray-800 mb-4"; + h5.textContent = data.title; + container.appendChild(h5); + + const infoDiv = document.createElement("div"); + infoDiv.className = "space-y-2 text-gray-700 mb-6"; + const pType = document.createElement("p"); + pType.innerHTML = "Type: "; + pType.appendChild(document.createTextNode(data.type)); + infoDiv.appendChild(pType); + const pLieu = document.createElement("p"); + pLieu.innerHTML = "Lieu: "; + pLieu.appendChild(document.createTextNode(data.place)); + infoDiv.appendChild(pLieu); + const pHeure = document.createElement("p"); + pHeure.innerHTML = "Heure: "; + pHeure.appendChild(document.createTextNode(data.time_start + " - " + data.time_end)); + infoDiv.appendChild(pHeure); + container.appendChild(infoDiv); + + if (totalPlayers === 0) { + const noPlayersDiv = document.createElement("div"); + noPlayersDiv.className = "bg-amber-100 border border-amber-300 text-amber-800 px-4 py-3 rounded-lg"; + const noPlayersH6 = document.createElement("h6"); + noPlayersH6.className = "font-bold mb-1"; + noPlayersH6.textContent = "Aucun joueur convoqué"; + noPlayersDiv.appendChild(noPlayersH6); + const noPlayersP = document.createElement("p"); + noPlayersP.textContent = "Il n'y a actuellement aucun joueur convoqué pour ce match."; + noPlayersDiv.appendChild(noPlayersP); + container.appendChild(noPlayersDiv); + } else { + const playersP = document.createElement("p"); + playersP.innerHTML = "Joueurs convoqués: "; + playersP.appendChild(document.createTextNode(totalPlayers + " joueur" + (totalPlayers > 1 ? "s" : "") + " (" + positionBreakdown + ")")); + infoDiv.appendChild(playersP); + + const playersDiv = document.createElement("div"); + const playersH6 = document.createElement("h6"); + playersH6.className = "text-xl font-semibold text-gray-800 mb-3"; + playersH6.textContent = "Liste des joueurs:"; + playersDiv.appendChild(playersH6); + const playersUl = document.createElement("ul"); + playersUl.className = "grid grid-cols-1 md:grid-cols-2 gap-3"; + playersByPosition.forEach(player => { + const li = document.createElement("li"); + li.className = "bg-indigo-50 rounded-lg p-3"; + const number = player.number ? player.number : "N/A"; + const position = player.position ? player.position : "N/A"; + li.textContent = "[" + position + "] " + number + " - " + player.fname + " " + player.lname + " (" + player.dob + ")"; + playersUl.appendChild(li); + }); + playersDiv.appendChild(playersUl); + container.appendChild(playersDiv); + } + + if (totalStaff > 0) { + const staffDiv = document.createElement("div"); + staffDiv.className = "mt-6"; + const staffH6 = document.createElement("h6"); + staffH6.className = "text-xl font-semibold text-gray-800 mb-3"; + staffH6.textContent = "Personnel (" + totalStaff + "):"; + staffDiv.appendChild(staffH6); + const staffUl = document.createElement("ul"); + staffUl.className = "space-y-2"; + staffList.forEach(staff => { + const li = document.createElement("li"); + li.className = "flex items-center"; + const roleSpan = document.createElement("span"); + roleSpan.className = "font-medium w-32"; + roleSpan.textContent = staff.role + ":"; + li.appendChild(roleSpan); + li.appendChild(document.createTextNode(" " + staff.fname + " " + staff.lname)); + staffUl.appendChild(li); + }); + staffDiv.appendChild(staffUl); + container.appendChild(staffDiv); + } else { + const noStaffDiv = document.createElement("div"); + noStaffDiv.className = "mt-6 bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg"; + const noStaffH6 = document.createElement("h6"); + noStaffH6.className = "font-bold mb-1"; + noStaffH6.textContent = "Aucun personnel convoqué"; + noStaffDiv.appendChild(noStaffH6); + const noStaffP = document.createElement("p"); + noStaffP.textContent = "Il n'y a actuellement aucun personnel convoqué pour ce match."; + noStaffDiv.appendChild(noStaffP); + container.appendChild(noStaffDiv); + } + + eventDetailsContent.appendChild(container); + } + eventDetailsModal.classList.remove("hidden"); + }) .catch(error => console.error("Erreur lors du chargement des détails de l'événement:", error)); } });