?

agenda/src/components/Agenda.vue

@@ -5,17 +5,25 @@
       <input type="file" @change="handleFileUpload" accept=".ics" />
     </div>
 
-    <!-- Le tableau ADE en haut, inchangé -->
-    <table class="ade-table">
+    <!-- Affiche un message tant que skipCells n'est pas prêt -->
+    <div v-if="!skipCellsReady">
+      Chargement de la grille...
+    </div>
+
+    <!-- Tableau ADE, rendu UNIQUEMENT si skipCells est prêt -->
+    <table
+      class="ade-table"
+      v-if="skipCellsReady"
+    >
       <thead>
-        <!-- 1ère ligne : Semaine + date de début -->
+        <!-- Ligne du haut : Semaine + date de début -->
         <tr class="top-row">
           <th :colspan="daysOfWeek.length + 1" class="week-title">
             S{{ isoWeekNumber }} {{ formatDDMM(currentMonday) }}
           </th>
         </tr>
 
-        <!-- 2e ligne : Horaire + 7 jours (jour + date + nom) -->
+        <!-- Ligne des jours -->
         <tr class="days-row">
           <th class="time-col-header">Horaire</th>
           <th
@@ -34,29 +42,47 @@
       </thead>
 
       <tbody>
+        <!-- Pour chaque créneau horaire -->
         <tr v-for="(slot, slotIndex) in timeSlots" :key="slotIndex">
-          <td class="time-col">{{ slot.start }} - {{ slot.end }}</td>
-          <td
-            v-for="(day, dayIndex) in daysOfWeek"
-            :key="dayIndex"
-            class="agenda-cell"
-          >
-            <div
-              v-for="(evt, eIndex) in eventsForSlot(day, slot)"
-              :key="eIndex"
-              class="event-card"
-              :style="eventStyle(evt)"
-            >
-              <div class="event-title">{{ evt.title }}</div>
-              <div class="event-info">{{ evt.start }} - {{ evt.end }}</div>
-            </div>
+          <!-- Colonne Horaire -->
+          <td class="time-col">
+            {{ slot.start }} - {{ slot.end }}
           </td>
+
+          <!-- 7 jours -->
+          <template v-for="(day, dayIndex) in daysOfWeek" :key="dayIndex">
+            <!-- 
+               On n'affiche un <td> que si la case n'est pas "skip"
+               (déjà couverte par un rowspan au-dessus).
+            -->
+            <td
+              v-if="!skipCells[dayIndex][slotIndex].skip"
+              :rowspan="skipCells[dayIndex][slotIndex].rowSpan"
+              class="agenda-cell"
+              :style="eventStyleForCell(dayIndex, slotIndex)"
+            >
+              <!-- Si des événements commencent EXACTEMENT ici -->
+              <div
+                v-for="(evt, evtIndex) in skipCells[dayIndex][slotIndex].events"
+                :key="evtIndex"
+                class="event-card"
+              >
+                <div class="event-title">{{ evt.title }}</div>
+                <div class="event-info">
+                  {{ evt.start }} - {{ evt.end }}
+                </div>
+              </div>
+            </td>
+          </template>
         </tr>
       </tbody>
     </table>
 
+    <!-- Barre d'onglets de navigation -->
     <div class="week-tabs">
-      <button class="arrow-btn" @click="prevPage" :disabled="startIndex === 0">←</button>
+      <button class="arrow-btn" @click="prevPage" :disabled="startIndex === 0">
+        ←
+      </button>
       <button
         v-for="(week, idx) in displayedWeeks"
         :key="idx"
@@ -77,6 +103,7 @@
 </template>
 
 <script>
