nodebb-plugin-calendar-onekite 11.1.87 → 11.1.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-calendar-onekite",
-  "version": "11.1.87",
+  "version": "11.1.89",
   "description": "FullCalendar-based equipment reservation workflow with admin approval & HelloAsso payment for NodeBB",
   "main": "library.js",
   "license": "MIT",

package/public/client.js

@@ -51,7 +51,7 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
     `;
 
     return await new Promise((resolve) => {
-      bootbox.dialog({
+      const dialog = bootbox.dialog({
         title: 'Créer un évènement',
         message: html,
         buttons: {
@@ -79,13 +79,17 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
       });
 
       // init leaflet
+      dialog.on('shown.bs.modal', () => {
       setTimeout(async () => {
+
         try {
           const mapEl = document.getElementById('onekite-se-map');
           if (!mapEl) return;
           const L = await loadLeaflet();
           const map = L.map(mapEl).setView([46.5, 2.5], 5);
           L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
+          setTimeout(() => { try { map.invalidateSize(); } catch (e) {} }, 100);
+        setTimeout(() => { try { map.invalidateSize(); } catch (e) {} }, 100);
           let marker = null;
           function setMarker(lat, lon) {
             if (marker) map.removeLayer(marker);
@@ -114,7 +118,8 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
         } catch (e) {
           // ignore leaflet errors
         }
-      }, 0);
+            }, 50);
+    });
     });
   }
 
@@ -125,18 +130,21 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
       ${safeAddr ? `<div class="mb-2">${escapeHtml(safeAddr)}</div>` : ''}
       <div id="${mapId}" style="height:260px; border:1px solid #ddd; border-radius:6px;"></div>
     `;
-    bootbox.dialog({
+    const dialog = bootbox.dialog({
       title: title || 'Carte',
       message: html,
       buttons: { close: { label: 'Fermer', className: 'btn-secondary' } },
     });
+    dialog.on('shown.bs.modal', () => {
     setTimeout(async () => {
+
       try {
         const el = document.getElementById(mapId);
         if (!el) return;
         const L = await loadLeaflet();
         const map = L.map(el);
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; OpenStreetMap' }).addTo(map);
+          setTimeout(() => { try { map.invalidateSize(); } catch (e) {} }, 100);
 
         async function setAt(lat2, lon2) {
           map.setView([lat2, lon2], 14);
@@ -159,7 +167,8 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
       } catch (e) {
         // ignore leaflet errors
       }
-    }, 0);
+        }, 50);
+  });
   }
 
   // Click handler for map links in popups
@@ -342,7 +351,14 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
   }
 
 
