perco/HouseHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

calendar

Browse Source
This commit is contained in:
FeFeClochette
2026-01-31 15:57:25 +01:00
parent 170f98d8b8
commit f5822f2694
4 changed files with 963 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files
family-calendar.php
+136 -153
View File
@@ -1,17 +1,13 @@
<?php
// modules/family-calendar/family-calendar.php
// Active l'affichage des erreurs pour le développement (à retirer en prod si nécessaire)
ini_set('display_errors', 1);
error_reporting(E_ALL);
require __DIR__ . '/includes/auth.php';
require_login();
require __DIR__ . '/includes/db.php';
// --- On récupère TOUS les événements sauvegardés en base ---
// Note: Si la base grossit trop, il faudra filtrer par année ici.
// Récupération des événements
$stmt_events = $pdo->query("SELECT * FROM pf_events");
$dbEvents = $stmt_events->fetchAll(PDO::FETCH_ASSOC);
@@ -24,169 +20,156 @@ require __DIR__ . '/header.php';
?>
<script>
/* JSON_NUMERIC_CHECK convertit les strings "1" en entiers 1, utile pour les calculs JS */
const serverData = <?php echo json_encode($dbEvents, JSON_NUMERIC_CHECK); ?>;
</script>
<div class="pf-d-flex pf-align-center pf-justify-between pf-mb-4">
<h1>Family Calendar</h1>
<div class="pf-container" style="max-width:100%; padding:0;">
<div class="fc-header-row">
<h1>Family Calendar</h1>
<button id="btnOpenHolidays" class="pf-btn-icon-text">
<span class="icon">🏖️</span>
<span class="text">Voir les vacances scolaires</span>
</button>
</div>
<section class="pf-section pf-section--panel">
<div class="pf-flex pf-flex--wrap pf-gap-lg">
<div id="modalHolidays" class="fc-modal-overlay" style="display: none;">
<div class="fc-modal-content">
<div class="fc-modal-header">
<h2>Vacances Scolaires (Zone C)</h2>
<button id="btnCloseHolidays" class="fc-modal-close">×</button>
</div>
<div class="fc-modal-body">
<table id="schoolHolidaysTable" class="fc-holidays-table">
<thead>
<tr>
<th>Période</th>
<th>Du</th>
<th>Au</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="pf-card pf-card--small">
<h2 class="pf-card-title">Légende</h2>
<div class="pf-card-body">
<div class="pf-legend-grid">
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-school-holiday"></div><span>Vacances</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-public-holiday"></div><span>Férié</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-off-carole"></div><span>Off Carole</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-extra-off-carole"></div><span>Extra Off</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-centre"></div><span>Centre</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-avis"></div><span>Avis</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-pep-sick"></div><span>Pep Malade</span></div>
<section class="pf-section">
<div class="fc-month-calendar-wrapper">
<div class="fc-month-header">
<div class="fc-view-controls">
<button class="fc-view-button fc-view-button--active" data-view="1month">1 mois</button>
<button class="fc-view-button" data-view="2months">2 mois</button>
<button class="fc-view-button" data-view="year">Année</button>
</div>
<h3 id="fc-current-month-year"></h3>
<div class="fc-nav-controls">
<button id="fc-prev-month" class="fc-nav-button">‹</button>
<button id="fc-next-month" class="fc-nav-button">›</button>
</div>
</div>
<div class="fc-calendar-container">
<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>
</div>
</section>
<div class="pf-card pf-card--small">
<h2 class="pf-card-title">Récapitulatif annuel</h2>
<div class="pf-card-body" id="globalSummary">
<span class="pf-loading-text">Chargement...</span>
</div>
</div>
<div class="pf-card pf-card--small pf-card--wide">
<h2 class="pf-card-title">Vacances scolaires - Zone C</h2>
<div class="pf-card-body">
<div class="pf-table-wrapper pf-table-wrapper--max-height">
<table id="schoolHolidaysTable" class="fc-holidays-table pf-table pf-table--compact">
<thead>
<tr>
<th>Période</th>
<th>Du</th>
<th>Au</th>
<th>Zones</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<section class="pf-section">
<div class="fc-week-header">
<h2>Planning hebdo</h2>
<div class="fc-week-nav-controls">
<button id="fc-prev-school-year" class="fc-nav-button">‹</button>
<span id="fc-current-school-year-label"></span>
<button id="fc-next-school-year" class="fc-nav-button">›</button>
</div>
</div>
</div>
</div>
</section>
<section class="pf-section">
<h2>Calendrier mensuel</h2>
<div class="fc-month-calendar-wrapper">
<div class="fc-month-header">
<div class="fc-view-controls">
<button id="fc-view-1month" class="fc-view-button fc-view-button--active" data-view="1month">1 mois</button>
<button id="fc-view-2months" class="fc-view-button" data-view="2months">2 mois</button>
<button id="fc-view-year" class="fc-view-button" data-view="year">Année</button>
<div id="planningTable-wrapper">
<table id="planningTable">
<colgroup>
<col class="col-month"><col class="col-month">
<col class="col-day"><col class="col-day"><col class="col-day"><col class="col-day"><col class="col-day">
<col class="col-total"><col class="col-total"><col class="col-total"><col class="col-total"><col class="col-total"><col class="col-total">
<col class="col-alex-sub"><col class="col-alex-sub"><col class="col-alex-sub"><col class="col-alex-sub"><col class="col-alex-sub"><col class="col-alex-sub">
<col class="col-laia-sub"><col class="col-laia-sub"><col class="col-laia-sub"><col class="col-laia-sub"><col class="col-laia-sub"><col class="col-laia-sub">
</colgroup>
<thead>
<tr>
<th rowspan="3" class="col-month">Mois</th>
<th rowspan="3" class="col-month">Sem.</th>
<th rowspan="3" class="col-day">Lun</th>
<th rowspan="3" class="col-day">Mar</th>
<th rowspan="3" class="col-day">Mer</th>
<th rowspan="3" class="col-day">Jeu</th>
<th rowspan="3" class="col-day">Ven</th>
<th rowspan="3" class="col-total rotated-text"><span>Off Carole</span></th>
<th rowspan="3" class="col-total rotated-text"><span>Extra Off</span></th>
<th rowspan="3" class="col-total rotated-text"><span>Centre</span></th>
<th rowspan="3" class="col-total rotated-text"><span>Avis</span></th>
<th rowspan="3" class="col-total rotated-text"><span>Pep Malade</span></th>
<th rowspan="3" class="col-total rotated-text"><span>Présence</span></th>
<th colspan="6" class="col-alex header-group">ALEX</th>
<th colspan="6" class="col-laia header-group">LAIA</th>
</tr>
<tr>
<th colspan="2" class="col-alex-sub">CP</th><th colspan="2" class="col-alex-sub">JRA</th><th colspan="2" class="col-alex-sub">JA</th>
<th colspan="2" class="col-laia-sub">CP</th><th colspan="2" class="col-laia-sub">JRA</th><th colspan="2" class="col-laia-sub">JA</th>
</tr>
<tr>
<th class="col-alex-sub col-alex-av">Av.</th><th class="col-alex-sub col-alex-use">Use</th>
<th class="col-alex-sub col-alex-av">Av.</th><th class="col-alex-sub col-alex-use">Use</th>
<th class="col-alex-sub col-alex-av">Av.</th><th class="col-alex-sub col-alex-use">Use</th>
<th class="col-laia-sub col-laia-av">Av.</th><th class="col-laia-sub col-laia-use">Use</th>
<th class="col-laia-sub col-laia-av">Av.</th><th class="col-laia-sub col-laia-use">Use</th>
<th class="col-laia-sub col-laia-av">Av.</th><th class="col-laia-sub col-laia-use">Use</th>
</tr>
</thead>
<tbody id="planningBody"></tbody>
</table>
<div id="selectionMenu" class="fc-selection-menu" style="display:none;"></div>
</div>
<div class="fc-nav-controls">
<button id="fc-prev-month" class="fc-nav-button">‹</button>
<h3 id="fc-current-month-year"></h3>
<button id="fc-next-month" class="fc-nav-button">›</button>
</div>
</div>
</section>
<section class="pf-section pf-section--bottom-panels">
<div class="fc-bottom-grid">
<div class="pf-card">
<h2 class="pf-card-title">Légende</h2>
<div class="pf-card-body">
<div class="pf-legend-grid">
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-school-holiday"></div><span>Vacances</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-public-holiday"></div><span>Férié</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-off-carole"></div><span>Off Carole</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-extra-off-carole"></div><span>Extra Off</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-centre"></div><span>Centre</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-avis"></div><span>Avis</span></div>
<div class="pf-legend-item"><div class="pf-legend-color fc-legend-pep-sick"></div><span>Pep Malade</span></div>
</div>
</div>
</div>
<div class="pf-card">
<div class="pf-card-title fc-summary-header">
<span>Récapitulatif</span>
<div class="fc-summary-controls">
<select id="summType" class="fc-summ-select"> <option value="year">Année</option>
<option value="month">Mois</option>
</select>
<select id="summValue" class="fc-summ-select"> </select>
</div>
</div>
<div class="pf-card-body">
<div id="globalSummary" class="fc-summary-vertical">
</div>
</div>
</div>
<div class="fc-calendar-container">
<div id="fc-month-calendar" class="fc-month-calendar">
</div>
<div id="fc-month-selectionMenu" class="fc-selection-menu" hidden></div>
</div>
</div>
</section>
<section class="pf-section">
<div class="fc-week-header">
<h2>Planning hebdo</h2>
<div class="fc-week-nav-controls">
<button id="fc-prev-school-year" class="fc-nav-button">‹</button>
<span id="fc-current-school-year-label"></span>
<button id="fc-next-school-year" class="fc-nav-button">›</button>
</div>
</div>
<div class="pf-table-wrapper" id="planningTable-wrapper">
<table id="planningTable" class="pf-table pf-table--compact pf-table--sticky-head pf-table--bordered">
<colgroup>
<col class="col-month"> <col class="col-month"> <col class="col-day"> <col class="col-day"> <col class="col-day"> <col class="col-day"> <col class="col-day"> <col class="col-total"> <col class="col-total"> <col class="col-total"> <col class="col-total"> <col class="col-total"> <col class="col-total"> <col class="col-alex-sub">
<col class="col-alex-sub">
<col class="col-alex-sub">
<col class="col-alex-sub">
<col class="col-alex-sub">
<col class="col-alex-sub">
<col class="col-laia-sub">
<col class="col-laia-sub">
<col class="col-laia-sub">
<col class="col-laia-sub">
<col class="col-laia-sub">
<col class="col-laia-sub">
</colgroup>
<thead>
<tr>
<th rowspan="3" class="col-month">Mois</th>
<th rowspan="3" class="col-month">Sem.</th>
<th rowspan="3" class="col-day">Lun</th>
<th rowspan="3" class="col-day">Mar</th>
<th rowspan="3" class="col-day">Mer</th>
<th rowspan="3" class="col-day">Jeu</th>
<th rowspan="3" class="col-day">Ven</th>
<th rowspan="3" class="col-total rotated-text"><span>Off Carole</span></th>
<th rowspan="3" class="col-total rotated-text"><span>Extra Off</span></th>
<th rowspan="3" class="col-total rotated-text"><span>Centre</span></th>
<th rowspan="3" class="col-total rotated-text"><span>Avis</span></th>
<th rowspan="3" class="col-total rotated-text"><span>Pep Malade</span></th>
<th rowspan="3" class="col-total rotated-text"><span>Présence</span></th>
<th colspan="6" class="col-alex header-group">ALEX</th>
<th colspan="6" class="col-laia header-group">LAIA</th>
</tr>
<tr>
<th colspan="2" class="col-alex-sub">CP</th>
<th colspan="2" class="col-alex-sub">JRA</th>
<th colspan="2" class="col-alex-sub">JA</th>
<th colspan="2" class="col-laia-sub">CP</th>
<th colspan="2" class="col-laia-sub">JRA</th>
<th colspan="2" class="col-laia-sub">JA</th>
</tr>
<tr>
<th class="col-alex-sub col-alex-av">Av.</th>
<th class="col-alex-sub col-alex-use">Use</th>
<th class="col-alex-sub col-alex-av">Av.</th>
<th class="col-alex-sub col-alex-use">Use</th>
<th class="col-alex-sub col-alex-av">Av.</th>
<th class="col-alex-sub col-alex-use">Use</th>
<th class="col-laia-sub col-laia-av">Av.</th>
<th class="col-laia-sub col-laia-use">Use</th>
<th class="col-laia-sub col-laia-av">Av.</th>
<th class="col-laia-sub col-laia-use">Use</th>
<th class="col-laia-sub col-laia-av">Av.</th>
<th class="col-laia-sub col-laia-use">Use</th>
</tr>
</thead>
<tbody id="planningBody">
</tbody>
</table>
<div id="selectionMenu" class="fc-selection-menu" hidden></div>
</div>
</section>
</section>
</div>
<script src="/modules/family-calendar/family-calendar.js"></script>
<?php require __DIR__ . '/footer.php'; ?>
modules/family-calendar/assets/img/avis.svg
+125
View File
@@ -0,0 +1,125 @@
<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#C60C30;}
.st2{fill:#003478;}
.st3{fill:#FF9933;}
.st4{fill:#128807;}
.st5{fill:#000088;}
.st6{fill:#032774;}
.st7{fill:#DF0333;}
.st8{fill:#EE2B2C;}
.st9{fill:#032767;}
.st10{fill:#006747;}
.st11{fill:#CD1225;}
.st12{fill:#FBC942;}
.st13{fill:#BD9B37;}
.st14{fill:#9BA068;}
.st15{fill:#707633;}
.st16{fill:#006748;}
.st17{fill:#CC2029;}
.st18{fill:#30C1DB;}
.st19{fill:#F7C740;}
.st20{fill:#0C72A6;}
.st21{fill:#F8A952;}
.st22{fill:#943120;}
.st23{fill:#231F20;}
.st24{fill:#0B8388;}
.st25{fill:#8BBDBE;}
.st26{fill:#05534E;}
.st27{fill:none;stroke:#39B54A;stroke-width:0.25;stroke-miterlimit:10;}
.st28{fill:none;stroke:#00A651;stroke-miterlimit:10;}
.st29{fill:none;stroke:#00A651;stroke-width:0.5;stroke-miterlimit:10;}
.st30{fill:url(#SVGID_1_);}
.st31{fill:url(#SVGID_2_);}
.st32{fill:url(#SVGID_3_);}
.st33{fill:url(#SVGID_4_);}
.st34{fill:url(#SVGID_5_);}
.st35{fill:url(#SVGID_6_);}
.st36{fill:url(#SVGID_7_);}
.st37{fill:url(#SVGID_8_);}
.st38{fill:url(#SVGID_9_);}
.st39{fill:url(#SVGID_10_);}
.st40{fill:url(#SVGID_11_);}
.st41{fill:url(#SVGID_12_);}
.st42{fill:url(#SVGID_13_);}
.st43{fill:url(#SVGID_14_);}
.st44{fill:url(#SVGID_15_);}
.st45{fill:#F8C73E;}
.st46{fill:#77722F;}
.st47{fill:#A7AB71;}
.st48{fill:#949457;}
.st49{fill:#AE6F2A;}
.st50{fill:#FFF200;}
.st51{fill:#C5C6A6;}
.st52{fill:#A3A395;}
.st53{fill:#4C2915;}
.st54{fill:#8E4520;}
.st55{fill:#D1A467;}
.st56{fill:#AA6C2A;}
.st57{fill:#DAAC6D;}
.st58{fill:#8F4620;}
.st59{fill:#BC7E2F;}
.st60{fill:#E6E7E8;}
.st61{fill:#F06D19;}
.st62{fill:#19B43D;}
.st63{fill:#07A3DC;}
.st64{fill:#FBD023;}
.st65{fill:#EC2938;}
.st66{fill:#F9DF47;}
.st67{fill:#0967C4;}
.st68{fill:#C5A310;}
.st69{clip-path:url(#SVGID_17_);}
.st70{fill:#6FD7F2;}
.st71{clip-path:url(#SVGID_19_);}
.st72{fill:#FF0303;}
.st73{fill:#FF6407;}
.st74{fill:#FDFE1F;}
.st75{fill:#00FE1E;}
.st76{fill:#08CCFE;}
.st77{fill:#120FFD;}
.st78{fill:#810480;}
.st79{fill:#0642A1;}
.st80{fill:#02275F;}
.st81{fill:#80A0D1;}
.st82{fill:#FB3B3A;}
.st83{fill:#FF0302;}
.st84{fill:#520200;}
.st85{fill:#940101;}
.st86{clip-path:url(#SVGID_21_);}
.st87{fill:#91BB35;}
.st88{fill:#ECE62B;}
.st89{fill:#C5CA2C;}
.st90{fill:#95C82B;}
.st91{fill:#009D4A;}
.st92{fill:#BF0A30;}
.st93{fill:#002868;}
.st94{fill:#028832;}
.st95{fill:#FBDC1D;}
.st96{fill:#D91219;}
.st97{fill:#0738A6;}
.st98{fill:#FD0302;}
.st99{fill:#060593;}
.st100{fill:#115EAD;}
.st101{fill:#C50C1E;}
.st102{fill:#FEC315;}
.st103{fill:#C7B011;}
.st104{fill:#AC1518;}
.st105{fill:#028E6E;}
.st106{fill:#CBCBCB;}
.st107{fill:#095BBD;}
.st108{fill:#C7B013;}
.st109{fill:#00AEEF;}
.st110{fill:#C7B112;}
.st111{fill:#FED592;}
.st112{fill:#028D6E;}
.st113{fill:#C7B012;}
.st114{fill:#C6B011;}
.st115{fill:#103BEE;}
.st116{fill:#DB4445;}
.st117{fill:#EC72A9;}
.st118{fill:#006133;}
.st119{fill:#D11133;}
.st120{fill:#042B7D;}
.st121{fill:#FEC527;}
.st122{fill:#BF920D;}
</style><g><path class="st96" d="M510.4,284.4c-0.3,2.6-0.7,5.2-1,7.8c-0.2,1-0.3,2.1-0.5,3.2c-0.5,3.2-1.1,6.4-1.7,9.7 c-0.1,0.5-0.2,1-0.3,1.5v0.1c-0.1,0.5-0.2,1-0.2,1c-2.5,11.9-5.6,22.9-9.4,33.7H14.6c-3.4-9.8-6.3-19.8-8.6-30.1 c-0.2-0.5-0.3-1-0.4-1.5c-0.1-0.5-0.2-1-0.3-1.4c-1.6-7.9-2.9-15.8-3.7-23.9H510.4z"/><path class="st95" d="M497.4,341.3c-5.3,14.9-11.9,29.1-19.7,42.6c-2.8,4.9-5.8,9.6-8.9,14.3H43.1c-3.1-4.7-6-9.4-8.8-14.3 c-7.8-13.4-14.4-27.8-19.7-42.6H497.4z"/><path class="st96" d="M468.8,398.2c-4.1,6.1-8.4,12.1-13,17.8c-11.5,14.4-24.5,27.5-38.8,39.1H95c-14.3-11.6-27.4-24.7-38.8-39.1 c-4.6-5.7-9-11.7-13.1-17.8H468.8z"/><path class="st95" d="M417,455.1C372.9,490.7,317,512,256,512c-61,0-117-21.3-161-56.9H417z"/><path class="st96" d="M468.8,113.8H43.2c4.1-6.1,8.4-12.1,13-17.8c11.6-14.4,24.7-27.6,39-39.1h321.7c14.4,11.6,27.4,24.7,39,39.1 C460.4,101.7,464.8,107.6,468.8,113.8z"/><path class="st95" d="M416.8,56.9H95.1C139.1,21.3,195,0,256,0C316.9,0,372.9,21.3,416.8,56.9z"/><path class="st95" d="M497.4,170.7H14.6c5.2-14.9,11.8-29.2,19.7-42.7c2.8-4.8,5.7-9.6,8.9-14.2h425.7c3.1,4.6,6.1,9.4,8.9,14.2 C485.5,141.5,492.1,155.7,497.4,170.7z"/><path class="st96" d="M510.4,227.6H1.6c0,0,0.1-0.3,0.1-0.5V227l0.1-0.6c2.2-19.3,6.6-37.9,12.9-55.7h482.8 c3.2,8.8,5.7,17.9,7.9,27.1c0.1,0.2,0.1,0.5,0.2,0.7c0,0,0.1,0.5,0.2,0.7c1.3,5.9,2.4,11.8,3.4,17.8c0,0,0,0.4,0.1,0.6 c0,0,0.1,0.4,0.1,0.6C509.6,221.3,510.1,224.4,510.4,227.6z"/><path class="st95" d="M512,256c0,1.3,0,2.5-0.1,3.8c0,0.3,0,0.6,0,0.8v0.9l-0.1,0.3c0,0,0,0.4,0,0.6c-0.2,7.4-0.7,14.8-1.4,22.1 H1.6c-0.2-1.6-0.3-3-0.5-4.5c-0.1-0.9-0.2-1.7-0.2-2.5l0,0c-0.5-4.9-0.7-10-0.9-15.1c0-0.2,0-0.4,0-0.4c0-0.4,0-0.6,0-0.6 C0,260,0,258.8,0,257.5c0,0,0-0.3,0-0.6V256c0-1.7,0-3.5,0.1-5.2c0-0.2,0-0.3,0-0.3c0-0.4,0-0.6,0-0.6c0.1-5.3,0.4-10.5,0.9-15.6 c0-0.2,0.1-0.5,0.1-0.5c0-0.5,0.1-0.7,0.1-0.9c0.2-1.7,0.3-3.4,0.5-5.1v-0.2h508.8c0.8,7.2,1.3,14.6,1.5,22.1c0,0,0.1,0.4,0,0.6 c0,0,0.1,0.4,0.1,0.6C511.9,252.5,512,254.3,512,256z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

modules/family-calendar/family-calendar.css
+382 -147
View File
@@ -24,147 +24,117 @@
--text-laia: #b45309; /* Ambre foncé */
}
/* Base */
.pf-family-calendar {
background-color: var(--bg-page);
font-family: "Inter", system-ui, sans-serif;
color: var(--text-main);
font-size: 13px;
line-height: 1.4;
}
/* --- 2. LÉGENDE --- */
.pf-legend-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
/* OVERRIDES STRUCTURAUX */
.pf-family-calendar .pf-container {
max-width: 100% !important;
padding: 0 20px;
}
.pf-legend-item {
.pf-family-calendar .pf-main {
padding-top: 20px;
padding-bottom: 40px;
}
/* Titres */
.pf-card-title {
padding: 12px 16px;
margin: 0;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: var(--bg-header);
border-bottom: 1px solid var(--border-color);
color: var(--text-muted);
}
.pf-card-body {
padding: 16px;
}
/* --- 2. HEADER PAGE & BOUTON VACANCES --- */
.fc-header-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
margin-bottom: 24px;
}
.pf-btn-icon-text {
background: white;
border: 1px solid var(--border-color);
border-radius: 20px; /* Pill */
padding: 8px 16px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-main);
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pf-legend-color {
width: 18px;
height: 18px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
.pf-btn-icon-text:hover {
border-color: var(--primary);
color: var(--primary);
background: #f0f9ff;
transform: translateY(-1px);
}
.fc-legend-school-holiday {
background: var(--c-school-holiday);
}
.fc-legend-public-holiday {
background: var(--c-public-holiday);
}
.fc-legend-off-carole {
background: var(--c-off-carole);
}
.fc-legend-extra-off-carole {
background: var(--c-extra-off);
}
.fc-legend-centre {
background-color: white;
}
.fc-legend-centre::before {
content: "🏫";
font-size: 14px;
}
.fc-legend-pep-sick {
background-color: white;
}
.fc-legend-pep-sick::before {
content: "🤒";
font-size: 14px;
}
.fc-legend-avis {
width: 24px;
height: 16px;
background: repeating-linear-gradient(
to bottom,
#fcd116,
#fcd116 2px,
#ce1126 2px,
#ce1126 4px
);
border: 1px solid #ce1126;
.pf-btn-icon-text .icon {
font-size: 1.2em;
}
/* --- 3. PLANNING HEBDO --- */
/* --- HEADER PLANNING HEBDO (Harmonisé avec Calendrier Mensuel) --- */
.fc-week-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px; /* Même marge que le calendrier mensuel */
padding-bottom: 0;
margin-bottom: 16px;
gap: 16px;
flex-wrap: wrap;
}
/* Le titre "Planning hebdo" */
.fc-week-header h2 {
margin: 0;
font-size: 1.25rem; /* Même taille que le titre du mois */
font-size: 1.25rem;
font-weight: 800;
color: var(--text-main);
text-transform: none; /* On garde la casse normale ou uppercase selon préférence */
border: none;
padding: 0;
}
/* Conteneur des flèches et de la date */
/* Contrôles Année Scolaire */
.fc-week-nav-controls {
display: flex;
align-items: center;
gap: 16px; /* Espace identique au header mensuel */
gap: 12px;
background: white;
padding: 4px 12px;
border-radius: 50px; /* Petit conteneur pilule optionnel pour lier le tout */
border: 1px solid transparent; /* ou var(--border-color) si tu veux un cadre */
border-radius: 50px;
}
/* LE TEXTE DE L'ANNÉE (Cible de ta demande) */
#fc-current-school-year-label {
font-size: 1.1rem;
font-size: 1rem;
font-weight: 800;
color: var(--text-main);
min-width: 120px;
text-align: center;
letter-spacing: -0.02em;
min-width: 120px; /* Empêche le saut quand les chiffres changent */
/* Pour l'alignement vertical parfait avec les boutons */
display: inline-block;
line-height: 1;
padding-top: 2px;
}
/* Ajustement spécifique pour les boutons de navigation dans ce header */
.fc-week-nav-controls .fc-nav-button {
/* On s'assure qu'ils ont bien la taille définie globalement */
width: 32px;
height: 32px;
font-size: 16px;
background: white; /* Fond blanc */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.fc-week-nav-controls .fc-nav-button:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}
#planningTable-wrapper {
max-height: 80vh;
overflow: auto;
border: 1px solid var(--border-color);
border-radius: 8px;
border-radius: 12px;
background: white;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
position: relative;
}
@@ -192,10 +162,10 @@
font-size: 0.75rem;
color: var(--text-main);
z-index: 20;
box-shadow: 0 1px 0 var(--border-color);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
/* Gestion hauteurs Sticky */
/* Hauteurs */
#planningTable thead tr:nth-child(1) th {
top: 0;
height: 32px;
@@ -207,12 +177,12 @@
}
#planningTable thead tr:nth-child(3) th {
top: 60px;
height: 24px;
height: 26px;
z-index: 19;
border-bottom: 2px solid var(--border-color);
}
/* En-têtes Alex / Laia (Couleurs mises à jour) */
/* Couleurs Headers */
.col-alex.header-group {
background: var(--bg-alex) !important;
color: var(--text-alex);
@@ -222,7 +192,7 @@
color: var(--text-laia);
}
/* Cellules */
/* Corps */
#planningTable tbody td {
border-right: 1px solid #f1f5f9;
border-bottom: 1px solid #f1f5f9;
@@ -256,7 +226,7 @@
z-index: 5;
}
/* Indicateurs */
/* Icones */
.fc-day--centre::after {
content: "🏫";
position: absolute;
@@ -264,35 +234,28 @@
right: 2px;
font-size: 12px;
line-height: 1;
left: auto;
transform: none;
}
.fc-day--avis::after {
content: "";
position: absolute;
top: 4px;
right: 4px;
top: 2px;
right: 2px;
width: 14px;
height: 10px;
border-radius: 2px;
background: repeating-linear-gradient(
to bottom,
#fcd116,
#fcd116 2px,
#ce1126 2px,
#ce1126 4px
);
border: 1px solid #b91c1c;
height: 14px;
background: url("/modules/family-calendar/assets/img/avis.svg") no-repeat
center center;
background-size: contain;
border: none;
}
.fc-pep-sick-emoji {
position: absolute;
bottom: 2px;
right: 2px;
font-size: 12px;
line-height: 1;
}
/* Colonnes spécifiques */
/* Colonnes */
.col-alex-av,
.col-laia-av {
background: #f8fafc;
@@ -305,7 +268,6 @@
.col-laia-sub {
background: var(--bg-laia);
}
.col-month {
width: 50px;
background: white;
@@ -332,13 +294,13 @@
color: var(--text-muted);
}
/* --- 4. CALENDRIER MENSUEL (Modernisé) --- */
/* --- 4. CALENDRIER MENSUEL (MODERNISÉ) --- */
.fc-month-calendar-wrapper {
background: white;
border: 1px solid var(--border-color);
border-radius: 16px; /* Plus arrondi */
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
margin-bottom: 32px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
@@ -346,19 +308,18 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}
/* NAVIGATION (Flèches) */
/* Navigation Flèches */
.fc-nav-controls {
display: flex;
align-items: center;
gap: 16px;
order: 2; /* Pour s'assurer qu'il est bien placé */
order: 2;
}
.fc-nav-button {
width: 36px;
height: 36px;
@@ -371,22 +332,16 @@
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.fc-nav-button:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(59, 130, 246, 0.15);
}
.fc-nav-button:active {
transform: translateY(0);
}
/* TITRE DU MOIS */
/* Titre Mois */
#fc-current-month-year {
margin: 0;
font-size: 1.25rem;
@@ -398,40 +353,37 @@
letter-spacing: -0.02em;
}
/* BOUTONS DE VUE (Segmented Control Style) */
/* Boutons Vue (Segmented) */
.fc-view-controls {
display: inline-flex;
background: #f1f5f9; /* Gris clair de fond */
background: #e2e8f0;
padding: 4px;
border-radius: 12px;
gap: 0; /* Collés */
border-radius: 8px;
gap: 0;
order: 1;
}
.fc-view-button {
background: transparent;
border: none;
color: var(--text-muted);
padding: 8px 16px;
border-radius: 8px; /* Un peu moins que le conteneur */
border-radius: 6px;
padding: 6px 16px;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s ease;
transition: all 0.2s;
}
.fc-view-button:hover {
color: var(--text-main);
}
.fc-view-button--active {
background: white;
color: var(--primary);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-weight: 700;
}
/* RESTE DU CALENDRIER (Inchangé mais nécessaire pour le contexte) */
/* Table Mensuelle */
.fc-month-calendar {
width: 100%;
display: block;
@@ -447,7 +399,6 @@
border: 1px solid var(--border-color);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.fc-month-table td {
@@ -462,7 +413,7 @@
background: #fcfcfc;
}
/* Conteneurs Vues */
/* Grilles Vues */
.fc-two-months-container {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -490,7 +441,272 @@
text-transform: capitalize;
}
/* --- 5. MENU CONTEXTUEL --- */
/* --- 5. NOUVELLE SECTION BASSE (CARTES) --- */
.pf-section--bottom-panels {
margin-top: 40px;
}
.fc-bottom-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
align-items: start;
}
.pf-card {
background: white;
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
/* Légende Badge Style */
.pf-legend-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
}
.pf-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
padding: 4px 8px;
background-color: white;
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-muted);
}
.pf-legend-color {
width: 16px;
height: 16px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
}
/* Couleurs & Contenus Légende */
.fc-legend-school-holiday {
background: var(--c-school-holiday);
}
.fc-legend-public-holiday {
background: var(--c-public-holiday);
}
.fc-legend-off-carole {
background: var(--c-off-carole);
}
.fc-legend-extra-off-carole {
background: var(--c-extra-off);
}
/* Légende : Emojis */
.fc-legend-centre {
background: white;
}
.fc-legend-centre::after {
content: "🏫";
}
.fc-legend-pep-sick {
background: white;
}
.fc-legend-pep-sick::after {
content: "🤒";
}
/* Légende : Icone SVG Avis */
.fc-legend-avis {
background: white url("/modules/family-calendar/assets/img/avis.svg")
no-repeat center center;
background-size: contain;
border: none; /* Pas de bordure pour le SVG propre */
}
/* Récapitulatif Vertical */
.fc-summary-vertical {
display: flex;
flex-direction: column;
gap: 0;
}
.fc-summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 4px;
border-bottom: 1px solid #f1f5f9;
}
.fc-summary-item:last-child {
border-bottom: none;
}
.fc-summary-label {
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 500;
}
.fc-summary-value {
font-size: 1rem;
font-weight: 700;
color: var(--text-main);
}
.fc-summary-sub {
font-size: 0.75rem;
color: #94a3b8;
margin-left: 8px;
font-style: italic;
}
/* --- CONTROLES RÉCAPITULATIF --- */
/* On transforme le titre de la card en Flexbox pour y mettre les boutons */
.fc-summary-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px; /* Un peu plus compact verticalement */
}
.fc-summary-controls {
display: flex;
gap: 8px;
}
.fc-summ-select {
background: white;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 2px 8px;
font-size: 0.75rem; /* Petit texte */
color: var(--text-main);
cursor: pointer;
outline: none;
height: 24px;
}
.fc-summ-select:hover {
border-color: var(--primary);
}
/* Ajustement mobile pour les sélecteurs */
@media (max-width: 768px) {
.fc-summary-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* --- 6. MODALE VACANCES --- */
.fc-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.2s ease-out;
}
.fc-modal-content {
background: white;
width: 90%;
max-width: 600px;
max-height: 80vh;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.fc-modal-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.fc-modal-header h2 {
margin: 0;
font-size: 1.1rem;
color: var(--text-main);
}
.fc-modal-close {
background: none;
border: none;
font-size: 24px;
color: var(--text-muted);
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.1s;
}
.fc-modal-close:hover {
background: #f1f5f9;
color: #ef4444;
}
.fc-modal-body {
padding: 0;
overflow-y: auto;
}
/* Table Modale */
.fc-holidays-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.fc-holidays-table th {
background: #f9fafb;
padding: 12px 16px;
text-align: left;
font-weight: 600;
color: var(--text-muted);
position: sticky;
top: 0;
border-bottom: 1px solid var(--border-color);
}
.fc-holidays-table td {
padding: 10px 16px;
border-bottom: 1px solid #f1f5f9;
color: var(--text-main);
}
.fc-holidays-table tr:nth-child(even) {
background: #fafafa;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* --- 7. MENU CONTEXTUEL --- */
.fc-selection-menu {
position: absolute;
z-index: 9999;
@@ -560,3 +776,22 @@
.fc-menu-leaves-table td {
padding: 2px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.fc-bottom-grid {
grid-template-columns: 1fr;
}
.fc-month-header {
flex-direction: column;
align-items: stretch;
}
.fc-nav-controls,
.fc-view-controls {
justify-content: center;
}
.pf-btn-icon-text {
width: 100%;
justify-content: center;
}
}
modules/family-calendar/family-calendar.js
+319 -148
View File
@@ -1,24 +1,16 @@
/**
* family-calendar.js (FIXED: Selection, View Buttons, Colors)
* family-calendar.js (Version Sécurisée)
*/
document.addEventListener("DOMContentLoaded", () => {
const CONGE_TYPES = ["OFF_CAROLE", "EXTRA_OFF_CAROLE"];
const GUARDE_TYPES = ["CENTRE", "AVIS"];
const PEP_TYPES = ["PEP_SICK"];
const MODIFIABLE_TYPES = [...CONGE_TYPES, ...GUARDE_TYPES, ...PEP_TYPES];
class FamilyCalendar {
constructor() {
// Éléments DOM (avec sécurité null)
this.planningBody = document.getElementById("planningBody");
this.selectionMenu = document.getElementById("selectionMenu");
// Menu dans le body pour position absolue correcte
if (
this.selectionMenu &&
this.selectionMenu.parentElement !== document.body
) {
document.body.appendChild(this.selectionMenu);
}
this.schoolHolidaysTableBody = document.querySelector(
"#schoolHolidaysTable tbody",
);
@@ -26,6 +18,14 @@ document.addEventListener("DOMContentLoaded", () => {
this.monthSelectionMenu = document.getElementById(
"fc-month-selectionMenu",
);
// Déplacement des menus dans le body pour affichage correct
if (
this.selectionMenu &&
this.selectionMenu.parentElement !== document.body
) {
document.body.appendChild(this.selectionMenu);
}
if (
this.monthSelectionMenu &&
this.monthSelectionMenu.parentElement !== document.body
@@ -33,7 +33,6 @@ document.addEventListener("DOMContentLoaded", () => {
document.body.appendChild(this.monthSelectionMenu);
}
// Etat
this.currentMonth = new Date();
this.currentMonth.setDate(1);
this.viewMode = "1month";
@@ -42,7 +41,6 @@ document.addEventListener("DOMContentLoaded", () => {
this.isSelecting = false;
this.selectedCells = [];
this.monthSelectedCells = [];
this.isMonthSelecting = false;
this._currentBulkInfo = null;
// Données
@@ -56,7 +54,12 @@ document.addEventListener("DOMContentLoaded", () => {
3: { CP: {}, JRA: {}, JA: {} },
};
if (!this.planningBody) return;
// Si le tableau principal n'est pas là, on arrête tout pour ne pas crasher
if (!this.planningBody) {
console.warn("Element #planningBody introuvable. Le JS s'arrête.");
return;
}
this.init();
}
@@ -65,6 +68,7 @@ document.addEventListener("DOMContentLoaded", () => {
const now = new Date();
this.currentSchoolYearStart =
now.getMonth() >= 8 ? now.getFullYear() : now.getFullYear() - 1;
await this.refreshAllData();
this.updateSchoolYearLabel();
}
@@ -105,13 +109,12 @@ document.addEventListener("DOMContentLoaded", () => {
this.reprocessAndRender();
} catch (e) {
console.error("Erreur chargement", e);
console.error("Erreur chargement données:", e);
}
}
// Appel API pour les vacances scolaires (Zone C) avec dédoublonnage
async fetchPublicAndSchoolHolidays() {
// 1. Jours fériés 2025-2026 (Statique)
// 1. Jours fériés (Statique)
const publicHolidays = [
"2025-11-01",
"2025-11-11",
@@ -131,38 +134,31 @@ document.addEventListener("DOMContentLoaded", () => {
duration: 1,
}));
// 2. Vacances Scolaires (API Gouv)
const schoolHolidayEvents = [];
try {
// API Gouv
const url =
"https://data.education.gouv.fr/api/explore/v2.1/catalog/datasets/fr-en-calendrier-scolaire/records?where=annee_scolaire='2025-2026' AND zones LIKE '%Zone C%'&limit=100";
const res = await fetch(url);
const data = await res.json();
const rawRecords = data.results || [];
// --- DÉDOUBLONNAGE ---
// On utilise une Map pour ne garder qu'une entrée unique par (Description + Date Début)
// Dédoublonnage
const uniqueHolidaysMap = new Map();
rawRecords.forEach((r) => {
// Clé unique : "Vacances de Noël|2025-12-20"
const key = `${r.description}|${r.start_date}`;
if (!uniqueHolidaysMap.has(key)) {
uniqueHolidaysMap.set(key, r);
}
if (!uniqueHolidaysMap.has(key)) uniqueHolidaysMap.set(key, r);
});
// Convertir la Map en tableau
const uniqueRecords = Array.from(uniqueHolidaysMap.values());
// Remplir le tableau HTML du haut (avec la liste propre)
// APPEL DE LA MÉTHODE D'AFFICHAGE (séparée pour la propreté)
this.renderSchoolHolidaysTable(uniqueRecords);
// Générer les événements jour par jour (uniquement sur la liste propre)
// Génération des events pour le calendrier (cases colorées)
uniqueRecords.forEach((r, idx) => {
let curr = new Date(r.start_date);
const end = new Date(r.end_date);
// Boucle jour par jour
while (curr < end) {
const iso = curr.toISOString().split("T")[0];
schoolHolidayEvents.push({
@@ -175,56 +171,40 @@ document.addEventListener("DOMContentLoaded", () => {
}
});
} catch (e) {
console.warn(
"Impossible de charger les vacances scolaires depuis l'API Gouv.",
e,
);
console.warn("Erreur API Vacances (pas grave, on continue)", e);
}
// On retourne TOUJOURS les événements, même si l'affichage du tableau échoue
return [...publicHolidays, ...schoolHolidayEvents];
}
processWeeks(rawWeeks) {
return rawWeeks.map((w) => ({
id: `${w.week_iso_year}-W${w.week_iso_number}`,
monthKey: `${w.year}-${String(w.month).padStart(2, "0")}`,
monthName: w.month_name,
weekLabel: w.week_label,
dayDates: {
mon: new Date(w.mon_date + "T00:00:00"),
tue: new Date(w.tue_date + "T00:00:00"),
wed: new Date(w.wed_date + "T00:00:00"),
thu: new Date(w.thu_date + "T00:00:00"),
fri: new Date(w.fri_date + "T00:00:00"),
},
dayFlags: {
mon: { events: [] },
tue: { events: [] },
wed: { events: [] },
thu: { events: [] },
fri: { events: [] },
},
totals: {
offCarole: 0,
extraOffCarole: 0,
centre: 0,
avis: 0,
pepSick: 0,
presencePep: 0,
alexCP: 0,
alexJRA: 0,
alexJA: 0,
laiaCP: 0,
laiaJRA: 0,
laiaJA: 0,
},
}));
renderSchoolHolidaysTable(records) {
// Si le tableau HTML n'existe pas (ex: on n'est pas sur la bonne page), on ne fait rien
if (!this.schoolHolidaysTableBody) return;
// 1. Tri chronologique strict (du plus ancien au plus récent)
records.sort((a, b) => new Date(a.start_date) - new Date(b.start_date));
// 2. Génération du HTML
this.schoolHolidaysTableBody.innerHTML = records
.map(
(r) => `
<tr>
<td>${r.description}</td>
<td>${new Date(r.start_date).toLocaleDateString("fr-FR")}</td>
<td>${new Date(r.end_date).toLocaleDateString("fr-FR")}</td>
</tr>
`,
)
.join("");
}
// ================== LOGIQUE MÉTIER ==================
reprocessAndRender() {
this.reprocessEvents();
this.calculateMonthlyBalances();
this.updateGlobalSummary();
this.initSummaryControls();
this.renderTable();
this.renderMonthCalendar();
}
@@ -241,6 +221,7 @@ document.addEventListener("DOMContentLoaded", () => {
(k) => w.dayDates[k].getTime() === d.getTime(),
);
if (dayKey) w.dayFlags[dayKey].events.push(e);
const dur = parseFloat(e.duration) || 1;
const typeMap = {
OFF_CAROLE: "offCarole",
@@ -341,6 +322,7 @@ document.addEventListener("DOMContentLoaded", () => {
}
renderTable() {
if (!this.planningBody) return;
this.planningBody.innerHTML = "";
const monthSpans = this.weeks.reduce((acc, w) => {
acc[w.monthKey] = (acc[w.monthKey] || 0) + 1;
@@ -383,8 +365,7 @@ document.addEventListener("DOMContentLoaded", () => {
td.textContent = String(dateObj.getDate()).padStart(2, "0");
td.className = "col-day";
const dayEvents = w.dayFlags[d].events;
dayEvents.forEach((evt) => {
w.dayFlags[d].events.forEach((evt) => {
if (evt.type === "OFF_CAROLE")
td.classList.add("fc-day--off-carole");
if (evt.type === "EXTRA_OFF_CAROLE")
@@ -402,11 +383,10 @@ document.addEventListener("DOMContentLoaded", () => {
const dayLeaves = this.leaves.filter((l) => l.leave_date === iso);
if (dayLeaves.length) {
let html = `<div style="position:absolute; bottom:0; left:0; width:100%; font-size:9px; line-height:1; display:flex; justify-content:center; gap:2px; pointer-events:none;">`;
// --- CORRECTION COULEURS ---
if (dayLeaves.some((l) => l.person_id === 2))
html += `<span style="color:#0f766e; font-weight:800;">A</span>`; // Teal
html += `<span style="color:#0f766e; font-weight:800;">A</span>`;
if (dayLeaves.some((l) => l.person_id === 3))
html += `<span style="color:#b45309; font-weight:800;">L</span>`; // Amber
html += `<span style="color:#b45309; font-weight:800;">L</span>`;
html += `</div>`;
td.innerHTML += html;
}
@@ -455,7 +435,7 @@ document.addEventListener("DOMContentLoaded", () => {
renderMonthCalendar() {
if (!this.monthCalendar) return;
this.monthCalendar.innerHTML = ""; // CLEAN UP
this.monthCalendar.innerHTML = "";
const y = this.currentMonth.getFullYear();
const m = this.currentMonth.getMonth();
@@ -508,10 +488,8 @@ document.addEventListener("DOMContentLoaded", () => {
renderYearView() {
const startYear = this.currentSchoolYearStart;
let html = '<div class="fc-year-container">';
// Sept-Dec
for (let i = 8; i < 12; i++)
html += `<div class="fc-year-month"><div class="fc-year-month-title">${new Intl.DateTimeFormat("fr-FR", { month: "long" }).format(new Date(startYear, i))}</div>${this.generateMonthHTML(startYear, i)}</div>`;
// Jan-Aug
for (let i = 0; i < 8; i++)
html += `<div class="fc-year-month"><div class="fc-year-month-title">${new Intl.DateTimeFormat("fr-FR", { month: "long" }).format(new Date(startYear + 1, i))}</div>${this.generateMonthHTML(startYear + 1, i)}</div>`;
html += "</div>";
@@ -582,43 +560,185 @@ document.addEventListener("DOMContentLoaded", () => {
return html;
}
renderSchoolHolidaysTable(records) {
if (!this.schoolHolidaysTableBody) return;
records.sort((a, b) => new Date(a.start_date) - new Date(b.start_date));
this.schoolHolidaysTableBody.innerHTML = records
.map(
(r) => `
<tr>
<td>${r.description}</td>
<td>${new Date(r.start_date).toLocaleDateString("fr-FR")}</td>
<td>${new Date(r.end_date).toLocaleDateString("fr-FR")}</td>
<td>${r.zones}</td>
</tr>
`,
)
.join("");
}
// --- NOUVELLES MÉTHODES POUR LE RÉCAPITULATIF DYNAMIQUE ---
/**
* Initialise les menus déroulants (Année / Mois)
*/
initSummaryControls() {
const typeSelect = document.getElementById("summType");
const valueSelect = document.getElementById("summValue");
if (!typeSelect || !valueSelect) return;
// 1. Scanner les données pour trouver les années et mois disponibles
const years = new Set();
const months = new Set();
updateGlobalSummary() {
const div = document.getElementById("globalSummary");
if (!div) return;
const stats = { off: 0, extra: 0, sick: 0, pep: 0, totalWorking: 0 };
this.weeks.forEach((w) => {
stats.off += w.totals.offCarole;
stats.extra += w.totals.extraOffCarole;
stats.sick += w.totals.pepSick;
stats.pep += w.totals.presencePep;
Object.values(w.dayDates).forEach((d) => {
if (!this.publicHolidayDates.has(d.toISOString().split("T")[0]))
stats.totalWorking++;
years.add(d.getFullYear());
const mKey = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
months.add(mKey);
});
});
const sortedYears = Array.from(years).sort();
const sortedMonths = Array.from(months).sort();
// 2. Fonction interne pour remplir le 2ème menu (Valeurs)
const populateValues = () => {
const currentType = typeSelect.value;
const previousValue = valueSelect.value; // Pour essayer de garder la sélection si possible
valueSelect.innerHTML = ""; // On vide
if (currentType === "year") {
sortedYears.forEach((y) => {
const opt = document.createElement("option");
opt.value = y;
opt.textContent = y;
valueSelect.appendChild(opt);
});
// Sélection intelligente : garder l'ancienne ou prendre l'année en cours
if (sortedYears.includes(parseInt(previousValue))) {
valueSelect.value = previousValue;
} else {
const currentYear = new Date().getFullYear();
if (sortedYears.includes(currentYear))
valueSelect.value = currentYear;
}
} else {
// Mode Mois
sortedMonths.forEach((m) => {
const [y, mo] = m.split("-");
const dateObj = new Date(y, mo - 1, 1);
// Format : "octobre 2025"
const label = new Intl.DateTimeFormat("fr-FR", {
month: "long",
year: "numeric",
}).format(dateObj);
const opt = document.createElement("option");
opt.value = m;
opt.textContent = label;
valueSelect.appendChild(opt);
});
// Sélection intelligente : mois courant
const nowIso = new Date().toISOString().slice(0, 7); // "2025-01"
if (sortedMonths.includes(nowIso)) {
valueSelect.value = nowIso;
}
}
// Une fois rempli, on met à jour les chiffres
this.updateGlobalSummary();
};
// 3. Attacher les écouteurs (UNE SEULE FOIS)
if (!this.summaryListenersAttached) {
typeSelect.addEventListener("change", populateValues);
valueSelect.addEventListener("change", () =>
this.updateGlobalSummary(),
);
this.summaryListenersAttached = true;
}
// 4. Premier appel pour remplir dès le chargement
populateValues();
}
/**
* Calcule et affiche les KPIs en fonction des filtres
*/
updateGlobalSummary() {
const div = document.getElementById("globalSummary");
const typeSelect = document.getElementById("summType");
const valueSelect = document.getElementById("summValue");
if (!div) return;
// Si les contrôles n'ont pas encore de valeur (chargement initial), on attend
if (typeSelect && valueSelect && !valueSelect.value) return;
const filterType = typeSelect ? typeSelect.value : "year";
const filterValue = valueSelect
? valueSelect.value
: new Date().getFullYear().toString(); // Fallback
const stats = { off: 0, extra: 0, sick: 0, pep: 0, totalWorking: 0 };
// Parcours précis jour par jour
this.weeks.forEach((w) => {
Object.entries(w.dayDates).forEach(([dayName, dateObj]) => {
// Vérification du filtre
let match = false;
if (filterType === "year") {
if (dateObj.getFullYear().toString() === filterValue) match = true;
} else {
// Month (YYYY-MM)
const isoMonth = dateObj.toISOString().slice(0, 7);
if (isoMonth === filterValue) match = true;
}
if (match) {
// Récupérer les events de CE jour spécifique
const dayEvents = w.dayFlags[dayName].events;
// Additions
dayEvents.forEach((e) => {
const dur = parseFloat(e.duration) || 1;
if (e.type === "OFF_CAROLE") stats.off += dur;
if (e.type === "EXTRA_OFF_CAROLE") stats.extra += dur;
if (e.type === "PEP_SICK") stats.sick += dur;
});
// Calcul présence (Jour ouvré - Absences)
// Est-ce un jour ouvré ? (Pas férié, pas we - WE déjà exclu par structure semainier lun-ven)
// NOTE : Ma structure `weeks` ne contient que Lun-Ven par défaut.
const dateIso = dateObj.toISOString().split("T")[0];
if (!this.publicHolidayDates.has(dateIso)) {
// C'est un jour potentiellement ouvré
stats.totalWorking++;
// Calcul des absences sur ce jour
let dayAbsence = 0;
dayEvents.forEach((e) => {
if (
["OFF_CAROLE", "EXTRA_OFF_CAROLE", "PEP_SICK"].includes(
e.type,
)
) {
dayAbsence += parseFloat(e.duration) || 1;
}
});
stats.pep += Math.max(0, 1 - dayAbsence);
}
}
});
});
// Affichage HTML Vertical
div.innerHTML = `
<p><strong>Off Carole :</strong> ${stats.off} jours</p>
<p><strong>Extra Off Carole :</strong> ${stats.extra} jours</p>
<p><strong>Pep malade :</strong> ${stats.sick} jours</p>
<p><strong>Présence Pep :</strong> ${stats.pep} jours</p>
<p style="font-size:0.8em; color:#666; margin-top:4px;">(Sur jours ouvrés totaux : ${stats.totalWorking})</p>
<div class="fc-summary-item">
<span class="fc-summary-label">Off Carole</span>
<span class="fc-summary-value">${parseFloat(stats.off.toFixed(1))} jours</span>
</div>
<div class="fc-summary-item">
<span class="fc-summary-label">Extra Off Carole</span>
<span class="fc-summary-value">${parseFloat(stats.extra.toFixed(1))} jours</span>
</div>
<div class="fc-summary-item">
<span class="fc-summary-label">Pep Malade</span>
<span class="fc-summary-value">${parseFloat(stats.sick.toFixed(1))} jours</span>
</div>
<div class="fc-summary-item">
<span class="fc-summary-label">Présence Pep</span>
<span class="fc-summary-value">${parseFloat(stats.pep.toFixed(1))} jours</span>
</div>
`;
}
@@ -628,28 +748,103 @@ document.addEventListener("DOMContentLoaded", () => {
lbl.textContent = `${this.currentSchoolYearStart} – ${this.currentSchoolYearStart + 1}`;
}
processWeeks(rawWeeks) {
return rawWeeks.map((w) => ({
id: `${w.week_iso_year}-W${w.week_iso_number}`,
monthKey: `${w.year}-${String(w.month).padStart(2, "0")}`,
monthName: w.month_name,
weekLabel: w.week_label,
dayDates: {
mon: new Date(w.mon_date + "T00:00:00"),
tue: new Date(w.tue_date + "T00:00:00"),
wed: new Date(w.wed_date + "T00:00:00"),
thu: new Date(w.thu_date + "T00:00:00"),
fri: new Date(w.fri_date + "T00:00:00"),
},
dayFlags: {
mon: { events: [] },
tue: { events: [] },
wed: { events: [] },
thu: { events: [] },
fri: { events: [] },
},
totals: {
offCarole: 0,
extraOffCarole: 0,
centre: 0,
avis: 0,
pepSick: 0,
presencePep: 0,
alexCP: 0,
alexJRA: 0,
alexJA: 0,
laiaCP: 0,
laiaJRA: 0,
laiaJA: 0,
},
}));
}
async fetchApi(url) {
return fetch(url).then((r) => r.json());
}
async postApi(url, data) {
const res = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
});
if (!res.ok) throw new Error(await res.text());
return res.json();
}
async changeSchoolYear(delta) {
this.currentSchoolYearStart += delta;
this.updateSchoolYearLabel();
await this.refreshAllData();
}
// ================== INTERACTIONS ==================
setupEventListeners() {
// Planning Hebdo
this.planningBody.addEventListener("mousedown", (e) =>
this.handleMouseDown(e),
);
document.addEventListener("mousemove", (e) => this.handleMouseMove(e));
document.addEventListener("mouseup", (e) => this.handleMouseUp(e));
if (this.planningBody) {
this.planningBody.addEventListener("mousedown", (e) =>
this.handleMouseDown(e),
);
document.addEventListener("mousemove", (e) => this.handleMouseMove(e));
document.addEventListener("mouseup", (e) => this.handleMouseUp(e));
}
// Calendrier Mensuel (Clic simple pour ouvrir le menu)
// Modale
const btnOpen = document.getElementById("btnOpenHolidays");
const btnClose = document.getElementById("btnCloseHolidays");
const modal = document.getElementById("modalHolidays");
if (btnOpen && modal)
btnOpen.addEventListener("click", () => (modal.style.display = "flex"));
if (btnClose && modal)
btnClose.addEventListener(
"click",
() => (modal.style.display = "none"),
);
if (modal)
modal.addEventListener("click", (e) => {
if (e.target === modal) modal.style.display = "none";
});
// Calendrier Mensuel
if (this.monthCalendar) {
this.monthCalendar.addEventListener("click", (e) => {
const td = e.target.closest("td[data-date]");
if (td) {
this.monthSelectedCells = [td]; // Simuler sélection unique
this.monthSelectedCells = [td];
this.showMenu(e.pageX, e.pageY, [td.dataset.date], true);
}
});
}
// Menus Contextuels
// Menus
document.addEventListener("click", (e) => this.closeMenusIfOutside(e));
const handleMenu = (e) => {
const btn = e.target.closest("button");
@@ -660,7 +855,7 @@ document.addEventListener("DOMContentLoaded", () => {
if (this.monthSelectionMenu)
this.monthSelectionMenu.addEventListener("click", handleMenu);
// Boutons Navigation Mensuelle
// Nav Mensuelle
document
.getElementById("fc-prev-month")
?.addEventListener("click", () => {
@@ -674,7 +869,7 @@ document.addEventListener("DOMContentLoaded", () => {
this.renderMonthCalendar();
});
// Boutons Navigation Année Scolaire
// Nav Année
document
.getElementById("fc-prev-school-year")
?.addEventListener("click", () => this.changeSchoolYear(-1));
@@ -682,7 +877,7 @@ document.addEventListener("DOMContentLoaded", () => {
.getElementById("fc-next-school-year")
?.addEventListener("click", () => this.changeSchoolYear(1));
// Boutons de Vue (1 mois / 2 mois / Année)
// Boutons Vue
document.querySelectorAll(".fc-view-button").forEach((btn) => {
btn.addEventListener("click", (e) => {
document
@@ -712,13 +907,9 @@ document.addEventListener("DOMContentLoaded", () => {
handleMouseUp(e) {
if (!this.isSelecting) return;
// FIX CRITIQUE : Si on relâche la souris sur une case qu'on n'a pas eu le temps de "survoler" (mouvement rapide)
// on l'ajoute maintenant pour être sûr qu'elle est dans la sélection.
// Fix : inclure la dernière cellule
const td = e.target.closest("#planningTable td[data-date]");
if (td && !this.selectedCells.includes(td)) {
this.selectCell(td);
}
if (td && !this.selectedCells.includes(td)) this.selectCell(td);
this.isSelecting = false;
if (!this.selectedCells.length) return;
@@ -735,14 +926,14 @@ document.addEventListener("DOMContentLoaded", () => {
clearSelection() {
this.selectedCells.forEach((c) => c.classList.remove("fc-day--selected"));
this.selectedCells = [];
this.selectionMenu.style.display = "none";
if (this.selectionMenu) this.selectionMenu.style.display = "none";
if (this.monthSelectionMenu)
this.monthSelectionMenu.style.display = "none";
}
closeMenusIfOutside(e) {
if (
!this.selectionMenu.contains(e.target) &&
!this.selectionMenu?.contains(e.target) &&
!this.monthSelectionMenu?.contains(e.target) &&
!this.menuJustOpened
) {
@@ -803,7 +994,7 @@ document.addEventListener("DOMContentLoaded", () => {
}
async handleMenuAction(dataset) {
this.selectionMenu.style.display = "none";
if (this.selectionMenu) this.selectionMenu.style.display = "none";
if (this.monthSelectionMenu)
this.monthSelectionMenu.style.display = "none";
@@ -887,26 +1078,6 @@ document.addEventListener("DOMContentLoaded", () => {
alert("Erreur action: " + e.message);
}
}
async fetchApi(url) {
return fetch(url).then((r) => r.json());
}
async postApi(url, data) {
const res = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
});
if (!res.ok) throw new Error(await res.text());
return res.json();
}
async changeSchoolYear(delta) {
this.currentSchoolYearStart += delta;
this.updateSchoolYearLabel();
await this.refreshAllData();
}
}
new FamilyCalendar();