nodebb-plugin-equipment-calendar 0.2.7 → 0.2.9

package/library.js

@@ -313,6 +313,7 @@ plugin.init = async function (params) {
   if (mid && mid.admin) {
     router.get('/admin/plugins/equipment-calendar', mid.admin.buildHeader, renderAdminPage);
     router.get('/api/admin/plugins/equipment-calendar', renderAdminPage);
+    router.post('/admin/plugins/equipment-calendar/save', middleware.applyCSRF, handleAdminSave);
   }
 
   // Convenience alias (optional): /calendar -> /equipment/calendar
@@ -413,14 +414,8 @@ async function renderCalendarPage(req, res) {
   const settings = await getSettings();
   const items = parseItems(settings.itemsJson).filter(i => i.active);
 
-  const rawItems = items;
-
   const tz = settings.timezone || 'Europe/Paris';
 
-  const itemId = String(req.query.itemId || (rawItems[0]?.id || '')).trim();
-  const chosenItem = rawItems.find(i => i.id === itemId) || rawItems[0] || null;
-  const itemsView = rawItems.map(it => ({ ...it, selected: chosenItem ? it.id === chosenItem.id : false }));
-
   // Determine range to render
   const now = DateTime.now().setZone(tz);
   const view = String(req.query.view || settings.defaultView || 'dayGridMonth');
@@ -438,43 +433,66 @@ async function renderCalendarPage(req, res) {
     end = now.endOf('month').plus({ days: 1 });
   }
 
-  // Load reservations for chosen item within range
-  const reservations = chosenItem ? await listReservationsForRange(chosenItem.id, start.toMillis(), end.toMillis()) : [];
+  // Load reservations for ALL items within range (so we can build availability client-side without extra requests)
+  const allReservations = [];
+  for (const it of items) {
+    // eslint-disable-next-line no-await-in-loop
+    const resForItem = await listReservationsForRange(it.id, start.toMillis(), end.toMillis());
+    for (const r of resForItem) allReservations.push(r);
+  }
+
   const showRequesterToAll = String(settings.showRequesterToAll) === '1';
   const isApprover = req.uid ? await canApprove(req.uid, settings) : false;
 
-  const requesterUids = Array.from(new Set(reservations.map(r => r.uid))).filter(Boolean);
+  const requesterUids = Array.from(new Set(allReservations.map(r => r.uid))).filter(Boolean);
   const users = requesterUids.length ? await user.getUsersData(requesterUids) : [];
   const nameByUid = {};
   (users || []).forEach(u => { nameByUid[u.uid] = u.username || ''; });
 
-  const events = reservations
+  const itemById = {};
+  items.forEach(it => { itemById[it.id] = it; });
+
+  const events = allReservations
     .filter(r => r.status !== 'rejected' && r.status !== 'cancelled')
-    .map(r => toEvent(r, chosenItem, nameByUid[r.uid], isApprover || showRequesterToAll));
+    .map(r => {
+      const item = itemById[r.itemId];
+      // Include item name in title so "all items" view is readable
+      const requesterName = nameByUid[r.uid] || '';
+      return toEvent(r, item, requesterName, isApprover || showRequesterToAll);
+    });
 
   const canUserCreate = req.uid ? await canCreate(req.uid, settings) : false;
 
+  // We expose minimal reservation data for availability checks in the modal
+  const blocks = allReservations
+    .filter(r => statusBlocksItem(r.status))
+    .map(r => ({
+      itemId: r.itemId,
+      startMs: r.startMs,
+      endMs: r.endMs,
+      status: r.status,
+    }));
+
   res.render('equipment-calendar/calendar', {
     title: 'Réservation de matériel',
-    items: itemsView,
-    chosenItemId: chosenItem ? chosenItem.id : '',
-    chosenItemName: chosenItem ? chosenItem.name : '',
-    chosenItemPriceCents: chosenItem ? chosenItem.priceCents : 0,
-    chosenItemLocation: chosenItem ? chosenItem.location : '',
+    items,
     view,
     tz,
     startISO: start.toISO(),
     endISO: end.toISO(),
     initialDateISO: start.toISODate(),
-    eventsB64: Buffer.from(JSON.stringify(events), 'utf8').toString('base64'),
     canCreate: canUserCreate,
     canCreateJs: canUserCreate ? 'true' : 'false',
     isApprover,
+    // events are base64 encoded to avoid template escaping issues
+    eventsB64: Buffer.from(JSON.stringify(events), 'utf8').toString('base64'),
+    blocksB64: Buffer.from(JSON.stringify(blocks), 'utf8').toString('base64'),
+    itemsB64: Buffer.from(JSON.stringify(items.map(i => ({ id: i.id, name: i.name, location: i.location }))), 'utf8').toString('base64'),
     csrf: req.csrfToken,
-    forumUrl: nconf.get('url'),
   });
 }
 
+
 // --- Approvals page ---
 async function renderApprovalsPage(req, res) {
   const settings = await getSettings();
@@ -667,4 +685,35 @@ async function handleRejectReservation(req, res) {
   }
 }
 
+
+async function handleAdminSave(req, res) {
+  try {
+    // Simple admin check (avoid relying on client-side require/settings)
+    const isAdmin = req.uid ? await groups.isMember(req.uid, 'administrators') : false;
+    if (!isAdmin) {
+      return helpers.notAllowed(req, res);
+    }
+
+    const values = {
+      creatorGroups: String(req.body.creatorGroups || DEFAULT_SETTINGS.creatorGroups),
+      approverGroup: String(req.body.approverGroup || DEFAULT_SETTINGS.approverGroup),
+      notifyGroup: String(req.body.notifyGroup || DEFAULT_SETTINGS.notifyGroup),
+      itemsJson: String(req.body.itemsJson || DEFAULT_SETTINGS.itemsJson),
+      ha_clientId: String(req.body.ha_clientId || ''),
+      ha_clientSecret: String(req.body.ha_clientSecret || ''),
+      ha_organizationSlug: String(req.body.ha_organizationSlug || ''),
+      ha_returnUrl: String(req.body.ha_returnUrl || ''),
+      ha_webhookSecret: String(req.body.ha_webhookSecret || ''),
+      defaultView: String(req.body.defaultView || DEFAULT_SETTINGS.defaultView),
+      timezone: String(req.body.timezone || DEFAULT_SETTINGS.timezone),
+      showRequesterToAll: (req.body.showRequesterToAll === '1' || req.body.showRequesterToAll === 'on') ? '1' : '0',
+    };
+
+    await meta.settings.set(SETTINGS_KEY, values);
+    return res.redirect('/admin/plugins/equipment-calendar');
+  } catch (e) {
+    return res.status(500).send(e.message || 'error');
+  }
+}
+
 module.exports = plugin;

package/package.json

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

package/plugin.json

@@ -26,7 +26,6 @@
   "scripts": [
     "public/js/client.js"
   ],
-  "acpScripts": [
-    "public/js/admin.js"
-  ]
+  "version": "0.2.1",
+  "minver": "4.7.1"
 }