-  function toDatetimeLocalValue(date) {
+  
+  function toLocalYmd(date) {
+    const d = new Date(date);
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  }
+
+function toDatetimeLocalValue(date) {
     const d = new Date(date);
     const pad = (n) => String(n).padStart(2, '0');
     return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
@@ -474,14 +490,70 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
 
     let mode = 'reservation'; // or 'special'
 
+    // Inject lightweight responsive CSS once.
+    try {
+      const styleId = 'onekite-responsive-css';
+      if (!document.getElementById(styleId)) {
+        const st = document.createElement('style');
+        st.id = styleId;
+        st.textContent = `
+          /* Prevent accidental horizontal scroll on small screens */
+          #onekite-calendar, #onekite-calendar * { box-sizing: border-box; }
+          #onekite-calendar { width: 100%; max-width: 100%; overflow-x: hidden; }
+
+          @media (max-width: 576px) {
+            #onekite-calendar .fc .fc-toolbar-title { font-size: 1.05rem; }
+            #onekite-calendar .fc .fc-button { padding: .25rem .45rem; font-size: .85rem; }
+            #onekite-calendar .fc .fc-daygrid-day-number { font-size: .8rem; }
+            #onekite-calendar .fc .fc-daygrid-event { font-size: .75rem; }
+            #onekite-calendar .fc .fc-timegrid-event { font-size: .75rem; }
+            #onekite-calendar .fc .fc-col-header-cell-cushion { font-size: .8rem; }
+          }
+
+          @media (max-width: 576px) and (orientation: landscape) {
+            #onekite-calendar .fc .fc-toolbar-title { font-size: 1rem; }
+            #onekite-calendar .fc .fc-button { padding: .2rem .4rem; font-size: .8rem; }
+          }
+        `;
+        document.head.appendChild(st);
+      }
+    } catch (e) {}
+
+    function isMobileNow() {
+      return !!(window.matchMedia && window.matchMedia('(max-width: 576px)').matches);
+    }
+
+    function isLandscapeNow() {
+      return !!(window.matchMedia && window.matchMedia('(orientation: landscape)').matches);
+    }
+
+    function computeAspectRatio() {
+      const mobile = isMobileNow();
+      if (!mobile) return 1.35;
+      return isLandscapeNow() ? 1.6 : 0.9;
+    }
+
+    const headerToolbar = isMobileNow() ? {
+      left: 'prev,next',
+      center: 'title',
+      right: 'today',
+    } : {
+      left: 'prev,next today',
+      center: 'title',
+      // Only month + week (no day view)
+      right: (canCreateSpecial ? 'newSpecial ' : '') + 'dayGridMonth,timeGridWeek',
+    };
+
     const calendar = new FullCalendar.Calendar(el, {
       initialView: 'dayGridMonth',
+      height: 'auto',
+      contentHeight: 'auto',
+      aspectRatio: computeAspectRatio(),
+      dayMaxEvents: true,
       locale: 'fr',
-      headerToolbar: {
-        left: 'prev,next today',
-        center: 'title',
-        right: (canCreateSpecial ? 'newSpecial ' : '') + 'dayGridMonth,timeGridWeek,timeGridDay',
-      },
+      headerToolbar: headerToolbar,
+      // Keep titles short on mobile to avoid horizontal overflow
+      titleFormat: isMobileNow() ? { year: 'numeric', month: 'short' } : undefined,
       customButtons: canCreateSpecial ? {
         newSpecial: {
           text: 'Évènement',
@@ -547,8 +619,8 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
             return;
           }
           // Send date strings (no hours) so reservations are day-based.
-          const startDate = new Date(info.start).toISOString().slice(0, 10);
-          const endDate = new Date(info.end).toISOString().slice(0, 10);
+          const startDate = toLocalYmd(info.start);
+          const endDate = toLocalYmd(info.end);
           await requestReservation({
             start: startDate,
             end: endDate,
@@ -893,6 +965,92 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
     try { window.oneKiteCalendar = calendar; } catch (e) {}
 
     calendar.render();
+
+    // Mobile controls: view (month/week) + mode (reservation/event) without bloating the header.
+    try {
+      const controlsId = 'onekite-mobile-controls';
+      const old = document.getElementById(controlsId);
+      if (old) old.remove();
+
+      if (isMobileNow()) {
+        const controls = document.createElement('div');
+        controls.id = controlsId;
+        controls.className = 'mt-2 d-flex flex-wrap gap-2 align-items-center';
+
+        const viewGroup = document.createElement('div');
+        viewGroup.className = 'btn-group btn-group-sm';
+        viewGroup.setAttribute('role', 'group');
+
+        const btnMonth = document.createElement('button');
+        btnMonth.type = 'button';
+        btnMonth.className = 'btn btn-outline-secondary';
+        btnMonth.textContent = 'Mois';
+
+        const btnWeek = document.createElement('button');
+        btnWeek.type = 'button';
+        btnWeek.className = 'btn btn-outline-secondary';
+        btnWeek.textContent = 'Semaine';
+
+        function refreshViewButtons() {
+          const v = calendar.view && calendar.view.type;
+          btnMonth.classList.toggle('active', v === 'dayGridMonth');
+          btnWeek.classList.toggle('active', v === 'timeGridWeek');
+        }
+
+        btnMonth.addEventListener('click', () => {
+          calendar.changeView('dayGridMonth');
+          refreshViewButtons();
+        });
+        btnWeek.addEventListener('click', () => {
+          calendar.changeView('timeGridWeek');
+          refreshViewButtons();
+        });
+
+        viewGroup.appendChild(btnMonth);
+        viewGroup.appendChild(btnWeek);
+        controls.appendChild(viewGroup);
+
+        if (canCreateSpecial) {
+          const modeBtn = document.createElement('button');
+          modeBtn.type = 'button';
+          modeBtn.className = 'btn btn-sm btn-outline-primary';
+          function refreshModeBtn() {
+            const isSpecial = mode === 'special';
+            modeBtn.textContent = isSpecial ? 'Mode évènement ✓' : 'Mode évènement';
+            modeBtn.classList.toggle('active', isSpecial);
+          }
+          modeBtn.addEventListener('click', () => {
+            mode = (mode === 'special') ? 'reservation' : 'special';
+            refreshModeBtn();
+            if (mode === 'special') {
+              showAlert('success', 'Mode évènement : sélectionne une plage (date/heure) sur le calendrier.');
+            }
+          });
+          refreshModeBtn();
+          controls.appendChild(modeBtn);
+        }
+
+        el.parentNode && el.parentNode.insertBefore(controls, el.nextSibling);
+        refreshViewButtons();
+      }
+    } catch (e) {}
+
+    // Update sizing when rotating/resizing (especially on mobile landscape).
+    try {
+      let lastMobile = isMobileNow();
+      let lastLandscape = isLandscapeNow();
+      window.addEventListener('resize', () => {
+        const mobile = isMobileNow();
+        const landscape = isLandscapeNow();
+        if (mobile !== lastMobile || landscape !== lastLandscape) {
+          lastMobile = mobile;
+          lastLandscape = landscape;
+          calendar.setOption('aspectRatio', computeAspectRatio());
+          calendar.setOption('titleFormat', mobile ? { year: 'numeric', month: 'short' } : undefined);
+        }
+        try { calendar.updateSize(); } catch (err) {}
+      });
+    } catch (e) {}
   }
 
   // Auto-init on /calendar when ajaxify finishes rendering.

package/templates/admin/plugins/calendar-onekite.tpl

@@ -48,6 +48,12 @@
             <input class="form-control" name="pendingHoldMinutes" placeholder="5">
           </div>
 
+          <div class="mb-3">
+            <label class="form-label">Délai rappel paiement (minutes)</label>
+            <input class="form-control" name="paymentHoldMinutes" placeholder="60">
+            <div class="form-text">Après validation (statut <code>paiement en attente</code>), un rappel est envoyé après ce délai. La réservation est ensuite expirée après <strong>2×</strong> ce délai.</div>
+          </div>
+
           <h4 class="mt-4">HelloAsso</h4>
 
           <div class="mb-3">

package/templates/calendar-onekite.tpl

@@ -15,3 +15,22 @@
   No inline require() here.
   The plugin's forum script auto-initialises on the calendar page via ajaxify.
 -->
+
+
+<style>
+  /* Mobile tweaks for FullCalendar */
+  @media (max-width: 576px) {
+    #onekite-calendar { margin-top: .5rem !important; }
+    .fc .fc-toolbar { flex-wrap: wrap; gap: .25rem; }
+    .fc .fc-toolbar-title { font-size: 1.05rem; line-height: 1.2; }
+    .fc .fc-button { padding: .25rem .45rem; font-size: .75rem; }
+    .fc .fc-button .fc-icon { font-size: .9em; }
+    .fc .fc-daygrid-day-number { font-size: .75rem; padding: 2px; }
+    .fc .fc-col-header-cell-cushion { font-size: .75rem; padding: 4px 0; }
+    .fc .fc-event-title { font-size: .72rem; }
+    /* Avoid horizontal scroll */
+    .fc { overflow-x: hidden; }
+    .fc .fc-scrollgrid, .fc .fc-scrollgrid table { width: 100% !important; }
+  }
+</style>
+