add calendar strip date infos

assets/css/src/calendar-strip.css

@@ -27,6 +27,10 @@
   transition: opacity 0.2s ease-in-out;
 }
 
+.calendar-strip__day.active {
+  text-decoration: underline;
+}
+
 .calendar-strip__calendar-btn {
   border: var(--border);
   padding: 0.2rem 0.5rem;
@@ -38,15 +42,15 @@
   left: 0;
   top: 100%;
   width: 100%;
-  height: 0;
+  max-height: 0;
   padding: 0 var(--margin-body);
   background-color: #fff;
   z-index: -1;
-  transition: height .2s ease-in-out;
+  transition: max-height 0.3s ease-in-out;
   border-bottom: var(--border);
 }
 .calendar-strip__date.open {
-  height: 10rem;
+  max-height: 20rem;
 }
 
 .calendar-strip__sessions {
@@ -54,7 +58,11 @@
 }
 
 .calendar-strip__session {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+}
+.calendar-strip__session:not(:last-child) {
+  margin-bottom: 4rem;
 }
 
 .calendar-strip__session > div {

site/config/routes/month-dates.php

@@ -7,6 +7,15 @@ function getCorrespondingSeasons($request) {
   );
 }
 
+function getTimeDifference($start, $end) {
+  $start = new DateTime($start);
+  $end = new DateTime($end);
+
+  $difference = $end->diff($start);
+
+  return $difference->h . "h" . $difference->i;
+}
+
 return [
   'pattern' => '/month-dates.json',
   'method' => 'POST',
@@ -20,18 +29,24 @@ return [
     $correspondingSeasons = getCorrespondingSeasons($request);    
 
     foreach ($correspondingSeasons->children() as $event) {
+
+      $eventInfos = [
+        "title" => $event->title()->value(),
+        "place" => $event->place()->value(),
+        "authors" => $event->authors()->value()
+      ];
+
       if ($event->isMapadoEvent() == 'false') {
         foreach ($event->sessions()->toStructure() as $session) {
           
           $sessionMonth = $session->date()->toDate('Y-m');
           if ($sessionMonth === $requestMonth) {
-            $day = $session->date()->toDate('d');
-            $dates[$day][] = [
+            $day = intval($session->date()->toDate('d'));
+            $dates[$day][] = array_merge($eventInfos, [
               "day" => $day,
-              "title" => $event->title()->value(),
               "time" => $session->time()->value(),
               "duration" => $event->duration()->value(),
-            ];
+            ]);
           };
         }
       }
@@ -42,6 +57,8 @@ return [
           "requestParams" => [],
           "requestFields" => [
             ["name" => "title"],
+            ["name" => "address"],
+            ["name" => "slug"],
             [
               "name" => "eventDateList",
               "subfields" => [
@@ -55,18 +72,27 @@ return [
         
         $mapadoEvent = fetchMapadoEvent($request);        
 
+        $duration = null;
         foreach ($mapadoEvent->eventDateList as $session) {
           $sessionMonth = substr($session->startDate, 0, 7);          
           if ($sessionMonth === $requestMonth) {
             
             $day = intval(substr($session->startDate, 8, 2));
-            $time = substr($session->startDate, 11, 5);
+            $startTime = substr($session->startDate, 11, 5);
+            $eventDateId = explode('/', $session->{'@id'});
+            $eventDateId = $eventDateId[count($eventDateId) - 1];
             
-            $dates[$day][] = [
+            if (isset($session->endDate) && !$duration) {
+              $endTime = substr($session->endDate, 11 , 5);
+              $duration = getTimeDifference($startTime, $endTime);
+            }
+            
+            $dates[$day][] = array_merge($eventInfos, [
               "day" => $day,
-              "title" => $event->title()->value(),
-              "time" => str_replace(':', 'h', $time)
-            ];
+              "time" => str_replace(':', 'h', $startTime),
+              "duration" => $duration,
+              "ticketingUrl" => 'https://cdn-besancon.mapado.com/event/' . $mapadoEvent->slug . '?eventDate=' . $eventDateId
+            ]);
           }
 
         }

site/snippets/calendar-strip.php

@@ -24,8 +24,16 @@
     },
 
     handleDayHover() {
-      this.targetSessions = this.date;
-      if (this.date.length > 0) {this.open = true} else {this.open = false}
+      
+      if (this.date.length > 0) {
+        this.targetSessions = this.date;
+        this.open = true
+      } else {
+        setTimeout(() => {
+          this.targetSessions = this.date;
+        }, 100)
+        this.open = false
+      }
     }
   }"
 
@@ -38,7 +46,7 @@
   </div>
   <ul class="calendar-strip__days">
     <template x-for="(date, index) in dates">
-      <li class="calendar-strip__day">
+      <li class="calendar-strip__day" :class="targetSessions.length > 0 && index == targetSessions[0].day ? 'active' : ''">
         <button 
           x-text="index" 
           :disabled="date.length === 0 ? true : false" 
@@ -54,10 +62,17 @@
       <template x-for="session in targetSessions">
         <li class="calendar-strip__session">
           <div x-html="`${session.day} ${monthName}<br><br>${session.time}`"></div>
-          <div x-html="`<strong>${session.title}</strong>`"></div>
-          <div></div>
-          <div></div>
-          <div xhtml=""></div>
+          <div>
+            <p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
+            <p x-html="session.authors"></p>
+          </div>
+          <div x-text="`${session.duration}`"></div>
+          <div x-text="`${session.place}`"></div>
+          <template x-if="session.ticketingUrl">
+            <div>
+              <a :href="session.ticketingUrl" target="_blank" title="Accéder à la billetterie">Billetterie</a>
+            </div>
+          </template>
         </li>
       </template>
     </ul>