706 lines
37 KiB
HTML
706 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MyIce - Games</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
|
</head>
|
|
|
|
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
|
|
<!-- Connected User Panel -->
|
|
<div id="connectedUser" class="fixed top-4 right-4 bg-white bg-opacity-80 backdrop-blur-sm rounded-xl shadow-lg p-4 flex items-center hidden z-50">
|
|
<span class="text-indigo-700 font-medium">Connecté: <span id="userName" class="font-semibold"></span></span>
|
|
<button id="disconnect" class="ml-3 bg-rose-500 hover:bg-rose-600 text-white text-sm px-3 py-1 rounded-lg transition duration-200">Déco</button>
|
|
</div>
|
|
|
|
<!-- Login View -->
|
|
<div class="min-h-screen flex items-center justify-center p-4">
|
|
<div class="text-center">
|
|
<h1 id="loginTitle" class="text-4xl md:text-5xl font-bold text-indigo-800 mb-8">MyIce - Games</h1>
|
|
|
|
<div id="loginContainer" class="mb-6">
|
|
<div id="oidcLoginSection">
|
|
<button id="oidcLoginBtn" class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold text-lg px-8 py-4 rounded-2xl shadow-xl transform hover:scale-105 transition-all duration-300">
|
|
Se connecter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 max-w-md mx-auto">
|
|
<p class="text-gray-600 text-sm">
|
|
Connectez-vous pour accéder aux événements et informations de votre équipe
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div id="mainContent" class="container mx-auto px-4 py-6 hidden">
|
|
<!-- Filters Section -->
|
|
<div id="eventFilters" class="bg-white rounded-2xl shadow-lg p-6 mb-8 hidden">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<label for="account" class="block text-sm font-medium text-gray-700 mb-1">Compte</label>
|
|
<select id="account" class="w-full rounded-lg border border-gray-300 bg-white py-2 px-3 text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-300">
|
|
<option value="default">Défaut</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="agegroup" class="block text-sm font-medium text-gray-700 mb-1">Âge</label>
|
|
<select id="agegroup" class="w-full rounded-lg border border-gray-300 bg-white py-2 px-3 text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-300">
|
|
<option value="">Tous</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="subgroup" class="block text-sm font-medium text-gray-700 mb-1">Sous-groupe</label>
|
|
<select id="subgroup" class="w-full rounded-lg border border-gray-300 bg-white py-2 px-3 text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-300">
|
|
<option value="">Tous</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-end">
|
|
<button id="fetchEvents" class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-lg transition duration-200">
|
|
Charger
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Indicator -->
|
|
<div id="loadingIndicator" class="text-center py-12 hidden">
|
|
<div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mb-4"></div>
|
|
<p class="text-indigo-700 font-medium">Chargement des événements...</p>
|
|
</div>
|
|
|
|
<!-- Events List -->
|
|
<div id="eventList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
|
|
</div>
|
|
|
|
<!-- Event Details Modal -->
|
|
<div id="eventDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
|
|
<div class="border-b border-gray-200 p-6 flex justify-between items-center">
|
|
<h5 id="eventDetailsLabel" class="text-2xl font-bold text-gray-800">Détails de l'événement</h5>
|
|
<button id="closeModal" class="text-gray-500 hover:text-gray-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="eventDetailsContent" class="p-6">
|
|
Chargement...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const loginContainer = document.getElementById("loginContainer");
|
|
const oidcLoginSection = document.getElementById("oidcLoginSection");
|
|
const connectedUser = document.getElementById("connectedUser");
|
|
const eventFilters = document.getElementById("eventFilters");
|
|
const accountSelect = document.getElementById("account");
|
|
const agegroupSelect = document.getElementById("agegroup");
|
|
const subgroupSelect = document.getElementById("subgroup");
|
|
const eventList = document.getElementById("eventList");
|
|
const fetchButton = document.getElementById("fetchEvents");
|
|
const eventDetailsContent = document.getElementById("eventDetailsContent");
|
|
const eventDetailsModal = document.getElementById("eventDetailsModal");
|
|
const closeModal = document.getElementById("closeModal");
|
|
const apiBaseUrl = window.location.origin;
|
|
|
|
let storedApiKey = localStorage.getItem("apikey");
|
|
let lastFetchedEvents = [];
|
|
let storedAccount = localStorage.getItem("account") || "default";
|
|
let userInfo = JSON.parse(localStorage.getItem("userInfo") || "null");
|
|
|
|
// Close modal when close button is clicked
|
|
closeModal.addEventListener("click", () => {
|
|
eventDetailsModal.classList.add("hidden");
|
|
});
|
|
|
|
// Close modal when clicking outside the content
|
|
eventDetailsModal.addEventListener("click", (e) => {
|
|
if (e.target === eventDetailsModal) {
|
|
eventDetailsModal.classList.add("hidden");
|
|
}
|
|
});
|
|
|
|
// If we have an API key but no userInfo, fetch it from the server
|
|
if (storedApiKey && !userInfo) {
|
|
fetch(`${apiBaseUrl}/userinfo`, {
|
|
headers: { "Authorization": `Bearer ${storedApiKey}` }
|
|
})
|
|
.then(response => response.json())
|
|
.then(userData => {
|
|
userInfo = { email: userData.email || "Utilisateur connecté" };
|
|
localStorage.setItem("userInfo", JSON.stringify(userInfo));
|
|
renderLoginSection();
|
|
})
|
|
.catch(e => {
|
|
console.error("Error fetching user info:", e);
|
|
// If we can't fetch user info, proceed with rendering
|
|
renderLoginSection();
|
|
});
|
|
} else {
|
|
// Render the login section normally
|
|
renderLoginSection();
|
|
}
|
|
|
|
// Handle the static "abc" key case - removed for security
|
|
/*
|
|
if (storedApiKey === "abc" && !userInfo) {
|
|
userInfo = {email: "utilisateur@example.com"};
|
|
localStorage.setItem("userInfo", JSON.stringify(userInfo));
|
|
}
|
|
*/
|
|
|
|
// Handle OIDC callback
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const error = urlParams.get('error');
|
|
const hashParams = new URLSearchParams(window.location.hash.substring(1));
|
|
const accessToken = hashParams.get('access_token');
|
|
|
|
// Display error message if present
|
|
if (error) {
|
|
alert("Erreur d'authentification: " + decodeURIComponent(error));
|
|
// Remove error from URL
|
|
window.history.replaceState({}, document.title, "/");
|
|
}
|
|
|
|
// Handle access token in URL fragment
|
|
if (accessToken) {
|
|
// Store the access token
|
|
localStorage.setItem("apikey", accessToken);
|
|
storedApiKey = accessToken;
|
|
|
|
// Get user info from the userinfo endpoint
|
|
fetch(`${apiBaseUrl}/userinfo`, {
|
|
headers: { "Authorization": `Bearer ${accessToken}` }
|
|
})
|
|
.then(response => response.json())
|
|
.then(userData => {
|
|
userInfo = { email: userData.email || "Utilisateur connecté" };
|
|
localStorage.setItem("userInfo", JSON.stringify(userInfo));
|
|
|
|
// Update UI
|
|
renderLoginSection();
|
|
})
|
|
.catch(e => {
|
|
console.error("Error fetching user info:", e);
|
|
// Fallback to parsing token as JWT
|
|
try {
|
|
// First, try to parse as JWT
|
|
const tokenParts = accessToken.split('.');
|
|
let userData = {};
|
|
|
|
if (tokenParts.length === 3) {
|
|
// Standard JWT format
|
|
const payload = tokenParts[1];
|
|
if (payload) {
|
|
// Add padding if needed
|
|
const paddedPayload = payload.padEnd(payload.length + (4 - payload.length % 4) % 4, '=');
|
|
const decodedPayload = atob(paddedPayload);
|
|
userData = JSON.parse(decodedPayload);
|
|
}
|
|
} else {
|
|
// Non-JWT token, treat as opaque token
|
|
console.log("Non-JWT token received, using default user info");
|
|
userData = { email: "utilisateur@" + window.location.hostname };
|
|
}
|
|
|
|
userInfo = { email: userData.email || "Utilisateur connecté" };
|
|
localStorage.setItem("userInfo", JSON.stringify(userInfo));
|
|
} catch (parseError) {
|
|
console.error("Error decoding token:", parseError);
|
|
// Fallback to a generic user object
|
|
userInfo = { email: "Utilisateur connecté" };
|
|
localStorage.setItem("userInfo", JSON.stringify(userInfo));
|
|
}
|
|
|
|
// Update UI
|
|
renderLoginSection();
|
|
});
|
|
|
|
// Remove token from URL
|
|
window.history.replaceState({}, document.title, "/");
|
|
}
|
|
|
|
function renderLoginSection() {
|
|
const mainContent = document.getElementById("mainContent");
|
|
const loginView = document.querySelector(".min-h-screen.flex");
|
|
const connectedUser = document.getElementById("connectedUser");
|
|
const loginTitle = document.getElementById("loginTitle");
|
|
|
|
if (storedApiKey || userInfo) {
|
|
// User is logged in
|
|
loginView.classList.add("hidden");
|
|
mainContent.classList.remove("hidden");
|
|
loginTitle.classList.add("hidden");
|
|
|
|
connectedUser.classList.remove("hidden");
|
|
oidcLoginSection.classList.add("hidden");
|
|
|
|
const userNameElement = document.getElementById("userName");
|
|
if (userInfo && userInfo.email) {
|
|
userNameElement.textContent = userInfo.email;
|
|
} else {
|
|
userNameElement.textContent = "Utilisateur";
|
|
}
|
|
|
|
eventFilters.classList.remove("hidden");
|
|
updateAccountOptionsAndLoadEvents();
|
|
} else {
|
|
// User is not logged in
|
|
loginView.classList.remove("hidden");
|
|
mainContent.classList.add("hidden");
|
|
loginTitle.classList.remove("hidden");
|
|
|
|
connectedUser.classList.add("hidden");
|
|
oidcLoginSection.classList.remove("hidden");
|
|
eventFilters.classList.add("hidden");
|
|
|
|
// Remove any existing event listeners to prevent duplicates
|
|
const oidcLoginBtn = document.getElementById("oidcLoginBtn");
|
|
const newOidcLoginBtn = oidcLoginBtn.cloneNode(true);
|
|
oidcLoginBtn.parentNode.replaceChild(newOidcLoginBtn, oidcLoginBtn);
|
|
|
|
newOidcLoginBtn.addEventListener("click", initiateOIDCLogin);
|
|
}
|
|
|
|
// Add disconnect handler
|
|
const disconnectBtn = document.getElementById("disconnect");
|
|
if (disconnectBtn) {
|
|
// Remove any existing event listeners to prevent duplicates
|
|
const newDisconnectBtn = disconnectBtn.cloneNode(true);
|
|
disconnectBtn.parentNode.replaceChild(newDisconnectBtn, disconnectBtn);
|
|
newDisconnectBtn.addEventListener("click", logout);
|
|
}
|
|
}
|
|
|
|
function initiateOIDCLogin() {
|
|
// Redirect to backend login endpoint
|
|
window.location.href = `${apiBaseUrl}/login`;
|
|
}
|
|
|
|
function logout() {
|
|
localStorage.removeItem("apikey");
|
|
localStorage.removeItem("account");
|
|
localStorage.removeItem("userInfo");
|
|
storedApiKey = null;
|
|
userInfo = null;
|
|
location.reload();
|
|
}
|
|
|
|
function updateAccountOptionsAndLoadEvents() {
|
|
// Fetch available accounts from the server
|
|
fetch(`${apiBaseUrl}/accounts`, {
|
|
headers: { "Authorization": `Bearer ${storedApiKey}` }
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(errorData => {
|
|
console.error("Accounts error response:", errorData);
|
|
throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.detail || 'Unknown error'}`);
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(accounts => {
|
|
// Check if accounts is actually an array
|
|
if (!Array.isArray(accounts)) {
|
|
console.error("Accounts data is not an array:", accounts);
|
|
throw new Error("Invalid accounts data format");
|
|
}
|
|
|
|
accountSelect.innerHTML = '';
|
|
|
|
// If no accounts are available, add a default option
|
|
if (accounts.length === 0) {
|
|
const option = document.createElement("option");
|
|
option.value = "default";
|
|
option.textContent = "Default";
|
|
accountSelect.appendChild(option);
|
|
return;
|
|
}
|
|
|
|
// Add all available accounts
|
|
accounts.forEach(account => {
|
|
const option = document.createElement("option");
|
|
option.value = account.name;
|
|
option.textContent = account.label;
|
|
accountSelect.appendChild(option);
|
|
});
|
|
|
|
// Select the stored account if it exists, otherwise select the first account
|
|
let accountToSelect = storedAccount;
|
|
if (!accounts.some(account => account.name === storedAccount)) {
|
|
accountToSelect = accounts[0].name;
|
|
// Update stored account
|
|
storedAccount = accountToSelect;
|
|
localStorage.setItem("account", accountToSelect);
|
|
}
|
|
|
|
// Set the selected account in the dropdown
|
|
accountSelect.value = accountToSelect;
|
|
|
|
// Automatically fetch events for the selected account
|
|
fetchEvents(storedApiKey, accountToSelect);
|
|
})
|
|
.catch(error => {
|
|
console.error("Erreur lors du chargement des comptes:", error);
|
|
alert("Accès refusé. Vous n'êtes pas autorisé à accéder à cette application. Veuillez contacter l'administrateur.");
|
|
logout();
|
|
});
|
|
}
|
|
|
|
renderLoginSection();
|
|
|
|
accountSelect.addEventListener("change", () => {
|
|
const selectedAccount = accountSelect.value;
|
|
localStorage.setItem("account", selectedAccount);
|
|
if (storedApiKey) {
|
|
fetchEvents(storedApiKey, selectedAccount);
|
|
}
|
|
});
|
|
|
|
fetchButton.addEventListener("click", () => {
|
|
if (!storedApiKey) {
|
|
alert("Veuillez vous connecter");
|
|
return;
|
|
}
|
|
const selectedAccount = accountSelect.value;
|
|
fetchEvents(storedApiKey, selectedAccount);
|
|
});
|
|
|
|
agegroupSelect.addEventListener("change", () => {
|
|
// Update subgroup options based on selected agegroup
|
|
updateSubgroupOptions(agegroupSelect.value, lastFetchedEvents);
|
|
displayEvents(lastFetchedEvents);
|
|
});
|
|
|
|
subgroupSelect.addEventListener("change", () => {
|
|
displayEvents(lastFetchedEvents);
|
|
});
|
|
|
|
function fetchEvents(apiKey, account) {
|
|
// Show loading indicator
|
|
const loadingIndicator = document.getElementById("loadingIndicator");
|
|
const eventList = document.getElementById("eventList");
|
|
loadingIndicator.classList.remove("hidden");
|
|
eventList.innerHTML = ""; // Clear previous events
|
|
|
|
fetch(`${apiBaseUrl}/schedule?account=${account}`, {
|
|
headers: { "Authorization": `Bearer ${apiKey}` }
|
|
})
|
|
.then(response => {
|
|
if (response.status === 401) {
|
|
// Token expired or invalid
|
|
alert("Votre session a expiré. Veuillez vous reconnecter.");
|
|
logout();
|
|
return;
|
|
}
|
|
if (!response.ok) {
|
|
// Try to parse error response as JSON, but handle plain text as well
|
|
return response.text().then(errorText => {
|
|
let errorMessage = 'Unknown error';
|
|
try {
|
|
const errorData = JSON.parse(errorText);
|
|
errorMessage = errorData.detail || errorData.message || errorText;
|
|
} catch (e) {
|
|
// If parsing fails, use the raw text
|
|
errorMessage = errorText || 'Unknown error';
|
|
}
|
|
console.error("Schedule error response:", errorText);
|
|
throw new Error(`HTTP error! status: ${response.status}, message: ${errorMessage}`);
|
|
});
|
|
}
|
|
return response.text().then(text => {
|
|
try {
|
|
return JSON.parse(text);
|
|
} catch (e) {
|
|
console.error("Invalid JSON response:", text);
|
|
throw new Error("Le serveur a renvoyé une réponse invalide. Veuillez réessayer.");
|
|
}
|
|
});
|
|
})
|
|
.then(data => {
|
|
// Hide loading indicator
|
|
loadingIndicator.classList.add("hidden");
|
|
|
|
if (data) {
|
|
// Check if data is an array
|
|
if (!Array.isArray(data)) {
|
|
console.error("Schedule data is not an array:", data);
|
|
throw new Error("Invalid schedule data format");
|
|
}
|
|
|
|
lastFetchedEvents = data.filter(event => event.event === "Jeu");
|
|
updateAgeGroupOptions(lastFetchedEvents);
|
|
displayEvents(lastFetchedEvents);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
// Hide loading indicator on error
|
|
loadingIndicator.classList.add("hidden");
|
|
|
|
console.error("Erreur lors du chargement des événements:", error);
|
|
alert("Erreur lors du chargement des événements: " + error.message);
|
|
});
|
|
}
|
|
|
|
function updateAgeGroupOptions(events) {
|
|
let agegroups = new Set(events.map(event => event.agegroup));
|
|
agegroupSelect.innerHTML = '<option value="">Tous</option>';
|
|
Array.from(agegroups).sort().forEach(group => {
|
|
const option = document.createElement("option");
|
|
option.value = group;
|
|
option.textContent = group;
|
|
agegroupSelect.appendChild(option);
|
|
});
|
|
|
|
// Reset subgroup selector
|
|
subgroupSelect.innerHTML = '<option value="">Tous</option>';
|
|
}
|
|
|
|
function updateSubgroupOptions(selectedAgegroup, events) {
|
|
// Reset subgroup options
|
|
subgroupSelect.innerHTML = '<option value="">Tous</option>';
|
|
|
|
if (selectedAgegroup === "") {
|
|
// If no agegroup is selected, disable subgroup selector
|
|
subgroupSelect.disabled = true;
|
|
return;
|
|
}
|
|
|
|
// Enable subgroup selector
|
|
subgroupSelect.disabled = false;
|
|
|
|
// Extract subgroups from events matching the selected agegroup
|
|
let subgroups = new Set();
|
|
events
|
|
.filter(event => event.agegroup === selectedAgegroup)
|
|
.forEach(event => {
|
|
// Extract subgroup from event.name or event.title
|
|
// This assumes the subgroup is part of the name field
|
|
if (event.name && event.name !== selectedAgegroup) {
|
|
subgroups.add(event.name);
|
|
}
|
|
});
|
|
|
|
// Add subgroups to the selector
|
|
Array.from(subgroups).sort().forEach(subgroup => {
|
|
const option = document.createElement("option");
|
|
option.value = subgroup;
|
|
option.textContent = subgroup;
|
|
subgroupSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function displayEvents(events) {
|
|
eventList.innerHTML = "";
|
|
let selectedAgegroup = agegroupSelect.value;
|
|
let selectedSubgroup = subgroupSelect.value;
|
|
let filteredEvents = events.filter(event => {
|
|
// Filter by event type
|
|
if (event.event !== "Jeu") return false;
|
|
|
|
// Filter by agegroup
|
|
if (selectedAgegroup !== "" && event.agegroup !== selectedAgegroup) return false;
|
|
|
|
// Filter by subgroup
|
|
if (selectedSubgroup !== "" && event.name !== selectedSubgroup) return false;
|
|
|
|
return true;
|
|
});
|
|
|
|
if (filteredEvents.length === 0) {
|
|
eventList.innerHTML = "<p class='text-gray-500 text-center py-8'>Aucun événement 'Jeu' trouvé.</p>";
|
|
return;
|
|
}
|
|
|
|
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 = `
|
|
<div class="p-6 border-l-4" style="border-color: ${event.color || '#818cf8'}">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-800">${event.agegroup} - ${event.name}</h3>
|
|
<p class="text-gray-600 mt-1">${event.title}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 space-y-2">
|
|
<p class="flex items-center text-gray-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
<strong>Adversaire:</strong> ${event.opponent}
|
|
</p>
|
|
|
|
<p class="flex items-center text-gray-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<strong>Lieu:</strong> ${event.place}
|
|
</p>
|
|
|
|
<p class="flex items-center text-gray-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<strong>Heure:</strong> ${event.start} - ${event.end}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
eventCard.addEventListener("click", () => fetchEventDetails(event.id_event));
|
|
eventList.appendChild(eventCard);
|
|
});
|
|
}
|
|
|
|
function fetchEventDetails(eventId) {
|
|
const selectedAccount = accountSelect.value;
|
|
fetch(`${apiBaseUrl}/game/${eventId}?account=${selectedAccount}`, {
|
|
headers: { "Authorization": `Bearer ${storedApiKey}` }
|
|
})
|
|
.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;
|
|
});
|
|
|
|
// Generate position breakdown
|
|
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 = `
|
|
<div class="rounded-xl border border-amber-300 bg-amber-50 p-6">
|
|
<div class="text-center">
|
|
<h5 class="text-2xl font-bold text-gray-800 mb-4">${data.title}</h5>
|
|
<div class="space-y-2 text-gray-700 mb-6">
|
|
<p><strong>Type:</strong> ${data.type}</p>
|
|
<p><strong>Lieu:</strong> ${data.place}</p>
|
|
<p><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
|
|
</div>
|
|
<div class="bg-amber-100 border border-amber-300 text-amber-800 px-4 py-3 rounded-lg">
|
|
<h6 class="font-bold text-lg mb-1">Aucun joueur ni personnel convoqué</h6>
|
|
<p>Il n'y a actuellement aucun joueur ni personnel convoqué pour ce match.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else {
|
|
let staffHtml = '';
|
|
if (totalStaff > 0) {
|
|
staffHtml = `
|
|
<div class="mt-6">
|
|
<h6 class="text-xl font-semibold text-gray-800 mb-3">Personnel (${totalStaff}):</h6>
|
|
<ul class="space-y-2">
|
|
${staffList.map(staff => {
|
|
return `<li class="flex items-center"><span class="font-medium w-32">${staff.role}:</span> <span>${staff.fname} ${staff.lname}</span></li>`;
|
|
}).join('')}
|
|
</ul>
|
|
</div>
|
|
`;
|
|
} else {
|
|
staffHtml = `
|
|
<div class="mt-6 bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg">
|
|
<h6 class="font-bold mb-1">Aucun personnel convoqué</h6>
|
|
<p>Il n'y a actuellement aucun personnel convoqué pour ce match.</p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
if (totalPlayers === 0) {
|
|
eventDetailsContent.innerHTML = `
|
|
<div>
|
|
<h5 class="text-2xl font-bold text-gray-800 mb-4">${data.title}</h5>
|
|
<div class="space-y-2 text-gray-700 mb-6">
|
|
<p><strong>Type:</strong> ${data.type}</p>
|
|
<p><strong>Lieu:</strong> ${data.place}</p>
|
|
<p><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
|
|
</div>
|
|
<div class="bg-amber-100 border border-amber-300 text-amber-800 px-4 py-3 rounded-lg">
|
|
<h6 class="font-bold mb-1">Aucun joueur convoqué</h6>
|
|
<p>Il n'y a actuellement aucun joueur convoqué pour ce match.</p>
|
|
</div>
|
|
${staffHtml}
|
|
</div>
|
|
`;
|
|
} else {
|
|
eventDetailsContent.innerHTML = `
|
|
<div>
|
|
<h5 class="text-2xl font-bold text-gray-800 mb-4">${data.title}</h5>
|
|
<div class="space-y-2 text-gray-700 mb-6">
|
|
<p><strong>Type:</strong> ${data.type}</p>
|
|
<p><strong>Lieu:</strong> ${data.place}</p>
|
|
<p><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
|
|
<p><strong>Joueurs convoqués:</strong> ${totalPlayers} joueur${totalPlayers > 1 ? 's' : ''} (${positionBreakdown})</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h6 class="text-xl font-semibold text-gray-800 mb-3">Liste des joueurs:</h6>
|
|
<ul class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
${playersByPosition.map(player => {
|
|
let number = player.number ? player.number : "N/A";
|
|
let position = player.position ? player.position : "N/A";
|
|
return `<li class="bg-indigo-50 rounded-lg p-3"><span class="font-medium">[${position}] ${number}</span> - ${player.fname} ${player.lname} <span class="text-gray-500 text-sm">(${player.dob})</span></li>`;
|
|
}).join('')}
|
|
</ul>
|
|
</div>
|
|
|
|
${staffHtml}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
eventDetailsModal.classList.remove("hidden");
|
|
})
|
|
.catch(error => console.error("Erreur lors du chargement des détails de l'événement:", error));
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|