redesign event blueprint

assets/css/src/calendar-strip.css

@@ -11,6 +11,9 @@
 
 .calendar-strip__selector {
   flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  width: 10rem;
 }
 
 .calendar-strip__days {

assets/css/src/reset.css

@@ -57,3 +57,8 @@ button {
   all: unset;
   cursor: pointer;
 }
+
+button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.3;
+}

assets/js/calendar.js

@@ -1,5 +1,6 @@
 dayjs.locale("fr");
-function getDaysInMonth(month, year) {
+
+async function getDaysInMonth(month, year) {
   const daysInMonth = dayjs(new Date(year, month, 0)).daysInMonth();
   const days = [];
 
@@ -10,3 +11,17 @@ function getDaysInMonth(month, year) {
 
   return days;
 }
+
+function getEvents(monthNumb) {
+  const myHeaders = new Headers();
+  myHeaders.append("Authorization", "Bearer " + mapadoToken);
+
+  const requestOptions = {
+    method: "GET",
+    headers: myHeaders,
+    redirect: "follow",
+  };
+
+  const url =
+    "https://ticketing.mapado.net/v1/event_dates?itemsPerPage=31&contract=1941&after=2024-10-01&before=2024-11-01&order=asc&fields=startDate,bookableStock,ticketing{@id,title,firstFutureEventDateStartDate,isOnSale,minisite{domain,online,slug,name},venue{@id,name,seatingName,address,zipCode,city,countryCode,timezone}}";
+}

site/blueprints/pages/event.yml

@@ -10,28 +10,50 @@ tabs:
           keyInfosHeadline:
             type: headline
             label: Infos clés
-          date:
+          startDate:
-            type: text
+            label: Date de début
+            type: date
             icon: calendar
-            width: 1/4
+            display: DD/MM/YYYY
-            placeholder: 2-5 oct. 2024
+            width: 1/5
+            when:
+              isMapadoEvent: false
+          mapadoKeyInfos:
+            label: Événement connecté à Mapado
+            type: info
+            text: Les données de dates et de durée sont récupérées de [Mapado](https://desk.mapado.com/).
+            width: 2/4
+            when:
+              isMapadoEvent: true
+          endDate:
+            label: Date de fin
+            type: date
+            icon: calendar
+            display: DD/MM/YYYY
+            width: 1/5
+            when:
+              isMapadoEvent: false
           duration:
             label: Durée
             type: text
             icon: clock
-            width: 1/4
+            width: 1/5
             placeholder: 1h20
+            when:
+              isMapadoEvent: false
           public:
             type: text
             icon: users
-            width: 1/4
+            width: 1/5
             placeholder: dès 8 ans
           place:
             label: Lieu
             type: text
             icon: pin
-            width: 1/4
+            width: 1/5
             placeholder: NTB
+          line:
+            type: line
       - width: 1/1
         fields:
           presentationHeadline:
@@ -83,10 +105,33 @@ tabs:
     label: Réglages
     icon: cog
     fields:
+      isMapadoEvent:
+        label: Connecter à Mapado
+        type: toggle
+        default: false
+        width: 1/4
+      mapadoInfo:
+        label: Pourquoi faire ?
+        type: info
+        text: |
+          Permet de récupérer depuis [Mapado](https://desk.mapado.com/) les infos suivantes :
+            - date de début
+            - date de fin
+            - durée
+            - séances et leurs informations (date, places restantes)
+
+        width: 2/4
+      whiteSpace:
+        type: gap
+        width: 1/4
       mapadoId:
         label: Identifiant Mapado
         type: number
         width: 1/4
+        when:
+          isMapadoEvent: true
       mapadoButton:
         type: mapado-check
-        width: 1/2
+        width: 3/4
+        when:
+          isMapadoEvent: true

site/plugins/mapado-check/src/components/MapadoCheckButton.vue

@@ -53,6 +53,7 @@ function formatDateString(inputString) {
 function connect() {
   icon.value = "loader";
   theme.value = "yellow";
+
   const myHeaders = new Headers();
   myHeaders.append("Authorization", "Bearer " + mapadoToken);
 

site/snippets/calendar-strip.php

@@ -2,6 +2,8 @@
   class="calendar-strip"
   x-data="{
     monthNumb: dayjs().month(),
+    token: '<?= $site->mapadoToken() ?>',
+    contractId: '<?= $site->mapadoContractId() ?>',
 
     get monthName() {
       return dayjs().month(this.monthNumb).format('MMMM');
@@ -11,11 +13,13 @@
       return getDaysInMonth(this.monthNumb, dayjs().year())
     }
   }"
+
+  x-init="getEvents(monthNumb)"
 >
   <div class="calendar-strip__selector">
-    <button class="prev-month" @click="monthNumb--">←</button>
+    <button class="prev-month" @click="monthNumb--" :disabled="monthNumb === -4 ? true : false">←</button>
     <span x-text="monthName"></span>
-    <button class="next-month" @click="monthNumb++">→</button>
+    <button class="next-month" @click="monthNumb++" :disabled="monthNumb === 7 ? true : false">→</button>
   </div>
   <ul class="calendar-strip__days">
     <template x-for="(day, index) in days">