(#3) - templating

assets/js/elements/RsvTimeline.js

@@ -35,6 +35,14 @@ class RsvTimeline extends HTMLElement {
     this._render();
   }
 
+  // ---- Public API ---------------------------------------------------------
+
+  // Re-fetch availability for the current date, e.g. after a booking occupied
+  // some slots. The date is unchanged, so attributeChangedCallback won't fire.
+  refresh() {
+    this._render();
+  }
+
   // ---- Private ------------------------------------------------------------
 
   _on_click(event) {
@@ -59,10 +67,6 @@ class RsvTimeline extends HTMLElement {
       const occupancy = await RsvTimetableService.get_availability_for_date(this.timetableId, this.date);
       if (v !== this._version) return;
 
-      if(occupancy.length === 0) {
-        this.replaceChildren(this._notice(s.no_blocks));
-        return;
-      }
 
       const header = document.createElement('div');
       header.classList.add('rsv-slots-label');
@@ -70,6 +74,11 @@ class RsvTimeline extends HTMLElement {
         weekday: 'long', day: 'numeric', month: 'long',
       }).replace(',', '');
 
+      if(occupancy.length === 0) {
+        this.replaceChildren(header, this._notice(s.no_blocks));
+        return;
+      }
+
       const blocks = [];
 
       for (const { from_minutes, to_minutes, block_size_in_minutes, occupancy: block_occ } of occupancy) {
@@ -107,7 +116,7 @@ class RsvTimeline extends HTMLElement {
     cell.classList.add('rsv-slots-slot', 'rsv-slots-slot-available');
     cell.dataset.start_utc = from.toISOString();
     cell.dataset.end_utc   = to.toISOString();
-    if (left === 0) cell.classList.add('rsv-slots-slot-full');
+    if (left <= 0) cell.classList.add('rsv-slots-slot-full');
 
     const time_el = document.createElement('span');
     time_el.classList.add('rsv-slots-slot-time');