nodebb-plugin-equipment-calendar 0.3.1 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-equipment-calendar",
-  "version": "0.3.1",
+  "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.4",
+  "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,41 +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"]');
 
-    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);
+    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 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;
-
-    // show modal
-    const modalEl = document.getElementById('ecReserveModal');
-    if (!modalEl) return;
-    if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
-      const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
-      modal.show();
-    } else {
-      // Fallback: no bootstrap JS available, just submit directly if there is an available item
-      if (hasAny) {
-        if (confirm('Envoyer la demande de réservation pour cette plage ?')) {
-          form.submit();
+    // 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>`;
+    }
+
+    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() {
@@ -103,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/equipment-calendar/calendar.tpl

@@ -12,53 +12,15 @@
   <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://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js"></script>