package/public/js/admin.js

@@ -1,55 +1,20 @@
 'use strict';
-/* global window, document, socket, app */
 
-(function () {
-  function byId(id) { return document.getElementById(id); }
+/* global define */
 
-  function collect() {
-    return {
-      creatorGroups: byId('creatorGroups') ? byId('creatorGroups').value : '',
-      approverGroup: byId('approverGroup') ? byId('approverGroup').value : '',
-      notifyGroup: byId('notifyGroup') ? byId('notifyGroup').value : '',
-      itemsJson: byId('itemsJson') ? byId('itemsJson').value : '[]',
-      ha_clientId: byId('ha_clientId') ? byId('ha_clientId').value : '',
-      ha_clientSecret: byId('ha_clientSecret') ? byId('ha_clientSecret').value : '',
-      ha_organizationSlug: byId('ha_organizationSlug') ? byId('ha_organizationSlug').value : '',
-      ha_returnUrl: byId('ha_returnUrl') ? byId('ha_returnUrl').value : '',
-      ha_webhookSecret: byId('ha_webhookSecret') ? byId('ha_webhookSecret').value : '',
-      defaultView: byId('defaultView') ? byId('defaultView').value : 'dayGridMonth',
-      timezone: byId('timezone') ? byId('timezone').value : 'Europe/Paris',
-      showRequesterToAll: (byId('showRequesterToAll') && byId('showRequesterToAll').checked) ? '1' : '0',
-    };
-  }
+define('admin/plugins/equipment-calendar', ['jquery', 'settings', 'alerts'], function ($, Settings, alerts) {
+  const Admin = {};
 
-  function onReady(fn) {
-    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn);
-    else fn();
-  }
+  Admin.init = function () {
+    const $container = $('.equipment-calendar-settings');
+    Settings.load('equipmentCalendar', $container);
 
-  onReady(function () {
-    const btn = byId('save');
-    if (!btn) return;
-
-    btn.addEventListener('click', function () {
-      if (typeof socket === 'undefined' || !socket.emit) {
-        const msg = 'Socket NodeBB indisponible (socket.emit). Vérifie que tu es bien dans l\'ACP.';
-        if (window.app && window.app.alertError) window.app.alertError(msg);
-        else alert(msg);
-        return;
-      }
-
-      const payload = collect();
-
-      socket.emit('admin.settings.save', { hash: 'equipmentCalendar', values: payload }, function (err) {
-        if (err) {
-          const m = (err.message || err) + '';
-          if (window.app && window.app.alertError) return window.app.alertError(m);
-          alert(m);
-          return;
-        }
-        if (window.app && window.app.alertSuccess) return window.app.alertSuccess('Sauvegardé');
-        alert('Sauvegardé');
+    $('#save').on('click', function () {
+      Settings.save('equipmentCalendar', $container, function () {
+        alerts.success('Sauvegardé');
       });
     });
-  });
-}());
+  };
+
+  return Admin;
+});

package/public/js/client.js

@@ -1,18 +1,85 @@
 'use strict';
-/* global window, document, FullCalendar */
+/* global window, document, FullCalendar, bootstrap */
 
 (function () {
-  function submitCreate(startISO, endISO) {
+  function overlaps(aStartMs, aEndMs, bStartMs, bEndMs) {
+    return aStartMs < bEndMs && aEndMs > bStartMs;
+  }
+
+  function fmt(dt) {
+    try {
+      return new Intl.DateTimeFormat('fr-FR', { dateStyle: 'full', timeStyle: 'short' }).format(dt);
+    } catch (e) {
+      return dt.toISOString();
+    }
+  }
+
+  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 = startISO;
-    if (endInput) endInput.value = endISO;
-    form.submit();
+    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
+    const blocks = Array.isArray(window.EC_BLOCKS) ? window.EC_BLOCKS : [];
+    const items = Array.isArray(window.EC_ITEMS) ? window.EC_ITEMS : [];
+
+    const blockedByItem = {};
+    for (const b of blocks) {
+      if (!blockedByItem[b.itemId]) blockedByItem[b.itemId] = [];
+      blockedByItem[b.itemId].push(b);
+    }
+
+    const available = [];
+    for (const it of items) {
+      const bks = blockedByItem[it.id] || [];
+      const hasOverlap = bks.some(b => overlaps(startMs, endMs, Number(b.startMs), Number(b.endMs)));
+      if (!hasOverlap) available.push(it);
+    }
+
+    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 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;
+    const modal = bootstrap ? bootstrap.Modal.getOrCreateInstance(modalEl) : null;
+    if (modal) modal.show();
   }
 
-  function init() {
+  function initCalendar() {
     const el = document.getElementById('equipment-calendar');
     if (!el || typeof FullCalendar === 'undefined') return;
 
@@ -28,12 +95,13 @@
       selectMirror: true,
       events: events,
       select: function (info) {
-        submitCreate(info.startStr, info.endStr);
+        openModal(info.startStr, info.endStr);
       },
       dateClick: function (info) {
+        // default 1 hour
         const start = info.date;
         const end = new Date(start.getTime() + 60 * 60 * 1000);
-        submitCreate(start.toISOString(), end.toISOString());
+        openModal(start.toISOString(), end.toISOString());
       },
       headerToolbar: {
         left: 'prev,next today',
@@ -46,8 +114,8 @@
   }
 
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
+    document.addEventListener('DOMContentLoaded', initCalendar);
   } else {
-    init();
+    initCalendar();
   }
 }());

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

@@ -1,64 +1,65 @@
 <div class="acp-page-container">
   <h1>Equipment Calendar</h1>
 
-  <div class="alert alert-warning">
-    Les champs "Matériel" doivent être un JSON valide (array). Exemple :
-    <pre class="mb-0">[
-  { "id": "cam1", "name": "Caméra A", "priceCents": 5000, "location": "Stock A", "active": true },
-  { "id": "light1", "name": "Projecteur", "priceCents": 2000, "location": "Stock B", "active": true }
+  <form method="post" action="/admin/plugins/equipment-calendar/save" class="mb-3">
+    <input type="hidden" name="_csrf" value="{csrf}">
+
+    <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", "priceCents": 50, "location": "Stock A", "active": true },
+  { "id": "light1", "name": "Projecteur", "priceCents": 20, "location": "Stock B", "active": true }
 ]</pre>
-  </div>
+      <div class="mt-2">Note : <strong>priceCents est en euros</strong> dans ce plugin (ex: 50 = 50€).</div>
+    </div>
 
-  <div class="row">
-    <div class="col-lg-8">
-      <div class="card card-body mb-3">
-        <h5>Permissions</h5>
-        <div class="mb-3">
-          <label class="form-label">Groupes autorisés à créer (CSV)</label>
-          <input id="creatorGroups" class="form-control" value="{settings.creatorGroups}">
-        </div>
-        <div class="mb-3">
-          <label class="form-label">Groupe validateur</label>
-          <input id="approverGroup" class="form-control" value="{settings.approverGroup}">
-        </div>
-        <div class="mb-3">
-          <label class="form-label">Groupe notifié (emails/notifs)</label>
-          <input id="notifyGroup" class="form-control" value="{settings.notifyGroup}">
-        </div>
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox" id="showRequesterToAll" {{{ if view_showRequesterToAll }}}checked{{{ end }}}>
-          <label class="form-check-label" for="showRequesterToAll">Afficher le demandeur à tout le monde</label>
-        </div>
+    <div class="card card-body mb-3">
+      <h5>Permissions</h5>
+      <div class="mb-3">
+        <label class="form-label">Groupes autorisés à créer (CSV)</label>
+        <input name="creatorGroups" class="form-control" value="{settings.creatorGroups}">
       </div>
-
-      <div class="card card-body mb-3">
-        <h5>Matériel</h5>
-        <textarea id="itemsJson" class="form-control" rows="10">{settings.itemsJson}</textarea>
+      <div class="mb-3">
+        <label class="form-label">Groupe validateur</label>
+        <input name="approverGroup" class="form-control" value="{settings.approverGroup}">
       </div>
-
-      <div class="card card-body mb-3">
-        <h5>HelloAsso</h5>
-        <div class="mb-3"><label class="form-label">Client ID</label><input id="ha_clientId" class="form-control" value="{settings.ha_clientId}"></div>
-        <div class="mb-3"><label class="form-label">Client Secret</label><input id="ha_clientSecret" class="form-control" value="{settings.ha_clientSecret}"></div>
-        <div class="mb-3"><label class="form-label">Organization Slug</label><input id="ha_organizationSlug" class="form-control" value="{settings.ha_organizationSlug}"></div>
-        <div class="mb-3"><label class="form-label">Return URL</label><input id="ha_returnUrl" class="form-control" value="{settings.ha_returnUrl}"></div>
-        <div class="mb-3"><label class="form-label">Webhook Secret (HMAC SHA256)</label><input id="ha_webhookSecret" class="form-control" value="{settings.ha_webhookSecret}"></div>
+      <div class="mb-3">
+        <label class="form-label">Groupe notifié (emails/notifs)</label>
+        <input name="notifyGroup" class="form-control" value="{settings.notifyGroup}">
       </div>
-
-      <div class="card card-body mb-3">
-        <h5>Calendrier</h5>
-        <div class="mb-3"><label class="form-label">Vue par défaut</label>
-          <select id="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 id="timezone" class="form-control" value="{settings.timezone}"></div>
+      <div class="form-check">
+        <input class="form-check-input" type="checkbox" name="showRequesterToAll" id="showRequesterToAll" {{{ if view_showRequesterToAll }}}checked{{{ end }}}>
+        <label class="form-check-label" for="showRequesterToAll">Afficher le demandeur à tout le monde</label>
       </div>
+    </div>
 
-      <button id="save" class="btn btn-primary">Sauvegarder</button>
+    <div class="card card-body mb-3">
+      <h5>Matériel</h5>
+      <textarea name="itemsJson" class="form-control" rows="10">{settings.itemsJson}</textarea>
     </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>
+
+    <div class="card card-body mb-3">
+      <h5>Calendrier</h5>
+      <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>
+
+    <button class="btn btn-primary" type="submit">Sauvegarder</button>
+  </form>
+</div>

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

@@ -1,40 +1,10 @@
 <div class="equipment-calendar-page">
   <h1>Réservation de matériel</h1>
 
-  <div class="mb-3">
-    <form method="get" action="/equipment/calendar" class="d-flex gap-2 align-items-end">
-      <div>
-        <label class="form-label">Matériel</label>
-        <select name="itemId" class="form-select" onchange="this.form.submit()">
-          {{{ each items }}}
-          <option value="{items.id}" {{{ if items.selected }}}selected{{{ end }}}>{items.name} — {items.location}</option>
-          {{{ end }}}
-        </select>
-      </div>
-      <div class="text-muted small">
-        <div><strong>Lieu:</strong> {chosenItemLocation}</div>
-        <div><strong>Prix:</strong> {chosenItemPriceCents} cts</div>
-      </div>
-    </form>
-  </div>
-
   {{{ if canCreate }}}
-  <form id="ec-create-form" method="post" action="/equipment/reservations/create" class="card card-body mb-3">
-    <input type="hidden" name="_csrf" value="{csrf}">
-    <input type="hidden" name="itemId" value="{chosenItemId}">
-    <input type="hidden" name="start" value="">
-    <input type="hidden" name="end" value="">
-    <div class="row g-2 align-items-end">
-      <div class="col-md-8">
-        <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="col-md-4">
-        <button class="btn btn-primary w-100" type="submit" onclick="return false;">Sélectionne une date sur le calendrier</button>
-      </div>
-    </div>
-    <div class="form-text">Clique sur une date ou sélectionne une plage sur le calendrier pour soumettre une demande.</div>
-  </form>
+  <div class="alert alert-info">
+    Clique sur une date ou sélectionne une plage sur le calendrier pour faire une demande.
+  </div>
   {{{ else }}}
   <div class="alert alert-info">Tu peux consulter le calendrier, mais tu n’as pas les droits pour créer une demande.</div>
   {{{ end }}}
@@ -42,12 +12,53 @@
   <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="{csrf}">
+          <input type="hidden" name="start" value="">
+          <input type="hidden" name="end" value="">
 
-  {{{ if isApprover }}}
-  <div class="mt-3">
-    <a class="btn btn-outline-secondary" href="/equipment/approvals">Aller à la validation</a>
+          <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>
-  {{{ end }}}
 </div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.19/index.global.min.js"></script>
@@ -55,6 +66,8 @@
 
 <script>
   window.EC_EVENTS = JSON.parse(atob('{eventsB64}'));
+  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}";