finish mapadoEvent session display in front

assets/css/src/callout.css

@@ -14,7 +14,3 @@ section.callout a {
   display: flex;
   align-items: center;
 }
-
-section.callout .ticket {
-  margin-right: 1rem;
-}

assets/css/src/collapsable-section.css

@@ -39,7 +39,7 @@
 
 .collapsable__content .session {
   font-size: var(--font-size-m);
-  grid-template-columns: 2fr 1fr 1fr 1fr;
+  grid-template-columns: 2fr 1fr 1fr 2fr;
 }
 
 .collapsable__content .production p:not(:last-child) {

assets/css/src/generic.css

@@ -92,3 +92,12 @@ body.progress * {
   height: 1.5rem;
   transform: translateY(-0.2rem);
 }
+
+.ticket-link {
+  display: flex;
+  align-items: center;
+}
+
+.ticket-link > figure {
+  margin-right: 1rem;
+}

assets/css/src/nav.css

@@ -53,10 +53,6 @@
   justify-content: space-between;
 }
 
-.expanded-nav__ticketing .ticket {
-  margin-right: 1rem;
-}
-
 .expanded-nav__links .social-icons {
   margin-top: 1rem;
 }

assets/js/calendar.js

@@ -171,5 +171,11 @@ async function updateMapadoEvent(pageUri) {
 
   const response = await fetch("/update-mapado-event.json", requestOptions);
   const json = await response.json();
+  console.log("Séance récupérées de Mapado", json);
   return json;
 }
+
+function dateToFrench(date) {
+  date = dayjs(date);
+  return date.format("D MMMM YYYY");
+}

site/config/config.php

@@ -44,5 +44,5 @@ return [
     'handler' => 'intl'
   ],
   'locale' => 'fr_FR.UTF-8',
-  'ticketingUrl' => 'https://cdn-besancon.mapado.com/'
+  'ticketingUrl' => 'https://cdn-besancon.mapado.com/',
 ];

site/templates/event.php

@@ -20,35 +20,69 @@
 
 <section class="collapsable-sections">
   <?php snippet('collapsable-section', ['title' => 'Prenez vos places !'], slots: true) ?>
-    <?php slot('content') ?>
+    <?php if ($page->isMapadoEvent() != 'true'): ?>  
-    <div 
-      class="sessions"
-      x-data="{
-        sessions: null,
-        async fetchSessions() {
-          this.sessions = await updateMapadoEvent('<?= $page->uri() ?>');
-          console.log(this.sessions);
-        }
-      }"
-      x-init="fetchSessions()"
-    >
-    <?php
-      $sessions = $page->isMapadoEvent() != 'true' ? $page->sessions()->toStructure() : $page->remoteSessions()->toStructure();
       
-      foreach ($sessions as $session) :
+      <?php slot('content') ?>
-        $date = new DateTime($session->date());
+      <div 
-        $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::FULL, IntlDateFormatter::NONE);
+        class="sessions"
-        $formattedDate = $formatter->format($date);
+      >
-    ?>
+      <?php
-      <div class="session grid">
+        $sessions = $page->sessions()->toStructure();
-        <p><?= $formattedDate ?></p>
+  
-        <p><?= $session->time() ?></p>
+        foreach ($sessions as $session) :
-        <p><?= $page->place() ?></p>
+          $date = new DateTime($session->date());
-        <p>test</p>
+          $formatter = new IntlDateFormatter('fr_FR', IntlDateFormatter::FULL, IntlDateFormatter::NONE);
+          $formattedDate = $formatter->format($date);
+      ?>
+        <div class="session grid">
+          <p><?= $formattedDate ?></p>
+          <p><?= $session->time() ?></p>
+          <p><?= $page->place() ?></p>
+          <p>test</p>
+        </div>
+      <?php endforeach ?>
       </div>
-    <?php endforeach ?>
+      <?php endslot() ?>
-    </div>
+    
-    <?php endslot() ?>
+    <?php else: ?>
+      
+      <?php slot('content') ?>
+      <div 
+        class="sessions"
+        x-data="{
+          stockThreshold: 15,
+          sessions: [],
+          async fetchSessions() {
+            const event = await updateMapadoEvent('<?= $page->uri() ?>');
+            this.sessions = event.remoteSessions
+          },
+        }"
+        x-init="
+          if (<?= $page->isMapadoEvent() == 'true' ?>) {
+            fetchSessions()
+          }
+        "
+      >
+        <template x-for="session in sessions">
+          <div class="session grid">
+            <p x-text="dateToFrench(session.date)"></p>
+            <p x-text="session.time"></p>
+            <p><?= $page->place() ?></p>
+            <template x-if="session.bookableStock === 0">
+              <a class="ticket-link" title="Plus de places disponibles"><?php snippet('ticket') ?> Complet</a>
+            </template>
+            <template x-if="session.bookableStock > stockThreshold">
+              <a class="ticket-link" title="Plus de places disponibles"><?php snippet('ticket') ?> Billetterie</a>
+            </template>
+            <template x-if="session.bookableStock < stockThreshold">
+              <a class="ticket-link" title="Plus de places disponibles"><?php snippet('ticket') ?> Plus que quelques places !</a>
+            </template>
+          </div>
+        </template>
+      </div>
+      <?php endslot() ?>
+    
+    <?php endif ?>
   <?php endsnippet() ?>
   
   <?php snippet('collapsable-section', ['title' => 'Distribution et production'], slots: true) ?>

site/templates/home.php

@@ -32,7 +32,7 @@
 
 <section class="callout">
   <h4><?= $site->callout() ?></h4>
-  <a class="to-blank" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
+  <a class="to-blank ticket-link" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
 </section>
 
 <?php snippet('footer') ?>

vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'getkirby/plainkit',
         'pretty_version' => 'dev-main',
         'version' => 'dev-main',
-        'reference' => '3008e231cb1bbf24da4c475bf23c5e1d050945a2',
+        'reference' => 'c98d5eb36b266cd487fe00ac87df199591ee9baa',
         'type' => 'project',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -67,7 +67,7 @@
         'getkirby/plainkit' => array(
             'pretty_version' => 'dev-main',
             'version' => 'dev-main',
-            'reference' => '3008e231cb1bbf24da4c475bf23c5e1d050945a2',
+            'reference' => 'c98d5eb36b266cd487fe00ac87df199591ee9baa',
             'type' => 'project',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),