herel/myice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign UI with Tailwind CSS and improve event display

Browse Source
This commit is contained in:
Rene Luria
2025-10-15 15:59:57 +02:00
parent c21afdebc0
commit e85aaf143e
3 changed files with 968 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+178 -104
View File
@@ -5,78 +5,95 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyIce - Games</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="connectedUser" class="position-fixed top-0 end-0 m-2 p-2 bg-light border rounded"
style="display: none; z-index: 1000; font-size: 0.9rem;">
<span>Connecté: <span id="userName"></span></span>
<button id="disconnect" class="btn btn-danger btn-sm ms-2"
style="font-size: 0.8rem; padding: 0.1rem 0.3rem;">Déco</button>
<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>
<div class="container-fluid d-flex align-items-center justify-content-center">
<!-- Login View -->
<div class="min-h-screen flex items-center justify-center p-4">
<div class="text-center">
<h1 id="loginTitle" class="mb-4">MyIce - Games</h1>
<h1 id="loginTitle" class="text-4xl md:text-5xl font-bold text-indigo-800 mb-8">MyIce - Games</h1>
<div id="loginContainer" class="mb-3">
<div id="loginContainer" class="mb-6">
<div id="oidcLoginSection">
<button id="oidcLoginBtn" class="btn btn-primary btn-md px-4 py-3 shadow">Se connecter</button>
<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>
<div class="container mt-2" id="mainContent" style="display: none;">
<div id="eventFilters" style="display: none;">
<div class="mb-3 row">
<div class="col-md-3">
<label for="account" class="form-label">Compte</label>
<select id="account" class="form-select">
<!-- 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 class="col-md-3">
<label for="agegroup" class="form-label">Âge</label>
<select id="agegroup" class="form-select">
<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 class="col-md-3">
<label for="subgroup" class="form-label">Sous-groupe</label>
<select id="subgroup" class="form-select">
<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="col-md-3 d-flex align-items-end">
<button id="fetchEvents" class="btn btn-primary">Charger</button>
<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>
<div id="loadingIndicator" class="text-center my-3" style="display: none;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<p class="mt-2">Chargement des événements...</p>
<!-- 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>
<div id="eventList" class="row mt-2"></div>
<!-- Events List -->
<div id="eventList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
</div>
<!-- Modal pour afficher les détails d'un événement -->
<div class="modal fade" id="eventDetailsModal" tabindex="-1" aria-labelledby="eventDetailsLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="eventDetailsLabel">Détails de l'événement</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="eventDetailsContent">Chargement...</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>
@@ -93,6 +110,8 @@
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");
@@ -100,6 +119,18 @@
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`, {
@@ -202,18 +233,18 @@
function renderLoginSection() {
const mainContent = document.getElementById("mainContent");
const loginView = document.querySelector(".container-fluid");
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.style.display = "none";
mainContent.style.display = "block";
loginTitle.style.display = "none";
loginView.classList.add("hidden");
mainContent.classList.remove("hidden");
loginTitle.classList.add("hidden");
connectedUser.style.display = "block";
oidcLoginSection.style.display = "none";
connectedUser.classList.remove("hidden");
oidcLoginSection.classList.add("hidden");
const userNameElement = document.getElementById("userName");
if (userInfo && userInfo.email) {
@@ -222,17 +253,17 @@
userNameElement.textContent = "Utilisateur";
}
eventFilters.style.display = "block";
eventFilters.classList.remove("hidden");
updateAccountOptionsAndLoadEvents();
} else {
// User is not logged in
loginView.style.display = "flex";
mainContent.style.display = "none";
loginTitle.style.display = "block";
loginView.classList.remove("hidden");
mainContent.classList.add("hidden");
loginTitle.classList.remove("hidden");
connectedUser.style.display = "none";
oidcLoginSection.style.display = "block";
eventFilters.style.display = "none";
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");
@@ -361,7 +392,7 @@
// Show loading indicator
const loadingIndicator = document.getElementById("loadingIndicator");
const eventList = document.getElementById("eventList");
loadingIndicator.style.display = "block";
loadingIndicator.classList.remove("hidden");
eventList.innerHTML = ""; // Clear previous events
fetch(`${apiBaseUrl}/schedule?account=${account}`, {
@@ -400,7 +431,7 @@
})
.then(data => {
// Hide loading indicator
loadingIndicator.style.display = "none";
loadingIndicator.classList.add("hidden");
if (data) {
// Check if data is an array
@@ -416,7 +447,7 @@
})
.catch(error => {
// Hide loading indicator on error
loadingIndicator.style.display = "none";
loadingIndicator.classList.add("hidden");
console.error("Erreur lors du chargement des événements:", error);
alert("Erreur lors du chargement des événements: " + error.message);
@@ -489,21 +520,44 @@
});
if (filteredEvents.length === 0) {
eventList.innerHTML = "<p class='text-muted'>Aucun événement 'Jeu' trouvé.</p>";
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 = "col-md-4 mb-3";
eventCard.className = "bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-105 transition-all duration-300 cursor-pointer";
eventCard.innerHTML = `
<div class="card" style="border-left: 5px solid ${event.color}" data-id="${event.id_event}">
<div class="card-body">
<h5 class="card-title">${event.agegroup} - ${event.name}</h5>
<p class="card-text">${event.title}</p>
<p class="card-text"><strong>Adversaire:</strong> ${event.opponent}</p>
<p class="card-text"><strong>Lieu:</strong> ${event.place}</p>
<p class="card-text"><strong>Heure:</strong> ${event.start} - ${event.end}</p>
<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>
`;
@@ -560,14 +614,16 @@
// Check if there are no players
if (totalPlayers === 0 && totalStaff === 0) {
eventDetailsContent.innerHTML = `
<div class="card border-warning">
<div class="card-body text-center">
<h5 class="card-title">${data.title}</h5>
<p class="card-text"><strong>Type:</strong> ${data.type}</p>
<p class="card-text"><strong>Lieu:</strong> ${data.place}</p>
<p class="card-text"><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
<div class="alert alert-warning" role="alert">
<h6 class="alert-heading">Aucun joueur ni personnel convoqué</h6>
<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>
@@ -577,15 +633,19 @@
let staffHtml = '';
if (totalStaff > 0) {
staffHtml = `
<h6>Personnel (${totalStaff}):</h6>
<ul>${staffList.map(staff => {
return `<li><strong>${staff.role}:</strong> ${staff.fname} ${staff.lname}</li>`;
}).join('')}</ul>
<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="alert alert-info" role="alert">
<h6>Aucun personnel convoqué</h6>
<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>
`;
@@ -593,34 +653,48 @@
if (totalPlayers === 0) {
eventDetailsContent.innerHTML = `
<h5>${data.title}</h5>
<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 class="alert alert-warning" role="alert">
<h6 class="alert-heading">Aucun joueur convoqué</h6>
<p>Il n'y a actuellement aucun joueur convoqué pour ce match.</p>
<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>
${staffHtml}
`;
} else {
eventDetailsContent.innerHTML = `
<h5>${data.title}</h5>
<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>
<h6>Liste des joueurs:</h6>
<ul>${playersByPosition.map(player => {
let number = player.number ? player.number : "N/A";
let position = player.position ? player.position : "N/A";
return `<li>[${position}] ${number} - ${player.fname} ${player.lname} (${player.dob})</li>`;
}).join('')}</ul>
${staffHtml}
<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>
`;
}
}
new bootstrap.Modal(document.getElementById('eventDetailsModal')).show();
eventDetailsModal.classList.remove("hidden");
})
.catch(error => console.error("Erreur lors du chargement des détails de l'événement:", error));
}