(#8) - Minimum lead time

assets/css/components/RsvTimeSlotsStyles.css

@@ -87,7 +87,7 @@ label.rsv-slots-slot-time>input:checked + .content>.capacity {
   font-weight: 600;
 }
 
-.rsv-slots-slot:hover:not(.rsv-slots-slot-full):not(.rsv-slots-slot-selected) {
+.rsv-slots-slot:hover:not(.rsv-slots-slot-full):not(.rsv-slots-slot-too-soon):not(.rsv-slots-slot-selected) {
   border-color: #2563eb;
   background: #f5f8ff;
 }
@@ -115,6 +115,12 @@ label.rsv-slots-slot-time>input:checked + .content>.capacity {
   cursor: not-allowed;
 }
 
+/* Within minimum lead time — available but not yet bookable */
+.rsv-slots-slot-too-soon {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 /* Selected */
 .rsv-slots-slot-selected {
   background: #2563eb;

assets/js/elements/RsvTimeline.js

@@ -47,7 +47,7 @@ class RsvTimeline extends HTMLElement {
 
   _on_click(event) {
     const slot = event.target.closest('.rsv-slots-slot');
-    if (slot && !slot.classList.contains('rsv-slots-slot-full')) {
+    if (slot && !slot.classList.contains('rsv-slots-slot-full') && !slot.classList.contains('rsv-slots-slot-too-soon')) {
       slot.classList.toggle('rsv-slots-slot-selected');
       slot.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -81,7 +81,7 @@ class RsvTimeline extends HTMLElement {
 
       const blocks = [];
 
-      for (const { from_minutes, to_minutes, block_size_in_minutes, occupancy: block_occ } of occupancy) {
+      for (const { from_minutes, to_minutes, block_size_in_minutes, occupancy: block_occ, lead_time_minutes } of occupancy) {
         if (from_minutes === to_minutes || block_occ.length === 0) {
           continue;
         }
@@ -89,7 +89,7 @@ class RsvTimeline extends HTMLElement {
         const from_block = parseInt(from_minutes) / block_size_in_minutes;
 
         const time_slots = block_occ.map((occ, i) =>
-          this._block(this.date, occ, block_size_in_minutes, from_block + i)
+          this._block(this.date, occ, block_size_in_minutes, from_block + i, lead_time_minutes?.[i] ?? 0)
         );
 
         const time_slot_group = document.createElement('div');
@@ -105,7 +105,7 @@ class RsvTimeline extends HTMLElement {
     }
   }
 
-  _block(date, left, block_size, idx) {
+  _block(date, left, block_size, idx, min_lead_time_minutes = 0) {
     const from = new Date(date);
     from.setHours(0, idx * block_size, 0, 0);
 
@@ -117,6 +117,7 @@ class RsvTimeline extends HTMLElement {
     cell.dataset.start_utc = from.toISOString();
     cell.dataset.end_utc   = to.toISOString();
     if (left <= 0) cell.classList.add('rsv-slots-slot-full');
+    else if (from < new Date(Date.now() + min_lead_time_minutes * 60_000)) cell.classList.add('rsv-slots-slot-too-soon');
 
     const time_el = document.createElement('span');
     time_el.classList.add('rsv-slots-slot-time');