nodebb-plugin-equipment-calendar 0.9.9 → 1.0.1

package/package.json

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

package/plugin.json

@@ -25,6 +25,6 @@
   "scripts": [
     "public/js/client.js"
   ],
-  "version": "0.5.9",
+  "version": "0.6.2",
   "minver": "4.7.1"
 }

package/public/js/client.js

@@ -2,6 +2,59 @@
 /* global window, document, FullCalendar, bootbox */
 
 (function () {
+  function populateItemsSelect() {
+    const sel = document.getElementById('ec-item-ids');
+    if (!sel) return;
+    const items = Array.isArray(window.EC_ITEMS) ? window.EC_ITEMS : [];
+    sel.innerHTML = '';
+    items.forEach((it) => {
+      if (!it || it.active === false) return;
+      const opt = document.createElement('option');
+      opt.value = String(it.id);
+      const p = parseFloat(it.price || '0') || 0;
+      const label = (Number.isInteger(p) ? String(p) : p.toFixed(2)) + ' €';
+      opt.textContent = `${it.name} — ${label}`;
+      opt.setAttribute('data-price', String(p));
+      sel.appendChild(opt);
+    });
+  }
+
+
+  function toUtcMidnightMs(dateObj) {
+    return Date.UTC(dateObj.getUTCFullYear(), dateObj.getUTCMonth(), dateObj.getUTCDate());
+  }
+
+  function formatDateInputValue(dateObj) {
+    // YYYY-MM-DD in UTC
+    const y = dateObj.getUTCFullYear();
+    const m = String(dateObj.getUTCMonth() + 1).padStart(2, '0');
+    const d = String(dateObj.getUTCDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+  }
+
+  function openCreateModal(startMs, endMs) {
+    const startDateEl = document.getElementById('ec-start-date');
+    const endDateEl = document.getElementById('ec-end-date');
+    const startMsEl = document.getElementById('ec-start-ms');
+    const endMsEl = document.getElementById('ec-end-ms');
+
+    if (startMsEl) startMsEl.value = String(startMs);
+    if (endMsEl) endMsEl.value = String(endMs);
+
+    // set date inputs
+    if (startDateEl) startDateEl.value = formatDateInputValue(new Date(startMs));
+    if (endDateEl) endDateEl.value = formatDateInputValue(new Date(endMs - 24*60*60*1000));
+
+    if (typeof updateTotalPrice === 'function') updateTotalPrice();
+
+    const modalEl = document.getElementById('ec-create-modal');
+    if (modalEl && window.bootstrap && window.bootstrap.Modal) {
+      const modal = window.bootstrap.Modal.getOrCreateInstance(modalEl);
+      modal.show();
+    }
+  }
+
+
   function overlaps(aStartMs, aEndMs, bStartMs, bEndMs) {
     return aStartMs < bEndMs && aEndMs > bStartMs;
   }
@@ -20,8 +73,8 @@
 
     const blockedByItem = {};
     for (const b of blocks) {
-      if (!blockedByItem[b.itemId]) blockedByItem[b.itemId] = [];
-      blockedByItem[b.itemId].push(b);
+      if (!blockedByItem[b.itemIds]) blockedByItem[b.itemIds] = [];
+      blockedByItem[b.itemIds].push(b);
     }
 
     const available = [];
@@ -33,7 +86,7 @@
     return available;
   }
 
-  function submitReservation(startISO, endISO, itemId, notes) {
+  function submitReservation(startISO, endISO, itemIds, notes) {
     const form = document.getElementById('ec-create-form');
     if (!form) return;
 
@@ -44,7 +97,7 @@
 
     if (startInput) startInput.value = startISO;
     if (endInput) endInput.value = endISO;
-    if (itemInput) itemInput.value = itemId;
+    if (itemInput) itemInput.value = itemIds;
     if (notesInput) notesInput.value = notes || '';
 
     form.submit();
@@ -97,8 +150,8 @@
 
     if (typeof bootbox === 'undefined') {
       // Fallback without bootbox (should be rare on NodeBB pages)
-      const itemId = available[0].id;
-      submitReservation(startDate.toISOString(), endDate.toISOString(), itemId, '');
+      const itemIds = available[0].id;
+      submitReservation(startDate.toISOString(), endDate.toISOString(), itemIds, '');
       return;
     }
 
@@ -135,36 +188,38 @@
 
     const events = window.EC_EVENTS || [];
     const initialDate = window.EC_INITIAL_DATE;
-    const initialView = window.EC_INITIAL_VIEW || 'dayGridMonth';
+    const initialView = 'dayGridMonth';
 
     const calendar = new FullCalendar.Calendar(el, {
       initialView: initialView,
       initialDate: initialDate,
       timeZone: window.EC_TZ || 'local',
       selectable: window.EC_CAN_CREATE === true,
+      allDaySlot: true,
+      slotDuration: '24:00',
+      eventTimeFormat: { hour: '2-digit', minute: '2-digit', hour12: false },
       selectMirror: true,
       events: events,
+      displayEventTime: false,
 
       // Range selection (drag)
-      select: function (info) {
-        openNodeBBModal(info.startStr, info.endStr);
+      select: function(info) {
+        const startMs = toUtcMidnightMs(info.start);
+        const endMs = toUtcMidnightMs(info.end);
+        openCreateModal(startMs, endMs);
       },
 
       // Single date click
-      dateClick: function (info) {
-        // Default: 1h slot
-        const start = info.date;
-        const end = new Date(start.getTime() + 60 * 60 * 1000);
-        openNodeBBModal(start.toISOString(), end.toISOString());
+      dateClick: function(info) {
+        const startMs = toUtcMidnightMs(info.date);
+        const endMs = startMs + 24*60*60*1000;
+        openCreateModal(startMs, endMs);
       },
 
-      headerToolbar: {
-        left: 'prev,next today',
-        center: 'title',
-        right: 'dayGridMonth,timeGridWeek,timeGridDay'
-      },
+      headerToolbar: { left: 'prev,next today', center: 'title', right: '' },
     });
 
+    populateItemsSelect();
     calendar.render();
   }
 

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

@@ -1,135 +1,112 @@
 <div class="acp-page-container">
   <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
-  <h1 class="mb-0">Equipment Calendar</h1>
-  <div class="btn-group">
-    <a class="btn btn-secondary active" href="/admin/plugins/equipment-calendar">Paramètres</a>
-    <a class="btn btn-outline-secondary" href="/admin/plugins/equipment-calendar/reservations">Réservations</a>
-    <a class="btn btn-outline-secondary" href="/admin/plugins/equipment-calendar/helloasso-test">Test HelloAsso</a>
+    <h1 class="mb-0">Equipment Calendar</h1>
+    <div class="btn-group">
+      <a class="btn btn-secondary active" href="/admin/plugins/equipment-calendar">Paramètres</a>
+      <a class="btn btn-outline-secondary" href="/admin/plugins/equipment-calendar/reservations">Réservations</a>
+      <a class="btn btn-outline-secondary" href="/admin/plugins/equipment-calendar/helloasso-test">Test HelloAsso</a>
+    </div>
   </div>
-</div>
-
-  {{{ 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">
+  <form id="ec-admin-form" method="post" action="/admin/plugins/equipment-calendar/save" class="mb-3 mt-3">
     <input type="hidden" name="_csrf" value="{config.csrf_token}">
 
-    <div class="alert alert-warning">
-      Le champ "Matériel" doit être un JSON valide (array). Exemple :
-      <pre class="mb-0">[
-  { "id": "cam1", "name": "Caméra A", "price": 50, "": "Stock A", "active": true },
-  { "id": "light1", "name": "Projecteur", "price": 20, "": "Stock B", "active": true }
-]</pre>
-      <div class="mt-2">Note : <strong>price est en euros</strong> dans ce plugin (ex: 50 = 50€).</div>
-    </div>
-
     <div class="card card-body mb-3">
       <h5>Permissions</h5>
+
+      <div class="mb-3">
+        <label class="form-label">Groupes autorisés à créer une demande (creatorGroups)</label>
+        <input class="form-control" type="text" name="creatorGroups" value="{settings.creatorGroups}">
+        <div class="form-text">Nom(s) de groupes NodeBB. Pour plusieurs groupes, sépare par des virgules. Ex: <code>registered-users, members</code></div>
       </div>
 
       <div class="mb-3">
-        <label class="form-label">Matériel manuel (JSON) — utilisé uniquement si Source=Manuel</label>
-        <textarea name="itemsJson" class="form-control" rows="10">{settings.itemsJson}</textarea>
+        <label class="form-label">Groupe valideur (approverGroup)</label>
+        <input class="form-control" type="text" name="approverGroup" value="{settings.approverGroup}">
+        <div class="form-text">Les membres de ce groupe voient /equipment/approvals et peuvent valider/refuser.</div>
       </div>
-    </div>
 
-    <div class="card card-body mb-3">
-      <h5>HelloAsso</h5>
-      <div class="mb-3"><label class="form-label">Client ID</label><input name="ha_clientId" class="form-control" value="{settings.ha_clientId}"></div>
-      <div class="mb-3"><label class="form-label">Client Secret</label><input name="ha_clientSecret" class="form-control" value="{settings.ha_clientSecret}"></div>
-      <div class="mb-3"><label class="form-label">Organization Slug</label><input name="ha_organizationSlug" class="form-control" value="{settings.ha_organizationSlug}"></div>
-      <div class="mb-3"><label class="form-label">Return URL</label><input name="ha_returnUrl" class="form-control" value="{settings.ha_returnUrl}"></div>
-      <div class="mb-3"><label class="form-label">Webhook Secret (HMAC SHA256)</label><input name="ha_webhookSecret" class="form-control" value="{settings.ha_webhookSecret}"></div>
+      <div class="mb-0">
+        <label class="form-label">Groupe notifié (notifyGroup)</label>
+        <input class="form-control" type="text" name="notifyGroup" value="{settings.notifyGroup}">
+        <div class="form-text">Envoi d’un email/notification au groupe lors d’une nouvelle demande.</div>
+      </div>
     </div>
 
     <div class="card card-body mb-3">
-      <h5>Calendrier</h5>
+      <h5>Matériel</h5>
+
+      <div class="mb-3">
+        <label class="form-label">Source du matériel</label>
+        <select class="form-select" name="itemsSource">
+          <option value="manual" {{{ if view_itemsSourceManual }}}selected{{{ end }}}>Manuel (JSON)</option>
+          <option value="helloasso" {{{ if view_itemsSourceHelloasso }}}selected{{{ end }}}>HelloAsso (catalogue)</option>
+        </select>
+      </div>
+
       <div class="mb-3">
+        <label class="form-label">Matériel (JSON) — utilisé si Source = Manuel</label>
+        <textarea class="form-control" name="itemsJson" rows="8">{settings.itemsJson}</textarea>
+        <div class="form-text">Format: <code>[{"id":"cam1","name":"Caméra","price":50,"active":true}]</code> — <code>price</code> en euros (unitaire / jour).</div>
+      </div>
+
+      <div class="mb-0">
         <label class="form-label">Timeout paiement (minutes)</label>
         <input class="form-control" type="number" min="1" name="paymentTimeoutMinutes" value="{settings.paymentTimeoutMinutes}">
         <div class="form-text">Après validation, si le paiement n’est pas confirmé dans ce délai, la réservation est annulée et le matériel est débloqué.</div>
       </div>
-      <div class="mb-3">
-        <label class="form-label">Vue par défaut</label>
-        <select name="defaultView" class="form-select">
-          <option value="dayGridMonth" {{{ if view_dayGridMonth }}}selected{{{ end }}}>Mois</option>
-          <option value="timeGridWeek" {{{ if view_timeGridWeek }}}selected{{{ end }}}>Semaine</option>
-          <option value="timeGridDay" {{{ if view_timeGridDay }}}selected{{{ end }}}>Jour</option>
-        </select>
-      </div>
-      <div class="mb-3"><label class="form-label">Timezone</label><input name="timezone" class="form-control" value="{settings.timezone}"></div>
     </div>
 
-    
     <div class="card card-body mb-3">
-      <h5>Purge</h5>
-      <p class="text-muted mb-2">Supprime des réservations de la base (action irréversible).</p>
-
-      <div class="d-flex flex-wrap gap-2">
-        <button type="submit" class="btn btn-outline-danger" formaction="/admin/plugins/equipment-calendar/purge" formmethod="post" name="mode" value="nonblocking"
-          onclick="return confirm('Supprimer toutes les réservations refusées/annulées ?');">
-          Purger refusées/annulées
-        </button>
-
-        <div class="d-flex align-items-center gap-2">
-          <input class="form-control" style="max-width: 140px" type="number" min="1" name="olderThanDays" placeholder="Jours">
-          <button type="submit" class="btn btn-outline-danger" formaction="/admin/plugins/equipment-calendar/purge" formmethod="post" name="mode" value="olderThan"
-            onclick="return confirm('Supprimer les réservations plus anciennes que N jours ?');">
-            Purger plus anciennes que…
-          </button>
-        </div>
+      <h5>HelloAsso</h5>
 
-        <button type="submit" class="btn btn-danger" formaction="/admin/plugins/equipment-calendar/purge" formmethod="post" name="mode" value="all"
-          onclick="return confirm('⚠️ Supprimer TOUTES les réservations ?');">
-          Tout purger
-        </button>
+      <div class="mb-3">
+        <label class="form-label">API Base URL (prod/sandbox)</label>
+        <input class="form-control" type="text" name="ha_apiBaseUrl" value="{settings.ha_apiBaseUrl}">
+        <div class="form-text">Production: <code>https://api.helloasso.com</code> — Sandbox: <code>https://api.helloasso-sandbox.com</code></div>
       </div>
 
-      {{{ if purged }}}
-      <div class="alert alert-success mt-3">Purge effectuée : {purged} réservation(s) supprimée(s).</div>
-      <script>
-      (function () {
-        try {
-          if (window.app && window.app.alertSuccess) {
-            window.app.alertSuccess('Purge effectuée : {purged} réservation(s) supprimée(s).');
-          }
-        } catch (e) {}
-      }());
-      </script>
-      {{{ end }}}
-    </div>
+      <div class="mb-3">
+        <label class="form-label">Organization slug</label>
+        <input class="form-control" type="text" name="ha_organizationSlug" value="{settings.ha_organizationSlug}">
+      </div>
 
-    <button id="ec-save" class="btn btn-primary" type="button">Sauvegarder</button>
+      <div class="mb-3">
+        <label class="form-label">Client ID</label>
+        <input class="form-control" type="text" name="ha_clientId" value="{settings.ha_clientId}">
+      </div>
+
+      <div class="mb-3">
+        <label class="form-label">Client Secret</label>
+        <input class="form-control" type="password" name="ha_clientSecret" value="{settings.ha_clientSecret}">
+      </div>
 
+      <div class="row g-3">
+        <div class="col-md-6">
+          <label class="form-label">Form Type</label>
+          <input class="form-control" type="text" name="ha_itemsFormType" value="{settings.ha_itemsFormType}" placeholder="shop">
+          <div class="form-text">Ex: <code>shop</code></div>
+        </div>
+        <div class="col-md-6">
+          <label class="form-label">Form Slug</label>
+          <input class="form-control" type="text" name="ha_itemsFormSlug" value="{settings.ha_itemsFormSlug}" placeholder="locations-materiel-2026">
+        </div>
+      </div>
+
+      <div class="mb-0 mt-3">
+        <label class="form-label">Préfixe itemName (checkout)</label>
+        <input class="form-control" type="text" name="ha_calendarItemNamePrefix" value="{settings.ha_calendarItemNamePrefix}">
+      </div>
+    </div>
+
+    <button class="btn btn-primary" type="submit">Enregistrer</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>
+  {{{ if saved }}}
+  <script>
+    if (window.app && typeof window.app.alertSuccess === 'function') {
+      window.app.alertSuccess('Paramètres enregistrés');
+    }
+  </script>
+  {{{ end }}}
+</div>

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

@@ -13,14 +13,60 @@
     <div id="equipment-calendar"></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="itemIds" value="">
-    <input type="hidden" name="notesUser" value="">
-  </form>
+  <!-- Modal création -->
+  <div class="modal fade" id="ec-create-modal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Nouvelle demande</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+
+        <form id="ec-create-form" method="post" action="/equipment/reservations/create">
+          <div class="modal-body">
+            <input type="hidden" name="_csrf" value="{config.csrf_token}">
+            <input type="hidden" id="ec-start-ms" name="startMs" value="0">
+            <input type="hidden" id="ec-end-ms" name="endMs" value="0">
+
+            <div class="row g-3 mb-3">
+              <div class="col-6">
+                <label class="form-label">Début</label>
+                <input class="form-control" type="date" id="ec-start-date" required>
+              </div>
+              <div class="col-6">
+                <label class="form-label">Fin</label>
+                <input class="form-control" type="date" id="ec-end-date" required>
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <label class="form-label">Matériel</label>
+              <select class="form-select" id="ec-item-ids" name="itemIds" multiple required></select>
+              <div class="form-text">Tu peux sélectionner plusieurs matériels.</div>
+            </div>
+
+            <div class="mb-3">
+              <div class="fw-semibold">Durée</div>
+              <div id="ec-total-days">1 jour</div>
+              <hr class="my-2">
+              <div class="fw-semibold">Total estimé</div>
+              <div id="ec-total-price" class="fs-5">0 €</div>
+            </div>
+
+            <div class="mb-0">
+              <label class="form-label">Note</label>
+              <textarea class="form-control" name="notesUser" rows="3" placeholder="Optionnel"></textarea>
+            </div>
+          </div>
+
+          <div class="modal-footer">
+            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Annuler</button>
+            <button type="submit" class="btn btn-primary">Envoyer la demande</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js"></script>
@@ -31,12 +77,6 @@
   window.EC_BLOCKS = JSON.parse(atob('{blocksB64}'));
   window.EC_ITEMS = JSON.parse(atob('{itemsB64}'));
   window.EC_INITIAL_DATE = "{initialDateISO}";
-  window.EC_INITIAL_VIEW = "{view}";
   window.EC_TZ = "{tz}";
   window.EC_CAN_CREATE = {canCreateJs};
 </script>
-
-<style>
-  .ec-status-pending .fc-event-title { font-weight: 600; }
-  .ec-status-valid .fc-event-title { font-weight: 700; }
-</style>