nodebb-plugin-calendar-onekite 11.2.32 → 12.0.0

package/CHANGELOG.md

@@ -1,8 +1,11 @@
+## 1.1.0
+### Perf / prod (NodeBB v4)
+- FullCalendar : passage au CDN **@latest** et utilisation de `main.min.css` (supprime l’erreur 404 `index.global.min.css`).
+- API `events` : payload allégé (les détails sont chargés à la demande), tri stable.
+- Cache intelligent : support **ETag** côté serveur + requêtes conditionnelles côté client (réduit les transferts lors des refetch).
+- Prefetch : préchargement du mois précédent/suivant (si l’utilisateur navigue, la vue est instantanée).
+- Robustesse : anti double-refetch (debounce sur les updates socket) et annulation des fetch concurrents.
 
-## 1.0.2
-- Front : empêche la double initialisation du calendrier (évite le clignotement au chargement / après actions).
-- ACP (NodeBB v4) : init robuste via `hooks.on('action:ajaxify.end')` + garde-fou anti double-bind (évite les multi-popups).
-- Maintenance : suppression du mapping module ACP legacy (`../admin/plugins/...`).
 
 ## 1.0.1.1
 - ACP (NodeBB v4) : empêche l’affichage multiple des popups de succès lors de l’enregistrement (déduplication des alerts).

package/lib/api.js

