fix modale
This commit is contained in:
@@ -701,6 +701,9 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
|
||||
padding: 15px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
background: #fffbeb;
|
||||
flex-shrink: 0;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* --- RESPONSIVE DETAIL PAGE --- */
|
||||
|
||||
@@ -40,14 +40,37 @@ function closeHolidayModal() {
|
||||
document.getElementById("holidayModal").style.display = "none";
|
||||
}
|
||||
|
||||
// Fonction appelée au clic sur le bouton ✏️ de la carte (injectée par PHP)
|
||||
function editHoliday(data) {
|
||||
console.log("1. 🛠️ editHoliday déclenchée avec :", data);
|
||||
|
||||
const h = data.main;
|
||||
const modal = document.getElementById("holidayModal");
|
||||
|
||||
// On ouvre la modale en mode édition (ça reset les listes)
|
||||
if (!modal) {
|
||||
alert(
|
||||
"Erreur : La modale 'holidayModal' est introuvable dans le code HTML.",
|
||||
);
|
||||
return;
|
||||
}
|
||||
console.log("2. ✅ Modale trouvée dans le DOM.");
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
if (typeof openHolidayModal === "function") {
|
||||
openHolidayModal("edit");
|
||||
console.log("3. 🔄 openHolidayModal (ancienne fonction) exécutée.");
|
||||
}
|
||||
|
||||
// Remplissage des champs principaux
|
||||
// On force l'affichage de manière agressive
|
||||
modal.classList.add("open");
|
||||
modal.style.setProperty("display", "flex", "important");
|
||||
modal.style.setProperty("z-index", "999999", "important");
|
||||
document.body.classList.add("no-scroll");
|
||||
|
||||
console.log("4. 👁️ Affichage forcé appliqué.");
|
||||
|
||||
// Remplissage des champs (avec un try/catch pour capter la moindre erreur silencieuse)
|
||||
try {
|
||||
document.getElementById("inp_id").value = h.id;
|
||||
document.getElementById("inp_title").value = h.title;
|
||||
document.getElementById("inp_status").value = h.status;
|
||||
@@ -55,19 +78,37 @@ function editHoliday(data) {
|
||||
document.getElementById("inp_start").value = h.start_date || "";
|
||||
document.getElementById("inp_end").value = h.end_date || "";
|
||||
|
||||
// Pour éviter d'afficher "0" dans un champ vide, on vérifie si la valeur est > 0
|
||||
document.getElementById("inp_food").value =
|
||||
h.budget_food > 0 ? h.budget_food : "";
|
||||
document.getElementById("inp_extra").value =
|
||||
h.budget_extra > 0 ? h.budget_extra : "";
|
||||
document.getElementById("inp_notes").value = h.notes || "";
|
||||
console.log("5. ✍️ Champs textes remplis avec succès.");
|
||||
} catch (err) {
|
||||
console.error("❌ Erreur lors du remplissage des champs textes :", err);
|
||||
}
|
||||
|
||||
// Remplissage des listes d'items généraux
|
||||
try {
|
||||
document.getElementById("list_transport").innerHTML = "";
|
||||
document.getElementById("list_accommodation").innerHTML = "";
|
||||
document.getElementById("list_activity").innerHTML = "";
|
||||
|
||||
// Remplissage des listes dynamiques (Transport, Hébergement, Activité)
|
||||
if (data.items && data.items.length > 0) {
|
||||
data.items.forEach((item) => {
|
||||
// On évite d'afficher le point technique invisible dans la liste des dépenses
|
||||
if (
|
||||
typeof addItem === "function" &&
|
||||
item.name !== "PF_TECHNICAL_POINT"
|
||||
) {
|
||||
addItem(item.category, item.name, item.amount, item.is_paid);
|
||||
}
|
||||
});
|
||||
}
|
||||
console.log("6. 📋 Listes dynamiques remplies. Fin de la fonction ! 🎉");
|
||||
} catch (err) {
|
||||
console.error("❌ Erreur lors du remplissage des listes dynamiques :", err);
|
||||
}
|
||||
}
|
||||
|
||||
// --- 2. GESTION DES LISTES DYNAMIQUES DANS LA MODALE ---
|
||||
|
||||
@@ -72,15 +72,26 @@ $pctSaved = $cost > 0 ? min(100 - $pctPaid, ($saved / $cost) * 100) : 0;
|
||||
|
||||
<div class="pf-holidays-detail">
|
||||
|
||||
<div class="hol-detail-header">
|
||||
<div class="hol-detail-title-group">
|
||||
<a href="?tab=list" class="pf-btn btn-secondary">◀ Retour</a>
|
||||
<h1><?= htmlspecialchars($holiday['title']) ?></h1>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; flex-wrap: wrap; gap: 15px;">
|
||||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||||
<a href="?tab=list" class="pf-btn btn-secondary pf-btn-small" style="width: fit-content; text-decoration: none;">◀ Retour</a>
|
||||
<div style="display: flex; align-items: center; gap: 15px;">
|
||||
<h1 style="margin: 0; font-size: 1.8rem;"><?= htmlspecialchars($holiday['title']) ?></h1>
|
||||
<span class="hol-badge-status"><?= strtoupper($holiday['status']) ?></span>
|
||||
</div>
|
||||
<button onclick="editHoliday(<?= htmlspecialchars(json_encode(['main' => $holiday, 'items' => $generalItems]), ENT_QUOTES, 'UTF-8') ?>)" class="pf-btn btn-secondary pf-btn-small" style="width: auto; margin: 0;">⚙️ Modifier les bases</button> </div>
|
||||
</div>
|
||||
|
||||
<div class="hol-summary-card">
|
||||
<div>
|
||||
<script id="holidayDataJson" type="application/json">
|
||||
<?= json_encode(['main' => $holiday, 'items' => $generalItems], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>
|
||||
</script>
|
||||
<button type="button" class="pf-btn btn-secondary pf-btn-small" onclick="editHoliday(JSON.parse(document.getElementById('holidayDataJson').textContent))">
|
||||
⚙️ Modifier les bases
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hol-summary-card" style="width: 100%; display: block; clear: both;">
|
||||
<div class="hol-summary-grid">
|
||||
<div class="hol-summary-item">
|
||||
<div class="hol-summary-label">Période</div>
|
||||
@@ -170,38 +181,31 @@ $pctSaved = $cost > 0 ? min(100 - $pctPaid, ($saved / $cost) * 100) : 0;
|
||||
<span class="<?= $it['is_paid'] ? 'status-paid' : 'status-pending' ?>" title="<?= $it['is_paid'] ? 'Payé' : 'À payer' ?>"><?= $it['is_paid'] ? '✓' : '⏳' ?></span>
|
||||
</span>
|
||||
</div>
|
||||
<?php if (!empty($it['notes'])): ?>
|
||||
<div class="hol-expense-note">
|
||||
<?php if (filter_var($it['notes'], FILTER_VALIDATE_URL)): ?>
|
||||
🔗 <a href="<?= htmlspecialchars($it['notes']) ?>" target="_blank" class="hol-expense-link">Voir le lien</a>
|
||||
<?php else: ?>
|
||||
📝 <?= htmlspecialchars($it['notes']) ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
<?php if ($visibleItemsCount === 0): ?>
|
||||
<div class="hol-empty-step">
|
||||
📍 Point de passage (Aucune dépense)
|
||||
</div>
|
||||
<div class="hol-empty-step">📍 Point de passage (Aucune dépense)</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if (!empty($holiday['notes'])): ?>
|
||||
<div class="hol-notes-panel">
|
||||
<h4 style="margin:0 0 5px 0; font-size:0.85rem; color:#d97706;">Notes du voyage :</h4>
|
||||
<p style="margin:0; font-size:0.85rem; color:#92400e; white-space:pre-wrap;"><?= htmlspecialchars($holiday['notes']) ?></p>
|
||||
</div>
|
||||
</div> <?php if (!empty($holiday['notes'])): ?>
|
||||
<div class="hol-summary-card" style="margin-top: 24px; padding: 25px; border-left: 5px solid #f59e0b;">
|
||||
<h3 style="margin: 0 0 15px 0; font-size: 1.2rem; color: #0f172a; display: flex; align-items: center; gap: 8px;">
|
||||
📝 Notes du voyage
|
||||
</h3>
|
||||
<div style="font-size: 0.95rem; color: #334155; white-space: pre-wrap; line-height: 1.6; font-family: 'Segoe UI', system-ui, sans-serif;">
|
||||
<?= htmlspecialchars($holiday['notes']) ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="checkpointModal" class="pf-modal">
|
||||
<div class="pf-modal-content" style="max-width: 600px;">
|
||||
|
||||
Reference in New Issue
Block a user