domma-cms 1.6.36 → 1.6.38

package/plugins/booking/admin/views/diary.js

@@ -6,10 +6,14 @@
  * is shaded. A booking is a block: click opens it, right-click / ⋮ /
  * Shift+F10 is its menu. Click an empty time to book it. The first time
  * round, a checklist says what to set up.
+ *
+ * domma-reactive throughout: the heads, the hour gutter and the columns (each
+ * with its open bands and blocks) are keyed lists fed from one `draw` effect
+ * that works the geometry out in JS (diary-layout.js); the markup only binds.
  */
 
 import {STATUS_LABEL, V, api, copy, errText, esc, openPanel, store, wireRows} from '../lib/kit.js';
-import {columnItems, dayLabel, datesFor, gridHours, layoutColumn, minuteAt, placeOf} from '../lib/diary-layout.js';
+import {columnItems, dayLabel, datesFor, gridHours, layoutColumn, mergeWindows, minuteAt, placeOf} from '../lib/diary-layout.js';
 import {withNames} from '../lib/details.js';
 import {addDays, atWallClock, fromMinutes, isDate, wallClock} from '/plugins/booking/public/lib/time.js';
 import {windowsOn} from '/plugins/booking/public/lib/slots.js';
@@ -18,6 +22,37 @@ const PX_PER_MIN = 1;   // an hour is 60px
 const VIEW_KEY = 'booking.diary-view';
 const CANCELLED_KEY = 'booking.diary-cancelled';
 const CHECKLIST_KEY = 'booking.checklist-hidden';
