redesign calendar api for improving loading performance

assets/css/src/generic.css

@@ -12,7 +12,7 @@
   }
 }
 
-.calendar-strip__days.progress {
+/* .calendar-strip__days.progress {
   cursor: progress !important;
 }
 .calendar-strip__days.progress > li {
@@ -20,7 +20,7 @@
 }
 .calendar-strip__days.progress button {
   cursor: progress !important;
-}
+} */
 
 .grid {
   --column-gap: calc(var(--space-m) * 1.1);

assets/js/calendar.js

@@ -149,18 +149,14 @@ function getId(eventData) {
 function createEmptyCalendar() {
   const calendar = {};
 
-  for (let month = 9; month < 19; month++) {
+  for (let month = 9; month < 21; month++) {
     const normalizedMonth = ((month - 1) % 12) + 1;
 
     const daysInMonth = dayjs()
       .month(normalizedMonth - 1)
       .daysInMonth();
 
-    calendar[normalizedMonth] = {
-      name: dayjs()
-        .month(normalizedMonth - 1)
-        .format("MMMM"),
-    };
+    calendar[normalizedMonth] = {};
 
     for (let day = 1; day <= daysInMonth; day++) {
       calendar[normalizedMonth][day] = null;
@@ -170,7 +166,7 @@ function createEmptyCalendar() {
   return calendar;
 }
 
-async function getMergedDates(monthNumb, dates) {
+async function getCurrentSeasonCalendar(monthNumb, dates) {
   const calendar = createEmptyCalendar();
 
   const requestParams = {
@@ -187,7 +183,6 @@ async function getMergedDates(monthNumb, dates) {
     requestOptions
   );
   const json = await response.json();
-  console.log("calendar", json);
   return json;
 }
 

site/config/routes/get-current-season-calendar.php

@@ -95,6 +95,13 @@ return [
       }
     }
 
-    return json_encode($calendar);
+    $jsonCalendar = json_encode($calendar);
+    
+    $seasonDirPath = __DIR__ . '/../../../content/' . $currentSeason->diruri() . '/data.json';
+    $dataFile = fopen($seasonDirPath, "w");
+    fwrite($dataFile, $jsonCalendar);
+    fclose($dataFile);
+
+    return $jsonCalendar;
   }
 ];

site/snippets/calendar-strip.php

@@ -2,114 +2,90 @@
   class="calendar-strip"
   @mouseleave="open = false"
   x-data="{
-  monthNumb: dayjs().month(),
-  weekIndex: (() => {
-    dayjs.extend(window.dayjs_plugin_weekOfYear);
-    
-    const date = dayjs();
-    
-    const firstDayOfMonth = dayjs(date).startOf('month');
+    calendar: createEmptyCalendar(),
+    monthNumb: dayjs().month() + 1,
+    token: '<?= $site->mapadoToken() ?>',
+    contractId: '<?= $site->mapadoContractId() ?>',
+    targetSessions: [],
+    open: false,
+    today: dayjs().format('DD-MM-YYYY'),
 
-    const currentWeek = date.week();
-    const firstWeekOfMonth = firstDayOfMonth.week();
-    
-    const weekIndex = currentWeek - firstWeekOfMonth - 1;
+    get monthName() {
+      return dayjs().month(this.monthNumb - 1).format('MMMM');
+    },
 
-    console.log(`currentWeek: ${currentWeek}, firstWeekOfMonth: ${firstWeekOfMonth}, weekIndex: ${weekIndex}`);
-    
-    // Retourner l'index de la semaine
-    return weekIndex;
-  })(),
-  token: '<?= $site->mapadoToken() ?>',
-  contractId: '<?= $site->mapadoContractId() ?>',
-  dates: [],
-  targetSessions: [],
-  open: false,
-  today: dayjs().format('DD-MM-YYYY'),
+    get currentMonth() {
+      return this.calendar[this.monthNumb]
+    },
 
-  get monthName() {
-    return dayjs().month(this.monthNumb).format('MMMM');
-  },
+    async updateDates() {
 
-  get currentWeek() {
-    const dates = JSON.parse(JSON.stringify(this.dates));
-    const start = this.weekIndex * 7;
-    const end = start + 7;
+      fetch('/<?= page('programme')->children()->first()->uri() ?>/data.json')
+        .then(res => res.json())
+        .then(json => {
+          console.log('Saved calendar : ', json)
+          this.calendar = json
+        })
+        .catch(error => console.log('No saved calendar.'))
 
-    const allKeys = Object.keys(dates);
+      const daysNode = document.querySelector('.calendar-strip__days');
+      daysNode.classList.toggle('progress');   
+      
+      this.calendar = await getCurrentSeasonCalendar();
+      
+      console.log('Updated calendar for current season :', this.calendar);
+      daysNode.classList.toggle('progress');
+    },
 
-    const slicedKeys = allKeys.slice(start, end);
-
-    const slicedObject = slicedKeys.reduce((obj, key) => {
-      obj[key] = dates[key];
-      return obj;
-    }, {});
-    return slicedObject;
-  },
-
-  async updateDates(resetWeek = false) {
-    const daysNode = document.querySelector('.calendar-strip__days');
-    daysNode.classList.toggle('progress');
-    
-    this.dates = getDatesInMonth(this.monthNumb);
-    this.dates = await getMergedDates(this.monthNumb, this.dates);
-    
-    console.log('Merged dates', this.dates);
-    daysNode.classList.toggle('progress');
-    if (resetWeek) {
-      this.weekIndex = 0
-    }
-  },
-
-  handleDayHover() {
-    if (this.date.sessions.length > 0) {
-      this.targetSessions = this.date.sessions;
-      this.open = true;
-    } else {
-      setTimeout(() => {
+    handleDayHover() {
+      if (!this.date) return
+      if (this.date.sessions.length > 0) {
         this.targetSessions = this.date.sessions;
-      }, 100);
-      this.open = false;
-    }
-  },
+        this.open = true;
+      } else {
+        setTimeout(() => {
+          this.targetSessions = this.date.sessions;
+        }, 100);
+        this.open = false;
+      }
+    },
 
-  nextWeek() {
-    if (this.weekIndex < Math.floor(this.dates.length / 7)) {
-      this.weekIndex++;
-    } else {
-      this.monthNumb++;
-      this.updateDates();
+    nextMonth() {
+      if (this.monthNumb == 12) {
+        this.monthNumb = 1
+      } else {
+        this.monthNumb++
+      }
+    },
+    prevMonth() {
+      if (this.monthNumb == 1) {
+        this.monthNumb = 12
+      } else {
+        this.monthNumb--
+      }
     }
-  },
-
-  prevWeek() {
-    if (this.weekIndex > 0) {
-      this.weekIndex--;
-    } else {
-      this.monthNumb--;
-      this.updateDates();
-    }
-  }
-}"
+  }"
 
 
   x-init="updateDates()"
 >
   <div class="calendar-strip__selector">
-    <button class="prev-month" @click="monthNumb--; updateDates()">←</button>
+    <button class="prev-month" @click="prevMonth()" :disabled="monthNumb === 9">←</button>
     <span x-text="monthName"></span>
-    <button class="next-month" @click="monthNumb++; updateDates()">→</button>
+    <button class="next-month" @click="nextMonth()" :disabled="monthNumb === 8">→</button>
   </div>
   <ul class="calendar-strip__days">
-    <template x-for="(date, index) in currentWeek">
+    <template x-for="(date, index) in currentMonth">
       <li class="calendar-strip__day" :class="targetSessions.length > 0 && open && index == targetSessions[0].day ? 'active' : ''" :style="'animation-delay: ' + index * 0.03 + 's'">
         <button 
-          :class="date.full === today ? 'today' : ''"
-          :disabled="date.sessions.length === 0 ? true : false" 
-          :title="date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
+        :class="!date || date.full !== today ? '' : 'today'"
+          :disabled="!date || date.sessions.length === 0 ? true : false" 
+          :title="!date || date.sessions.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
           @mouseenter="handleDayHover()"
         >
-        <span x-text="date.initial"></span>
+        <template  x-if="date">
+          <span x-text="date.initial"></span>
+        </template>
         <span x-text="index"></span>
       </button>
       </li>

site/templates/home.php

@@ -1,5 +1,4 @@
 <?php snippet('header') ?>
-
 <section class="hero">
   <div class="hero__text">
     <?= $site->heroText()->toBlocks() ?>