@@ -252,6 +252,12 @@ function eventsForSpecial(ev) {
 
 const api = {};
 
+function computeEtag(payload) {
+  // Weak ETag is fine here: it is only used to skip identical JSON payloads.
+  const hash = crypto.createHash('sha1').update(JSON.stringify(payload)).digest('hex');
+  return `W/"${hash}"`;
+}
+
 api.getEvents = async function (req, res) {
   const startTs = toTs(req.query.start) || 0;
   const endTs = toTs(req.query.end) || (Date.now() + 365 * 24 * 3600 * 1000);
@@ -276,22 +282,35 @@ api.getEvents = async function (req, res) {
     if (!(rStart < endTs && startTs < rEnd)) continue; // overlap check
     const evs = eventsFor(r);
     for (const ev of evs) {
-      ev.extendedProps = ev.extendedProps || {};
-      ev.extendedProps.canModerate = canMod;
-      ev.extendedProps.total = r.total || 0;
-      // Expose reserver username to owner/moderators for popup display
+      const p = ev.extendedProps || {};
+      const minimal = {
+        id: ev.id,
+        title: ev.title,
+        backgroundColor: ev.backgroundColor,
+        borderColor: ev.borderColor,
+        textColor: ev.textColor,
+        allDay: ev.allDay,
+        start: ev.start,
+        end: ev.end,
+        extendedProps: {
+          type: 'reservation',
+          rid: p.rid,
+          status: p.status,
+          uid: p.uid,
+          canModerate: canMod,
+        },
+      };
+      // Only expose username on the event list to owner/moderators.
       if (r.username && ((req.uid && String(req.uid) === String(r.uid)) || canMod)) {
-        ev.extendedProps.username = String(r.username);
+        minimal.extendedProps.username = String(r.username);
       }
-
-      ev.extendedProps.createdAt = r.createdAt || null;
-      // Expose payment URL only to the requester (or moderators) when awaiting payment
+      // Let the UI decide if a "Payer" button might exist, without exposing the URL in list.
       if (r.status === 'awaiting_payment' && r.paymentUrl && (/^https?:\/\//i).test(String(r.paymentUrl))) {
         if ((req.uid && String(req.uid) === String(r.uid)) || canMod) {
-          ev.extendedProps.paymentUrl = String(r.paymentUrl);
+          minimal.extendedProps.hasPayment = true;
         }
       }
-      out.push(ev);
+      out.push(minimal);
     }
   }
 
@@ -304,19 +323,124 @@ api.getEvents = async function (req, res) {
       const sStart = parseInt(sev.start, 10);
       const sEnd = parseInt(sev.end, 10);
       if (!(sStart < endTs && startTs < sEnd)) continue;
-      const ev = eventsForSpecial(sev);
-      ev.extendedProps.canCreateSpecial = canSpecialCreate;
-      ev.extendedProps.canDeleteSpecial = canSpecialDelete;
-      // Show creator username only to moderators/allowed users
+      const full = eventsForSpecial(sev);
+      const minimal = {
+        id: full.id,
+        title: full.title,
+        allDay: full.allDay,
+        start: full.start,
+        end: full.end,
+        backgroundColor: full.backgroundColor,
+        borderColor: full.borderColor,
+        textColor: full.textColor,
+        extendedProps: {
+          type: 'special',
+          eid: sev.eid,
+          canCreateSpecial: canSpecialCreate,
+          canDeleteSpecial: canSpecialDelete,
+        },
+      };
       if (sev.username && (canMod || canSpecialDelete || (req.uid && String(req.uid) === String(sev.uid)))) {
-        ev.extendedProps.username = String(sev.username);
+        minimal.extendedProps.username = String(sev.username);
       }
-      out.push(ev);
+      out.push(minimal);
     }
   } catch (e) {
     // ignore
   }
-  res.json(out);
+
+  // Stable ordering -> stable ETag
+  out.sort((a, b) => {
+    const as = String(a.start || '');
+    const bs = String(b.start || '');
+    if (as !== bs) return as < bs ? -1 : 1;
+    const ai = String(a.id || '');
+    const bi = String(b.id || '');
+    return ai < bi ? -1 : ai > bi ? 1 : 0;
+  });
+
+  const etag = computeEtag(out);
+  res.setHeader('ETag', etag);
+  res.setHeader('Cache-Control', 'private, max-age=0, must-revalidate');
+  if (String(req.headers['if-none-match'] || '') === etag) {
+    return res.status(304).end();
+  }
+
+  return res.json(out);
+};
+
+api.getReservationDetails = async function (req, res) {
+  const uid = req.uid;
+  if (!uid) return res.status(401).json({ error: 'not-logged-in' });
+
+  const settings = await meta.settings.get('calendar-onekite');
+  const canMod = await canValidate(uid, settings);
+
+  const rid = String(req.params.rid || '').trim();
+  if (!rid) return res.status(400).json({ error: 'missing-rid' });
+  const r = await dbLayer.getReservation(rid);
+  if (!r) return res.status(404).json({ error: 'not-found' });
+
+  const isOwner = String(r.uid) === String(uid);
+  if (!isOwner && !canMod) return res.status(403).json({ error: 'not-allowed' });
+
+  const out = {
+    rid: r.rid,
+    status: r.status,
+    uid: r.uid,
+    username: r.username || '',
+    itemNames: Array.isArray(r.itemNames) ? r.itemNames : (r.itemName ? [r.itemName] : []),
+    itemIds: Array.isArray(r.itemIds) ? r.itemIds : (r.itemId ? [r.itemId] : []),
+    start: r.start,
+    end: r.end,
+    approvedByUsername: r.approvedByUsername || '',
+    pickupAddress: r.pickupAddress || '',
+    pickupTime: r.pickupTime || '',
+    pickupLat: r.pickupLat || '',
+    pickupLon: r.pickupLon || '',
+    notes: r.notes || '',
+    refusedReason: r.refusedReason || '',
+    total: r.total || 0,
+    canModerate: canMod,
+  };
+
+  if (r.status === 'awaiting_payment' && r.paymentUrl && (/^https?:\/\//i).test(String(r.paymentUrl))) {
+    out.paymentUrl = String(r.paymentUrl);
+  }
+
+  return res.json(out);
+};
+
+api.getSpecialEventDetails = async function (req, res) {
+  const uid = req.uid;
+  if (!uid) return res.status(401).json({ error: 'not-logged-in' });
+
+  const settings = await meta.settings.get('calendar-onekite');
+  const canMod = await canValidate(uid, settings);
+  const canSpecialDelete = await canDeleteSpecial(uid, settings);
+
+  const eid = String(req.params.eid || '').trim();
+  if (!eid) return res.status(400).json({ error: 'missing-eid' });
+  const ev = await dbLayer.getSpecialEvent(eid);
+  if (!ev) return res.status(404).json({ error: 'not-found' });
+
+  // Anyone who can see the calendar can view special events, but creator username
+  // is only visible to moderators/allowed users or the creator.
+  const out = {
+    eid: ev.eid,
+    title: ev.title || '',
+    start: ev.start,
+    end: ev.end,
+    address: ev.address || '',
+    lat: ev.lat || '',
+    lon: ev.lon || '',
+    notes: ev.notes || '',
+    canDeleteSpecial: canSpecialDelete,
+  };
+  if (ev.username && (canMod || canSpecialDelete || (uid && String(uid) === String(ev.uid)))) {
+    out.username = String(ev.username);
+  }
+  return res.json(out);
 };
 
 api.getCapabilities = async function (req, res) {

package/library.js

@@ -66,11 +66,13 @@ Plugin.init = async function (params) {
   router.get('/api/v3/plugins/calendar-onekite/capabilities', ...publicExpose, api.getCapabilities);
 
   router.post('/api/v3/plugins/calendar-onekite/reservations', ...publicExpose, api.createReservation);
+  router.get('/api/v3/plugins/calendar-onekite/reservations/:rid', ...publicExpose, api.getReservationDetails);
   router.put('/api/v3/plugins/calendar-onekite/reservations/:rid/approve', ...publicExpose, api.approveReservation);
   router.put('/api/v3/plugins/calendar-onekite/reservations/:rid/refuse', ...publicExpose, api.refuseReservation);
   router.put('/api/v3/plugins/calendar-onekite/reservations/:rid/cancel', ...publicExpose, api.cancelReservation);
 
   router.post('/api/v3/plugins/calendar-onekite/special-events', ...publicExpose, api.createSpecialEvent);
+  router.get('/api/v3/plugins/calendar-onekite/special-events/:eid', ...publicExpose, api.getSpecialEventDetails);
   router.delete('/api/v3/plugins/calendar-onekite/special-events/:eid', ...publicExpose, api.deleteSpecialEvent);
 
   // Admin API (JSON)

package/package.json

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

package/plugin.json

@@ -22,6 +22,7 @@
   },
   "templates": "./templates",
   "modules": {
+    "../admin/plugins/calendar-onekite.js": "./public/admin.js",
     "admin/plugins/calendar-onekite": "./public/admin.js"
   },
   "scripts": [
@@ -30,5 +31,5 @@
   "acpScripts": [
     "public/admin.js"
   ],
-  "version": "1.0.2"
+  "version": "1.0.1.1"
 }

package/public/admin.js

@@ -1,5 +1,5 @@
 
-define('admin/plugins/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alerts, bootbox, hooks) {
+define('admin/plugins/calendar-onekite', ['alerts', 'bootbox'], function (alerts, bootbox) {
   'use strict';
 
   // Cache of pending reservations keyed by rid so delegated click handlers
@@ -335,12 +335,6 @@ define('admin/plugins/calendar-onekite', ['alerts', 'bootbox', 'hooks'], functio
     const form = document.getElementById('onekite-settings-form');
     if (!form) return;
 
-    // Avoid duplicate listeners/toasts when revisiting the ACP page via ajaxify.
-    if (form.getAttribute('data-onekite-bound') === '1') {
-      return;
-    }
-    form.setAttribute('data-onekite-bound', '1');
-
     // Make the HelloAsso debug output readable in both light and dark ACP themes.
     // NodeBB 4.x uses Bootstrap variables, so we can rely on CSS variables here.
     (function injectAdminCss() {
@@ -807,20 +801,5 @@ define('admin/plugins/calendar-onekite', ['alerts', 'bootbox', 'hooks'], functio
     }
   }
 
-  // Auto-init when navigating in ACP via ajaxify.
-  try {
-    const autoInit = function (data) {
-      const tpl = data && data.template ? data.template.name : (window.ajaxify && ajaxify.data && ajaxify.data.template ? ajaxify.data.template.name : '');
-      if (tpl === 'admin/plugins/calendar-onekite') {
-        init();
-      }
-    };
-    if (hooks && typeof hooks.on === 'function') {
-      hooks.on('action:ajaxify.end', autoInit);
-    }
-    // Also try once for the initial render.
-    setTimeout(() => autoInit({ template: (window.ajaxify && ajaxify.data && ajaxify.data.template) || { name: '' } }), 0);
-  } catch (e) {}
-
   return { init };
 });

package/public/client.js

@@ -434,6 +434,69 @@ define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alert
     return await res.json();
   }
 
+  // Simple in-memory cache for JSON endpoints (used for events prefetch + ETag).
+  const jsonCache = new Map(); // url -> { etag, data, ts }
+
+  function scheduleRefetch(cal) {
+    try {
+      if (!cal || typeof cal.refetchEvents !== 'function') return;
+      clearTimeout(window.__onekiteRefetchTimer);
+      window.__onekiteRefetchTimer = setTimeout(() => {
+        try { cal.refetchEvents(); } catch (e) {}
+      }, 150);
+    } catch (e) {}
+  }
+
+  async function fetchJsonCached(url, opts) {
+    const cached = jsonCache.get(url);
+    const headers = Object.assign({}, (opts && opts.headers) || {});
+    if (cached && cached.etag) {
+      headers['If-None-Match'] = cached.etag;
+    }
+    let res;
+    try {
+      res = await fetch(url, {
+        credentials: 'same-origin',
+        headers: (() => {
+          // reuse csrf header builder (fetchJson) by calling it indirectly
+          const base = { 'Content-Type': 'application/json' };
+          const token =
+            (window.config && (window.config.csrf_token || window.config.csrfToken)) ||
+            (window.ajaxify && window.ajaxify.data && window.ajaxify.data.csrf_token) ||
+            (document.querySelector('meta[name="csrf-token"]') && document.querySelector('meta[name="csrf-token"]').getAttribute('content')) ||
+            (document.querySelector('meta[name="csrf_token"]') && document.querySelector('meta[name="csrf_token"]').getAttribute('content')) ||
+            (typeof app !== 'undefined' && app && app.csrfToken) ||
+            null;
+          if (token) base['x-csrf-token'] = token;
+          return Object.assign(base, headers);
+        })(),
+        ...opts,
+      });
+    } catch (e) {
+      // If offline and we have cache, use it.
+      if (cached && cached.data) return cached.data;
+      throw e;
+    }
+
+    if (res.status === 304 && cached && cached.data) {
+      return cached.data;
+    }
+
+    if (!res.ok) {
+      let payload = null;
+      try { payload = await res.json(); } catch (e) {}
+      const err = new Error(`${res.status}`);
+      err.status = res.status;
+      err.payload = payload;
+      throw err;
+    }
+
+    const data = await res.json();
+    const etag = res.headers.get('ETag') || '';
+    jsonCache.set(url, { etag, data, ts: Date.now() });
+    return data;
+  }
+
   async function loadCapabilities() {
     return await fetchJson('/api/v3/plugins/calendar-onekite/capabilities');
   }
@@ -828,12 +891,6 @@ function toDatetimeLocalValue(date) {
       return;
     }
 
-    // Avoid double init (ajaxify + initial load tick).
-    if (el.getAttribute('data-onekite-initialised') === '1') {
-      return;
-    }
-    el.setAttribute('data-onekite-initialised', '1');
-
     if (typeof FullCalendar === 'undefined') {
       showAlert('error', 'FullCalendar non chargé');
       return;
@@ -1015,8 +1072,32 @@ function toDatetimeLocalValue(date) {
       selectMirror: true,
       events: async function (info, successCallback, failureCallback) {
         try {
+          // Abort previous in-flight events fetch to avoid "double refresh" effects.
+          if (window.__onekiteEventsAbort) {
+            try { window.__onekiteEventsAbort.abort(); } catch (e) {}
+          }
+          const abort = new AbortController();
+          window.__onekiteEventsAbort = abort;
+
           const qs = new URLSearchParams({ start: info.startStr, end: info.endStr });
-          const data = await fetchJson(`/api/v3/plugins/calendar-onekite/events?${qs.toString()}`);
+          const url = `/api/v3/plugins/calendar-onekite/events?${qs.toString()}`;
+          const data = await fetchJsonCached(url, { signal: abort.signal });
+
+          // Prefetch adjacent range (previous/next) for snappier navigation.
+          try {
+            const spanMs = (info.end && info.start) ? (info.end.getTime() - info.start.getTime()) : 0;
+            if (spanMs > 0 && spanMs < 1000 * 3600 * 24 * 120) {
+              const prevStart = new Date(info.start.getTime() - spanMs);
+              const prevEnd = new Date(info.start.getTime());
+              const nextStart = new Date(info.end.getTime());
+              const nextEnd = new Date(info.end.getTime() + spanMs);
+              const toStr = (d) => new Date(d.getTime()).toISOString();
+              const qPrev = new URLSearchParams({ start: toStr(prevStart), end: toStr(prevEnd) });
+              const qNext = new URLSearchParams({ start: toStr(nextStart), end: toStr(nextEnd) });
+              fetchJsonCached(`/api/v3/plugins/calendar-onekite/events?${qPrev.toString()}`).catch(() => {});
+              fetchJsonCached(`/api/v3/plugins/calendar-onekite/events?${qNext.toString()}`).catch(() => {});
+            }
+          } catch (e) {}
 
           // IMPORTANT: align "special" event display exactly like reservation icons.
           // We inject the clock + time range directly into the event title so FC
@@ -1192,9 +1273,33 @@ function toDatetimeLocalValue(date) {
       },
 
       eventClick: async function (info) {
+        if (isDialogOpen) return;
+        isDialogOpen = true;
         const ev = info.event;
-        const p = ev.extendedProps || {};
-        if (p.type === 'special') {
+        const p0 = ev.extendedProps || {};
+
+        // Load full details lazily (events list is lightweight for perf).
+        let p = p0;
+        try {
+          if (p0.type === 'reservation' && p0.rid) {
+            const details = await fetchJson(`/api/v3/plugins/calendar-onekite/reservations/${encodeURIComponent(String(p0.rid))}`);
+            p = Object.assign({}, p0, details);
+          } else if (p0.type === 'special' && p0.eid) {
+            const details = await fetchJson(`/api/v3/plugins/calendar-onekite/special-events/${encodeURIComponent(String(p0.eid))}`);
+            p = Object.assign({}, p0, details, {
+              // keep backward compat with older field names used by templates below
+              pickupAddress: details.address || details.pickupAddress || p0.pickupAddress,
+              pickupLat: details.lat || details.pickupLat || p0.pickupLat,
+              pickupLon: details.lon || details.pickupLon || p0.pickupLon,
+            });
+          }
+        } catch (e) {
+          // ignore detail fetch errors; fall back to minimal props
+          p = p0;
+        }
+
+        try {
+          if (p.type === 'special') {
           const username = String(p.username || '').trim();
           const userLine = username
             ? `<div class="mb-2"><strong>Créé par</strong><br><a class="onekite-user-link" href="${window.location.origin}/user/${encodeURIComponent(username)}">${escapeHtml(username)}</a></div>`
@@ -1541,6 +1646,9 @@ function toDatetimeLocalValue(date) {
           message: baseHtml,
           buttons,
         });
+        } finally {
+          isDialogOpen = false;
+        }
       },
     });
 
@@ -1662,12 +1770,10 @@ function toDatetimeLocalValue(date) {
 try {
   if (!window.__oneKiteSocketBound && typeof socket !== 'undefined' && socket && typeof socket.on === 'function') {
     window.__oneKiteSocketBound = true;
-    socket.on('event:calendar-onekite.reservationUpdated', function (data) {
+    socket.on('event:calendar-onekite.reservationUpdated', function () {
       try {
         const cal = window.oneKiteCalendar;
-        if (cal && typeof cal.refetchEvents === 'function') {
-          cal.refetchEvents();
-        }
+        scheduleRefetch(cal);
       } catch (e) {}
     });
   }

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

@@ -180,14 +180,11 @@
 </div>
 
 <script>
-  // NodeBB v4: prefer auto-init via ajaxify hook, but keep a safe fallback.
-  if (window.require) {
-    require(['admin/plugins/calendar-onekite'], function (mod) {
-      if (mod && mod.init) {
-        mod.init();
-      }
-    });
-  }
+  require(['admin/plugins/calendar-onekite'], function (mod) {
+    if (mod && mod.init) {
+      mod.init();
+    }
+  });
 </script>
 
 <!-- IMPORT admin/partials/settings/footer.tpl -->

package/templates/calendar-onekite.tpl

@@ -7,9 +7,14 @@
   </div>
 </div>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.11/locales-all.global.min.js"></script>
+<!--
+  FullCalendar
+  - Use CDN "latest" so NodeBB v4 stays simple to maintain.
+  - Use main.min.css (the global bundle does not ship index.global.min.css).
+-->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@latest/main.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/fullcalendar@latest/index.global.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@latest/locales-all.global.min.js"></script>
 
 <!--
   No inline require() here.