375 lines
14 KiB
JavaScript
375 lines
14 KiB
JavaScript
/**
|
|
* Script principal pour MH Wilds - Partage de Quêtes à Couronnes
|
|
* Fichier à placer dans assets/js/main.js
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Éléments DOM
|
|
const monsterList = document.getElementById('monsterList');
|
|
const monsterSearch = document.getElementById('monsterSearch');
|
|
const clearSearchBtn = document.getElementById('clearSearchBtn');
|
|
const addQuestBtn = document.getElementById('addQuestBtn');
|
|
const monsterSearchSelect = document.getElementById('monsterSearchSelect');
|
|
const monsterSearchResults = document.getElementById('monsterSearchResults');
|
|
const selectedMonsterId = document.getElementById('selectedMonsterId');
|
|
const monsterSort = document.getElementById('monsterSort');
|
|
|
|
// Variables globales
|
|
let monsters = [];
|
|
let currentMonsterId = null;
|
|
|
|
// ========== INITIALISATION ==========
|
|
|
|
// Récupérer la liste des monstres
|
|
fetchMonsters();
|
|
|
|
// Ajouter les écouteurs d'événements
|
|
if (clearSearchBtn) {
|
|
clearSearchBtn.addEventListener('click', clearSearch);
|
|
}
|
|
|
|
if (monsterSearch) {
|
|
monsterSearch.addEventListener('input', filterMonsters);
|
|
}
|
|
|
|
if (addQuestBtn) {
|
|
addQuestBtn.addEventListener('click', function() {
|
|
new bootstrap.Modal(document.getElementById('addQuestModal')).show();
|
|
});
|
|
}
|
|
|
|
// Ajouter l'écouteur pour le tri des monstres
|
|
if (monsterSort) {
|
|
monsterSort.addEventListener('change', function() {
|
|
// Rediriger vers la même page avec le paramètre de tri
|
|
const sortValue = this.value;
|
|
console.log("Changement de tri: " + sortValue); // Pour le débogage
|
|
window.location.href = `index.php?sort=${sortValue}`;
|
|
});
|
|
}
|
|
|
|
// Ajouter les écouteurs pour les cartes de monstres
|
|
if (monsterList) {
|
|
monsterList.addEventListener('click', function(e) {
|
|
const card = e.target.closest('.monster-card');
|
|
if (card) {
|
|
const monsterId = parseInt(card.dataset.monsterId);
|
|
if (!isNaN(monsterId)) {
|
|
currentMonsterId = monsterId;
|
|
showQuestListModal(monsterId);
|
|
}
|
|
}
|
|
|
|
// Si le clic est sur un bouton dans la carte
|
|
if (e.target.tagName === 'BUTTON') {
|
|
e.preventDefault();
|
|
// Trouver la carte parent
|
|
const card = e.target.closest('.monster-card');
|
|
if (card) {
|
|
const monsterId = parseInt(card.dataset.monsterId);
|
|
if (!isNaN(monsterId)) {
|
|
currentMonsterId = monsterId;
|
|
showQuestListModal(monsterId);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialiser la recherche de monstre dans le formulaire d'ajout
|
|
if (monsterSearchSelect) {
|
|
monsterSearchSelect.addEventListener('focus', function() {
|
|
showMonsterSearchResults();
|
|
});
|
|
|
|
monsterSearchSelect.addEventListener('input', function() {
|
|
showMonsterSearchResults(this.value);
|
|
});
|
|
|
|
// Clic en dehors des résultats pour les masquer
|
|
document.addEventListener('click', function(e) {
|
|
if (!monsterSearchSelect.contains(e.target) && !monsterSearchResults.contains(e.target)) {
|
|
monsterSearchResults.classList.add('d-none');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Écouteurs pour les filtres de couronnes dans la modale de quêtes
|
|
document.querySelectorAll('input[name="crownFilter"]').forEach(radio => {
|
|
radio.addEventListener('change', function() {
|
|
if (currentMonsterId) {
|
|
fetchQuests(currentMonsterId, this.value);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initialiser les formulaires
|
|
initForms();
|
|
|
|
// ========== FONCTIONS ==========
|
|
|
|
/**
|
|
* Récupérer tous les monstres via l'API
|
|
*/
|
|
function fetchMonsters() {
|
|
fetch('api.php?action=getMonsters')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
monsters = data.monsters;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Erreur lors de la récupération des monstres:', error);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Afficher la modale avec la liste des quêtes pour un monstre
|
|
*
|
|
* @param {number} monsterId ID du monstre
|
|
*/
|
|
function showQuestListModal(monsterId) {
|
|
// Réinitialiser le filtre à "Toutes"
|
|
document.getElementById('filterAll').checked = true;
|
|
|
|
// Récupérer et afficher les quêtes
|
|
fetchQuests(monsterId, 'all');
|
|
|
|
// Afficher la modale
|
|
new bootstrap.Modal(document.getElementById('questListModal')).show();
|
|
}
|
|
|
|
/**
|
|
* Récupérer les quêtes pour un monstre
|
|
*
|
|
* @param {number} monsterId ID du monstre
|
|
* @param {string} crownType Type de couronne (all, small, large)
|
|
*/
|
|
function fetchQuests(monsterId, crownType) {
|
|
const questList = document.getElementById('questList');
|
|
questList.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Chargement...</span></div></div>';
|
|
|
|
fetch(`api.php?action=getQuests&monsterId=${monsterId}&crownType=${crownType}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Mettre à jour le titre de la modale
|
|
document.getElementById('modalMonsterName').textContent = data.monster;
|
|
|
|
// Afficher les quêtes
|
|
displayQuests(data.quests);
|
|
} else {
|
|
questList.innerHTML = `<div class="alert alert-danger">Erreur: ${data.message}</div>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Erreur lors de la récupération des quêtes:', error);
|
|
questList.innerHTML = '<div class="alert alert-danger">Erreur de connexion. Veuillez réessayer.</div>';
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Afficher les quêtes dans la modale
|
|
*
|
|
* @param {Array} quests Liste des quêtes
|
|
*/
|
|
function displayQuests(quests) {
|
|
const questList = document.getElementById('questList');
|
|
|
|
if (quests.length === 0) {
|
|
questList.innerHTML = '<div class="empty-message"><p>Aucune quête disponible pour ce monstre avec ce filtre.</p></div>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
quests.forEach(quest => {
|
|
const crownClass = quest.crown_type === 'small' ? 'small-crown' : 'large-crown';
|
|
const crownLabel = quest.crown_type === 'small' ? 'Petite couronne' : 'Grande couronne';
|
|
|
|
html += `
|
|
<div class="card quest-card mb-3">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="crown-badge ${crownClass}">${crownLabel}</span>
|
|
<button class="btn btn-sm btn-outline-danger delete-quest-btn" data-id="${quest.id}">
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
<p class="my-2">Joueur: <strong>${quest.player_name}</strong> (ID: ${quest.player_id})</p>
|
|
<div class="quest-date">Ajoutée: ${quest.freshness}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
questList.innerHTML = html;
|
|
|
|
// Ajouter les écouteurs pour les boutons de suppression
|
|
questList.querySelectorAll('.delete-quest-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const questId = parseInt(this.dataset.id);
|
|
if (!isNaN(questId)) {
|
|
showDeleteQuestModal(questId);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Afficher la modale de confirmation de suppression
|
|
*
|
|
* @param {number} questId ID de la quête à supprimer
|
|
*/
|
|
function showDeleteQuestModal(questId) {
|
|
document.getElementById('deleteQuestId').value = questId;
|
|
new bootstrap.Modal(document.getElementById('deleteQuestModal')).show();
|
|
}
|
|
|
|
/**
|
|
* Filtrer les monstres par nom
|
|
*/
|
|
function filterMonsters() {
|
|
const searchTerm = monsterSearch.value.toLowerCase();
|
|
const cards = monsterList.querySelectorAll('.monster-card');
|
|
|
|
cards.forEach(card => {
|
|
const monsterName = card.querySelector('.card-title').textContent.toLowerCase();
|
|
const parent = card.parentElement; // Le parent est la colonne
|
|
|
|
if (monsterName.includes(searchTerm)) {
|
|
parent.style.display = 'block';
|
|
} else {
|
|
parent.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Effacer la recherche
|
|
*/
|
|
function clearSearch() {
|
|
monsterSearch.value = '';
|
|
filterMonsters();
|
|
}
|
|
|
|
/**
|
|
* Afficher les résultats de recherche de monstre
|
|
*
|
|
* @param {string} searchTerm Terme de recherche
|
|
*/
|
|
function showMonsterSearchResults(searchTerm = '') {
|
|
// Afficher le conteneur des résultats
|
|
monsterSearchResults.classList.remove('d-none');
|
|
|
|
// Filtrer les monstres
|
|
const filteredMonsters = monsters.filter(monster => {
|
|
if (searchTerm === '') return true;
|
|
return monster.name.toLowerCase().includes(searchTerm.toLowerCase());
|
|
});
|
|
|
|
// Générer le HTML
|
|
if (filteredMonsters.length === 0) {
|
|
monsterSearchResults.innerHTML = '<div class="monster-search-no-results">Aucun monstre trouvé</div>';
|
|
} else {
|
|
let html = '';
|
|
filteredMonsters.forEach(monster => {
|
|
html += `<div class="monster-search-item" data-id="${monster.id}">${monster.name}</div>`;
|
|
});
|
|
monsterSearchResults.innerHTML = html;
|
|
|
|
// Ajouter les écouteurs pour la sélection
|
|
monsterSearchResults.querySelectorAll('.monster-search-item').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
const monsterId = parseInt(this.dataset.id);
|
|
const monsterName = this.textContent;
|
|
|
|
// Mettre à jour les champs
|
|
monsterSearchSelect.value = monsterName;
|
|
selectedMonsterId.value = monsterId;
|
|
|
|
// Masquer les résultats
|
|
monsterSearchResults.classList.add('d-none');
|
|
|
|
// Réinitialiser la validation
|
|
monsterSearchSelect.classList.remove('is-invalid');
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initialiser les formulaires
|
|
*/
|
|
function initForms() {
|
|
// Formulaire d'ajout de quête
|
|
const addQuestForm = document.getElementById('addQuestForm');
|
|
if (addQuestForm) {
|
|
addQuestForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Vérifier que le monstre est sélectionné
|
|
if (!selectedMonsterId.value) {
|
|
monsterSearchSelect.classList.add('is-invalid');
|
|
return;
|
|
}
|
|
|
|
// Récupérer les données du formulaire
|
|
const formData = new FormData(this);
|
|
|
|
// Envoyer les données
|
|
fetch('api.php?action=addQuest', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Masquer la modale
|
|
bootstrap.Modal.getInstance(document.getElementById('addQuestModal')).hide();
|
|
|
|
// Recharger la page pour mettre à jour le nombre de quêtes
|
|
window.location.reload();
|
|
} else {
|
|
alert('Erreur lors de l\'ajout de la quête: ' + (data.message || 'Erreur inconnue'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Erreur:', error);
|
|
alert('Erreur de connexion. Veuillez réessayer.');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Formulaire de suppression de quête
|
|
const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
|
|
if (confirmDeleteBtn) {
|
|
confirmDeleteBtn.addEventListener('click', function() {
|
|
const formData = new FormData(document.getElementById('deleteQuestForm'));
|
|
|
|
fetch('api.php?action=deleteQuest', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Masquer la modale de confirmation
|
|
bootstrap.Modal.getInstance(document.getElementById('deleteQuestModal')).hide();
|
|
|
|
// Mettre à jour la liste des quêtes
|
|
const crownType = document.querySelector('input[name="crownFilter"]:checked').value;
|
|
fetchQuests(currentMonsterId, crownType);
|
|
} else {
|
|
alert('Erreur lors de la suppression de la quête: ' + (data.message || 'Erreur inconnue'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Erreur:', error);
|
|
alert('Erreur de connexion. Veuillez réessayer.');
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}); |