diff --git a/family-calendar.php b/family-calendar.php index 0db538b..ff9d6d0 100644 --- a/family-calendar.php +++ b/family-calendar.php @@ -110,6 +110,7 @@ require __DIR__ . '/header.php';
+
diff --git a/modules/family-calendar/family-calendar.css b/modules/family-calendar/family-calendar.css index 4c56c36..dee1721 100644 --- a/modules/family-calendar/family-calendar.css +++ b/modules/family-calendar/family-calendar.css @@ -1060,3 +1060,135 @@ td.col-day { right: 1px !important; } } + +/* ========================================================= + 10. DÉCOMPTE DES CONGÉS (VUE MENSUELLE) + ========================================================= */ +.fc-month-balances { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 15px; + margin-top: 15px; + padding-top: 15px; + border-top: 1px dashed var(--border-color); +} +.fc-balance-person { + background: white; + border-radius: 8px; + padding: 10px; + border: 1px solid var(--border-color); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} +.fc-balance-name { + font-weight: 800; + font-size: 0.85rem; + margin-bottom: 8px; + text-align: center; + text-transform: uppercase; +} +.fc-balance-name.alex { + color: var(--text-alex); +} +.fc-balance-name.laia { + color: var(--text-laia); +} + +.fc-balance-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; + text-align: center; +} +.fc-balance-col { + display: flex; + flex-direction: column; + background: #f8fafc; + border-radius: 6px; + padding: 6px 4px; + border: 1px solid #e2e8f0; +} +.fc-balance-type { + font-size: 0.7rem; + font-weight: 800; + color: var(--text-muted); + margin-bottom: 4px; +} +.fc-balance-numbers { + font-size: 0.75rem; + font-family: monospace; + display: flex; + flex-direction: column; + gap: 2px; +} +.fc-bal-val { + display: flex; + justify-content: space-between; + align-items: center; +} +.fc-bal-val.start { + color: #64748b; +} +.fc-bal-val.used { + color: #ef4444; +} +.fc-bal-val.end { + color: #10b981; + font-weight: bold; + border-top: 1px solid #cbd5e1; + margin-top: 3px; + padding-top: 3px; +} + +/* ========================================================= + 11. REFONTE MOBILE EXTRÊME (max-width: 768px) + ========================================================= */ +@media (max-width: 768px) { + /* 1. On DÉTRUIT visuellement le planning hebdo sur mobile ! */ + .fc-week-header, + #planningTable-wrapper { + display: none !important; + } + + /* 2. On compresse le calendrier mensuel pour qu'il rentre dans l'écran */ + .fc-month-table td { + height: 48px !important; /* Hauteur très réduite */ + padding: 2px !important; + font-size: 0.75rem; + } + .fc-month-table th { + padding: 4px !important; + font-size: 0.7rem; + } + + /* On miniaturise les pastilles d'événements */ + .fc-day--centre::after { + font-size: 8px !important; + top: 1px; + right: 1px; + } + .fc-day--avis::after { + width: 8px !important; + height: 8px !important; + top: 1px; + right: 1px; + } + .fc-pep-sick-emoji { + font-size: 8px !important; + bottom: 1px; + right: 1px; + } + + /* On réduit la marge de la box du mois */ + .fc-month-calendar-wrapper { + padding: 15px !important; + margin-bottom: 15px !important; + } + + /* 3. Les soldes s'empilent sur mobile */ + .fc-month-balances { + grid-template-columns: 1fr; + gap: 10px; + padding-top: 10px; + margin-top: 10px; + } +} diff --git a/modules/family-calendar/family-calendar.js b/modules/family-calendar/family-calendar.js index 8ccdba9..78f3d14 100644 --- a/modules/family-calendar/family-calendar.js +++ b/modules/family-calendar/family-calendar.js @@ -690,7 +690,7 @@ document.addEventListener("DOMContentLoaded", () => { const y = this.currentMonth.getFullYear(); const m = this.currentMonth.getMonth(); - const lang = window.I18N_LANG || "fr-FR"; // Assure-toi d'avoir cette variable ou utilise une déduction + const lang = window.I18N_LANG || "fr-FR"; const titleEl = document.querySelector("#fc-current-month-year"); if (titleEl) { if (this.viewMode === "year") { @@ -715,13 +715,15 @@ document.addEventListener("DOMContentLoaded", () => { if (this.viewMode === "year") { this.renderYearView(); - return; - } - if (this.viewMode === "2months") { + } else if (this.viewMode === "2months") { this.renderTwoMonthsView(); - return; + } else { + this.monthCalendar.innerHTML = this.generateMonthHTML(y, m); } - this.monthCalendar.innerHTML = this.generateMonthHTML(y, m); + + this.renderMonthBalances(); + + this.syncSummaryWithMonth(); } renderTwoMonthsView() { @@ -746,6 +748,73 @@ document.addEventListener("DOMContentLoaded", () => { this.monthCalendar.innerHTML = html; } + // Affiche le décompte des congés (Début, Utilisé, Reste) sous le calendrier + renderMonthBalances() { + const container = document.getElementById("fc-month-balances"); + if (!container) return; + + // On n'affiche les soldes que si on regarde 1 seul mois pour éviter la confusion + if (this.viewMode !== "1month") { + container.innerHTML = ""; + container.style.display = "none"; + return; + } + + container.style.display = "grid"; + const ym = `${this.currentMonth.getFullYear()}-${String(this.currentMonth.getMonth() + 1).padStart(2, "0")}`; + let html = ""; + + [FAMILY.ALEX, FAMILY.LAIA].forEach((person) => { + html += `
+
${person.prefix}
+
`; + + ["CP", "JRA", "JA"].forEach((type) => { + // Utilisation des données pré-calculées par calculateMonthlyBalances() + const info = this.monthlyLeaveBalances[person.id]?.[type]?.[ym]; + const start = info ? info.availableAtMonthStart : 0; + const used = info ? info.usedInMonth : 0; + const end = Math.max(0, start - used); + + const fmt = (n) => + n > 0 ? (Number.isInteger(n) ? n : n.toFixed(1)) : "0"; + + html += `
+ ${type} +
+
▶${fmt(start)}
+
➖${fmt(used)}
+
⏸${fmt(end)}
+
+
`; + }); + + html += `
`; + }); + + container.innerHTML = html; + } + + // Force le menu déroulant du récapitulatif à se caler sur le mois affiché + syncSummaryWithMonth() { + const typeSelect = document.getElementById("summType"); + const valueSelect = document.getElementById("summValue"); + + if (typeSelect && valueSelect && this.viewMode === "1month") { + const ym = `${this.currentMonth.getFullYear()}-${String(this.currentMonth.getMonth() + 1).padStart(2, "0")}`; + + // Si on passe d'année à mois, on doit forcer le peuplement du select + if (typeSelect.value !== "month") { + typeSelect.value = "month"; + typeSelect.dispatchEvent(new Event("change")); // Déclenche populateValues() + } + + // On sélectionne le mois actuel + valueSelect.value = ym; + this.updateGlobalSummary(); + } + } + generateMonthHTML(year, month) { let html = ``; ["L", "M", "M", "J", "V"].forEach((d) => (html += ``));
${d}