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

feat: enhance login button styling and fix JavaScript syntax errors

Browse Source 
Centered the login button on the page with improved styling including padding and shadow effects. Fixed JavaScript syntax errors in the event handling code. Removed unmatched closing div tags to ensure valid HTML structure.
This commit is contained in:
Rene Luria
2025-08-19 15:49:28 +02:00
parent a407a108ed
commit 73f72d1bbe
1 changed files with 29 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
index.html
View File

@@ -10,18 +10,23 @@
</head>
<body>
<div class="container mt-4">
<h1 class="mb-4 text-center">MyIce - Games</h1>
<div class="container-fluid d-flex align-items-center justify-content-center" style="min-height: 100vh;">
<div class="text-center">
<h1 class="mb-4">MyIce - Games</h1>
<div id="loginContainer" class="mb-3">
<div id="oidcLoginSection">
<button id="oidcLoginBtn" class="btn btn-primary">Se connecter avec Infomaniak</button>
<div id="loginContainer" class="mb-3">
<div id="oidcLoginSection">
<button id="oidcLoginBtn" class="btn btn-primary btn-lg px-4 py-3 shadow">Se connecter avec Infomaniak</button>
</div>
<div id="connectedUser" style="display: none;">
<p>Connecté en tant que: <span id="userName"></span></p>
<button id="disconnect" class="btn btn-danger">Déconnecter</button>
</div>
</div>
</div>
</div>
<div id="connectedUser" style="display: none;">
<p>Connecté en tant que: <span id="userName"></span></p>
<button id="disconnect" class="btn btn-danger">Déconnecter</button>
</div>
</div>
<div class="container mt-4" id="mainContent" style="display: none;">
<div id="eventFilters" style="display: none;">
<div class="mb-3">
@@ -56,6 +61,8 @@
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const loginContainer = document.getElementById("loginContainer");
@@ -175,8 +182,14 @@
}
function renderLoginSection() {
const mainContent = document.getElementById("mainContent");
const loginView = document.querySelector(".container-fluid");
if (storedApiKey || userInfo) {
// User is logged in
loginView.style.display = "none";
mainContent.style.display = "block";
connectedUser.style.display = "block";
oidcLoginSection.style.display = "none";
@@ -193,6 +206,9 @@
// Wait for user to explicitly select an account or click fetch
} else {
// User is not logged in
loginView.style.display = "flex";
mainContent.style.display = "none";
connectedUser.style.display = "none";
oidcLoginSection.style.display = "block";
eventFilters.style.display = "none";
@@ -345,92 +361,13 @@
throw new Error("Le serveur a renvoyé une réponse invalide. Veuillez réessayer.");
}
});
})
.then(data => {
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 => {
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} ${event.name}`.trim()));
agegroupSelect.innerHTML = '<option value="">Tous</option>';
agegroups.forEach(group => {
const option = document.createElement("option");
option.value = group;
option.textContent = group;
agegroupSelect.appendChild(option);
});
}
function displayEvents(events) {
eventList.innerHTML = "";
let selectedAgegroup = agegroupSelect.value;
let filteredEvents = events.filter(event => event.event === "Jeu" && (selectedAgegroup === "" || `${event.agegroup} ${event.name}` === selectedAgegroup));
if (filteredEvents.length === 0) {
eventList.innerHTML = "<p class='text-muted'>Aucun événement 'Jeu' trouvé.</p>";
return;
}
filteredEvents.forEach(event => {
const eventCard = document.createElement("div");
eventCard.className = "col-md-4 mb-3";
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.title}</h5>
<p class="card-text"><strong>Lieu:</strong> ${event.place}</p>
<p class="card-text"><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 => {
const sortedPlayers = data.convocation.available
.sort((a, b) => (a.number || 0) - (b.number || 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>
<h6>Joueurs convoqués:</h6>
<ul>${sortedPlayers.map(player => {
let number = player.number ? player.number : "N/A";
let position = player.position ? player.position : "N/A";
return `<li>${number} - ${player.fname} ${player.lname} (${position}, ${player.dob})</li>`;
}).join('')}</ul>
`;
new bootstrap.Modal(document.getElementById('eventDetailsModal')).show();
})
.catch(error => console.error("Erreur lors du chargement des détails de l'événement:", error));
}
});
</script>
</script>
</body>
</html>