program - order sessions by month

assets/css/panel.css

@@ -1,5 +1,26 @@
+@font-face {
+  font-family: "Joker";
+  src: url("/assets/fonts/Jokker-Medium.woff") format("woff");
+  font-weight: normal;
+}
+@font-face {
+  font-family: "Joker";
+  src: url("/assets/fonts/Jokker-Semibold.woff") format("woff");
+  font-weight: bold;
+}
+
+body,
+.k-text {
+  font-family: "Joker", sans-serif;
+}
+
 :root {
   --color-salmon: #ff4f4b;
+  --color-yellow: #faff82;
+}
+
+.k-panel-menu {
+  background-color: var(--color-yellow);
 }
 
 .k-field-name-herotext .k-block-type-heading-input[data-level="h3"] .k-text {

assets/css/src/program-filters.css

@@ -0,0 +1,11 @@
+.filters > button {
+  transition: color 0.2s ease-in-out;
+}
+
+.filters > button:hover {
+  color: var(--color-salmon);
+}
+
+.filters > button:not(:last-child) {
+  margin-right: 4vw;
+}

assets/css/style.css

@@ -14,4 +14,5 @@
 @import url("src/event-presentation.css");
 @import url("src/swiper.css");
 @import url("src/collapsable-section.css");
+@import url("src/program-filters.css");
 @import url("src/footer.css");

site/controllers/program.php

@@ -1,5 +1,30 @@
 <?php
 
+function sortByMonth($sessions) {
+  $months = array(
+    'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
+    'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'
+  );
+
+  $orderedSessions = array();
+
+  foreach ($months as $month) {
+    $orderedSessions[$month] = array();
+  }
+
+  foreach ($sessions as $item) {
+    $month = date('F', strtotime($item['date']));
+    $month = str_replace(
+        array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'),
+        $months,
+        $month
+    );
+    $orderedSessions[$month][] = $item;
+  }
+
+  return $orderedSessions;
+}
+
 return function($page) {
   $currentSeason = $page->children()->first();
   $today = date('Ymd');
@@ -7,12 +32,16 @@ return function($page) {
   $previousEvents = new Pages();
   $nextEvents = new Pages();
 
+  $currentSeasonSessions = [];
+
   foreach ($currentSeason->children() as $event) {
     $sessions = $event->isMapadoEvent() == 'true' ? $event->remoteSessions() : $event->sessions();
 
     $isStillShowing = false;
 
     foreach ($sessions->toStructure() as $session) {
+      $currentSeasonSessions[] = $session->toArray();
+      
       $sessionDate = str_replace('-', '', $session->date()->toDate('YMMdd'));
 
       if ($sessionDate >= $today) {
@@ -25,11 +54,12 @@ return function($page) {
       $nextEvents->add($event);
     } else {
       $previousEvents->add($event);
-    }      
+    }
   }
 
   return [
     'previousEvents' => $previousEvents,
-    'nextEvents' => $nextEvents
+    'nextEvents' => $nextEvents,
+    'currentSeasonSessions' => sortByMonth($currentSeasonSessions)
   ];
 };

site/snippets/header.php

@@ -9,12 +9,16 @@
 
     <link rel="stylesheet" type="text/css" href="<?= url('assets/css/style.css?version-cache-prevent') . rand(0, 1000) ?>">
     <meta name="robots" content="noindex,nofollow">
-    <?php if ($page->isHomePage() || $page->template() == 'event'): ?>
+    
+    <!-- Alpine -->
+    <?php if ($page->isHomePage() || $page->template() == 'event' || $page->template() == 'program'): ?>
       <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/fr.js"></script>
       <?= js('/assets/js/calendar.js') ?>
     <?php endif ?>
+    
+    <!-- Swiper -->
     <?php if ($page->template() == 'event'): ?>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" defer />
         <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>

site/templates/program.php

@@ -1,13 +1,43 @@
 <?php snippet('header') ?>
-<section class="page-title">
-  <h1>Programme</h1>
-</section>
-<section class="yellow">
-  <h2>À venir — <?= $page->children()->first()->title() ?></h2>
-</section>
-<?php snippet('events-grid', ['events' => $nextEvents, 'columns' => 3])  ?>
-<section class="yellow">
-  <h2>Événements passés</h2>
-</section>
-  <?php snippet('events-grid', ['events' => $previousEvents, 'columns' => 3])  ?>
+<pre>
+  <?= var_dump($currentSeasonSessions) ?>
+</pre>
+<div 
+  class="program-wrapper"
+  x-data="{
+    setInitialTab() {
+      const queryString = window.location.search;
+      if (queryString.length === 0) return 'Programme';
+      const urlParams = new URLSearchParams(queryString);
+      const tab = urlParams.get('tab');
+      return tab;
+    }
+  }"
+>
+  <section class="filters">
+    <button>Calendrier</button>
+    <button>Spectacles</button>
+    <button>Autres événéments</button>
+    <button>Ici & Là</button>
+    <button>Saisons précédentes</button>
+  </section>
+
+  <div class="program-content" 
+    x-data="{
+      tab: setInitialTab()
+    }"
+  >
+    <section class="page-title">
+      <h1 x-text="tab"></h1>
+    </section>
+    <section class="yellow">
+      <h2>À venir — <?= $page->children()->first()->title() ?></h2>
+    </section>
+    <?php snippet('events-grid', ['events' => $nextEvents, 'columns' => 3])  ?>
+    <section class="yellow">
+      <h2>Événements passés</h2>
+    </section>
+    <?php snippet('events-grid', ['events' => $previousEvents, 'columns' => 3])  ?>
+  </div>
+</div>
 <?php snippet('footer') ?>