hide planning hebdo
This commit is contained in:
@@ -110,6 +110,7 @@ require __DIR__ . '/header.php';
|
||||
<div id="fc-month-calendar" class="fc-month-calendar"></div>
|
||||
<div id="fc-month-selectionMenu" class="fc-selection-menu" style="display:none;"></div>
|
||||
</div>
|
||||
<div id="fc-month-balances" class="fc-month-balances"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 += `<div class="fc-balance-person">
|
||||
<div class="fc-balance-name ${person.prefix}">${person.prefix}</div>
|
||||
<div class="fc-balance-grid">`;
|
||||
|
||||
["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 += `<div class="fc-balance-col">
|
||||
<span class="fc-balance-type">${type}</span>
|
||||
<div class="fc-balance-numbers">
|
||||
<div class="fc-bal-val start"><span title="Début de mois">▶</span><span>${fmt(start)}</span></div>
|
||||
<div class="fc-bal-val used"><span title="Posé ce mois">➖</span><span>${fmt(used)}</span></div>
|
||||
<div class="fc-bal-val end"><span title="Solde fin de mois">⏸</span><span>${fmt(end)}</span></div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
html += ` </div></div>`;
|
||||
});
|
||||
|
||||
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 = `<table class="fc-month-table"><thead><tr>`;
|
||||
["L", "M", "M", "J", "V"].forEach((d) => (html += `<th>${d}</th>`));
|
||||
|
||||
Reference in New Issue
Block a user