314 lines
14 KiB
HTML
314 lines
14 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>
|
|
<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>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container mt-4">
|
|
<h1 class="mb-4 text-center">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>
|
|
<div id="apikeySection" style="display: none;">
|
|
<label for="apikey" class="form-label">API Key</label>
|
|
<input type="text" id="apikey" class="form-control" placeholder="Entrez votre API Key">
|
|
<button id="validateApiKey" class="btn btn-success mt-2">Valider</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 id="eventFilters" style="display: none;">
|
|
<div class="mb-3">
|
|
<label for="account" class="form-label">Sélectionner un compte</label>
|
|
<select id="account" class="form-select">
|
|
<option value="default">Compte par défaut</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="agegroup" class="form-label">Filtrer par groupe d'âge</label>
|
|
<select id="agegroup" class="form-select">
|
|
<option value="">Tous</option>
|
|
</select>
|
|
</div>
|
|
<button id="fetchEvents" class="btn btn-primary mb-3">Charger les événements</button>
|
|
</div>
|
|
|
|
<div id="eventList" class="row"></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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const loginContainer = document.getElementById("loginContainer");
|
|
const oidcLoginSection = document.getElementById("oidcLoginSection");
|
|
const apikeySection = document.getElementById("apikeySection");
|
|
const connectedUser = document.getElementById("connectedUser");
|
|
const eventFilters = document.getElementById("eventFilters");
|
|
const accountSelect = document.getElementById("account");
|
|
const agegroupSelect = document.getElementById("agegroup");
|
|
const eventList = document.getElementById("eventList");
|
|
const fetchButton = document.getElementById("fetchEvents");
|
|
const eventDetailsContent = document.getElementById("eventDetailsContent");
|
|
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");
|
|
|
|
// Handle OIDC callback
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const code = urlParams.get('code');
|
|
if (code) {
|
|
// We're coming back from OIDC login
|
|
exchangeCodeForToken(code);
|
|
// Remove code from URL
|
|
window.history.replaceState({}, document.title, "/");
|
|
}
|
|
|
|
function renderLoginSection() {
|
|
if (storedApiKey || userInfo) {
|
|
// User is logged in
|
|
connectedUser.style.display = "block";
|
|
oidcLoginSection.style.display = "none";
|
|
apikeySection.style.display = "none";
|
|
|
|
const userNameElement = document.getElementById("userName");
|
|
if (userInfo && userInfo.email) {
|
|
userNameElement.textContent = userInfo.email;
|
|
} else {
|
|
userNameElement.textContent = "Utilisateur";
|
|
}
|
|
|
|
eventFilters.style.display = "block";
|
|
updateAccountOptions();
|
|
if (storedApiKey) {
|
|
fetchEvents(storedApiKey, storedAccount);
|
|
}
|
|
} else {
|
|
// User is not logged in
|
|
connectedUser.style.display = "none";
|
|
oidcLoginSection.style.display = "block";
|
|
apikeySection.style.display = "none";
|
|
eventFilters.style.display = "none";
|
|
|
|
document.getElementById("oidcLoginBtn").addEventListener("click", initiateOIDCLogin);
|
|
}
|
|
|
|
// Add disconnect handler
|
|
const disconnectBtn = document.getElementById("disconnect");
|
|
if (disconnectBtn) {
|
|
disconnectBtn.addEventListener("click", logout);
|
|
}
|
|
}
|
|
|
|
function initiateOIDCLogin() {
|
|
// Redirect to backend login endpoint
|
|
window.location.href = `${apiBaseUrl}/login`;
|
|
}
|
|
|
|
function exchangeCodeForToken(code) {
|
|
fetch(`${apiBaseUrl}/callback?code=${code}&state=ignored`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.access_token) {
|
|
localStorage.setItem("apikey", data.access_token);
|
|
localStorage.setItem("userInfo", JSON.stringify(data.user));
|
|
storedApiKey = data.access_token;
|
|
userInfo = data.user;
|
|
renderLoginSection();
|
|
} else {
|
|
alert("Échec de la connexion OIDC");
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Erreur lors de l'échange du code:", error);
|
|
alert("Échec de la connexion OIDC");
|
|
});
|
|
}
|
|
|
|
function logout() {
|
|
localStorage.removeItem("apikey");
|
|
localStorage.removeItem("account");
|
|
localStorage.removeItem("userInfo");
|
|
storedApiKey = null;
|
|
userInfo = null;
|
|
location.reload();
|
|
}
|
|
|
|
function saveApiKey() {
|
|
const key = document.getElementById("apikey").value;
|
|
if (key) {
|
|
localStorage.setItem("apikey", key);
|
|
location.reload();
|
|
} else {
|
|
alert("Veuillez entrer une clé API valide.");
|
|
}
|
|
}
|
|
|
|
function updateAccountOptions() {
|
|
// Fetch available accounts from the server
|
|
fetch(`${apiBaseUrl}/accounts`, {
|
|
headers: { "Authorization": `Bearer ${storedApiKey}` }
|
|
})
|
|
.then(response => response.json())
|
|
.then(accounts => {
|
|
accountSelect.innerHTML = '';
|
|
accounts.forEach(account => {
|
|
const option = document.createElement("option");
|
|
option.value = account.name;
|
|
option.textContent = account.label;
|
|
if (account.name === storedAccount) {
|
|
option.selected = true;
|
|
}
|
|
accountSelect.appendChild(option);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error("Erreur lors du chargement des comptes:", error);
|
|
// Fallback to default options
|
|
accountSelect.innerHTML = `
|
|
<option value="default" ${storedAccount === "default" ? "selected" : ""}>Compte par défaut</option>
|
|
`;
|
|
});
|
|
}
|
|
|
|
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", () => {
|
|
displayEvents(lastFetchedEvents);
|
|
});
|
|
|
|
function fetchEvents(apiKey, account) {
|
|
fetch(`${apiBaseUrl}/schedule?account=${account}`, {
|
|
headers: { "Authorization": `Bearer ${apiKey}` }
|
|
})
|
|
.then(response => {
|
|
if (response.status === 401) {
|
|
// Token expired or invalid
|
|
logout();
|
|
return;
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data) {
|
|
lastFetchedEvents = data.filter(event => event.event === "Jeu");
|
|
updateAgeGroupOptions(lastFetchedEvents);
|
|
displayEvents(lastFetchedEvents);
|
|
}
|
|
})
|
|
.catch(error => console.error("Erreur lors du chargement des événements:", error));
|
|
}
|
|
|
|
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>
|
|
</body>
|
|
|
|
</html>
|