nodebb-plugin-calendar-onekite 11.1.21 → 11.1.23

package/public/client.js

@@ -1,161 +1,224 @@
-/* global FullCalendar, ajaxify */
+/* globals define, require */
+'use strict';
 
-define('forum/calendar-onekite', ['alerts', 'bootbox', 'hooks'], function (alerts, bootbox, hooks) {
-  'use strict';
-
-  function showAlert(type, msg) {
-    try {
-      if (alerts && typeof alerts[type] === 'function') {
-        alerts[type](msg);
-        return;
-      }
-    } catch (e) {}
-    alert(msg);
+define('forum/calendar-onekite', ['api', 'bootbox', 'alerts', 'hooks'], function (api, bootbox, alerts, hooks) {
+  function fmtEuros(cents) {
+    const v = (Number(cents || 0) / 100);
+    return v.toLocaleString(undefined, { style: 'currency', currency: 'EUR' });
   }
 
-  async function fetchJson(url, opts) {
-    const res = await fetch(url, {
-      credentials: 'same-origin',
-      headers: { 'Content-Type': 'application/json' },
-      ...opts,
-    });
-    if (!res.ok) {
-      throw new Error(`${res.status}`);
-    }
-    return await res.json();
+  function daysBetween(startStr, endStr) {
+    const s = new Date(startStr + 'T00:00:00Z');
+    const e = new Date(endStr + 'T00:00:00Z');
+    const d = Math.max(1, Math.round((e - s) / 86400000));
+    return d;
   }
 
-  async function loadItems() {
-    try {
-      return await fetchJson('/api/v3/plugins/calendar-onekite/items');
-    } catch (e) {
-      return [];
-    }
+  async function loadCatalog() {
+    const res = await fetch('/api/v3/plugins/calendar-onekite/catalog', { credentials: 'same-origin' })
+      .catch(() => null);
+    if (res && res.ok) return (await res.json()).items || [];
+    const res2 = await fetch('/api/plugins/calendar-onekite/catalog', { credentials: 'same-origin' });
+    const j = await res2.json();
+    return j.items || [];
   }
 
-  async function requestReservation(payload) {
-    return await fetchJson('/api/v3/plugins/calendar-onekite/reservations', {
-      method: 'POST',
-      body: JSON.stringify(payload),
+  function showReservationModal(selection, catalog, onSubmit) {
+    const start = selection.startStr; // YYYY-MM-DD
+    const end = selection.endStr;     // YYYY-MM-DD (exclusive)
+    const days = daysBetween(start, end);
+
+    const rows = catalog.map((it) => {
+      const price = fmtEuros(it.priceCents || 0);
+      return `<div class="onekite-item-row d-flex justify-content-between align-items-center py-1" data-id="${it.id}" data-price="${it.priceCents || 0}">
+        <label class="mb-0 d-flex align-items-center gap-2" style="cursor:pointer;">
+          <input type="checkbox" class="onekite-item-check" data-id="${it.id}">
+          <span>${it.name}</span>
+        </label>
+        <span class="text-muted">${price}</span>
+      </div>`;
+    }).join('');
+
+    const html = `
+      <div>
+        <div class="mb-2"><strong>Dates :</strong> ${start} → ${end} (${days} jour(s))</div>
+        <div class="mb-2 text-muted small">Sélectionne un ou plusieurs matériels. (Tu peux aussi Ctrl+clic sur une ligne.)</div>
+        <div class="border rounded p-2" style="max-height: 240px; overflow:auto;" id="onekite-item-list">${rows || '<div class="text-muted">Aucun matériel</div>'}</div>
+        <div class="mt-3 d-flex justify-content-between align-items-center">
+          <div><strong>Total estimé :</strong> <span id="onekite-total">0 €</span></div>
+          <div class="text-muted small">prix/jour × ${days}</div>
+        </div>
+      </div>
+    `;
+
+    const dialog = bootbox.dialog({
+      title: 'Demande de réservation',
+      message: html,
+      buttons: {
+        cancel: { label: 'Annuler', className: 'btn-secondary' },
+        ok: {
+          label: 'Envoyer',
+          className: 'btn-primary',
+          callback: function () {
+            const checks = dialog.find('.onekite-item-check:checked');
+            const ids = Array.from(checks).map(c => c.getAttribute('data-id'));
+            if (!ids.length) {
+              alerts.error('Sélectionne au moins un matériel.');
+              return false;
+            }
+            onSubmit({ start, end, itemIds: ids, days });
+            return false; // keep open; we'll close manually on success
+          },
+        },
+      },
     });
-  }
 
-  function formatDt(d) {
-    try {
-      return new Date(d).toLocaleString();
-    } catch (e) {
-      return String(d);
+    function computeTotal() {
+      const selected = dialog.find('.onekite-item-check:checked');
+      let sum = 0;
+      selected.each(function () {
+        const id = this.getAttribute('data-id');
+        const row = dialog.find(`.onekite-item-row[data-id="${id}"]`);
+        sum += Number(row.attr('data-price') || 0);
+      });
+      const total = sum * days;
+      dialog.find('#onekite-total').text(fmtEuros(total));
     }
-  }
-
-  async function openReservationDialog(selectionInfo, items) {
-    const start = selectionInfo.start;
-    const end = selectionInfo.end;
 
-    const optionsHtml = items.map(it => `<option value="${String(it.id).replace(/"/g, '&quot;')}">${it.name}</option>`).join('');
+    dialog.on('change', '.onekite-item-check', computeTotal);
 
-    return new Promise((resolve) => {
-      bootbox.dialog({
-        title: 'Demander une réservation',
-        message: `
-          <div class="mb-2"><strong>Période</strong><br>${formatDt(start)} → ${formatDt(end)}</div>
-          <div class="mb-2">
-            <label class="form-label">Matériel</label>
-            <select class="form-select" id="onekite-item">${optionsHtml}</select>
-          </div>
-        `,
-        buttons: {
-          cancel: {
-            label: 'Annuler',
-            className: 'btn-secondary',
-          },
-          ok: {
-            label: 'Envoyer',
-            className: 'btn-primary',
-            callback: function () {
-              const el = document.getElementById('onekite-item');
-              const itemId = el ? el.value : '';
-              const item = items.find(i => String(i.id) === String(itemId));
-              resolve({ itemId, itemName: item ? item.name : itemId });
-            },
-          },
-        },
-      });
+    // Ctrl+click on row toggles
+    dialog.on('click', '.onekite-item-row', function (ev) {
+      if (ev.ctrlKey || ev.metaKey) {
+        const chk = this.querySelector('.onekite-item-check');
+        chk.checked = !chk.checked;
+        computeTotal();
+      }
     });
-  }
 
-  async function init(selector) {
-    const el = document.querySelector(selector);
-    if (!el) {
-      return;
-    }
+    computeTotal();
+    return dialog;
+  }
 
-    if (typeof FullCalendar === 'undefined') {
-      showAlert('error', 'FullCalendar non chargé');
-      return;
-    }
+  async function initCalendar() {
+    const el = document.getElementById('onekite-calendar');
+    if (!el || !window.FullCalendar) return;
 
-    const items = await loadItems();
+    const catalog = await loadCatalog();
 
-    const calendar = new FullCalendar.Calendar(el, {
+    const calendar = new window.FullCalendar.Calendar(el, {
       initialView: 'dayGridMonth',
-      locale: 'fr',
       selectable: true,
       selectMirror: true,
-      events: async function (info, successCallback, failureCallback) {
-        try {
-          const qs = new URLSearchParams({ start: info.startStr, end: info.endStr });
-          const data = await fetchJson(`/api/v3/plugins/calendar-onekite/events?${qs.toString()}`);
-          successCallback(data);
-        } catch (e) {
-          failureCallback(e);
-        }
-      },
-      select: async function (info) {
+      locale: 'fr',
+      height: 'auto',
+      displayEventTime: false,
+      dayMaxEvents: true,
+      events: async function (info, success, failure) {
         try {
-          if (!items || !items.length) {
-            showAlert('error', 'Aucun matériel disponible (items HelloAsso non chargés).');
-            return;
+          const url = new URL('/api/v3/plugins/calendar-onekite/events', window.location.origin);
+          url.searchParams.set('start', info.startStr);
+          url.searchParams.set('end', info.endStr);
+          let r = await fetch(url.toString(), { credentials: 'same-origin' });
+          if (!r.ok) {
+            // fallback
+            const url2 = new URL('/api/plugins/calendar-onekite/events', window.location.origin);
+            url2.searchParams.set('start', info.startStr);
+            url2.searchParams.set('end', info.endStr);
+            r = await fetch(url2.toString(), { credentials: 'same-origin' });
           }
-          const chosen = await openReservationDialog(info, items);
-          if (!chosen || !chosen.itemId) return;
-          await requestReservation({ start: info.start, end: info.end, itemId: chosen.itemId, itemName: chosen.itemName });
-          showAlert('success', 'Demande envoyée (en attente de validation).');
-          calendar.refetchEvents();
-        } catch (e) {
-          showAlert('error', 'Impossible de créer la demande (droits/groupe ?).');
+          const j = await r.json();
+          success(j);
+        } catch (e) { failure(e); }
+      },
+      select: function (selection) {
+        if (!catalog.length) {
+          alerts.error('Aucun matériel disponible (catalogue HelloAsso non chargé).');
+          calendar.unselect();
+          return;
         }
+
+        const dialog = showReservationModal(selection, catalog, async function (payload) {
+          try {
+            let r = await fetch('/api/v3/plugins/calendar-onekite/reservations', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              credentials: 'same-origin',
+              body: JSON.stringify(payload),
+            });
+            if (!r.ok) {
+              r = await fetch('/api/plugins/calendar-onekite/reservations', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'same-origin',
+                body: JSON.stringify(payload),
+              });
+            }
+            const j = await r.json();
+            if (!j.ok) throw new Error(j?.status?.message || 'Erreur');
+            alerts.success('Demande envoyée.');
+            dialog.modal('hide');
+            calendar.unselect();
+            calendar.refetchEvents();
+          } catch (e) {
+            alerts.error(e.message || 'Erreur');
+          }
+        });
       },
-      dateClick: async function (info) {
-        // One-day selection convenience
-        const start = info.date;
-        const end = new Date(start.getTime() + 24 * 60 * 60 * 1000);
-        calendar.select(start, end);
+      eventClick: function (info) {
+        const p = info.event.extendedProps || {};
+        const items = (p.items || []).map(it => `• ${it.name}`).join('\n');
+        const total = p.totalCents ? fmtEuros(p.totalCents) : '';
+        bootbox.alert({
+          title: info.event.title,
+          message: `<pre style="white-space: pre-wrap;">${items || ''}\n\nJours: ${p.days || ''}\nTotal estimé: ${total}</pre>`,
+        });
       },
     });
 
     calendar.render();
   }
 
-  // Auto-init on /calendar when ajaxify finishes rendering.
-  function autoInit(data) {
-    try {
-      const tpl = data && data.template ? data.template.name : (ajaxify && ajaxify.data && ajaxify.data.template ? ajaxify.data.template.name : '');
-      if (tpl === 'calendar-onekite') {
-        init('#onekite-calendar');
-      }
-    } catch (e) {}
+  function loadAssetsOnce() {
+    // Load FullCalendar from CDN only once
+    if (window.FullCalendar) return Promise.resolve();
+    const css = document.createElement('link');
+    css.rel = 'stylesheet';
+    css.href = 'https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.css';
+    document.head.appendChild(css);
+
+    const js1 = document.createElement('script');
+    js1.src = 'https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js';
+    js1.async = true;
+
+    const js2 = document.createElement('script');
+    js2.src = 'https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.11/locales-all.global.min.js';
+    js2.async = true;
+
+    return new Promise((resolve) => {
+      js1.onload = () => {
+        document.head.appendChild(js2);
+        js2.onload = () => resolve();
+      };
+      document.head.appendChild(js1);
+    });
   }
 
-  if (hooks && typeof hooks.on === 'function') {
-    hooks.on('action:ajaxify.end', autoInit);
+  function onAjaxifyEnd(data) {
+    if (ajaxify?.data?.template?.name !== 'calendar-onekite') return;
+    loadAssetsOnce().then(initCalendar);
   }
 
-  // In case the page is served as the initial load (no ajaxify navigation)
-  // call once after current tick.
-  setTimeout(() => autoInit({ template: (ajaxify && ajaxify.data && ajaxify.data.template) || { name: '' } }), 0);
+  hooks.on('action:ajaxify.end', onAjaxifyEnd);
 
   return {
-    init,
+    init: function () {
+      // If landing directly
+      if (ajaxify?.data?.template?.name === 'calendar-onekite') {
+        loadAssetsOnce().then(initCalendar);
+      }
+    }
   };
 });
+
+require(['forum/calendar-onekite'], function (m) { m.init(); });

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

@@ -1,91 +1,88 @@
 <!-- IMPORT admin/partials/settings/header.tpl -->
 
 <div class="row">
-  <div class="col-lg-9">
-    <h1>Calendar OneKite</h1>
-
-    <form id="onekite-settings-form" class="mt-3">
-      <div class="mb-3">
-        <label class="form-label">Groupes autorisés à réserver (csv)</label>
-        <input class="form-control" name="allowedGroups" placeholder="ex: registered-users,membres">
-      </div>
-
-      <div class="mb-3">
-        <label class="form-label">Groupes notifiés (csv)</label>
-        <input class="form-control" name="notifyGroups" placeholder="ex: administrators">
+  <div class="col-lg-12">
+    <h2>Calendar OneKite</h2>
+
+    <ul class="nav nav-tabs mb-3" role="tablist">
+      <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#onekite-settings" role="tab">Paramètres</a></li>
+      <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#onekite-pending" role="tab">Demandes en attente</a></li>
+      <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#onekite-debug" role="tab">Debug</a></li>
+    </ul>
+
+    <div class="tab-content">
+      <div class="tab-pane fade show active" id="onekite-settings" role="tabpanel">
+        <div class="card mb-3">
+          <div class="card-body">
+            <div class="mb-3">
+              <label class="form-label">Environnement HelloAsso</label>
+              <select class="form-select" id="helloassoEnv">
+                <option value="sandbox">Sandbox</option>
+                <option value="prod">Production</option>
+              </select>
+            </div>
+
+            <div class="row">
+              <div class="col-md-6 mb-3">
+                <label class="form-label">Client ID</label>
+                <input class="form-control" id="helloassoClientId" />
+              </div>
+              <div class="col-md-6 mb-3">
+                <label class="form-label">Client Secret</label>
+                <input class="form-control" id="helloassoClientSecret" placeholder="*** pour conserver" />
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-md-4 mb-3">
+                <label class="form-label">Organization Slug</label>
+                <input class="form-control" id="helloassoOrganizationSlug" />
+              </div>
+              <div class="col-md-4 mb-3">
+                <label class="form-label">Form Type</label>
+                <input class="form-control" id="helloassoFormType" placeholder="shop" />
+              </div>
+              <div class="col-md-4 mb-3">
+                <label class="form-label">Form Slug</label>
+                <input class="form-control" id="helloassoFormSlug" />
+              </div>
+            </div>
+
+            <button class="btn btn-primary" id="onekite-save">Enregistrer</button>
+          </div>
+        </div>
+
+        <div class="card">
+          <div class="card-body">
+            <h5>Purge calendrier</h5>
+            <div class="input-group" style="max-width: 300px;">
+              <input class="form-control" id="onekite-purge-year" placeholder="YYYY" />
+              <button class="btn btn-danger" id="onekite-purge">Purger</button>
+            </div>
+            <div class="text-muted small mt-2">Supprime toutes les réservations dont le début est dans l'année donnée.</div>
+          </div>
+        </div>
       </div>
 
-      <div class="mb-3">
-        <label class="form-label">Durée de blocage en attente (minutes)</label>
-        <input class="form-control" name="pendingHoldMinutes" placeholder="5">
-      </div>
-
-      <h4 class="mt-4">HelloAsso</h4>
-
-      <div class="mb-3">
-        <label class="form-label">Environnement</label>
-        <select class="form-select" name="helloassoEnv">
-          <option value="prod">Production</option>
-          <option value="sandbox">Sandbox</option>
-        </select>
+      <div class="tab-pane fade" id="onekite-pending" role="tabpanel">
+        <div class="card">
+          <div class="card-body">
+            <div id="onekite-pending-list" class="small text-muted">Chargement…</div>
+          </div>
+        </div>
       </div>
 
-      <div class="mb-3">
-        <label class="form-label">Client ID</label>
-        <input class="form-control" name="helloassoClientId">
+      <div class="tab-pane fade" id="onekite-debug" role="tabpanel">
+        <div class="card">
+          <div class="card-body">
+            <button class="btn btn-secondary" id="onekite-debug-run">Tester le chargement du matériel (HelloAsso)</button>
+            <pre class="mt-3" id="onekite-debug-output" style="white-space: pre-wrap;"></pre>
+          </div>
+        </div>
       </div>
 
-      <div class="mb-3">
-        <label class="form-label">Client Secret</label>
-        <input class="form-control" name="helloassoClientSecret" type="password">
-      </div>
-
-      <div class="mb-3">
-        <label class="form-label">Organization Slug</label>
-        <input class="form-control" name="helloassoOrganizationSlug">
-      </div>
-
-      <div class="mb-3">
-        <label class="form-label">Form Type</label>
-        <input class="form-control" name="helloassoFormType" placeholder="membership | crowdfunding | donation | ticketing | ...">
-      </div>
-
-      <div class="mb-3">
-        <label class="form-label">Form Slug</label>
-        <input class="form-control" name="helloassoFormSlug">
-      </div>
-
-      <button type="button" class="btn btn-primary" id="onekite-save">Enregistrer</button>
-    </form>
-
-    <hr class="my-4" />
-
-    <h4>Demandes en attente</h4>
-    <div id="onekite-pending" class="list-group"></div>
-
-    <hr class="my-4" />
-
-    <h4>Purge</h4>
-    <div class="d-flex gap-2 align-items-center">
-      <input class="form-control" style="max-width: 160px;" id="onekite-purge-year" placeholder="YYYY">
-      <button type="button" class="btn btn-outline-danger" id="onekite-purge">Purger</button>
     </div>
-
-    <hr class="my-4" />
-
-    <h4>Debug HelloAsso</h4>
-    <p class="text-muted">Teste la récupération du token et la liste du matériel (items).</p>
-    <button type="button" class="btn btn-secondary" id="onekite-debug-run">Tester le chargement du matériel</button>
-    <pre id="onekite-debug-output" class="mt-3 p-3 bg-light" style="max-height: 360px; overflow: auto;"></pre>
   </div>
 </div>
 
-<script>
-  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

@@ -1,17 +1,7 @@
-<div class="container">
-  <div class="row">
-    <div class="col-12">
-      <h1>Calendrier</h1>
-      <div id="onekite-calendar" style="margin-top: 1rem;"></div>
-    </div>
+<div class="calendar-onekite-page">
+  <div class="d-flex align-items-center justify-content-between mb-3">
+    <h2 class="mb-0">Calendrier</h2>
+    <div class="text-muted small">Réservations (jours uniquement)</div>
   </div>
+  <div id="onekite-calendar"></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>
-
-<!--
-  No inline require() here.
-  The plugin's forum script auto-initialises on the calendar page via ajaxify.
--->