add ticketing url

site/snippets/calendar-strip.php

@@ -1,25 +1,35 @@
 <div 
   class="calendar-strip"
+  @mouseleave="open = false"
   x-data="{
     monthNumb: dayjs().month(),
     token: '<?= $site->mapadoToken() ?>',
     contractId: '<?= $site->mapadoContractId() ?>',
     dates: [],
+    targetSessions: [],
+    open: false,
 
     get monthName() {
       return dayjs().month(this.monthNumb).format('MMMM');
     },
 
     async updateDates() {
+      document.body.classList.toggle('progress')
       this.dates = getDatesInMonth(this.monthNumb);
 
       const mapadoDates = await getMapadoDates(this.monthNumb)
       mapadoDates.forEach(mapadoDate => {
         const day = parseInt(mapadoDate.day)
-        this.dates[day].push(mapadoDate.name)
+        this.dates[day].push(mapadoDate)
       })
 
       console.log('dates', this.dates)
+      document.body.classList.toggle('progress')
+    },
+
+    handleDayHover() {
+      this.targetSessions = this.date;
+      if (this.date.length > 0) {this.open = true} else {this.open = false}
     }
   }"
 
@@ -33,11 +43,28 @@
   <ul class="calendar-strip__days">
     <template x-for="(date, index) in dates">
       <li class="calendar-strip__day">
-        <button x-text="index" :disabled="date.length === 0 ? true : false" title="Voir les événements"></button>
+        <button 
+          x-text="index" 
+          :disabled="date.length === 0 ? true : false" 
+          :title="date.length === 0 ? 'Pas de représentation.' : 'Voir les représentations.'"
+          @mouseenter="handleDayHover()"
+        ></button>
       </li>
     </template>
   </ul>
   <button class="calendar-strip__calendar-btn">calendrier</button>
-  <div class="calendar-strip__date"></div>
+  <div class="calendar-strip__date" :class="open ? 'open' : ''">
+    <ul class="calendar-strip__sessions">
+      <template x-for="session in targetSessions">
+        <li class="calendar-strip__session">
+          <div x-html="`${session.day} ${monthName}<br><br>${session.startTime}`"></div>
+          <div x-html="`<strong>${session.title}</strong>`"></div>
+          <div></div>
+          <div></div>
+          <div xhtml=""></div>
+        </li>
+      </template>
+    </ul>
+  </div>
 </div>