nodebb-plugin-equipment-calendar 0.3.0 → 0.4.1

package/library.js

@@ -402,6 +402,7 @@ async function renderAdminPage(req, res) {
   res.render('admin/plugins/equipment-calendar', {
     title: 'Equipment Calendar',
     settings,
+    saved: req.query && String(req.query.saved || '') === '1',
     view_dayGridMonth: (settings.defaultView || 'dayGridMonth') === 'dayGridMonth',
     view_timeGridWeek: (settings.defaultView || '') === 'timeGridWeek',
     view_timeGridDay: (settings.defaultView || '') === 'timeGridDay',
@@ -708,7 +709,7 @@ async function handleAdminSave(req, res) {
     };
 
     await meta.settings.set(SETTINGS_KEY, values);
-    return res.redirect('/admin/plugins/equipment-calendar');
+    return res.redirect('/admin/plugins/equipment-calendar?saved=1');
   } catch (e) {
     return res.status(500).send(e.message || 'error');
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-equipment-calendar",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Equipment reservation calendar for NodeBB (FullCalendar, approvals, HelloAsso payments)",
   "main": "library.js",
   "scripts": {

package/plugin.json

@@ -26,6 +26,6 @@
   "scripts": [
     "public/js/client.js"
   ],
-  "version": "0.2.2",
+  "version": "0.2.5",
   "minver": "4.7.1"
 }

package/public/js/client.js

@@ -1,5 +1,5 @@
 'use strict';
-/* global window, document, FullCalendar, bootstrap */
+/* global window, document, FullCalendar, bootbox */
 
 (function () {
   function overlaps(aStartMs, aEndMs, bStartMs, bEndMs) {
@@ -14,28 +14,7 @@
     }
   }
 
-  function openModal(startISO, endISO) {
-    const form = document.getElementById('ec-create-form');
-    if (!form) return;
-
-    const startDate = new Date(startISO);
-    const endDate = new Date(endISO);
-    const startMs = startDate.getTime();
-    const endMs = endDate.getTime();
-
-    // write hidden ISO values
-    const startInput = form.querySelector('input[name="start"]');
-    const endInput = form.querySelector('input[name="end"]');
-    if (startInput) startInput.value = startDate.toISOString();
-    if (endInput) endInput.value = endDate.toISOString();
-
-    // displays
-    const sDisp = document.getElementById('ecStartDisplay');
-    const eDisp = document.getElementById('ecEndDisplay');
-    if (sDisp) sDisp.value = fmt(startDate);
-    if (eDisp) eDisp.value = fmt(endDate);
-
-    // compute availability
+  function buildAvailability(startMs, endMs) {
     const blocks = Array.isArray(window.EC_BLOCKS) ? window.EC_BLOCKS : [];
     const items = Array.isArray(window.EC_ITEMS) ? window.EC_ITEMS : [];
 
@@ -51,32 +30,99 @@
       const hasOverlap = bks.some(b => overlaps(startMs, endMs, Number(b.startMs), Number(b.endMs)));
       if (!hasOverlap) available.push(it);
     }
+    return available;
+  }
+
+  function submitReservation(startISO, endISO, itemId, notes) {
+    const form = document.getElementById('ec-create-form');
+    if (!form) return;
+
+    const startInput = form.querySelector('input[name="start"]');
+    const endInput = form.querySelector('input[name="end"]');
+    const itemInput = form.querySelector('input[name="itemId"]');
+    const notesInput = form.querySelector('input[name="notesUser"]');
+
+    if (startInput) startInput.value = startISO;
+    if (endInput) endInput.value = endISO;
+    if (itemInput) itemInput.value = itemId;
+    if (notesInput) notesInput.value = notes || '';
+
+    form.submit();
+  }
+
+  function openNodeBBModal(startISO, endISO) {
+    const startDate = new Date(startISO);
+    const endDate = new Date(endISO);
+    const startMs = startDate.getTime();
+    const endMs = endDate.getTime();
 
-    const select = document.getElementById('ecItemSelect');
-    const hint = document.getElementById('ecItemHint');
-    const noAvail = document.getElementById('ecNoAvailability');
-    const submitBtn = document.getElementById('ecSubmitBtn');
-
-    if (select) {
-      select.innerHTML = '';
-      for (const it of available) {
-        const opt = document.createElement('option');
-        opt.value = it.id;
-        opt.textContent = it.location ? `${it.name} — ${it.location}` : it.name;
-        select.appendChild(opt);
+    const available = buildAvailability(startMs, endMs);
+
+    if (!available.length) {
+      if (typeof bootbox !== 'undefined') {
+        bootbox.alert('Aucun matériel n’est disponible sur cette plage.');
+      } else {
+        alert('Aucun matériel n’est disponible sur cette plage.');
       }
+      return;
     }
 
-    const hasAny = available.length > 0;
-    if (hint) hint.textContent = hasAny ? '' : '';
-    if (noAvail) noAvail.classList.toggle('d-none', hasAny);
-    if (submitBtn) submitBtn.disabled = !hasAny;
+    // Build modal HTML
+    let optionsHtml = '';
+    for (const it of available) {
+      const label = it.location ? `${it.name} — ${it.location}` : it.name;
+      optionsHtml += `<option value="${it.id}">${label}</option>`;
+    }
 
-    // show modal
-    const modalEl = document.getElementById('ecReserveModal');
-    if (!modalEl) return;
-    const modal = bootstrap ? bootstrap.Modal.getOrCreateInstance(modalEl) : null;
-    if (modal) modal.show();
+    const body = `
+      <div class="mb-3">
+        <label class="form-label">Début</label>
+        <input class="form-control" type="text" value="${fmt(startDate)}" readonly>
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Fin</label>
+        <input class="form-control" type="text" value="${fmt(endDate)}" readonly>
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Matériel</label>
+        <select class="form-select" id="ec-modal-item">
+          ${optionsHtml}
+        </select>
+      </div>
+      <div class="mb-3">
+        <label class="form-label">Note (optionnel)</label>
+        <input class="form-control" type="text" id="ec-modal-notes" maxlength="2000" placeholder="Ex: besoin de trépied, etc.">
+      </div>
+    `;
+
+    if (typeof bootbox === 'undefined') {
+      // Fallback without bootbox (should be rare on NodeBB pages)
+      const itemId = available[0].id;
+      submitReservation(startDate.toISOString(), endDate.toISOString(), itemId, '');
+      return;
+    }
+
+    bootbox.dialog({
+      title: 'Demande de réservation',
+      message: body,
+      buttons: {
+        cancel: {
+          label: 'Annuler',
+          className: 'btn-outline-secondary',
+        },
+        ok: {
+          label: 'Envoyer la demande',
+          className: 'btn-primary',
+          callback: function () {
+            const itemEl = document.getElementById('ec-modal-item');
+            const notesEl = document.getElementById('ec-modal-notes');
+            const itemId = itemEl ? itemEl.value : available[0].id;
+            const notes = notesEl ? notesEl.value : '';
+            submitReservation(startDate.toISOString(), endDate.toISOString(), itemId, notes);
+          }
+        }
+      }
+    });
   }
 
   function initCalendar() {
@@ -94,15 +140,20 @@
       selectable: window.EC_CAN_CREATE === true,
       selectMirror: true,
       events: events,
+
+      // Range selection (drag)
       select: function (info) {
-        openModal(info.startStr, info.endStr);
+        openNodeBBModal(info.startStr, info.endStr);
       },
+
+      // Single date click
       dateClick: function (info) {
-        // default 1 hour
+        // Default: 1h slot
         const start = info.date;
         const end = new Date(start.getTime() + 60 * 60 * 1000);
-        openModal(start.toISOString(), end.toISOString());
+        openNodeBBModal(start.toISOString(), end.toISOString());
       },
+
       headerToolbar: {
         left: 'prev,next today',
         center: 'title',

package/public/templates/admin/plugins/equipment-calendar.tpl

@@ -1,7 +1,21 @@
 <div class="acp-page-container">
   <h1>Equipment Calendar</h1>
 
-  <form method="post" action="/admin/plugins/equipment-calendar/save" class="mb-3">
+  {{{ if saved }}}
+  <div class="alert alert-success">Paramètres enregistrés.</div>
+  <script>
+  (function () {
+    try {
+      if (window.app && window.app.alertSuccess) {
+        window.app.alertSuccess('Paramètres enregistrés');
+      }
+    } catch (e) {}
+  }());
+  </script>
+  {{{ end }}}
+
+
+  <form id="ec-admin-form" method="post" action="/admin/plugins/equipment-calendar/save" class="mb-3">
     <input type="hidden" name="_csrf" value="{config.csrf_token}">
 
     <div class="alert alert-warning">
@@ -60,6 +74,25 @@
       <div class="mb-3"><label class="form-label">Timezone</label><input name="timezone" class="form-control" value="{settings.timezone}"></div>
     </div>
 
-    <button class="btn btn-primary" type="submit">Sauvegarder</button>
+    <button id="ec-save" class="btn btn-primary" type="button">Sauvegarder</button>
   </form>
 </div>
+
+<script>
+(function () {
+  function ready(fn){ if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn); else fn(); }
+  ready(function () {
+    var btn = document.getElementById('ec-save');
+    var form = document.getElementById('ec-admin-form');
+    if (!btn || !form) { return; }
+    btn.addEventListener('click', function () {
+      try {
+        form.submit();
+      } catch (e) {
+        console.error(e);
+        alert('Erreur lors de la soumission du formulaire (voir console).');
+      }
+    });
+  });
+}());
+</script>

package/public/templates/equipment-calendar/calendar.tpl

@@ -12,56 +12,18 @@
   <div class="card card-body">
     <div id="equipment-calendar"></div>
   </div>
-</div>
-
-<!-- Modal de réservation -->
-<div class="modal fade" id="ecReserveModal" tabindex="-1" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <form id="ec-create-form" method="post" action="/equipment/reservations/create">
-        <div class="modal-header">
-          <h5 class="modal-title">Demande de réservation</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
-        </div>
-        <div class="modal-body">
-          <input type="hidden" name="_csrf" value="{config.csrf_token}">
-          <input type="hidden" name="start" value="">
-          <input type="hidden" name="end" value="">
-
-          <div class="mb-3">
-            <label class="form-label">Début</label>
-            <input type="text" class="form-control" id="ecStartDisplay" readonly>
-          </div>
-          <div class="mb-3">
-            <label class="form-label">Fin</label>
-            <input type="text" class="form-control" id="ecEndDisplay" readonly>
-          </div>
 
-          <div class="mb-3">
-            <label class="form-label">Matériel disponible</label>
-            <select class="form-select" name="itemId" id="ecItemSelect" required></select>
-            <div class="form-text" id="ecItemHint"></div>
-          </div>
-
-          <div class="mb-3">
-            <label class="form-label">Note (optionnel)</label>
-            <input class="form-control" type="text" name="notesUser" maxlength="2000" placeholder="Ex: besoin de trépied, etc.">
-          </div>
-
-          <div class="alert alert-warning d-none" id="ecNoAvailability">
-            Aucun matériel n’est disponible sur cette plage.
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
-          <button type="submit" class="btn btn-primary" id="ecSubmitBtn">Envoyer la demande</button>
-        </div>
-      </form>
-    </div>
-  </div>
+  <!-- Formulaire de soumission (utilisé par la modale JS) -->
+  <form id="ec-create-form" method="post" action="/equipment/reservations/create" class="d-none">
+    <input type="hidden" name="_csrf" value="{config.csrf_token}">
+    <input type="hidden" name="start" value="">
+    <input type="hidden" name="end" value="">
+    <input type="hidden" name="itemId" value="">
+    <input type="hidden" name="notesUser" value="">
+  </form>
 </div>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.19/index.global.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js"></script>
 <script src="/plugins/nodebb-plugin-equipment-calendar/js/client.js"></script>
 
 <script>