nodebb-plugin-calendar-onekite 2.0.0 → 2.1.1

package/static/js/calendar.bundle.js

@@ -0,0 +1,269 @@
+(function () {
+  'use strict';
+  if (window.__onekiteCalendarBundleLoaded) { return; }
+  window.__onekiteCalendarBundleLoaded = true;
+
+  function qs(sel, root) { return (root || document).querySelector(sel); }
+  function qsa(sel, root) { return Array.from((root || document).querySelectorAll(sel)); }
+  function show(el){ if (el) el.style.display='block'; }
+  function hide(el){ if (el) el.style.display='none'; }
+  function escapeHtml(s){
+    return String(s ?? '')
+      .replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;')
+      .replaceAll('"','&quot;').replaceAll("'","&#039;");
+  }
+  function pad(n){ return String(n).padStart(2,'0'); }
+  function toLocalInputValue(iso){
+    if (!iso) return '';
+    const d=new Date(iso);
+    return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  }
+  function fromLocalInputValue(val){
+    if (!val) return null;
+    const d=new Date(val);
+    if (isNaN(d.getTime())) return null;
+    return d.toISOString();
+  }
+
+  function boot(api, alerts) {
+    const STATE = { inited:false, fc:null, currentEid:null, canCreate:false, canBook:false, locations:[], inventory:[] };
+
+    async function loadPermissions() {
+      try {
+        const [c,b]=await Promise.all([api.get('/calendar/permissions/create'), api.get('/calendar/permissions/book')]);
+        STATE.canCreate=!!c?.allow; STATE.canBook=!!b?.allow;
+      } catch { STATE.canCreate=false; STATE.canBook=false; }
+    }
+    async function loadInventory() {
+      try {
+        const data=await api.get('/calendar/inventory');
+        STATE.locations=Array.isArray(data?.locations)?data.locations:[];
+        STATE.inventory=Array.isArray(data?.inventory)?data.inventory:[];
+      } catch { STATE.locations=[]; STATE.inventory=[]; }
+    }
+
+    function bindModalClose() {
+      qsa('.calendar-close').forEach(btn=>{
+        if (btn.__bound) return;
+        btn.__bound=true;
+        btn.addEventListener('click',()=>hide(btn.closest('.calendar-modal')));
+      });
+    }
+
+    function renderBookingChecklist(selectedIds) {
+      const root=qs('#booking-items');
+      if (!root) return;
+      const sel=new Set((selectedIds||[]).map(String));
+      if (!STATE.inventory.length) { root.innerHTML='<p class="text-muted">Aucun matériel (configurez l’inventaire dans l’admin).</p>'; return; }
+      root.innerHTML=STATE.inventory.map(item=>{
+        const checked=sel.has(String(item.id))?'checked':'';
+        return `<div class="form-check">
+          <label class="form-check-label">
+            <input class="form-check-input js-book-item" type="checkbox" value="${escapeHtml(item.id)}" ${checked}>
+            ${escapeHtml(item.name||item.id)} — ${Number(item.price||0)} €/jour
+          </label>
+        </div>`;
+      }).join('');
+    }
+    function readSelectedItemIds() {
+      return qsa('.js-book-item').filter(el=>el.checked).map(el=>String(el.value));
+    }
+
+    function resetEventModal() {
+      STATE.currentEid=null;
+      qs('#event-modal-title').textContent='Nouvel événement';
+      qs('#event-title').value='';
+      qs('#event-description').value='';
+      qs('#event-start').value='';
+      qs('#event-end').value='';
+      qs('#event-allDay').checked=false;
+      qs('#event-location').value='';
+      qs('#event-bookingEnabled').checked=false;
+      renderBookingChecklist([]);
+      qs('#event-delete').style.display='none';
+      qs('#event-reserve').style.display=STATE.canBook?'inline-block':'none';
+    }
+    function fillEventModal(ev) {
+      STATE.currentEid=String(ev.eid);
+      qs('#event-modal-title').textContent='Éditer l’événement';
+      qs('#event-title').value=ev.title||'';
+      qs('#event-description').value=ev.description||'';
+      qs('#event-start').value=toLocalInputValue(ev.start);
+      qs('#event-end').value=toLocalInputValue(ev.end);
+      qs('#event-allDay').checked=!!Number(ev.allDay);
+      qs('#event-location').value=ev.location||'';
+      qs('#event-bookingEnabled').checked=!!Number(ev.bookingEnabled);
+      renderBookingChecklist(ev.bookingItemIds||[]);
+      qs('#event-delete').style.display=STATE.canCreate?'inline-block':'none';
+      qs('#event-reserve').style.display=STATE.canBook?'inline-block':'none';
+    }
+
+    function openEventModalNew(prefill={}) {
+      if (!STATE.canCreate) return alerts.error('Vous n’êtes pas autorisé à créer des événements.');
+      resetEventModal();
+      if (prefill.start) qs('#event-start').value=toLocalInputValue(prefill.start);
+      if (prefill.end) qs('#event-end').value=toLocalInputValue(prefill.end);
+      show(qs('#calendar-event-modal'));
+    }
+    async function openEventModalByEid(eid) {
+      try {
+        const ev=await api.get(`/calendar/event/${encodeURIComponent(eid)}`);
+        fillEventModal(ev);
+        show(qs('#calendar-event-modal'));
+      } catch (e) { console.error(e); alerts.error(e?.message||e); }
+    }
+
+    async function saveEvent() {
+      if (!STATE.canCreate) return;
+      const payload={
+        title: qs('#event-title').value||'',
+        description: qs('#event-description').value||'',
+        start: fromLocalInputValue(qs('#event-start').value)||new Date().toISOString(),
+        end: fromLocalInputValue(qs('#event-end').value)||fromLocalInputValue(qs('#event-start').value)||new Date().toISOString(),
+        allDay: qs('#event-allDay').checked,
+        location: qs('#event-location').value||'',
+        bookingEnabled: qs('#event-bookingEnabled').checked,
+        bookingItemIds: readSelectedItemIds(),
+        visibility:'public',
+      };
+      try {
+        if (STATE.currentEid) await api.put(`/calendar/event/${encodeURIComponent(STATE.currentEid)}`, payload);
+        else await api.post('/calendar/event', payload);
+        alerts.success('Enregistré');
+        hide(qs('#calendar-event-modal'));
+        STATE.fc?.refetchEvents();
+      } catch (e) { console.error(e); alerts.error(e?.message||e); }
+    }
+    async function deleteEvent() {
+      if (!STATE.currentEid || !STATE.canCreate) return;
+      if (!window.confirm('Supprimer cet événement ?')) return;
+      try {
+        await api.del(`/calendar/event/${encodeURIComponent(STATE.currentEid)}`);
+        alerts.success('Supprimé');
+        hide(qs('#calendar-event-modal'));
+        STATE.fc?.refetchEvents();
+      } catch (e) { console.error(e); alerts.error(e?.message||e); }
+    }
+
+    function renderLocationSelect() {
+      const sel=qs('#reserve-location');
+      if (!sel) return;
+      sel.innerHTML = STATE.locations.map(l=>`<option value="${escapeHtml(l.id)}">${escapeHtml(l.name||l.id)}</option>`).join('') || '<option value="">(aucun lieu)</option>';
+    }
+
+    function openReserveModal(ev) {
+      qs('#reserve-title').textContent=`Réserver – ${ev.title||''}`;
+      renderLocationSelect();
+      const allowed=new Set((ev.bookingItemIds||[]).map(String));
+      const items=STATE.inventory.filter(i=>allowed.has(String(i.id)));
+      const reserveItems=qs('#reserve-items');
+      reserveItems.innerHTML = items.length ? items.map(it=>`
+        <div class="form-check">
+          <label class="form-check-label">
+            <input class="form-check-input" type="radio" name="reserveItem" value="${escapeHtml(it.id)}">
+            ${escapeHtml(it.name||it.id)} (${Number(it.price||0)} €/jour)
+          </label>
+        </div>
+      `).join('') : '<p>Aucun matériel réservable pour cet événement.</p>';
+
+      const toDate=(d)=>`${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`;
+      qs('#reserve-start').value=toDate(new Date(ev.start));
+      qs('#reserve-end').value=toDate(new Date(ev.end));
+      show(qs('#calendar-reserve-modal'));
+    }
+
+    async function submitReservation() {
+      const itemId = qs('input[name="reserveItem"]:checked')?.value;
+      const locationId = qs('#reserve-location')?.value;
+      const dateStart = qs('#reserve-start')?.value;
+      const dateEnd = qs('#reserve-end')?.value;
+      const quantity = Number(qs('#reserve-quantity')?.value||1);
+      if (!STATE.currentEid) return alerts.error('Aucun événement sélectionné.');
+      if (!itemId) return alerts.error('Choisissez un matériel.');
+      if (!locationId) return alerts.error('Choisissez un lieu.');
+      try {
+        const res = await api.post(`/calendar/event/${encodeURIComponent(STATE.currentEid)}/book`, { itemId, locationId, dateStart, dateEnd, quantity });
+        alerts.success(res?.message||'Demande envoyée');
+        hide(qs('#calendar-reserve-modal')); hide(qs('#calendar-event-modal'));
+      } catch (e) { console.error(e); alerts.error(e?.message||e); }
+    }
+
+    function bindButtons() {
+      const btnNew=qs('#calendar-new-event');
+      if (btnNew && !btnNew.__bound) { btnNew.__bound=true; btnNew.addEventListener('click', ()=>openEventModalNew()); }
+      const btnSave=qs('#event-save'); if (btnSave && !btnSave.__bound){ btnSave.__bound=true; btnSave.addEventListener('click', saveEvent); }
+      const btnDel=qs('#event-delete'); if (btnDel && !btnDel.__bound){ btnDel.__bound=true; btnDel.addEventListener('click', deleteEvent); }
+      const btnRes=qs('#event-reserve'); if (btnRes && !btnRes.__bound){
+        btnRes.__bound=true;
+        btnRes.addEventListener('click', async ()=>{
+          if (!STATE.canBook) return alerts.error('Vous n’êtes pas autorisé à réserver.');
+          if (!STATE.currentEid) return;
+          try { const ev=await api.get(`/calendar/event/${encodeURIComponent(STATE.currentEid)}`); openReserveModal(ev); }
+          catch(e){ console.error(e); alerts.error(e?.message||e); }
+        });
+      }
+      const btnConf=qs('#reserve-confirm'); if (btnConf && !btnConf.__bound){ btnConf.__bound=true; btnConf.addEventListener('click', submitReservation); }
+    }
+
+    function buildCalendar() {
+      const el=qs('#calendar');
+      if (!el) return;
+      const FC=window.FullCalendar;
+      if (!FC) return alerts.error('FullCalendar non chargé (CDN bloqué ?)');
+      STATE.fc = new FC.Calendar(el, {
+        initialView:'dayGridMonth',
+        height:'auto',
+        locale:'fr',
+        firstDay:1,
+        headerToolbar:{ left:'prev,next today', center:'title', right:'dayGridMonth,timeGridWeek,timeGridDay,listWeek' },
+        selectable:(STATE.canCreate||STATE.canBook),
+        selectMirror:true,
+        editable:STATE.canCreate,
+        events: async (info, success, failure)=>{
+          try{
+            const events=await api.get(`/calendar/events?start=${encodeURIComponent(info.start.toISOString())}&end=${encodeURIComponent(info.end.toISOString())}`);
+            success((events||[]).map(ev=>({ id:String(ev.eid), title:ev.title, start:ev.start, end:ev.end, allDay:!!Number(ev.allDay) })));
+          } catch(e){ failure(e); }
+        },
+        select:(sel)=>{
+          if (STATE.canCreate) return openEventModalNew({ start: sel.startStr, end: sel.endStr });
+          if (STATE.canBook) return alerts.info('Cliquez sur un événement puis "Réserver"');
+        },
+        eventClick:(arg)=>openEventModalByEid(arg.event.id),
+      });
+      STATE.fc.render();
+    }
+
+    async function init() {
+      if (!qs('#calendar')) return;
+      bindModalClose();
+      bindButtons();
+
+      await Promise.all([loadPermissions(), loadInventory()]);
+      const btn=qs('#calendar-new-event');
+      if (btn) btn.style.display = STATE.canCreate ? 'inline-block' : 'none';
+
+      renderBookingChecklist([]);
+      if (!STATE.fc) buildCalendar();
+    }
+
+    document.addEventListener('action:ajaxify.end', init);
+    init();
+  }
+
+  function bindModalClose() {
+    qsa('.calendar-close').forEach(btn=>{
+      if (btn.__bound) return;
+      btn.__bound=true;
+      btn.addEventListener('click',()=>hide(btn.closest('.calendar-modal')));
+    });
+  }
+
+  if (typeof require === 'function') {
+    require(['api','alerts'], function(api, alerts){
+      try { boot(api, alerts); } catch(e){ console.error(e); }
+    });
+  } else {
+    console.error('[calendar-onekite] require is not defined');
+  }
+})();

