Rene Luria
66b93af6b1
Add support for multiple MyIce accounts in the web interface: - Create /accounts endpoint to fetch available accounts from config files - Update index.html to dynamically show available accounts - Modify /schedule and /game endpoints to accept account parameter - Store selected account in localStorage for persistence
236 lines
11 KiB
HTML
236 lines
11 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="apikeyContainer" class="mb-3"></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 apikeyContainer = document.getElementById("apikeyContainer");
|
|
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";
|
|
|
|
function renderApiKeyInput() {
|
|
if (storedApiKey) {
|
|
apikeyContainer.innerHTML = `<button id="disconnect" class="btn btn-danger">Déconnecter</button>`;
|
|
document.getElementById("disconnect").addEventListener("click", () => {
|
|
localStorage.removeItem("apikey");
|
|
localStorage.removeItem("account");
|
|
location.reload();
|
|
});
|
|
eventFilters.style.display = "block";
|
|
// Load available accounts from server or use predefined ones
|
|
updateAccountOptions();
|
|
fetchEvents(storedApiKey, storedAccount);
|
|
} else {
|
|
apikeyContainer.innerHTML = `
|
|
<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>
|
|
`;
|
|
eventFilters.style.display = "none";
|
|
document.getElementById("validateApiKey").addEventListener("click", saveApiKey);
|
|
document.getElementById("apikey").addEventListener("keypress", function (event) {
|
|
if (event.key === "Enter") {
|
|
saveApiKey();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
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>
|
|
`;
|
|
});
|
|
}
|
|
|
|
renderApiKeyInput();
|
|
|
|
accountSelect.addEventListener("change", () => {
|
|
const selectedAccount = accountSelect.value;
|
|
localStorage.setItem("account", selectedAccount);
|
|
if (storedApiKey) {
|
|
fetchEvents(storedApiKey, selectedAccount);
|
|
}
|
|
});
|
|
|
|
fetchButton.addEventListener("click", () => {
|
|
if (!storedApiKey) {
|
|
alert("Veuillez entrer une clé API");
|
|
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 => response.json())
|
|
.then(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>
|