+const STATUS_NOTE = {completed: 'done', 'no-show': 'no-show', cancelled: 'cancelled', pending: 'pending'};
+
+// A first-run step. The two icon wrappers swap with `done` (I.scan replaces the icon span itself).
+const STEP = `
+<li data-bind-class="done && 'is-done'">
+  <span class="bk-step-icon" data-bind-hidden="!done"><span data-icon="check-circle" data-icon-size="14"></span></span>
+  <span class="bk-step-icon" data-bind-hidden="done"><span data-icon="circle" data-icon-size="14"></span></span>
+  <button type="button" class="bk-link" data-on-click="$parent.step($data)" data-bind-text="text"></button>
+</li>`;
+
+// A column heading: a person or room (day view) or a day (week view, a link to it).
+const HEAD = `
+<div class="bk-col-head" data-bind-class="cls" data-bind-data-colour="colour" data-bind-data-date="date" data-bind-title="tip">
+  <span class="bk-kind" data-bind-hidden="kind !== 'person'"><span data-icon="user" data-icon-size="13"></span></span>
+  <span class="bk-kind" data-bind-hidden="kind !== 'resource'"><span data-icon="box" data-icon-size="13"></span></span>
+  <span data-bind-text="title"></span>
+</div>`;
+
+const HOUR = `<span data-bind-style-top="top" data-bind-text="text"></span>`;
+
+// A column: its open bands, the now line and its blocks. Every measure is a CSS length worked out in draw().
+const COL = `
+<div class="bk-col" data-bind-data-date="date" data-bind-data-bookable="bookableId" title="Click an empty time to book it">
+  {{#each windows key=id}}<div class="bk-open" data-bind-style-top="top" data-bind-style-background-position-y="bgY" data-bind-style-height="height"></div>{{/each}}
+  <div class="bk-now" data-bind-hidden="!nowTop" data-bind-style-top="nowTop"></div>
+  {{#each blocks key=id}}<div class="bk-block" data-bind-data-id="id" data-bind-class="cls" data-bind-data-colour="colour" data-bind-title="tip" tabindex="0" role="button"
+      data-bind-style-top="top" data-bind-style-height="height" data-bind-style-left="left" data-bind-style-width="width">
+    <button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
+    <strong data-bind-text="head"></strong><small data-bind-text="sub"></small>
+  </div>{{/each}}
+</div>`;
 
 export async function mount(root, ctx) {
     const {kit, scope, here, boot} = ctx;
@@ -33,6 +68,16 @@ export async function mount(root, ctx) {
     const loading = M.observable(true);
     const error = M.observable('');
     const label = M.observable('');
+    // What the grid shows, as rows for the keyed lists.
+    const hasBookables = M.observable(boot.bookables.length > 0);
+    const hasServices = M.observable(boot.services.length > 0);
+    const heads = M.observable([]);
+    const hours = M.observable([]);
+    const cols = M.observable([]);
+    const gridCols = M.observable('1');
+    const gridH = M.observable('0px');
+    const steps = M.observable([]);
+    const checklistOn = M.observable(false);
     scope(M.effect(() => store.set(VIEW_KEY, view.value)));
     scope(M.effect(() => store.set(CANCELLED_KEY, showCancelled.value)));
 
@@ -40,7 +85,11 @@ export async function mount(root, ctx) {
     const card = document.createElement('div');
     card.className = 'bk-card bk-diary';
     card.innerHTML = `
-<div class="bk-checklist" data-part="checklist" hidden></div>
+<div class="bk-checklist" data-bind-hidden="!checklistOn.value">
+  <header><h3><span data-icon="clipboard-list" data-icon-size="15"></span> Getting started</h3>
+    <button type="button" class="btn btn-xs btn-ghost" data-on-click="hideChecklist" title="Hide this list">Hide</button></header>
+  <ol data-each="steps.value key=id">${STEP}</ol>
+</div>
 <div class="bk-bar">
   <div class="bk-seg" role="group" aria-label="View">
     <button type="button" data-view="day" data-bind-class="view.value === 'day' && 'is-on'">Day</button>
@@ -58,16 +107,37 @@ export async function mount(root, ctx) {
   <span data-help-title="The Diary" data-help="Bookings in your business's time zone (${esc(ctx.tz)}). Hatched times are outside opening hours. Click a booking to open it; right-click it (or ⋮, or Shift+F10) for Move, Done, No-show and Cancel. Click an empty time to book it. Keys: ← → earlier and later, T today, D day, W week."></span>
 </div>
 <p class="bk-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
-<div class="bk-diary-wrap" data-part="grid" tabindex="-1"></div>`;
+<div class="bk-diary-wrap" data-part="grid" tabindex="-1">
+  <div class="bk-empty" data-bind-hidden="hasBookables.value"><span data-icon="users" data-icon-size="28"></span>
+    <p><strong>Add who or what can be booked.</strong><br>A person (for appointments) or a room or thing - each with their opening hours.</p>
+    <button type="button" class="btn btn-sm btn-primary" data-on-click="addPerson"><span data-icon="plus" data-icon-size="13"></span> Add a person or room</button></div>
+  <p class="bk-note" data-bind-hidden="!hasBookables.value || hasServices.value">Next: <button type="button" class="bk-link" data-on-click="addService">add a service</button> - what can be booked, for how long, and with whom.</p>
+  <div class="bk-diary-grid" data-bind-hidden="!hasBookables.value" data-bind-class="'is-' + view.value"
+       data-bind-style---bk-cols="gridCols.value" data-bind-style---bk-h="gridH.value" style="--bk-hour: ${60 * PX_PER_MIN}px">
+    <div class="bk-diary-head" data-part="heads"><span></span><div class="bk-heads" data-each="heads.value key=key">${HEAD}</div></div>
+    <div class="bk-diary-body">
+      <div class="bk-gutter" data-each="hours.value key=id">${HOUR}</div>
+      <div class="bk-cols" data-each="cols.value key=key">${COL}</div>
+    </div>
+  </div>
+</div>`;
     root.appendChild(card);
     const gridBox = card.querySelector('[data-part="grid"]');
     const dateIn = card.querySelector('[data-part="date"]');
     const cancelledBox = card.querySelector('[data-part="cancelled"]');
-    const checklist = card.querySelector('[data-part="checklist"]');
     scope(kit.helpPopovers(card, {position: 'bottom'}));
-    const bindings = M.applyBindings({view, label, error}, card);
+    const model = {
+        view, label, error, hasBookables, hasServices, heads, hours, cols, gridCols, gridH, steps, checklistOn,
+        hideChecklist() { store.set(CHECKLIST_KEY, true); checklistOn.value = false; },
+        step(s) { s.go(); },
+        addPerson: () => ctx.go('people', 'new'),
+        addService: () => ctx.go('services', 'new')
+    };
+    const bindings = M.applyBindings(model, card);
     scope(() => bindings.dispose());
     I.scan(card);
+    // Heads come and go with the view; their icons are drawn once the rows are in.
+    scope(M.effect(() => { heads.value; steps.value; requestAnimationFrame(() => { if (card.isConnected) I.scan(card); }); }));
 
     cancelledBox.checked = showCancelled.peek();
     cancelledBox.addEventListener('change', () => { showCancelled.value = cancelledBox.checked; });
@@ -84,6 +154,11 @@ export async function mount(root, ctx) {
         const s = e.target.closest('[data-step]');
         if (s) step(Number(s.dataset.step));
     });
+    // A week head is a link to its day.
+    card.querySelector('[data-part="heads"]').addEventListener('click', (e) => {
+        const h = e.target.closest('.bk-col-head[data-date]');
+        if (h) { date.value = h.dataset.date; view.value = 'day'; }
+    });
     const onKey = (e) => {
         if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
         if (e.target.closest('input, textarea, select, [contenteditable], .dm-slideover, [role="dialog"]')) return;
@@ -103,28 +178,16 @@ export async function mount(root, ctx) {
     // ---- The first-run checklist --------------------------------------------------
 
     function drawChecklist() {
-        const steps = [
-            {done: boot.bookables.length > 0, text: 'Add who or what can be booked - a person or a room', go: () => ctx.go('people', 'new')},
-            {done: boot.services.length > 0, text: 'Add a service: what can be booked, for how long, and with whom', go: () => ctx.go('services', 'new')},
-            {done: store.get('booking.settings-seen') === true, text: boot.mailReady ? 'Check the settings: your booking page, notice rules and emails' : 'Check the settings - and set up outgoing mail, or no confirmation emails are sent',
+        const list = [
+            {id: 'people', done: boot.bookables.length > 0, text: 'Add who or what can be booked - a person or a room', go: () => ctx.go('people', 'new')},
+            {id: 'services', done: boot.services.length > 0, text: 'Add a service: what can be booked, for how long, and with whom', go: () => ctx.go('services', 'new')},
+            {id: 'settings', done: store.get('booking.settings-seen') === true, text: boot.mailReady ? 'Check the settings: your booking page, notice rules and emails' : 'Check the settings - and set up outgoing mail, or no confirmation emails are sent',
                 go: () => { store.set('booking.settings-seen', true); ctx.openSettings(); drawChecklist(); }},
-            {done: store.get('booking.link-shared') === true, text: `Share your booking page: ${location.origin}${ctx.settings.bookingPath}`,
+            {id: 'share', done: store.get('booking.link-shared') === true, text: `Share your booking page: ${location.origin}${ctx.settings.bookingPath}`,
                 go: () => { store.set('booking.link-shared', true); copy(`${location.origin}${ctx.settings.bookingPath}`, 'Booking page address copied'); drawChecklist(); }}
         ];
-        const left = steps.filter(s => !s.done).length;
-        if (!left || store.get(CHECKLIST_KEY) === true) { checklist.hidden = true; return; }
-        checklist.hidden = false;
-        checklist.innerHTML = `
-<header><h3><span data-icon="clipboard-list" data-icon-size="15"></span> Getting started</h3>
-  <button type="button" class="btn btn-xs btn-ghost" data-hide title="Hide this list">Hide</button></header>
-<ol>${steps.map((s, i) => `<li class="${s.done ? 'is-done' : ''}"><span data-icon="${s.done ? 'check-circle' : 'circle'}" data-icon-size="14"></span>
-  <button type="button" class="bk-link" data-step-i="${i}">${esc(s.text)}</button></li>`).join('')}</ol>`;
-        I.scan(checklist);
-        checklist.onclick = (e) => {
-            if (e.target.closest('[data-hide]')) { store.set(CHECKLIST_KEY, true); checklist.hidden = true; return; }
-            const i = e.target.closest('[data-step-i]')?.dataset.stepI;
-            if (i !== undefined) steps[Number(i)].go();
-        };
+        steps.value = list;
+        checklistOn.value = list.some(s => !s.done) && store.get(CHECKLIST_KEY) !== true;
     }
     drawChecklist();
 
@@ -168,134 +231,84 @@ export async function mount(root, ctx) {
             windows: windowsOn(b, d, ctx.settings.closures)}));
     }
 
+    const px = (n) => `${n}px`;
+
+    /** One block's row: where it sits and what it says. */
+    function blockRow(p, {from, to, week, colours}) {
+        const b = p.b;
+        let id = b.id;
+        if (p.session) { sessions.set(p.key, p.bookings); id = `session:${p.key}`; }
+        const s = wallClock(b.startAt, ctx.tz).time;
+        const e = wallClock(b.endAt, ctx.tz).time;
+        const time = week ? s : `${s}-${e}`;
+        const statusNote = b.status !== 'confirmed' ? ` · ${STATUS_NOTE[b.status] || b.status}` : '';
+        let head;
+        let sub;
+        let tip;
+        if (p.session) {
+            // A class: one block for everyone in it.
+            head = `${time} ${b.serviceName} · ${p.bookings.length} booked`;
+            sub = `${p.companion ? `with ${b.bookableName}` : p.bookings.map(x => x.name).join(', ')}${week && b.bookableName ? ` · ${b.bookableName}` : ''}`;
+            tip = `${s}-${e} ${b.serviceName}: ${p.bookings.length} booked${b.bookableName ? ` (with ${withNames(b)})` : ''}`;
+        } else if (p.companion) {
+            // Held along with someone else's booking (a court with the trainer).
+            head = `${time} ${b.name}`;
+            sub = `${b.serviceName} · with ${b.bookableName}${statusNote}`;
+            tip = `${s}-${e} ${b.serviceName}: ${b.name} - held with ${b.bookableName}'s booking`;
+        } else {
+            head = `${time} ${b.name}`;
+            sub = `${b.serviceName}${week && b.bookableName ? ` · ${withNames(b)}` : b.alsoNames?.length ? ` · with ${b.alsoNames.join(', ')}` : ''}${statusNote}`;
+            tip = `${s}-${e} ${b.serviceName}: ${b.name}${withNames(b) ? ` (with ${withNames(b)})` : ''}`;
+        }
+        return {
+            id, head, sub, tip,
+            cls: `is-${b.status}${p.companion ? ' is-companion' : ''}${p.session ? ' is-session' : ''}`,
+            colour: colours.get(b.bookableId) || 'grey',
+            top: px((Math.max(p.startMin, from) - from) * PX_PER_MIN),
+            height: px(Math.max(18, (Math.min(p.endMin, to) - Math.max(p.startMin, from)) * PX_PER_MIN - 2)),
+            left: `calc(${(p.lane / p.lanes) * 100}% + 2px)`,
+            width: `calc(${100 / p.lanes}% - 4px)`
+        };
+    }
+
     function draw() {
         const list = bookings.value.filter(b => showCancelled.value || b.status !== 'cancelled');
+        const week = view.value === 'week';
         const ds = datesFor(view.value, date.value);
-        label.value = view.value === 'week' ? `${dayLabel(ds[0])} - ${dayLabel(ds[6])} ${ds[6].slice(0, 4)}` : `${dayLabel(ds[0])} ${ds[0].slice(0, 4)}`;
-        const cols = columns();
-        gridBox.innerHTML = '';
-        if (!boot.bookables.length) {
-            gridBox.innerHTML = `<div class="bk-empty"><span data-icon="users" data-icon-size="28"></span>
-  <p><strong>Add who or what can be booked.</strong><br>A person (for appointments) or a room or thing - each with their opening hours.</p>
-  <button type="button" class="btn btn-sm btn-primary" data-go="people"><span data-icon="plus" data-icon-size="13"></span> Add a person or room</button></div>`;
-            gridBox.querySelector('[data-go]').onclick = () => ctx.go('people', 'new');
-            I.scan(gridBox);
-            return;
-        }
-        const colours = new Map(boot.bookables.map(b => [b.id, b.colour || 'blue']));
+        label.value = week ? `${dayLabel(ds[0])} - ${dayLabel(ds[6])} ${ds[6].slice(0, 4)}` : `${dayLabel(ds[0])} ${ds[0].slice(0, 4)}`;
+        hasBookables.value = boot.bookables.length > 0;
+        hasServices.value = boot.services.length > 0;
         sessions.clear();
+        if (!boot.bookables.length) { heads.value = []; hours.value = []; cols.value = []; return; }
+        const defs = columns();
+        const colours = new Map(boot.bookables.map(b => [b.id, b.colour || 'blue']));
         const placed = list.map(b => ({b, ...placeOf(b, ctx.tz)})).filter(p => ds.includes(p.date));
         const {from, to} = gridHours(boot.bookables.filter(b => b.active !== false), ds, placed);
-        const height = (to - from) * PX_PER_MIN;
-
-        const grid = document.createElement('div');
-        grid.className = `bk-diary-grid is-${view.value}`;
-        grid.style.setProperty('--bk-cols', String(cols.length));
-        grid.style.setProperty('--bk-h', `${height}px`);
-        grid.style.setProperty('--bk-hour', `${60 * PX_PER_MIN}px`);
-
-        // Heads
-        const head = document.createElement('div');
-        head.className = 'bk-diary-head';
-        head.appendChild(document.createElement('span'));
-        for (const c of cols) {
-            const h = document.createElement('div');
-            h.className = `bk-col-head${c.today && view.value === 'week' ? ' is-today' : ''}`;
-            if (c.colour) h.dataset.colour = c.colour;
-            h.innerHTML = `${c.kind ? `<span data-icon="${c.kind === 'resource' ? 'box' : 'user'}" data-icon-size="13"></span> ` : ''}<span>${esc(c.title)}</span>`;
-            if (view.value === 'week') { h.classList.add('bk-link-head'); h.title = 'Show this day'; h.onclick = () => { date.value = c.date; view.value = 'day'; }; }
-            head.appendChild(h);
-        }
-        grid.appendChild(head);
+        gridCols.value = String(defs.length);
+        gridH.value = px((to - from) * PX_PER_MIN);
 
-        // Time gutter + columns
-        const bodyRow = document.createElement('div');
-        bodyRow.className = 'bk-diary-body';
-        const gutter = document.createElement('div');
-        gutter.className = 'bk-gutter';
-        for (let m = from; m < to; m += 60) {
-            const t = document.createElement('span');
-            t.style.top = `${(m - from) * PX_PER_MIN}px`;
-            t.textContent = fromMinutes(m);
-            gutter.appendChild(t);
-        }
-        bodyRow.appendChild(gutter);
+        heads.value = defs.map(c => ({
+            key: c.key, title: c.title, kind: c.kind || '', colour: c.colour || false,
+            cls: [c.today && week ? 'is-today' : '', week ? 'bk-link-head' : ''].filter(Boolean).join(' '),
+            date: week ? c.date : false, tip: week ? 'Show this day' : false
+        }));
+        const gutter = [];
+        for (let m = from; m < to; m += 60) gutter.push({id: m, top: px((m - from) * PX_PER_MIN), text: fromMinutes(m)});
+        hours.value = gutter;
 
         const nowWall = wallClock(Date.now(), ctx.tz);
-        for (const c of cols) {
-            const col = document.createElement('div');
-            col.className = 'bk-col';
-            col.dataset.date = c.date;
-            if (c.bookableId) col.dataset.bookable = c.bookableId;
-            col.title = 'Click an empty time to book it';
-            for (const w of c.windows) {
-                const band = document.createElement('div');
-                band.className = 'bk-open';
+        cols.value = defs.map(c => {
+            const windows = c.windows.map((w, i) => {
+                // The band keeps its hour lines on the column's.
                 const bandTop = (Math.max(w.from, from) - from) * PX_PER_MIN;
-                band.style.top = `${bandTop}px`;
-                // Keep its hour lines on the column's.
-                band.style.backgroundPositionY = `${-bandTop}px`;
-                band.style.height = `${(Math.min(w.to, to) - Math.max(w.from, from)) * PX_PER_MIN}px`;
-                col.appendChild(band);
-            }
-            if (c.date === nowWall.date && nowWall.minutes >= from && nowWall.minutes <= to) {
-                const line = document.createElement('div');
-                line.className = 'bk-now';
-                line.style.top = `${(nowWall.minutes - from) * PX_PER_MIN}px`;
-                col.appendChild(line);
-            }
+                return {id: `w${i}`, top: px(bandTop), bgY: px(-bandTop), height: px((Math.min(w.to, to) - Math.max(w.from, from)) * PX_PER_MIN)};
+            });
+            const nowTop = c.date === nowWall.date && nowWall.minutes >= from && nowWall.minutes <= to ? px((nowWall.minutes - from) * PX_PER_MIN) : '';
             const dayBookings = placed.filter(p => p.date === c.date).map(p => p.b);
             const items = columnItems(dayBookings, {bookableId: c.bookableId || ''}).map(it => ({...it, ...placeOf(it.b, ctx.tz)}));
-            for (const p of layoutColumn(items)) {
-                const b = p.b;
-                const el = document.createElement('div');
-                el.className = `bk-block is-${b.status}${p.companion ? ' is-companion' : ''}${p.session ? ' is-session' : ''}`;
-                if (p.session) {
-                    sessions.set(p.key, p.bookings);
-                    el.dataset.id = `session:${p.key}`;
-                } else {
-                    el.dataset.id = b.id;
-                }
-                el.dataset.colour = colours.get(b.bookableId) || 'grey';
-                el.tabIndex = 0;
-                el.setAttribute('role', 'button');
-                const top = (Math.max(p.startMin, from) - from) * PX_PER_MIN;
-                el.style.top = `${top}px`;
-                el.style.height = `${Math.max(18, (Math.min(p.endMin, to) - Math.max(p.startMin, from)) * PX_PER_MIN - 2)}px`;
-                el.style.left = `calc(${(p.lane / p.lanes) * 100}% + 2px)`;
-                el.style.width = `calc(${100 / p.lanes}% - 4px)`;
-                const s = wallClock(b.startAt, ctx.tz).time;
-                const e = wallClock(b.endAt, ctx.tz).time;
-                const time = view.value === 'week' ? esc(s) : `${esc(s)}-${esc(e)}`;
-                const statusNote = b.status !== 'confirmed' ? ` · ${esc({completed: 'done', 'no-show': 'no-show', cancelled: 'cancelled', pending: 'pending'}[b.status] || b.status)}` : '';
-                if (p.session) {
-                    // A class: one block for everyone in it.
-                    el.innerHTML = `<button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
-<strong>${time} ${esc(b.serviceName)} · ${p.bookings.length} booked</strong><small>${p.companion ? `with ${esc(b.bookableName)}` : esc(p.bookings.map(x => x.name).join(', '))}${view.value === 'week' && b.bookableName ? ` · ${esc(b.bookableName)}` : ''}</small>`;
-                    el.title = `${s}-${e} ${b.serviceName}: ${p.bookings.length} booked${b.bookableName ? ` (with ${withNames(b)})` : ''}`;
-                } else if (p.companion) {
-                    // Held along with someone else's booking (a court with the trainer).
-                    el.innerHTML = `<button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
-<strong>${time} ${esc(b.name)}</strong><small>${esc(b.serviceName)} · with ${esc(b.bookableName)}${statusNote}</small>`;
-                    el.title = `${s}-${e} ${b.serviceName}: ${b.name} - held with ${b.bookableName}'s booking`;
-                } else {
-                    el.innerHTML = `<button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
-<strong>${time} ${esc(b.name)}</strong><small>${esc(b.serviceName)}${view.value === 'week' && b.bookableName ? ` · ${esc(withNames(b))}` : b.alsoNames?.length ? ` · with ${esc(b.alsoNames.join(', '))}` : ''}${statusNote}</small>`;
-                    el.title = `${s}-${e} ${b.serviceName}: ${b.name}${withNames(b) ? ` (with ${withNames(b)})` : ''}`;
-                }
-                col.appendChild(el);
-            }
-            bodyRow.appendChild(col);
-        }
-        grid.appendChild(bodyRow);
-        gridBox.appendChild(grid);
-        if (!boot.services.length) {
-            const tip = document.createElement('p');
-            tip.className = 'bk-note';
-            tip.innerHTML = 'Next: <button type="button" class="bk-link">add a service</button> - what can be booked, for how long, and with whom.';
-            tip.querySelector('button').onclick = () => ctx.go('services', 'new');
-            gridBox.prepend(tip);
-        }
+            const blocks = layoutColumn(items).map(p => blockRow(p, {from, to, week, colours}));
+            return {key: c.key, date: c.date, bookableId: c.bookableId || false, windows, nowTop, blocks};
+        });
     }
     scope(M.effect(draw));
 
@@ -360,15 +373,3 @@ export async function mount(root, ctx) {
 
     return () => {};
 }
-
-function mergeWindows(list) {
-    const sorted = [...list].sort((a, b) => a.from - b.from);
-    const out = [];
-    for (const w of sorted) {
-        const last = out[out.length - 1];
-        if (last && w.from <= last.to) last.to = Math.max(last.to, w.to);
-        else out.push({...w});
-    }
-    return out;
-}
-

package/plugins/booking/admin/views/people.js

@@ -22,6 +22,31 @@ const ROW = `
   <button type="button" class="bk-kebab" aria-label="Actions" title="Actions">⋮</button>
 </div>`;
 
+// One weekday in the editor: its windows (a keyed list of their own) or "Closed".
+const DAY_ROW = `
+<div class="bk-day">
+  <span class="bk-day-name" data-bind-text="name"></span>
+  <div class="bk-windows">
+    <span class="bk-muted" data-bind-hidden="windows.value.length">Closed</span>
+    {{#each windows.value key=id}}<span class="bk-window">
+      <input type="time" class="form-input" step="300" data-model="from.value" data-bind-aria-label="$parent.name + ' from'">
+      <span>-</span>
+      <input type="time" class="form-input" step="300" data-model="to.value" data-bind-aria-label="$parent.name + ' to'">
+      <button type="button" class="btn btn-xs btn-ghost bk-x" title="Remove these hours" aria-label="Remove these hours" data-on-click="$root.dropWindow($parent, $data)"><span data-icon="x" data-icon-size="12"></span></button></span>{{/each}}
+  </div>
+  <button type="button" class="btn btn-xs btn-ghost" data-bind-title="'Add hours on ' + name" data-on-click="$parent.addWindow($data)"><span data-icon="plus" data-icon-size="12"></span> Hours</button>
+</div>`;
+
+// One spell of days off.
+const OFF_ROW = `
+<div class="bk-off">
+  <input type="date" class="form-input" data-model="from.value" aria-label="From" data-on-change="$parent.offFrom($data)">
+  <span>to</span>
+  <input type="date" class="form-input" data-model="to.value" aria-label="To">
+  <input class="form-input" data-model="label.value" placeholder="Holiday, training…" maxlength="80" aria-label="Why">
+  <button type="button" class="btn btn-xs btn-ghost bk-x" title="Remove" aria-label="Remove" data-on-click="$parent.dropOff($data)"><span data-icon="x" data-icon-size="12"></span></button>
+</div>`;
+
 /** "Mon-Fri 09:00-17:00" style summary of weekly hours. */
 export function hoursSummary(hours) {
     const txt = (d) => (hours?.[d] || []).map(w => `${w.from}-${w.to}`).join(', ');
@@ -123,43 +148,43 @@ export async function mount(root, ctx) {
         const f = {};
         for (const k of ['name', 'kind', 'description', 'userId', 'email', 'colour']) f[k] = M.observable(start[k] ?? '');
         const bools = {calendarBusy: M.observable(start.calendarBusy !== false), active: M.observable(start.active !== false)};
-        const hours = Object.fromEntries(DAY_KEYS.map(d => [d, (start.hours?.[d] || []).map(w => ({...w}))]));
-        let daysOff = (start.daysOff || []).map(o => ({...o}));
+        // Hours and days off are keyed lists (see DAY_ROW / OFF_ROW): a day's
+        // windows live in an observable so adding or removing one redraws only
+        // that day; each field is an observable the inputs write through.
+        let seq = 0;
+        const windowRow = (w) => ({id: `w${++seq}`, from: M.observable(w.from || ''), to: M.observable(w.to || '')});
+        const offRow = (o) => ({id: `o${++seq}`, from: M.observable(o.from || ''), to: M.observable(o.to || ''), label: M.observable(o.label || '')});
+        const days = M.observable(WEEK.map(d => ({id: d, name: DAY_NAMES[d], windows: M.observable((start.hours?.[d] || []).map(windowRow))})));
+        const daysOff = M.observable((start.daysOff || []).map(offRow));
+        const hoursOut = () => Object.fromEntries(days.peek().map(d => [d.id, d.windows.peek().map(w => ({from: w.from.peek(), to: w.to.peek()}))]));
+        const daysOffOut = () => daysOff.peek().map(o => ({from: o.from.peek(), to: o.to.peek(), label: o.label.peek()}));
         const isPerson = M.computed(() => f.kind.value === 'person');
         const saving = M.observable(false);
-        const snapshot = () => JSON.stringify([Object.values(f).map(o => o.peek()), Object.values(bools).map(o => o.peek()), hours, daysOff]);
+        const snapshot = () => JSON.stringify([Object.values(f).map(o => o.peek()), Object.values(bools).map(o => o.peek()), hoursOut(), daysOffOut()]);
         const opened = snapshot();
         let panel = null;
-
-        const drawHours = (el) => {
-            const box = el.querySelector('[data-part="hours"]');
-            box.innerHTML = WEEK.map(d => `<div class="bk-day" data-day="${d}">
-  <span class="bk-day-name">${DAY_NAMES[d]}</span>
-  <div class="bk-windows">${hours[d].length ? hours[d].map((w, i) => `<span class="bk-window">
-    <input type="time" class="form-input" step="300" value="${esc(w.from)}" data-i="${i}" data-k="from" aria-label="${DAY_NAMES[d]} from">
-    <span>-</span>
-    <input type="time" class="form-input" step="300" value="${esc(w.to)}" data-i="${i}" data-k="to" aria-label="${DAY_NAMES[d]} to">
-    <button type="button" class="btn btn-xs btn-ghost bk-x" data-drop="${i}" title="Remove these hours" aria-label="Remove these hours"><span data-icon="x" data-icon-size="12"></span></button></span>`).join('') : '<span class="bk-muted">Closed</span>'}</div>
-  <button type="button" class="btn btn-xs btn-ghost" data-add title="Add hours on ${DAY_NAMES[d]}"><span data-icon="plus" data-icon-size="12"></span> Hours</button>
-</div>`).join('');
-            I.scan(box);
-        };
-        const drawDaysOff = (el) => {
-            const box = el.querySelector('[data-part="daysoff"]');
-            box.innerHTML = daysOff.length ? daysOff.map((o, i) => `<div class="bk-off" data-i="${i}">
-  <input type="date" class="form-input" value="${esc(o.from)}" data-k="from" aria-label="From">
-  <span>to</span>
-  <input type="date" class="form-input" value="${esc(o.to)}" data-k="to" aria-label="To">
-  <input class="form-input" value="${esc(o.label)}" data-k="label" placeholder="Holiday, training…" maxlength="80" aria-label="Why">
-  <button type="button" class="btn btn-xs btn-ghost bk-x" data-drop title="Remove" aria-label="Remove"><span data-icon="x" data-icon-size="12"></span></button></div>`).join('')
-                : '<p class="bk-note">None. Add holidays and other days they cannot be booked.</p>';
-            I.scan(box);
-        };
+        // New rows carry icons; they are drawn once the list has rendered.
+        const rescan = () => { M.flushSync?.(); if (panel) { I.scan(panel.panel); requestAnimationFrame(() => panel?.panel.isConnected && I.scan(panel.panel)); } };
 
         panel = await openPanel({
             title: b ? `Edit ${b.name}` : 'Add a person or room',
             size: 'lg',
-            model: {...f, saving, isPerson},
+            model: {
+                ...f, saving, isPerson, days, daysOff,
+                addWindow(day) {
+                    const list = day.windows.peek();
+                    const last = list[list.length - 1];
+                    day.windows.value = [...list, windowRow(last ? {from: last.to.peek(), to: last.to.peek() < '17:00' ? '17:00' : last.to.peek()} : {from: '09:00', to: '17:00'})];
+                    rescan();
+                },
+                dropWindow(day, w) { day.windows.value = day.windows.peek().filter(x => x !== w); },
+                dropOff(o) { daysOff.value = daysOff.peek().filter(x => x !== o); },
+                // An end before the start is never meant: it follows the start.
+                offFrom(o, e) {
+                    const v = e?.target?.value ?? o.from.peek();
+                    if (!o.to.peek() || o.to.peek() < v) o.to.value = v;
+                }
+            },
             dirty: () => snapshot() !== opened,
             html: `<div class="bk-form">
   <div class="bk-grid">
@@ -182,10 +207,11 @@ export async function mount(root, ctx) {
     </div>
   </div>
   <h4 class="bk-sub">Opening hours <span data-help-title="Opening hours" data-help="When they can be booked, in ${esc(ctx.tz)}. Add several windows for a day with a break (09:00-12:30, 13:30-17:00). A day with no hours is closed."></span></h4>
-  <div class="bk-hours" data-part="hours"></div>
+  <div class="bk-hours" data-each="days.value key=id">${DAY_ROW}</div>
   <div class="bk-actions bk-actions-start"><button type="button" class="btn btn-xs btn-outline" data-on-click="copyMonday"><span data-icon="copy" data-icon-size="12"></span> Copy Monday to Tuesday-Friday</button></div>
   <h4 class="bk-sub">Days off <span data-help-title="Days off" data-help="Holidays and other days they cannot be booked. For days the whole business is closed, use Closed days in Booking settings."></span></h4>
-  <div data-part="daysoff"></div>
+  <p class="bk-note" data-bind-hidden="daysOff.value.length">None. Add holidays and other days they cannot be booked.</p>
+  <div data-each="daysOff.value key=id">${OFF_ROW}</div>
   <div class="bk-actions bk-actions-start"><button type="button" class="btn btn-xs btn-outline" data-on-click="addOff"><span data-icon="plus" data-icon-size="12"></span> Add days off</button></div>
   <div class="bk-actions"><span class="bk-spacer"></span>
     <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
@@ -196,52 +222,24 @@ export async function mount(root, ctx) {
                     box.checked = bools[box.dataset.bool].peek();
                     box.addEventListener('change', () => { bools[box.dataset.bool].value = box.checked; });
                 }
-                drawHours(el);
-                drawDaysOff(el);
-                const hoursBox = el.querySelector('[data-part="hours"]');
-                hoursBox.addEventListener('input', (e) => {
-                    const day = e.target.closest('[data-day]')?.dataset.day;
-                    if (!day || e.target.dataset.k === undefined) return;
-                    hours[day][Number(e.target.dataset.i)][e.target.dataset.k] = e.target.value;
-                });
-                hoursBox.addEventListener('click', (e) => {
-                    const day = e.target.closest('[data-day]')?.dataset.day;
-                    if (!day) return;
-                    const drop = e.target.closest('[data-drop]');
-                    if (drop) { hours[day].splice(Number(drop.dataset.drop), 1); drawHours(el); return; }
-                    if (e.target.closest('[data-add]')) {
-                        const last = hours[day][hours[day].length - 1];
-                        hours[day].push(last ? {from: last.to, to: last.to < '17:00' ? '17:00' : last.to} : {from: '09:00', to: '17:00'});
-                        drawHours(el);
-                    }
-                });
-                const offBox = el.querySelector('[data-part="daysoff"]');
-                offBox.addEventListener('input', (e) => {
-                    const row = e.target.closest('[data-i]');
-                    if (!row) return;
-                    const o = daysOff[Number(row.dataset.i)];
-                    o[e.target.dataset.k] = e.target.value;
-                    if (e.target.dataset.k === 'from' && (!o.to || o.to < o.from)) { o.to = o.from; row.querySelector('[data-k="to"]').value = o.from; }
-                });
-                offBox.addEventListener('click', (e) => {
-                    const row = e.target.closest('[data-i]');
-                    if (row && e.target.closest('[data-drop]')) { daysOff.splice(Number(row.dataset.i), 1); drawDaysOff(el); }
-                });
             },
             after: (el) => setTimeout(() => el.querySelector('input')?.focus(), 60),
             methods: {
                 cancel: () => panel?.close(),
                 copyMonday() {
-                    for (const d of ['tue', 'wed', 'thu', 'fri']) hours[d] = hours.mon.map(w => ({...w}));
-                    drawHours(panel.panel);
+                    const byId = Object.fromEntries(days.peek().map(d => [d.id, d]));
+                    for (const d of ['tue', 'wed', 'thu', 'fri']) byId[d].windows.value = byId.mon.windows.peek().map(w => windowRow({from: w.from.peek(), to: w.to.peek()}));
+                    rescan();
                 },
                 addOff() {
-                    daysOff = [...daysOff, {from: boot.today, to: boot.today, label: ''}];
-                    drawDaysOff(panel.panel);
+                    daysOff.value = [...daysOff.peek(), offRow({from: boot.today, to: boot.today, label: ''})];
+                    rescan();
                 },
                 async save() {
                     if (saving.peek()) return;
                     // Say which hours are wrong rather than let the server drop them quietly.
+                    const hours = hoursOut();
+                    const daysOff = daysOffOut();
                     for (const d of DAY_KEYS) {
                         for (const w of hours[d]) {
                             if (!(toMinutes(w.to) > toMinutes(w.from))) { E.toast(`${DAY_NAMES[d]}: ${w.from || '?'}-${w.to || '?'} - the end must be after the start.`, {type: 'warning'}); return; }