+/** Calcule la semaine ISO d'une date donnée. */
 function getIsoWeekNumber(date) {
   const tempDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
   const dayNum = tempDate.getUTCDay() || 7;
@@ -85,6 +112,7 @@ function getIsoWeekNumber(date) {
   return Math.ceil(((tempDate - yearStart) / 86400000 + 1) / 7);
 }
 
+/** Retourne 'YYYY-MM-DD' */
 function formatDate(dateObj) {
   const yyyy = dateObj.getFullYear();
   const mm = String(dateObj.getMonth() + 1).padStart(2, "0");
@@ -95,10 +123,12 @@ function formatDate(dateObj) {
 export default {
   name: "AdeLikeAgenda",
   data() {
-    const currentMonday = new Date(2025, 2, 31);
+    const currentMonday = new Date(2025, 2, 31); // Par exemple
     return {
       currentMonday,
       resourceName: "El Alaoui El Ismaili Omar",
+
+      // Créneaux de 30 min
       timeSlots: [
         { start: "08:00", end: "08:30" },
         { start: "08:30", end: "09:00" },
@@ -123,15 +153,23 @@ export default {
         { start: "18:00", end: "18:30" },
         { start: "18:30", end: "19:00" },
         { start: "19:00", end: "19:30" },
-        { start: "19:30", end: "20:00" },
+        { start: "19:30", end: "19:55" },
       ],
-      events: [],
-      allWeeks: [],
-      weeksToShow: 7,
-      startIndex: 0,
+
+      events: [],        // Contiendra la liste des événements importés
+      allWeeks: [],      // Liste de semaines pour la barre d'onglets
+      weeksToShow: 7,    // 7 semaines affichées dans la barre
+      startIndex: 0,     // Index de la 1ère semaine dans la barre
+
+      /**
+       * Tableau 2D (dayIndex, slotIndex) pour savoir si on "saute" (skip) cette case,
+       * combien de rowSpan, et quels événements démarrent ici.
+       */
+      skipCells: [],
     };
   },
   computed: {
+    /** Les 7 jours de currentMonday */
     daysOfWeek() {
       const result = [];
       for (let i = 0; i < 7; i++) {
@@ -141,16 +179,46 @@ export default {
       }
       return result;
     },
+    /** Numéro de semaine (ISO) */
     isoWeekNumber() {
       return getIsoWeekNumber(this.currentMonday);
     },
+    /** Liste des semaines à afficher (avec pagination) */
     displayedWeeks() {
       return this.allWeeks.slice(this.startIndex, this.startIndex + this.weeksToShow);
     },
+
+    /**
+     * Renvoie true si skipCells est "prêt" :
+     * - 7 jours
+     * - Au moins 1 timeSlot
+     * - skipCells a la même taille que daysOfWeek x timeSlots
+     */
+    skipCellsReady() {
+      if (!this.skipCells || !this.skipCells.length) return false;
+      if (this.skipCells.length !== this.daysOfWeek.length) return false;
+      if (!this.skipCells[0].length) return false;
+      if (this.skipCells[0].length !== this.timeSlots.length) return false;
+      return true;
+    },
+  },
+  watch: {
+    // À chaque changement de semaine ou de liste d'événements,
+    // on recalcule la matrice skipCells
+    currentMonday() {
+      this.buildSkipCells();
+    },
+    events: {
+      handler() {
+        this.buildSkipCells();
+      },
+      deep: true,
+    },
   },
   methods: {
+    /** Initialise la liste de toutes les semaines */
     initWeeks() {
-      const totalCount = 15;
+      const totalCount = 15; // ex: 15 semaines
       const baseDate = new Date(this.currentMonday);
       for (let i = 0; i < totalCount; i++) {
         const temp = new Date(baseDate);
@@ -161,17 +229,105 @@ export default {
         });
       }
     },
-    eventsForSlot(dayDate, slot) {
-      const dayStr = formatDate(dayDate);
-      return this.events.filter(
-        (evt) => evt.day === dayStr && evt.start === slot.start
-      );
+
+    /** Construit skipCells = la matrice skip/rowSpan/events pour chaque jour/slot */
+    buildSkipCells() {
+      // Si daysOfWeek ou timeSlots sont vides, on annule
+      if (!this.daysOfWeek.length || !this.timeSlots.length) {
+        this.skipCells = [];
+        return;
+      }
+
+      // Réinitialise skipCells
+      this.skipCells = Array(this.daysOfWeek.length) // nb de jours
+        .fill(null)
+        .map(() =>
+          Array(this.timeSlots.length)
+            .fill(null)
+            .map(() => ({ skip: false, rowSpan: 1, events: [] }))
+        );
+
+      // Parcours de chaque jour
+      this.daysOfWeek.forEach((day, dayIndex) => {
+        const dayStr = formatDate(day);
+
+        // Parcours des créneaux
+        for (let slotIndex = 0; slotIndex < this.timeSlots.length; slotIndex++) {
+          const cell = this.skipCells[dayIndex][slotIndex];
+          if (cell.skip) continue; // déjà couvert par un rowspan
+
+          const slotStart = this.timeSlots[slotIndex].start;
+          const slotEnd = this.timeSlots[slotIndex].end;
+
+          // Cherche événements qui chevauchent ce créneau
+          const eventsInSlot = this.events.filter((evt) => {
+            const evtStart = evt.start;
+            const evtEnd = evt.end;
+
+            // Vérifie si l'événement commence ou chevauche ce créneau
+            return (
+              evt.day === dayStr &&
+              ((evtStart >= slotStart && evtStart < slotEnd) || // Commence dans ce créneau
+                (evtEnd > slotStart && evtEnd <= slotEnd) || // Se termine dans ce créneau
+                (evtStart < slotStart && evtEnd > slotEnd)) // Couvre entièrement ce créneau
+            );
+          });
+
+          if (eventsInSlot.length > 0) {
+            // rowSpan = max de tous les événements qui chevauchent ce créneau
+            let maxSpan = 1;
+            eventsInSlot.forEach((evt) => {
+              const r = this.getEventRowSpan(evt, slotIndex);
+              if (r > maxSpan) maxSpan = r;
+            });
+
+            // Associe la liste des événements et le rowSpan
+            cell.events = eventsInSlot;
+            cell.rowSpan = maxSpan;
+
+            // "Skip" les créneaux suivants couverts par ce rowSpan
+            for (let i = 1; i < maxSpan; i++) {
+              if (slotIndex + i < this.timeSlots.length) {
+                this.skipCells[dayIndex][slotIndex + i].skip = true;
+              }
+            }
+          }
+        }
+      });
     },
-    eventStyle(evt) {
+
+    /** Style d'arrière-plan si un événement est présent. */
+    eventStyleForCell(dayIndex, slotIndex) {
+      const cellInfo = this.skipCells[dayIndex][slotIndex];
+      if (!cellInfo.events.length) {
+        // Pas d'événement => style neutre
+        return {};
+      }
+      // On peut par ex. prendre la couleur du 1er événement
+      const firstEvt = cellInfo.events[0];
       return {
-        backgroundColor: evt.color || "#cef",
+        backgroundColor: firstEvt.color || "#cef",
       };
     },
+
+    /** Calcule le rowSpan d'un événement (nombre de créneaux couverts) */
+    getEventRowSpan(evt, slotIndex) {
+      const toMinutes = (time) => {
+        const [h, m] = time.split(":").map(Number);
+        return h * 60 + m;
+      };
+
+      const evtStart = toMinutes(evt.start);
+      const evtEnd = toMinutes(evt.end);
+      const slotStart = toMinutes(this.timeSlots[slotIndex].start);
+
+      const duration = evtEnd - Math.max(evtStart, slotStart); // Durée restante à partir de ce créneau
+      const slotDuration = 30; // 30 min par créneau
+
+      return Math.ceil(duration / slotDuration);
+    },
+
+    /** Formatage de dates */
     formatDateShort(dateObj) {
       const dd = String(dateObj.getDate()).padStart(2, "0");
       const mm = String(dateObj.getMonth() + 1).padStart(2, "0");
@@ -185,17 +341,11 @@ export default {
     },
     weekdayLabel(dateObj) {
       const dayIndex = dateObj.getDay();
-      const labels = [
-        "Dimanche",
-        "Lundi",
-        "Mardi",
-        "Mercredi",
-        "Jeudi",
-        "Vendredi",
-        "Samedi",
-      ];
+      const labels = ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
       return labels[dayIndex];
     },
+
+    /** Navigation dans la barre de semaines */
     goToWeek(mondayDate) {
       this.currentMonday = new Date(
         mondayDate.getFullYear(),
@@ -207,10 +357,12 @@ export default {
       if (this.startIndex > 0) this.startIndex--;
     },
     nextPage() {
-      if (this.startIndex + this.weeksToShow < this.allWeeks.length) this.startIndex++;
+      if (this.startIndex + this.weeksToShow < this.allWeeks.length) {
+        this.startIndex++;
+      }
     },
 
-    // 💡 NOUVELLE MÉTHODE : lecture .ics
+    /** Import de fichier ICS */
     handleFileUpload(event) {
       const file = event.target.files[0];
       if (!file) return;
@@ -223,6 +375,7 @@ export default {
       reader.readAsText(file);
     },
 
+    /** Parse ICS simple */
     parseICS(text) {
       const lines = text.split(/\r?\n/);
       let currentEvent = null;
@@ -245,6 +398,7 @@ export default {
         }
       }
 
+      // Transforme {start: {date, time}, end: {date, time}} en {day, start, end}
       this.events = events.map((e) => ({
         title: e.title,
         day: e.start.date,
@@ -254,20 +408,43 @@ export default {
       }));
     },
 
+    /** Parse la ligne ICS pour extraire la date + heure (fuseau Europe/Paris) */
     parseICSTime(line) {
-      const match = line.match(/:(\d{8})T(\d{4})/);
+      const match = line.match(/:(\d{8})T(\d{6})Z?/);
       if (!match) return { date: "", time: "" };
 
       const dateStr = match[1];
       const timeStr = match[2];
+      // Date en UTC
+      const utcDate = new Date(
+        Date.UTC(
+          parseInt(dateStr.slice(0, 4), 10),
+          parseInt(dateStr.slice(4, 6), 10) - 1,
+          parseInt(dateStr.slice(6, 8), 10),
+          parseInt(timeStr.slice(0, 2), 10),
+          parseInt(timeStr.slice(2, 4), 10),
+          parseInt(timeStr.slice(4, 6), 10)
+        )
+      );
+      // Convertit en local (Europe/Paris)
+      const localDate = new Date(
+        utcDate.toLocaleString("en-US", { timeZone: "Europe/Paris" })
+      );
+
       return {
-        date: `${dateStr.slice(0, 4)}-${dateStr.slice(4, 6)}-${dateStr.slice(6, 8)}`,
-        time: `${timeStr.slice(0, 2)}:${timeStr.slice(2, 4)}`,
+        date: `${localDate.getFullYear()}-${String(localDate.getMonth() + 1).padStart(2, "0")}-${String(localDate.getDate()).padStart(2, "0")}`,
+        time: `${String(localDate.getHours()).padStart(2, "0")}:${String(localDate.getMinutes()).padStart(2, "0")}`,
       };
     },
   },
+
+  /** Au montage, on initialise la liste des semaines et on construit skipCells */
   mounted() {
     this.initWeeks();
+    // Force un build initial
+    this.buildSkipCells();
+    // Optionnel: Debug en console
+    console.log("skipCells initial:", this.skipCells);
   },
 };
 </script>
@@ -289,6 +466,7 @@ export default {
   border: 1px solid #ccc;
 }
 
+/* Titre de la semaine */
 .top-row .week-title {
   background-color: #cde;
   font-size: 1.1rem;
@@ -298,6 +476,7 @@ export default {
   border-bottom: 2px solid #bbb;
 }
 
+/* En-têtes des jours */
 .days-row th {
   background-color: #eee;
   color: #333;
@@ -327,6 +506,7 @@ export default {
   margin-top: 2px;
 }
 
+/* Corps du tableau */
 td {
   border: 1px solid #ccc;
   padding: 3px;
@@ -343,6 +523,8 @@ td {
 
 .agenda-cell {
   min-height: 40px;
+  background-color: transparent;
+  border: 1px solid #ccc;
 }
 
 /* Cartes d'événement */
@@ -352,6 +534,9 @@ td {
   border: 1px solid #999;
   border-radius: 4px;
   font-size: 0.8rem;
+  background-color: #acf;
+  text-align: center;
+  vertical-align: top;
 }
 
 .event-title {
@@ -382,7 +567,6 @@ td {
   font-size: 0.8rem;
   min-width: 60px;
 }
-
 .week-tab-button:hover {
   background-color: #ccc;
 }
@@ -395,7 +579,6 @@ td {
   border-radius: 4px;
   font-size: 0.8rem;
 }
-
 .arrow-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;