package/static/js/calendar.js

@@ -8,6 +8,9 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
     currentEid: null,
     canCreate: false,
     canBook: false,
+    locations: [],
+    inventory: [],
+    currentEvent: null,
   };
 
   function qs(sel, root = document) { return root.querySelector(sel); }
@@ -51,6 +54,17 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
     }
   }
 
+  async function loadInventory() {
+    try {
+      const data = await api.get('/calendar/inventory');
+      STATE.locations = Array.isArray(data?.locations) ? data.locations : [];
+      STATE.inventory = Array.isArray(data?.inventory) ? data.inventory : [];
+    } catch (e) {
+      STATE.locations = [];
+      STATE.inventory = [];
+    }
+  }
+
   function bindModalClose() {
     qsa('.calendar-close').forEach(btn => {
       btn.addEventListener('click', () => hide(btn.closest('.calendar-modal')));
@@ -59,6 +73,7 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
 
   function resetEventModal() {
     STATE.currentEid = null;
+    STATE.currentEvent = null;
     qs('#event-modal-title').textContent = 'Nouvel événement';
     qs('#event-title').value = '';
     qs('#event-description').value = '';
@@ -67,49 +82,46 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
     qs('#event-allDay').checked = false;
     qs('#event-location').value = '';
     qs('#event-bookingEnabled').checked = false;
-    qs('#booking-items').innerHTML = '<p>Aucun matériel.</p>';
+
+    renderBookingChecklist([]);
 
     qs('#event-delete').style.display = 'none';
     qs('#event-reserve').style.display = STATE.canBook ? 'inline-block' : 'none';
   }
 
-  function renderBookingItems(items) {
+  function renderBookingChecklist(selectedIds) {
     const root = qs('#booking-items');
     if (!root) return;
-    if (!Array.isArray(items) || items.length === 0) {
-      root.innerHTML = '<p>Aucun matériel.</p>';
+
+    const sel = new Set((selectedIds || []).map(String));
+    if (!STATE.inventory.length) {
+      root.innerHTML = '<p class="text-muted">Aucun matériel (configurez l’inventaire dans l’admin).</p>';
       return;
     }
-    root.innerHTML = items.map((it, idx) => `
-      <div class="onekite-item" data-idx="${idx}">
-        <div class="form-group"><label>Nom</label><input class="form-control js-item-name" value="${escapeHtml(it.name||'')}"></div>
-        <div class="form-group"><label>ID</label><input class="form-control js-item-id" value="${escapeHtml(it.id||'')}"></div>
-        <div class="form-group"><label>Total dispo</label><input type="number" class="form-control js-item-total" value="${Number(it.total||0)}" min="0"></div>
-        <div class="form-group"><label>Prix / jour</label><input type="number" class="form-control js-item-price" value="${Number(it.price||0)}" min="0"></div>
-        <div class="form-group"><label>Lieu retrait</label><input class="form-control js-item-pickup" value="${escapeHtml(it.pickupLocation||'')}"></div>
-        <button class="btn btn-sm btn-danger js-item-remove">Supprimer</button>
-        <hr>
-      </div>
-    `).join('');
+
+    root.innerHTML = STATE.inventory.map(item => {
+      const checked = sel.has(String(item.id)) ? 'checked' : '';
+      return `
+        <div class="form-check">
+          <label class="form-check-label">
+            <input class="form-check-input js-book-item" type="checkbox" value="${escapeHtml(item.id)}" ${checked}>
+            ${escapeHtml(item.name || item.id)} — ${Number(item.price||0)} €/jour
+          </label>
+        </div>
+      `;
+    }).join('');
   }
 
-  function readBookingItemsFromModal() {
-    const blocks = qsa('#booking-items .onekite-item');
-    const items = [];
-    for (const b of blocks) {
-      const name = b.querySelector('.js-item-name')?.value?.trim() || '';
-      const id = b.querySelector('.js-item-id')?.value?.trim() || '';
-      const total = Number(b.querySelector('.js-item-total')?.value || 0);
-      const price = Number(b.querySelector('.js-item-price')?.value || 0);
-      const pickupLocation = b.querySelector('.js-item-pickup')?.value?.trim() || '';
-      if (!id) continue;
-      items.push({ id, name, total, price, pickupLocation });
-    }
-    return items;
+  function readSelectedItemIds() {
+    return qsa('.js-book-item')
+      .filter(el => el.checked)
+      .map(el => String(el.value));
   }
 
   function fillEventModal(ev) {
     STATE.currentEid = String(ev.eid);
+    STATE.currentEvent = ev;
+
     qs('#event-modal-title').textContent = 'Éditer l’événement';
     qs('#event-title').value = ev.title || '';
     qs('#event-description').value = ev.description || '';
@@ -119,7 +131,8 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
     qs('#event-location').value = ev.location || '';
     qs('#event-bookingEnabled').checked = !!Number(ev.bookingEnabled);
 
-    renderBookingItems(ev.bookingItems || []);
+    const ids = Array.isArray(ev.bookingItemIds) ? ev.bookingItemIds : (Array.isArray(ev.bookingItems) ? ev.bookingItems.map(x => x.id) : []);
+    renderBookingChecklist(ids);
 
     qs('#event-delete').style.display = STATE.canCreate ? 'inline-block' : 'none';
     qs('#event-reserve').style.display = STATE.canBook ? 'inline-block' : 'none';
@@ -154,7 +167,7 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
       allDay: qs('#event-allDay').checked,
       location: qs('#event-location').value || '',
       bookingEnabled: qs('#event-bookingEnabled').checked,
-      bookingItems: readBookingItemsFromModal(),
+      bookingItemIds: readSelectedItemIds(),
       visibility: 'public',
     };
 
@@ -184,107 +197,70 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
       hide(qs('#calendar-event-modal'));
       STATE.fc?.refetchEvents();
     } catch (e) {
-      // Some NodeBB api wrappers don't have del(); fallback to fetch
-      try {
-        const csrf = window.config?.csrf_token || window.config?.csrfToken;
-        const res = await fetch(`/api/v3/calendar/event/${encodeURIComponent(STATE.currentEid)}`, {
-          method: 'DELETE',
-          headers: csrf ? { 'x-csrf-token': csrf } : {},
-          credentials: 'same-origin',
-        });
-        if (!res.ok) throw new Error(await res.text());
-        alerts.success('Événement supprimé');
-        hide(qs('#calendar-event-modal'));
-        STATE.fc?.refetchEvents();
-      } catch (e2) {
-        alerts.error(e2?.message || e2);
-      }
+      alerts.error(e?.message || e);
     }
   }
 
-  function addBookingItemRow() {
-    const root = qs('#booking-items');
-    if (!root) return;
-    if (root.textContent.includes('Aucun matériel')) root.innerHTML = '';
-
-    root.insertAdjacentHTML('beforeend', `
-      <div class="onekite-item">
-        <div class="form-group"><label>Nom</label><input class="form-control js-item-name" value=""></div>
-        <div class="form-group"><label>ID</label><input class="form-control js-item-id" value=""></div>
-        <div class="form-group"><label>Total dispo</label><input type="number" class="form-control js-item-total" value="0" min="0"></div>
-        <div class="form-group"><label>Prix / jour</label><input type="number" class="form-control js-item-price" value="0" min="0"></div>
-        <div class="form-group"><label>Lieu retrait</label><input class="form-control js-item-pickup" value=""></div>
-        <button class="btn btn-sm btn-danger js-item-remove">Supprimer</button>
-        <hr>
-      </div>
-    `);
-  }
+  /* ---------- Reservation UI ---------- */
 
-  function bindEventModalButtons() {
-    qs('#event-save')?.addEventListener('click', saveEvent);
-    qs('#event-delete')?.addEventListener('click', deleteEvent);
-    qs('#event-add-item')?.addEventListener('click', addBookingItemRow);
+  function renderLocationSelect(selected) {
+    const sel = qs('#reserve-location');
+    if (!sel) return;
+    const opts = STATE.locations.map(l => `<option value="${escapeHtml(l.id)}">${escapeHtml(l.name||l.id)}</option>`).join('');
+    sel.innerHTML = opts || '<option value="">(aucun lieu)</option>';
+    if (selected) sel.value = selected;
+  }
 
-    qs('#booking-items')?.addEventListener('click', (ev) => {
-      const t = ev.target;
-      if (!(t instanceof HTMLElement)) return;
-      if (t.classList.contains('js-item-remove')) {
-        t.closest('.onekite-item')?.remove();
-      }
-    });
+  function openReserveModal(event, prefillDates) {
+    qs('#reserve-title').textContent = `Réserver – ${event.title || ''}`;
 
-    // Reservation flow: open reserve modal and fill items
-    qs('#event-reserve')?.addEventListener('click', async () => {
-      if (!STATE.canBook) return alerts.error('Vous n’êtes pas autorisé à réserver.');
-      if (!STATE.currentEid) return;
+    renderLocationSelect(STATE.locations[0]?.id || '');
 
-      try {
-        const ev = await api.get(`/calendar/event/${encodeURIComponent(STATE.currentEid)}`);
-        openReserveModal(ev);
-      } catch (e) {
-        alerts.error(e?.message || e);
-      }
-    });
-  }
+    const allowed = new Set((event.bookingItemIds || []).map(String));
+    const items = STATE.inventory.filter(i => allowed.has(String(i.id)));
 
-  function openReserveModal(event) {
-    // Fill title
-    qs('#reserve-title').textContent = `Réserver – ${event.title || ''}`;
-    const items = Array.isArray(event.bookingItems) ? event.bookingItems : [];
     const reserveItems = qs('#reserve-items');
     reserveItems.innerHTML = items.length ? items.map(it => `
       <div class="form-check">
         <label class="form-check-label">
           <input class="form-check-input js-reserve-item" type="radio" name="reserveItem" value="${escapeHtml(it.id)}">
-          ${escapeHtml(it.name || it.id)} (dispo: ${Number(it.total||0)}, ${Number(it.price||0)} €/jour) — retrait: ${escapeHtml(it.pickupLocation||'')}
+          ${escapeHtml(it.name || it.id)} (${Number(it.price||0)} €/jour)
         </label>
       </div>
-    `).join('') : '<p>Aucun matériel réservable.</p>';
+    `).join('') : '<p>Aucun matériel réservable pour cet événement.</p>';
 
-    // Pre-fill dates from event
-    const start = new Date(event.start);
-    const end = new Date(event.end);
     const toDateInput = (d) => `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`;
-    qs('#reserve-start').value = toDateInput(start);
-    qs('#reserve-end').value = toDateInput(end);
+
+    if (prefillDates?.dateStart && prefillDates?.dateEnd) {
+      qs('#reserve-start').value = prefillDates.dateStart;
+      qs('#reserve-end').value = prefillDates.dateEnd;
+    } else {
+      const start = new Date(event.start);
+      const end = new Date(event.end);
+      qs('#reserve-start').value = toDateInput(start);
+      qs('#reserve-end').value = toDateInput(end);
+    }
 
     show(qs('#calendar-reserve-modal'));
   }
 
   async function submitReservationFromModal() {
     const itemId = qs('input[name="reserveItem"]:checked')?.value;
+    const locationId = qs('#reserve-location')?.value;
     const dateStart = qs('#reserve-start')?.value;
     const dateEnd = qs('#reserve-end')?.value;
     const quantity = Number(qs('#reserve-quantity')?.value || 1);
 
     if (!STATE.currentEid) return alerts.error('Aucun événement sélectionné.');
     if (!itemId) return alerts.error('Choisissez un matériel.');
+    if (!locationId) return alerts.error('Choisissez un lieu.');
     if (!dateStart || !dateEnd) return alerts.error('Choisissez des dates.');
     if (quantity <= 0) return alerts.error('Quantité invalide.');
 
     try {
       const res = await api.post(`/calendar/event/${encodeURIComponent(STATE.currentEid)}/book`, {
         itemId,
+        locationId,
         quantity,
         dateStart,
         dateEnd,
@@ -292,16 +268,47 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
       alerts.success(res?.message || 'Demande envoyée.');
       hide(qs('#calendar-reserve-modal'));
       hide(qs('#calendar-event-modal'));
-      STATE.fc?.refetchEvents();
     } catch (e) {
       alerts.error(e?.message || e);
     }
   }
 
+  function bindEventModalButtons() {
+    qs('#event-save')?.addEventListener('click', saveEvent);
+    qs('#event-delete')?.addEventListener('click', deleteEvent);
+
+    // Reservation flow: open reserve modal from event
+    qs('#event-reserve')?.addEventListener('click', async () => {
+      if (!STATE.canBook) return alerts.error('Vous n’êtes pas autorisé à réserver.');
+      if (!STATE.currentEid) return;
+
+      try {
+        const ev = await api.get(`/calendar/event/${encodeURIComponent(STATE.currentEid)}`);
+        openReserveModal(ev);
+      } catch (e) {
+        alerts.error(e?.message || e);
+      }
+    });
+  }
+
   function bindReserveModalButtons() {
+    // Add location select if missing (back-compat)
+    if (!qs('#reserve-location')) {
+      const itemsRoot = qs('#reserve-items');
+      if (itemsRoot) {
+        itemsRoot.insertAdjacentHTML('beforebegin', `
+          <div class="form-group">
+            <label>Lieu de retrait</label>
+            <select id="reserve-location" class="form-control"></select>
+          </div>
+        `);
+      }
+    }
     qs('#reserve-confirm')?.addEventListener('click', submitReservationFromModal);
   }
 
+  /* ---------- FullCalendar ---------- */
+
   function buildCalendar() {
     const el = qs('#calendar');
     if (!el) return;
@@ -319,7 +326,7 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
         center: 'title',
         right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
       },
-      selectable: STATE.canCreate,
+      selectable: (STATE.canCreate || STATE.canBook),
       selectMirror: true,
       editable: STATE.canCreate,
       eventDurationEditable: STATE.canCreate,
@@ -343,8 +350,22 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
         }
       },
 
-      select: (sel) => {
-        openEventModalNew({ start: sel.startStr, end: sel.endStr });
+      // C mode: selection can create OR open reservation helper
+      select: async (sel) => {
+        const dateStart = sel.startStr.slice(0,10);
+        // FullCalendar end is exclusive; show end-1 day for date inputs
+        const endDate = new Date(sel.end);
+        endDate.setDate(endDate.getDate() - 1);
+        const dateEnd = `${endDate.getFullYear()}-${pad(endDate.getMonth()+1)}-${pad(endDate.getDate())}`;
+
+        if (STATE.canCreate) {
+          openEventModalNew({ start: sel.startStr, end: sel.endStr });
+          return;
+        }
+        if (STATE.canBook) {
+          alerts.info('Cliquez sur un événement, puis "Réserver" pour lier la réservation à un événement.');
+          return;
+        }
       },
 
       eventClick: (arg) => {
@@ -400,11 +421,14 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
     bindEventModalButtons();
     bindReserveModalButtons();
 
-    loadPermissions().then(() => {
-      const btn = qs('#calendar-new-event');
-      if (btn) btn.style.display = STATE.canCreate ? 'inline-block' : 'none';
-      buildCalendar();
-    });
+    Promise.all([loadPermissions(), loadInventory()])
+      .then(() => {
+        const btn = qs('#calendar-new-event');
+        if (btn) btn.style.display = STATE.canCreate ? 'inline-block' : 'none';
+        // default inventory checklist for new event
+        renderBookingChecklist([]);
+        buildCalendar();
+      });
   }
 
   function resetIfLeft() {
@@ -412,6 +436,7 @@ define('plugins/nodebb-plugin-calendar-onekite/static/js/calendar', ['api', 'ale
       STATE.inited = false;
       STATE.fc = null;
       STATE.currentEid = null;
+      STATE.currentEvent = null;
     }
   }