Ascend — Class Calendar

${\n DAY_NAMES[d.getDay()]\n }${d.getDate()}

`;\n }).join(\"\");\n}\nfunction buildGrid() {\n const gutter = document.getElementById(\"time-gutter-scroll\");\n gutter.style.height = GRID_H + \"px\";\n gutter.innerHTML = \"\";\n for (let h = START_H; h <= END_H; h++) {\n const lbl = document.createElement(\"div\");\n lbl.className = \"time-lbl\";\n lbl.style.top = (h - START_H) * PX_PER_H + \"px\";\n lbl.textContent = fmtMin(h * 60);\n gutter.appendChild(lbl);\n }\n const inner = document.getElementById(\"grid-inner\");\n inner.style.gridTemplateColumns = \"repeat(7,1fr)\";\n inner.style.height = GRID_H + \"px\";\n inner.innerHTML = \"\";\n const days = getWeekDays();\n days.forEach((d, di) => {\n const col = document.createElement(\"div\");\n col.className = \"day-col-grid\";\n col.dataset.di = di;\n col.dataset.day = d.getDay();\n col.dataset.date = dateStr(d);\n for (let h = START_H; h < END_H; h++) {\n const y = (h - START_H) * PX_PER_H;\n const hl = document.createElement(\"div\");\n hl.className = \"hour-line\";\n hl.style.top = y + \"px\";\n col.appendChild(hl);\n for (let q = 1; q < 4; q++) {\n const ql = document.createElement(\"div\");\n ql.className = q === 2 ? \"half-line\" : \"qtr-line\";\n ql.style.top = (y + q * PX_PER_MIN * 15) + \"px\";\n col.appendChild(ql);\n }\n }\n const hov = document.createElement(\"div\");\n hov.className = \"hover-cell\";\n col.appendChild(hov);\n col.addEventListener(\"mousemove\", (e) => onColMouseMove(e, col, hov));\n col.addEventListener(\"mouseleave\", () => {\n hov.style.opacity = \"0\";\n });\n col.addEventListener(\"click\", (e) => onColClick(e, col));\n inner.appendChild(col);\n });\n renderNowLine();\n setInterval(renderNowLine, 60000);\n inner.addEventListener(\"mousedown\", onGridMouseDown);\n const scroll = document.getElementById(\"grid-scroll\");\n scroll.addEventListener(\"scroll\", () => {\n gutter.style.transform = `translateY(${-scroll.scrollTop}px)`;\n });\n scroll.scrollTop = (6 - START_H) * PX_PER_H;\n}\nfunction renderNowLine() {\n document.querySelectorAll(\".now-line\").forEach((e) => e.remove());\n const now = new Date(), totalMin = now.getHours() * 60 + now.getMinutes();\n if (totalMin < START_H * 60 || totalMin > END_H * 60) return;\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n const mon = new Date(currentMonday);\n mon.setHours(0, 0, 0, 0);\n const diff = Math.round((today - mon) / 86400000);\n if (diff < 0 || diff > 6) return;\n const cols = document.querySelectorAll(\".day-col-grid\");\n if (cols[diff]) {\n const nl = document.createElement(\"div\");\n nl.className = \"now-line\";\n nl.style.top = yFromMin(totalMin) + \"px\";\n const dot = document.createElement(\"div\");\n dot.className = \"now-dot\";\n nl.appendChild(dot);\n cols[diff].appendChild(nl);\n }\n}\nfunction onColMouseMove(e, col, hov) {\n if (isDraggingEvt || isRectSelecting) {\n hov.style.opacity = \"0\";\n return;\n }\n const rect = col.getBoundingClientRect();\n const snapMin = Math.round(minFromY(e.clientY - rect.top) / 15) * 15;\n hov.style.top = yFromMin(snapMin) + \"px\";\n hov.style.height = (PX_PER_MIN * 60) + \"px\";\n hov.style.opacity = \"1\";\n}\nfunction onColClick(e, col) {\n if (isDraggingEvt || isRectSelecting || justDragged) return;\n if (e.target.closest(\".evt-block\")) return;\n if (selectMode || e.shiftKey) return;\n if (selectedKeys.size) {\n clearSelection();\n return;\n }\n const rect = col.getBoundingClientRect();\n const snapMin = Math.round(minFromY(e.clientY - rect.top) / 15) * 15;\n const day = parseInt(col.dataset.day);\n const ds = col.dataset.date;\n openPanel(day, snapMin, ds, null);\n}\nlet filterState = {\n instructor: [],\n program: [],\n weekday: [],\n timeFrom: \"\",\n timeTo: \"\",\n};\nfunction eventAppearsOn(ev, d) {\n const dow = d.getDay(), ds = dateStr(d);\n if (ev.exceptions && ev.exceptions.includes(ds)) return false;\n if (ev.recurring) return ev.seriesDays.includes(dow);\n return ev.singleDate === ds;\n}\nfunction passesFilter(ev, dow) {\n if (filterState.instructor.length) {\n const inst = ev.instByDay[dow] || Object.values(ev.instByDay)[0];\n if (!filterState.instructor.includes(inst)) return false;\n }\n if (filterState.program.length && !filterState.program.includes(ev.program)) {\n return false;\n }\n if (filterState.weekday.length && !filterState.weekday.includes(dow)) {\n return false;\n }\n if (\n filterState.timeFrom && ev.startMin < timeStrToMin(filterState.timeFrom)\n ) return false;\n if (filterState.timeTo && ev.startMin > timeStrToMin(filterState.timeTo)) {\n return false;\n }\n return true;\n}\nfunction layoutOverlaps(items) {\n items.sort((a, b) => a.startMin - b.startMin || a.endMin - b.endMin);\n const assign = (cluster) => {\n const colEnds = []; // last endMin per column\n cluster.forEach((it) => {\n let c = 0;\n for (; c < colEnds.length; c++) if (colEnds[c] <= it.startMin) break;\n it.col = c;\n colEnds[c] = it.endMin;\n });\n cluster.forEach((it) => it.ncols = colEnds.length);\n };\n let cluster = [], clusterEnd = -Infinity;\n items.forEach((it) => {\n if (cluster.length && it.startMin >= clusterEnd) {\n assign(cluster);\n cluster = [];\n clusterEnd = -Infinity;\n }\n cluster.push(it);\n clusterEnd = Math.max(clusterEnd, it.endMin);\n });\n if (cluster.length) assign(cluster);\n return items;\n}\nfunction renderEvents() {\n document.querySelectorAll(\".evt-block\").forEach((e) => e.remove());\n const days = getWeekDays();\n const cols = document.querySelectorAll(\".day-col-grid\");\n days.forEach((d, di) => {\n const col = cols[di];\n if (!col) return;\n const dow = d.getDay(), ds = dateStr(d);\n const items = [];\n events.forEach((ev) => {\n if (!eventAppearsOn(ev, d)) return;\n const dur = Math.max(ev.duration || 60, 15);\n items.push({ ev, startMin: ev.startMin, endMin: ev.startMin + dur });\n });\n if (!items.length) return;\n layoutOverlaps(items);\n items.forEach(({ ev, col: ci, ncols }) => {\n const dimmed = !passesFilter(ev, dow);\n const inst = ev.instByDay[dow] || Object.values(ev.instByDay)[0] || \"TBD\";\n const top = yFromMin(ev.startMin), h = ev.duration * PX_PER_MIN;\n const instanceKey = ev.id + \"|\" + ds;\n const blk = document.createElement(\"div\");\n blk.className = \"evt-block\" +\n (selectedKeys.has(instanceKey) ? \" selected\" : \"\") +\n (dimmed ? \" dimmed\" : \"\");\n blk.dataset.id = ev.id;\n blk.dataset.date = ds;\n blk.dataset.key = instanceKey;\n blk.dataset.dow = dow;\n const leftPct = (ci / ncols) * 100, widthPct = (1 / ncols) * 100;\n blk.style.cssText = `top:${top}px;height:${\n Math.max(h, 22)\n }px;left:calc(${leftPct}% + 1px);width:calc(${widthPct}% - 3px);right:auto;background:${ev.color}22;border-left-color:${ev.color};color:${ev.color}`;\n const progLabel = (ev.program === \"internal\" && ev.title)\n ? ev.title\n : (PROG_LABELS[ev.program] || ev.program);\n blk.innerHTML = `

${fmtMin(ev.startMin)}

${\n ev.duration >= 25 ? `

${progLabel}

` : \"\"\n }

${inst}

✓

`;\n blk.addEventListener(\"mousedown\", (e) => startEvtDrag(e, ev, blk, d, ds));\n blk.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n onEvtClick(e, ev, ds);\n });\n col.appendChild(blk);\n });\n });\n}\nlet selectMode = false;\nlet selectedKeys = new Set(); // instanceKey = id|date\nfunction toggleSelectMode() {\n selectMode = !selectMode;\n document.getElementById(\"select-btn\").classList.toggle(\"active\", selectMode);\n}\nfunction clearSelection() {\n selectedKeys.clear();\n selectMode = false;\n document.getElementById(\"select-btn\").classList.remove(\"active\");\n updateBulkUI();\n renderEvents();\n}\nfunction onEvtClick(e, ev, ds) {\n if (justDragged) return;\n const key = ev.id + \"|\" + ds;\n if (selectMode || e.shiftKey) {\n e.stopPropagation();\n selectedKeys.has(key) ? selectedKeys.delete(key) : selectedKeys.add(key);\n updateBulkUI();\n renderEvents();\n return;\n }\n openPanel(null, null, ds, ev);\n}\nfunction updateBulkUI() {\n const n = selectedKeys.size;\n document.getElementById(\"bulk-bar\").classList.toggle(\"visible\", n > 0);\n}\nfunction getSelectedEvents() {\n const out = [];\n selectedKeys.forEach((key) => {\n const [id, ds] = key.split(\"|\");\n const ev = events.find((e) => e.id === parseInt(id));\n if (ev) out.push({ ev, date: ds });\n });\n return out;\n}\nfunction openModal(title, bodyHTML) {\n document.getElementById(\"modal-title\").textContent = title;\n document.getElementById(\"modal-body\").innerHTML = bodyHTML;\n document.getElementById(\"modal-backdrop\").style.display = \"block\";\n document.getElementById(\"app-modal\").style.display = \"block\";\n}\nfunction closeModal() {\n document.getElementById(\"modal-backdrop\").style.display = \"none\";\n document.getElementById(\"app-modal\").style.display = \"none\";\n document.getElementById(\"modal-body\").innerHTML = \"\";\n}\nfunction bulkDelete() {\n const sel = getSelectedEvents();\n if (!sel.length) return;\n openModal(\n `Delete ${sel.length} class${sel.length > 1 ? \"es\" : \"\"}?`,\n `\n

This removes the selected class instance(s). Recurring series keep their other dates.

\n\n\n

`,\n );\n}\nfunction confirmBulkDelete() {\n pushHistory();\n const atIds = [];\n getSelectedEvents().forEach(({ ev, date }) => {\n if (ev.atId) atIds.push(ev.atId);\n if (ev.recurring) {\n if (!ev.exceptions) ev.exceptions = [];\n if (!ev.exceptions.includes(date)) ev.exceptions.push(date);\n } else events = events.filter((e) => e.id !== ev.id);\n });\n closeModal();\n clearSelection();\n if (atIds.length && API.enabled) {\n deleteClassInAirtable(atIds).then((r) => {\n if (r && r.success) loadWeekFromAirtable();\n });\n } else renderEvents();\n}\nfunction bulkDuplicate() {\n const sel = getSelectedEvents();\n if (!sel.length) return;\n pushHistory();\n if (API.enabled) {\n const insts = [];\n const seen = new Set();\n sel.forEach(({ ev, date }) => {\n const k = ev.id + \"|\" + date;\n if (seen.has(k)) return;\n seen.add(k);\n insts.push(eventToInstance(ev, { date, startMin: ev.startMin + 60 }));\n });\n clearSelection();\n pushClassesToAirtable(insts).then((r) => {\n if (r && r.success) loadWeekFromAirtable();\n });\n return;\n }\n const seen = new Set();\n sel.forEach(({ ev }) => {\n if (seen.has(ev.id)) return;\n seen.add(ev.id);\n events.push({\n ...ev,\n id: nextId++,\n atId: undefined,\n startMin: ev.startMin + 60,\n instByDay: { ...ev.instByDay },\n seriesDays: [...ev.seriesDays],\n exceptions: [],\n });\n });\n clearSelection();\n renderEvents();\n}\nfunction bulkChangeInst() {\n const sel = getSelectedEvents();\n if (!sel.length) return;\n openModal(\n \"Change coach\",\n `\n

\nAssign coach to ${sel.length} selected class${\n sel.length > 1 ? \"es\" : \"\"\n }\n\n

\n\n\n

`,\n );\n}\nfunction confirmBulkInst() {\n const inst = document.getElementById(\"modal-coach-sel\").value;\n pushHistory();\n const updates = [];\n getSelectedEvents().forEach(({ ev, date }) => {\n const dow = new Date(date + \"T12:00:00\").getDay();\n ev.instByDay[dow] = inst;\n if (ev.atId && API.enabled) {\n updates.push(\n updateClassInAirtable(ev.atId, eventToInstance(ev, { date })),\n );\n }\n });\n closeModal();\n clearSelection();\n if (updates.length) Promise.all(updates).then(() => loadWeekFromAirtable());\n else renderEvents();\n}\nfunction bulkEdit() {\n const sel = getSelectedEvents();\n if (sel.length === 1) {\n const s = sel[0];\n clearSelection();\n openPanel(null, null, s.date, s.ev);\n } else bulkChangeInst();\n}\nlet isDraggingEvt = false;\nlet justDragged = false;\nfunction startEvtDrag(e, ev, blk, fromDate, ds) {\n if (!selectMode || e.button !== 0) return;\n e.stopPropagation();\n let moved = false;\n const startX = e.clientX, startY = e.clientY;\n const ghost = document.createElement(\"div\");\n ghost.className = \"evt-drag-ghost\";\n const inst = ev.instByDay[fromDate.getDay()] ||\n Object.values(ev.instByDay)[0];\n ghost.style.cssText =\n `background:${ev.color}33;border-left-color:${ev.color};color:${ev.color};width:${blk.offsetWidth}px;padding:4px 6px;font-size:10px`;\n ghost.innerHTML = `

${\n fmtMin(ev.startMin)\n }

${inst}

`;\n function onMove(e2) {\n const dx = e2.clientX - startX, dy = e2.clientY - startY;\n if (!moved && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) {\n moved = true;\n isDraggingEvt = true;\n blk.style.opacity = \".3\";\n document.body.appendChild(ghost);\n }\n if (!moved) return;\n ghost.style.left = (e2.clientX - 30) + \"px\";\n ghost.style.top = (e2.clientY - 20) + \"px\";\n }\n function onUp(e2) {\n document.removeEventListener(\"mousemove\", onMove);\n document.removeEventListener(\"mouseup\", onUp);\n if (ghost.parentNode) ghost.remove();\n blk.style.opacity = \"\";\n if (!moved) {\n isDraggingEvt = false;\n return;\n }\n isDraggingEvt = false;\n justDragged = true;\n setTimeout(() => {\n justDragged = false;\n }, 60);\n const cols = document.querySelectorAll(\".day-col-grid\");\n let targetDi = -1;\n cols.forEach((c, i) => {\n const r = c.getBoundingClientRect();\n if (e2.clientX >= r.left && e2.clientX <= r.right) targetDi = i;\n });\n if (targetDi === -1) {\n renderEvents();\n return;\n }\n const col = cols[targetDi], colRect = col.getBoundingClientRect();\n const snapMin = Math.round(minFromY(e2.clientY - colRect.top) / 15) * 15;\n const newDow = parseInt(col.dataset.day);\n const newDate = col.dataset.date;\n const oldDow = fromDate.getDay();\n if (newDate === ds && snapMin === ev.startMin) {\n renderEvents();\n return;\n }\n pushHistory();\n if (ev.recurring) {\n if (!ev.exceptions) ev.exceptions = [];\n if (!ev.exceptions.includes(ds)) ev.exceptions.push(ds);\n events.push({\n id: nextId++,\n seriesDays: [newDow],\n startMin: snapMin,\n duration: ev.duration,\n instByDay: {\n [newDow]: ev.instByDay[oldDow] || Object.values(ev.instByDay)[0],\n },\n program: ev.program,\n recurring: false,\n singleDate: newDate,\n color: ev.color,\n exceptions: [],\n recurUnit: \"blocks\",\n recurNum: 1,\n });\n } else {\n ev.singleDate = newDate;\n ev.seriesDays = [newDow];\n ev.startMin = snapMin;\n ev.instByDay = { [newDow]: Object.values(ev.instByDay)[0] };\n }\n if (ev.atId && API.enabled) {\n updateClassInAirtable(\n ev.atId,\n eventToInstance(ev, { date: newDate, startMin: snapMin }),\n )\n .then((r) => {\n if (r && r.success) loadWeekFromAirtable();\n });\n }\n renderEvents();\n }\n document.addEventListener(\"mousemove\", onMove);\n document.addEventListener(\"mouseup\", onUp);\n}\nlet isRectSelecting = false, rectStart = { x: 0, y: 0 };\nfunction onGridMouseDown(e) {\n if (e.target.closest(\".evt-block\")) return;\n if (!selectMode && !e.shiftKey) {\n if (selectedKeys.size) clearSelection();\n return;\n }\n if (e.button !== 0) return;\n isRectSelecting = true;\n rectStart = { x: e.clientX, y: e.clientY };\n const rect = document.getElementById(\"rect-select\");\n rect.style.display = \"block\";\n rect.style.left = e.clientX + \"px\";\n rect.style.top = e.clientY + \"px\";\n rect.style.width = \"0\";\n rect.style.height = \"0\";\n function onMove(e2) {\n const x = Math.min(e2.clientX, rectStart.x),\n y = Math.min(e2.clientY, rectStart.y);\n rect.style.left = x + \"px\";\n rect.style.top = y + \"px\";\n rect.style.width = Math.abs(e2.clientX - rectStart.x) + \"px\";\n rect.style.height = Math.abs(e2.clientY - rectStart.y) + \"px\";\n }\n function onUp(e2) {\n isRectSelecting = false;\n rect.style.display = \"none\";\n document.removeEventListener(\"mousemove\", onMove);\n document.removeEventListener(\"mouseup\", onUp);\n const selRect = {\n x: Math.min(e2.clientX, rectStart.x),\n y: Math.min(e2.clientY, rectStart.y),\n w: Math.abs(e2.clientX - rectStart.x),\n h: Math.abs(e2.clientY - rectStart.y),\n };\n if (selRect.w < 5 && selRect.h < 5) return;\n document.querySelectorAll(\".evt-block\").forEach((blk) => {\n const r = blk.getBoundingClientRect();\n const overlaps =\n !(r.right < selRect.x || r.left > selRect.x + selRect.w ||\n r.bottom < selRect.y || r.top > selRect.y + selRect.h);\n if (overlaps) selectedKeys.add(blk.dataset.key);\n });\n updateBulkUI();\n renderEvents();\n }\n document.addEventListener(\"mousemove\", onMove);\n document.addEventListener(\"mouseup\", onUp);\n}\nlet editingEvt = null;\nlet seriesMode = false, seriesList = [], seriesChecked = new Set();\nfunction openPanel(day, startMin, ds, ev) {\n editingEvt = ev || null;\n seriesMode = false;\n document.getElementById(\"panel-backdrop\").style.display = \"block\";\n document.getElementById(\"side-panel\").classList.add(\"open\");\n document.getElementById(\"panel-title\").textContent = ev\n ? \"Edit class\"\n : \"New class\";\n const startM = startMin !== null ? startMin : (ev ? ev.startMin : 6 * 60);\n const prog = ev ? ev.program : \"team\";\n const dur = ev ? ev.duration : 60;\n const cap = ev && ev.capacity != null ? ev.capacity : 8;\n const ann = ev && ev.announcement ? ev.announcement : \"\";\n const title = ev && ev.title ? ev.title : \"\";\n const days = ev ? [...ev.seriesDays] : (day !== null ? [day] : [1, 3, 5]);\n const isRecur = ev ? ev.recurring : true;\n const rUnit = ev ? ev.recurUnit : \"blocks\";\n const rNum = ev ? ev.recurNum : 1;\n const startDate = ds || dateStr(new Date());\n document.getElementById(\"panel-body\").innerHTML = `\n

Program type\n

\n${\n PROG_ORDER.map((p) =>\n ``\n ).join(\"\")\n }\n

Event title\n

Days of week\n

${\n [1, 2, 3, 4, 5, 6, 0].map((d) =>\n ``\n ).join(\"\")\n }

Start time\n

Duration\n

Class capacity\n

Coach per day

Announcement (shows on kiosk)\n

\nRecurring class\n

Start date

Run for\n

\n\n\n

Preview\n

\n\n

Reserves members into Airtable${\n API.pushToTrainerize ? \" + Trainerize\" : \"\"\n }

`;\n renderInstPerDay(days, ev);\n refreshPreview();\n document.getElementById(\"panel-footer\").innerHTML = ev\n ? ``\n : ``;\n if (ev && ev.atId && ev.seriesId && API.enabled) {\n const prevLabel = [...document.querySelectorAll(\"#panel-body .p-label\")]\n .find((l) => l.textContent === \"Preview\");\n if (prevLabel) prevLabel.textContent = \"This series\";\n document.getElementById(\"panel-footer\").innerHTML =\n ``;\n renderSeriesManager(ev);\n }\n}\nasync function renderSeriesManager(ev) {\n seriesMode = true;\n seriesList = [];\n seriesChecked = new Set();\n const scroll = document.getElementById(\"preview-scroll\"),\n footer = document.getElementById(\"preview-footer\");\n if (scroll) {\n scroll.innerHTML =\n '

Loading series…

';\n }\n if (footer) footer.textContent = \"\";\n try {\n const res = await apiFetch(\n \"/series?seriesId=\" + encodeURIComponent(ev.seriesId),\n );\n seriesList = (res && res.classes) || [];\n seriesChecked = new Set(ev.atId ? [ev.atId] : []);\n renderSeriesList();\n } catch (e) {\n if (scroll) {\n scroll.innerHTML =\n '

Couldn\\'t load series

';\n }\n }\n}\nfunction renderSeriesList() {\n const scroll = document.getElementById(\"preview-scroll\"),\n footer = document.getElementById(\"preview-footer\");\n if (!scroll) return;\n if (!seriesList.length) {\n scroll.innerHTML =\n '

No other occurrences found

';\n if (footer) footer.textContent = \"\";\n return;\n }\n scroll.innerHTML = seriesList.map((c) => {\n const on = seriesChecked.has(c.id);\n const d = new Date(c.date + \"T12:00:00\");\n return `${\n fmtDateLong(d)\n }${c.time || \"\"}`;\n }).join(\"\");\n if (footer) {\n footer.innerHTML =\n `

${\n seriesChecked.size === seriesList.length ? \"Clear all\" : \"Select all\"\n }${seriesChecked.size}/${seriesList.length}

`;\n }\n}\nfunction toggleSeries(id) {\n if (seriesChecked.has(id)) seriesChecked.delete(id);\n else seriesChecked.add(id);\n renderSeriesList();\n}\nfunction toggleSeriesAll() {\n if (seriesChecked.size === seriesList.length) seriesChecked.clear();\n else seriesChecked = new Set(seriesList.map((c) => c.id));\n renderSeriesList();\n}\nfunction deleteSeriesSelected() {\n const ids = [...seriesChecked];\n if (!ids.length) {\n toast(\"Select at least one occurrence\", \"err\");\n return;\n }\n openModal(\n `Delete ${ids.length} class${ids.length > 1 ? \"es\" : \"\"}?`,\n `

This permanently deletes the selected class${\n ids.length > 1 ? \"es\" : \"\"\n } from Airtable.

`,\n );\n}\nfunction confirmDeleteSeriesSelected() {\n const ids = [...seriesChecked];\n closeModal();\n closePanel();\n deleteClassInAirtable(ids).then((r) => {\n if (r && r.success) loadWeekFromAirtable();\n });\n}\nfunction saveSeriesEdit() {\n const ids = [...seriesChecked];\n if (!ids.length) {\n toast(\"Select at least one occurrence\", \"err\");\n return;\n }\n const startMin = timeStrToMin(\n document.getElementById(\"p-start\")?.value || \"06:00\",\n );\n const dur = parseInt(document.getElementById(\"p-dur\")?.value) || 60;\n const activeLabel =\n [...document.querySelectorAll(\".prog-chip.active\")].map((x) =>\n x.textContent.trim()\n )[0] || \"Team\";\n const prog = PROG_ORDER.find((p) => PROG_LABELS[p] === activeLabel) || \"team\";\n const capRaw = (document.getElementById(\"p-capacity\")?.value || \"\").trim();\n const capacity = capRaw === \"\" ? 8 : (parseInt(capRaw) || 8);\n const announcement = (document.getElementById(\"p-announce\")?.value || \"\")\n .trim();\n const title = (document.getElementById(\"p-title\")?.value || \"\").trim();\n const time = fmtMin(startMin);\n const updates = seriesList.filter((c) => seriesChecked.has(c.id)).map((c) =>\n updateClassInAirtable(c.id, {\n date: c.date,\n time,\n program: prog,\n capacity,\n duration: dur,\n announcement,\n notes: (prog === \"internal\" && title) ? title : \"\",\n })\n );\n closePanel();\n Promise.all(updates).then(() => loadWeekFromAirtable());\n}\nfunction setProg(p) {\n document.querySelectorAll(\".prog-chip\").forEach((c) =>\n c.classList.toggle(\n \"active\",\n c.textContent.toLowerCase() === PROG_LABELS[p].toLowerCase(),\n )\n );\n const row = document.getElementById(\"internal-title-row\");\n if (row) row.style.display = (p === \"internal\") ? \"\" : \"none\";\n}\nfunction togglePanelDay(d) {\n const b = document.querySelector(`.day-chip[data-d=\"${d}\"]`);\n b.classList.toggle(\"active\");\n renderInstPerDay(getPanelDays());\n refreshPreview();\n}\nfunction getPanelDays() {\n return [...document.querySelectorAll(\".day-chip.active\")].map((b) =>\n parseInt(b.dataset.d)\n );\n}\nfunction renderInstPerDay(days, ev) {\n const cont = document.getElementById(\"inst-per-day\");\n if (!cont) return;\n cont.innerHTML = \"\";\n const ord = (x) => x === 0 ? 7 : x;\n days.slice().sort((a, b) => ord(a) - ord(b)).forEach((d) => {\n const row = document.createElement(\"div\");\n row.style.cssText = \"display:flex;align-items:center;gap:8px\";\n const badge = document.createElement(\"span\");\n badge.style.cssText =\n \"font-size:10px;font-weight:500;color:var(--accent);background:var(--accent2);border-radius:4px;padding:2px 6px;min-width:32px;text-align:center;flex-shrink:0\";\n badge.textContent = DAY_NAMES[d];\n const sel = document.createElement(\"select\");\n sel.className = \"p-select\";\n sel.dataset.day = d;\n const cur = ev && ev.instByDay ? ev.instByDay[d] : null;\n sel.innerHTML = STAFF.map((s) =>\n `${s}`\n ).join(\"\");\n row.appendChild(badge);\n row.appendChild(sel);\n cont.appendChild(row);\n });\n}\nfunction toggleRecur(e) {\n const chk = document.getElementById(\"p-recur\");\n setTimeout(() => {\n document.getElementById(\"recur-fields\").style.display = chk.checked\n ? \"\"\n : \"none\";\n refreshPreview();\n }, 0);\n}\nfunction refreshPreview() {\n if (seriesMode) return; // series manager owns the preview area\n const isRecur = document.getElementById(\"p-recur\")?.checked;\n const scroll = document.getElementById(\"preview-scroll\"),\n footer = document.getElementById(\"preview-footer\");\n if (!scroll) return;\n const startT = document.getElementById(\"p-start\")?.value || \"06:00\";\n const startMin = timeStrToMin(startT);\n if (!isRecur) {\n scroll.innerHTML =\n `

Single class${\n fmtMin(startMin)\n }

`;\n footer.textContent = \"\";\n return;\n }\n const startVal = document.getElementById(\"p-startdate\")?.value;\n const rnum = parseInt(document.getElementById(\"p-rnum\")?.value) || 1;\n const runit = document.getElementById(\"p-runit\")?.value || \"blocks\";\n const days = getPanelDays();\n if (!startVal || !days.length) {\n scroll.innerHTML =\n '

Select days to preview

';\n footer.textContent = \"\";\n return;\n }\n const dates = generateDates(startVal, rnum, runit, days);\n if (!dates.length) {\n scroll.innerHTML =\n '

No dates in range

';\n footer.textContent = \"\";\n return;\n }\n scroll.innerHTML = dates.slice(0, 15).map((d) => {\n const ds = dateStr(d);\n const info = getBlockInfo(ds);\n return `

${\n fmtDateLong(d)\n }${fmtMin(startMin)}${\n info\n ? `B${info.block} W${info.week}`\n : \"\"\n }

`;\n }).join(\"\");\n footer.textContent = dates.length > 15\n ? `Showing 15 of ${dates.length} classes`\n : `${dates.length} classes total`;\n}\nfunction generateDates(startStr, num, unit, days) {\n const start = new Date(startStr + \"T12:00:00\");\n const results = [];\n if (unit === \"occurrences\") {\n let cur = new Date(start), count = 0;\n while (count < num && results.length < 400) {\n if (days.includes(cur.getDay())) {\n results.push(new Date(cur));\n count++;\n }\n cur.setDate(cur.getDate() + 1);\n }\n return results;\n }\n let end;\n if (unit === \"weeks\") {\n end = new Date(start);\n end.setDate(end.getDate() + num * 7 - 1);\n } // 1 week = 7 days inclusive\n else if (unit === \"months\") {\n end = new Date(start);\n end.setMonth(end.getMonth() + num);\n end.setDate(end.getDate() - 1);\n } else if (unit === \"blocks\") {\n let found = 0, sb = null, endDate = null;\n for (const b of BLOCKS) {\n const bs = new Date(b.start + \"T00:00:00\"),\n be = new Date(b.end + \"T23:59:59\");\n if (!sb && start <= be) sb = b.num;\n if (sb && b.num >= sb) {\n found++;\n if (found === num) {\n endDate = be;\n break;\n }\n }\n }\n end = endDate || new Date(start.getTime() + num * 35 * 86400000);\n }\n let cur = new Date(start);\n while (cur <= end && results.length < 400) {\n if (days.includes(cur.getDay())) results.push(new Date(cur));\n cur.setDate(cur.getDate() + 1);\n }\n return results;\n}\nfunction saveEvent() {\n const isRecur = document.getElementById(\"p-recur\")?.checked || false;\n const startMin = timeStrToMin(\n document.getElementById(\"p-start\")?.value || \"06:00\",\n );\n const dur = parseInt(document.getElementById(\"p-dur\")?.value) || 60;\n const days = getPanelDays();\n const activeLabel =\n [...document.querySelectorAll(\".prog-chip.active\")].map((c) =>\n c.textContent.trim()\n )[0] || \"Team\";\n const prog = PROG_ORDER.find((p) => PROG_LABELS[p] === activeLabel) || \"team\";\n const capRaw = (document.getElementById(\"p-capacity\")?.value || \"\").trim();\n const capacity = capRaw === \"\" ? 8 : (parseInt(capRaw) || 8);\n const announcement = (document.getElementById(\"p-announce\")?.value || \"\")\n .trim();\n const title = (document.getElementById(\"p-title\")?.value || \"\").trim();\n const rnum = parseInt(document.getElementById(\"p-rnum\")?.value) || 1;\n const runit = document.getElementById(\"p-runit\")?.value || \"blocks\";\n const instByDay = {};\n document.querySelectorAll(\"#inst-per-day select\").forEach((s) => {\n instByDay[parseInt(s.dataset.day)] = s.value;\n });\n if (!days.length) {\n openModal(\n \"No days selected\",\n '

Pick at least one day of the week before creating classes.

',\n );\n return;\n }\n pushHistory();\n if (editingEvt) {\n editingEvt.startMin = startMin;\n editingEvt.duration = dur;\n editingEvt.program = prog;\n editingEvt.capacity = capacity;\n editingEvt.announcement = announcement;\n editingEvt.title = title;\n editingEvt.color = PROG_COLORS[prog];\n editingEvt.recurring = isRecur;\n editingEvt.seriesDays = days;\n editingEvt.instByDay = instByDay;\n editingEvt.recurUnit = runit;\n editingEvt.recurNum = rnum;\n const _ed = document.getElementById(\"p-startdate\")?.value ||\n editingEvt.singleDate || dateStr(new Date());\n if (!isRecur) editingEvt.singleDate = _ed;\n if (editingEvt.atId && API.enabled) {\n const dow = new Date(_ed + \"T12:00:00\").getDay();\n updateClassInAirtable(editingEvt.atId, {\n date: _ed,\n time: fmtMin(startMin),\n program: prog,\n coachRecId: staffRecId(instByDay[dow] || Object.values(instByDay)[0]),\n capacity,\n duration: dur,\n announcement,\n notes: (prog === \"internal\" && title) ? title : \"\",\n }).then((r) => {\n if (r && r.success) loadWeekFromAirtable();\n });\n closePanel();\n return;\n }\n closePanel();\n renderEvents();\n return;\n }\n const color = PROG_COLORS[prog];\n const _startVal = document.getElementById(\"p-startdate\")?.value ||\n dateStr(new Date());\n const _seriesId = isRecur\n ? (\"sb-\" + Date.now().toString(36) + Math.random().toString(36).slice(2, 7))\n : null;\n const _instances = buildClassInstances({\n isRecur,\n startVal: _startVal,\n rnum,\n runit,\n days,\n startMin,\n prog,\n capacity,\n duration: dur,\n announcement,\n title,\n instByDay,\n seriesId: _seriesId,\n });\n if (API.enabled) {\n pushClassesToAirtable(_instances).then((r) => {\n if (r && r.success) loadWeekFromAirtable();\n });\n closePanel();\n return;\n }\n if (isRecur) {\n events.push({\n id: nextId++,\n seriesDays: days,\n startMin,\n duration: dur,\n capacity,\n announcement,\n title,\n instByDay,\n program: prog,\n recurring: true,\n recurUnit: runit,\n recurNum: rnum,\n color,\n exceptions: [],\n singleDate: null,\n });\n } else {\n days.forEach((d) => {\n events.push({\n id: nextId++,\n seriesDays: [d],\n startMin,\n duration: dur,\n capacity,\n announcement,\n title,\n instByDay: { [d]: instByDay[d] },\n program: prog,\n recurring: false,\n singleDate: _startVal,\n color,\n exceptions: [],\n });\n });\n }\n closePanel();\n renderEvents();\n}\nfunction deleteEventFromPanel() {\n if (!editingEvt) return;\n const ev = editingEvt;\n if (ev.recurring) {\n openModal(\n \"Delete recurring class\",\n `\n

This will delete the entire \"${\n ev.seriesDays.map((d) => DAY_NAMES[d]).join(\"/\")\n }\" series and all its dates.

\n\n\n

`,\n );\n } else {\n confirmPanelDelete(ev.id);\n }\n}\nfunction confirmPanelDelete(id) {\n pushHistory();\n const ev = events.find((e) => e.id === id);\n const atId = ev && ev.atId;\n events = events.filter((e) => e.id !== id);\n closeModal();\n closePanel();\n if (atId && API.enabled) {\n deleteClassInAirtable([atId]).then((r) => {\n if (r && r.success) loadWeekFromAirtable();\n });\n } else renderEvents();\n}\nfunction closePanel() {\n document.getElementById(\"side-panel\").classList.remove(\"open\");\n document.getElementById(\"panel-backdrop\").style.display = \"none\";\n editingEvt = null;\n seriesMode = false;\n}\nlet miniMode = null, miniCalMonth = new Date(), blockJumpNum = null;\nfunction toggleMiniCal(mode) {\n const pop = document.getElementById(\"mini-pop\");\n if (pop.classList.contains(\"visible\") && miniMode === mode) {\n closeMiniPop();\n return;\n }\n miniMode = mode;\n pop.classList.remove(\"pop-block\", \"pop-week\");\n if (mode === \"week\") pop.classList.add(\"pop-week\");\n const btn = document.getElementById(\n mode === \"date\" ? \"jump-date-btn\" : \"week-badge\",\n );\n const rect = btn.getBoundingClientRect();\n pop.style.left = Math.min(rect.left, window.innerWidth - 260) + \"px\";\n pop.style.top = (rect.bottom + 4) + \"px\";\n pop.classList.add(\"visible\");\n if (mode === \"date\") {\n miniCalMonth = new Date(currentMonday);\n renderMiniCal();\n } else {\n const info = getBlockInfo(dateStr(getWeekDays()[3])) || { block: 6 };\n blockJumpNum = info.block;\n renderBlockJump();\n }\n}\nfunction closeMiniPop() {\n document.getElementById(\"mini-pop\").classList.remove(\"visible\");\n miniMode = null;\n}\nfunction toggleBlockMenu() {\n const pop = document.getElementById(\"mini-pop\");\n if (pop.classList.contains(\"visible\") && miniMode === \"block\") {\n closeMiniPop();\n return;\n }\n miniMode = \"block\";\n pop.classList.remove(\"pop-week\");\n pop.classList.add(\"pop-block\");\n const btn = document.getElementById(\"block-badge\");\n const rect = btn.getBoundingClientRect();\n pop.style.left = Math.min(rect.left, window.innerWidth - 260) + \"px\";\n pop.style.top = (rect.bottom + 4) + \"px\";\n pop.classList.add(\"visible\");\n renderBlockMenu();\n}\nfunction renderBlockMenu() {\n const pop = document.getElementById(\"mini-pop\");\n const info = getBlockInfo(dateStr(new Date()));\n const cur = info ? info.block : null;\n let html =\n '

Jump to block

';\n BLOCKS.forEach((b) => {\n const active = b.num === cur;\n html += `

B${b.num}${\n b.theme || \"\"\n }${b.theme ? \" · \" : \"\"}${\n fmtDate(new Date(b.start + \"T12:00:00\"))\n }

`;\n });\n html += \"

\";\n pop.innerHTML = html;\n}\nfunction dayHighlightType(ds) {\n const d = new Date(ds + \"T12:00:00\");\n const progs = new Set();\n events.forEach((ev) => {\n if (eventAppearsOn(ev, d)) progs.add(ev.program);\n });\n if (progs.size === 0) return null;\n if (progs.size > 1) return \"team\"; // more than one class type → default team blue\n if (progs.has(\"youth\")) return \"youth\";\n return \"team\"; // team / open gym / internal → team blue\n}\nfunction renderMiniCal() {\n const pop = document.getElementById(\"mini-pop\");\n const y = miniCalMonth.getFullYear(), m = miniCalMonth.getMonth();\n const first = new Date(y, m, 1), last = new Date(y, m + 1, 0);\n const startDow = (first.getDay() + 6) % 7;\n const today = dateStr(new Date());\n let cells = \"\";\n for (let i = 0; i < startDow; i++) {\n cells += `

`;\n }\n for (let d = 1; d <= last.getDate(); d++) {\n const ds = `${y}-${String(m + 1).padStart(2, \"0\")}-${\n String(d).padStart(2, \"0\")\n }`;\n const hl = dayHighlightType(ds);\n const cls = `mini-day-cell${ds === today ? \" today-cell\" : \"\"}${\n hl === \"team\" ? \" has-team\" : hl === \"youth\" ? \" has-youth\" : \"\"\n }`;\n cells += `

${d}

`;\n }\n pop.innerHTML =\n `

${\n miniCalMonth.toLocaleDateString(\"en-US\", {\n month: \"long\",\n year: \"numeric\",\n })\n }

${\n [\"M\", \"T\", \"W\", \"T\", \"F\", \"S\", \"S\"].map((d) =>\n `

${d}

`\n ).join(\"\")\n }${cells}

`;\n}\nfunction shiftMiniCal(dir) {\n miniCalMonth.setMonth(miniCalMonth.getMonth() + dir);\n renderMiniCal();\n}\nfunction renderBlockJump() {\n const pop = document.getElementById(\"mini-pop\");\n const b = BLOCKS.find((x) => x.num === blockJumpNum) || BLOCKS[5];\n let html =\n `

Block ${b.num}

`;\n const bs = new Date(b.start + \"T12:00:00\"),\n be = new Date(b.end + \"T12:00:00\");\n const totalDays = Math.round((be - bs) / 86400000) + 1;\n const numWeeks = Math.ceil(totalDays / 7);\n for (let w = 1; w <= numWeeks; w++) {\n const wStart = new Date(bs);\n wStart.setDate(wStart.getDate() + (w - 1) * 7);\n let wEnd = new Date(wStart);\n wEnd.setDate(wEnd.getDate() + 6);\n if (wEnd > be) wEnd = be;\n html += `

W${w}${\n fmtDate(wStart)\n } – ${fmtDate(wEnd)}

`;\n }\n html += \"

\";\n pop.innerHTML = html;\n}\nfunction shiftBlockJump(dir) {\n blockJumpNum = Math.max(1, Math.min(11, blockJumpNum + dir));\n renderBlockJump();\n}\nfunction toggleFilter() {\n const fp = document.getElementById(\"filter-panel\");\n const btn = document.getElementById(\"filter-btn\");\n fp.classList.toggle(\"visible\");\n btn.classList.toggle(\"active\", fp.classList.contains(\"visible\"));\n if (fp.classList.contains(\"visible\")) {\n const r = btn.getBoundingClientRect();\n const w = 250;\n fp.style.top = (r.bottom + 6) + \"px\";\n fp.style.left =\n Math.max(8, Math.min(r.right - w, window.innerWidth - w - 8)) + \"px\";\n fp.style.right = \"auto\";\n renderFilterPanel();\n }\n}\nfunction renderFilterPanel() {\n const fp = document.getElementById(\"filter-panel\");\n fp.innerHTML = `\n

Clear all

Coach

${\n STAFF.map((s) =>\n `${\n s.split(\" \")[0]\n }`\n ).join(\"\")\n }

Program

${\n PROG_ORDER.map((p) =>\n `${PROG_LABELS[p]}`\n ).join(\"\")\n }

Day of week

${\n [1, 2, 3, 4, 5, 6, 0].map((d) =>\n `${\n DAY_NAMES[d].slice(0, 2)\n }`\n ).join(\"\")\n }

Time range

`;\n}\nfunction toggleFilterVal(key, val) {\n const arr = filterState[key];\n const i = arr.indexOf(val);\n if (i > -1) arr.splice(i, 1);\n else arr.push(val);\n updateFilterBadge();\n renderFilterPanel();\n renderEvents();\n}\nfunction setTimeFilter(key, val) {\n filterState[key] = val;\n updateFilterBadge();\n renderEvents();\n}\nfunction updateFilterBadge() {\n const count = filterState.instructor.length + filterState.program.length +\n filterState.weekday.length + (filterState.timeFrom ? 1 : 0) +\n (filterState.timeTo ? 1 : 0);\n const badge = document.getElementById(\"filter-badge\");\n badge.style.display = count > 0 ? \"inline\" : \"none\";\n badge.textContent = count;\n}\nfunction clearFilters() {\n filterState = {\n instructor: [],\n program: [],\n weekday: [],\n timeFrom: \"\",\n timeTo: \"\",\n };\n updateFilterBadge();\n renderFilterPanel();\n renderEvents();\n}\ndocument.addEventListener(\"mousedown\", (e) => {\n if (\n !e.target.closest(\"#mini-pop\") && !e.target.closest(\"#jump-date-btn\") &&\n !e.target.closest(\"#week-badge\") && !e.target.closest(\"#block-badge\")\n ) closeMiniPop();\n if (!e.target.closest(\"#filter-panel\") && !e.target.closest(\"#filter-btn\")) {\n document.getElementById(\"filter-panel\").classList.remove(\"visible\");\n document.getElementById(\"filter-btn\").classList.remove(\"active\");\n }\n});\nasync function apiFetch(path, opts = {}) {\n const headers = {\n \"Content-Type\": \"application/json\",\n ...(opts.headers || {}),\n };\n const r = await fetch(API.base + path, { ...opts, headers });\n return r.json();\n}\nlet toastTimer = null;\nfunction toast(msg, kind = \"ok\") {\n let t = document.getElementById(\"toast\");\n if (!t) {\n t = document.createElement(\"div\");\n t.id = \"toast\";\n t.style.cssText =\n \"position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:400;padding:9px 16px;border-radius:20px;font-size:12px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,.35);transition:opacity .2s;max-width:80vw;text-align:center\";\n document.body.appendChild(t);\n }\n t.textContent = msg;\n t.style.background = kind === \"err\" ? \"rgba(239,68,68,.95)\" : \"var(--accent)\";\n t.style.color = \"#fff\";\n t.style.opacity = \"1\";\n clearTimeout(toastTimer);\n toastTimer = setTimeout(() => {\n t.style.opacity = \"0\";\n }, 3200);\n}\nasync function bootstrapFromAirtable() {\n if (!API.enabled) return;\n try {\n const [b, s] = await Promise.all([apiFetch(\"/blocks\"), apiFetch(\"/staff\")]);\n if (b && b.success && b.blocks && b.blocks.length) {\n const mapped = b.blocks.filter((x) => x.num).map((x) => ({\n num: x.num,\n recId: x.id,\n start: x.start,\n end: x.end,\n theme: x.theme || \"\",\n }));\n mapped.sort((a, c) => a.start < c.start ? -1 : 1);\n BLOCKS.splice(0, BLOCKS.length, ...mapped);\n }\n if (s && s.success && s.staff && s.staff.length) {\n STAFF_RECORDS = s.staff.map((x) => ({ recId: x.id, name: x.name }));\n STAFF = STAFF_RECORDS.map((x) => x.name);\n }\n renderCalHeader();\n renderEvents();\n await loadWeekFromAirtable();\n } catch (e) { /* keep offline fallback */ }\n}\nfunction parseSlotToMin(t) {\n const m = (t || \"\").match(/(\\d{1,2}):(\\d{2})\\s*(AM|PM)/i);\n if (!m) return 6 * 60;\n let h = +m[1];\n const mi = +m[2], ap = m[3].toUpperCase();\n if (ap === \"PM\" && h !== 12) h += 12;\n if (ap === \"AM\" && h === 12) h = 0;\n return h * 60 + mi;\n}\nfunction atClassToEvent(c) {\n const dow = new Date(c.date + \"T12:00:00\").getDay();\n const tl = (c.type || c.program || \"\").toLowerCase().replace(/\\s+/g, \"\");\n let prog;\n if (tl === \"team\") prog = \"team\";\n else if (tl === \"youth\") prog = \"youth\";\n else if (tl === \"opengym\") prog = \"opengym\";\n else if (tl === \"internal\") prog = \"internal\";\n else prog = c.notes ? \"internal\" : \"opengym\"; // legacy records with no Type\n const coach = (STAFF_RECORDS.find((s) => s.recId === c.coachId) || {}).name ||\n \"TBD\";\n return {\n id: nextId++,\n atId: c.id,\n singleDate: c.date,\n seriesDays: [dow],\n startMin: parseSlotToMin(c.time),\n duration: c.duration || 60,\n capacity: c.capacity == null ? 8 : c.capacity,\n program: prog,\n color: PROG_COLORS[prog] || PROG_COLORS.team,\n title: prog === \"internal\" ? (c.notes || \"\") : \"\",\n announcement: c.announcement || \"\",\n seriesId: c.seriesId || null,\n pushQueued: !!c.queued,\n pushed: !!c.pushed,\n instByDay: { [dow]: coach },\n recurring: false,\n exceptions: [],\n };\n}\nasync function loadWeekFromAirtable() {\n if (!API.enabled) return;\n const days = getWeekDays();\n const lo = dateStr(currentMonday), hi = dateStr(days[6]);\n const from = dateStr(new Date(currentMonday.getTime() - 86400000));\n const to = dateStr(new Date(days[6].getTime() + 86400000));\n try {\n const res = await apiFetch(`/classes?from=${from}&to=${to}`);\n if (res && res.success) {\n events = events.filter((e) =>\n !(e.atId && e.singleDate >= lo && e.singleDate <= hi)\n );\n res.classes.forEach((c) => {\n if (c.date >= lo && c.date <= hi) events.push(atClassToEvent(c));\n });\n renderEvents();\n }\n } catch (e) { /* ignore; keep what we have */ }\n}\nfunction buildClassInstances(o) {\n const timeStr = fmtMin(o.startMin);\n const out = [];\n const add = (dateS, dow) =>\n out.push({\n date: dateS,\n time: timeStr,\n coachRecId: staffRecId(o.instByDay[dow]),\n program: o.prog,\n capacity: o.capacity,\n duration: o.duration,\n announcement: o.announcement || \"\",\n notes: (o.prog === \"internal\" && o.title) ? o.title : undefined,\n seriesId: o.seriesId || undefined,\n });\n if (o.isRecur) {\n generateDates(o.startVal, o.rnum, o.runit, o.days).forEach((d) =>\n add(dateStr(d), d.getDay())\n );\n } else {\n const dow = new Date(o.startVal + \"T12:00:00\").getDay();\n (o.days.length ? o.days : [dow]).forEach((dw) => add(o.startVal, dw));\n }\n return out;\n}\nasync function pushClassesToAirtable(instances) {\n if (!API.enabled || !instances.length) return null;\n try {\n const res = await apiFetch(\"/createClass\", {\n method: \"POST\",\n body: JSON.stringify({\n classes: instances,\n pushToTrainerize: API.pushToTrainerize,\n }),\n });\n if (res && res.success) {\n const unlinked = (res.results || []).filter((r) =>\n r.workoutLinked === false\n ).length;\n toast(\n `✓ ${res.count} class${res.count !== 1 ? \"es\" : \"\"} saved to Airtable${\n unlinked ? ` (${unlinked} without a workout)` : \"\"\n }`,\n );\n return res;\n }\n toast(\n \"Airtable save failed\" + (res && res.error ? `: ${res.error}` : \"\"),\n \"err\",\n );\n return res;\n } catch (e) {\n toast(\"Airtable unreachable — saved locally only\", \"err\");\n return null;\n }\n}\nasync function updateClassInAirtable(atId, instance) {\n if (!API.enabled) return null;\n try {\n const r = await apiFetch(\"/updateClass\", {\n method: \"POST\",\n body: JSON.stringify({\n id: atId,\n pushToTrainerize: API.pushToTrainerize,\n ...instance,\n }),\n });\n if (r && r.success) {\n toast(\"✓ Updated in Airtable\");\n return r;\n }\n toast(\n \"Airtable update failed\" + (r && r.error ? `: ${r.error}` : \"\"),\n \"err\",\n );\n return r;\n } catch (e) {\n toast(\"Airtable unreachable\", \"err\");\n return null;\n }\n}\nasync function deleteClassInAirtable(ids) {\n if (!API.enabled || !ids.length) return null;\n try {\n const r = await apiFetch(\"/deleteClass\", {\n method: \"POST\",\n body: JSON.stringify({ ids }),\n });\n if (r && r.success) {\n toast(`✓ Deleted ${r.deleted} in Airtable`);\n return r;\n }\n toast(\n \"Airtable delete failed\" + (r && r.error ? `: ${r.error}` : \"\"),\n \"err\",\n );\n return r;\n } catch (e) {\n toast(\"Airtable unreachable\", \"err\");\n return null;\n }\n}\nfunction eventToInstance(ev, o = {}) {\n const date = o.date || ev.singleDate;\n const startMin = o.startMin != null ? o.startMin : ev.startMin;\n const dow = new Date(date + \"T12:00:00\").getDay();\n const coachName = ev.instByDay[dow] || Object.values(ev.instByDay)[0];\n return {\n date,\n time: fmtMin(startMin),\n program: ev.program,\n coachRecId: staffRecId(coachName),\n capacity: ev.capacity,\n duration: ev.duration,\n announcement: ev.announcement || \"\",\n notes: (ev.program === \"internal\" && ev.title) ? ev.title : \"\",\n };\n}\nlet participantSel = new Map(); // recId -> name\nfunction openParticipants() {\n participantSel = new Map();\n openModal(\n \"Add participants\",\n `\n

Reserve active members into these classes. Writes Reserved attendance to Airtable${\n API.pushToTrainerize ? \" and Trainerize\" : \"\"\n }.

\n\n

Reserve for\n

\n\n\n

`,\n );\n if (!API.enabled) {\n toast(\"API disabled — enable API in config to reserve\", \"err\");\n }\n}\nlet ptSearchTimer = null;\nfunction searchParticipants(q) {\n clearTimeout(ptSearchTimer);\n ptSearchTimer = setTimeout(async () => {\n const box = document.getElementById(\"pt-results\");\n if (!box) return;\n if (!API.enabled) {\n box.innerHTML =\n '

API disabled

';\n return;\n }\n box.innerHTML =\n '

Searching…

';\n try {\n const res = await apiFetch(\"/clients?q=\" + encodeURIComponent(q || \"\"));\n const list = (res && res.clients) || [];\n box.innerHTML = list.length\n ? list.map((c) =>\n `

${c.name}${c.status || \"\"}

`\n ).join(\"\")\n : '

No matches

';\n } catch (e) {\n box.innerHTML =\n '

Search failed

';\n }\n }, 250);\n}\nfunction togglePartic(id, name) {\n if (participantSel.has(id)) participantSel.delete(id);\n else participantSel.set(id, name);\n renderPartChips();\n}\nfunction renderPartChips() {\n const c = document.getElementById(\"pt-chips\");\n if (!c) return;\n c.innerHTML = [...participantSel.entries()].map(([id, name]) =>\n `${name} ✕`\n ).join(\"\");\n}\nasync function reserveParticipants() {\n if (!participantSel.size) {\n toast(\"Select at least one member\", \"err\");\n return;\n }\n const scope = document.getElementById(\"pt-scope\")?.value || \"one\";\n const btn = document.getElementById(\"pt-reserve\");\n if (btn) {\n btn.disabled = true;\n btn.textContent = \"Reserving…\";\n }\n const startMin = timeStrToMin(\n document.getElementById(\"p-start\")?.value || \"06:00\",\n );\n const dur = parseInt(document.getElementById(\"p-dur\")?.value) || 60;\n const days = getPanelDays();\n const activeLabel =\n [...document.querySelectorAll(\".prog-chip.active\")].map((x) =>\n x.textContent.trim()\n )[0] || \"Team\";\n const prog = PROG_ORDER.find((p) => PROG_LABELS[p] === activeLabel) || \"team\";\n const capRaw = (document.getElementById(\"p-capacity\")?.value || \"\").trim();\n const capacity = capRaw === \"\" ? 8 : (parseInt(capRaw) || 8);\n const announcement = (document.getElementById(\"p-announce\")?.value || \"\")\n .trim();\n const title = (document.getElementById(\"p-title\")?.value || \"\").trim();\n const instByDay = {};\n document.querySelectorAll(\"#inst-per-day select\").forEach((s) => {\n instByDay[parseInt(s.dataset.day)] = s.value;\n });\n const isRecur = (scope === \"all\") &&\n !!document.getElementById(\"p-recur\")?.checked;\n const startVal = document.getElementById(\"p-startdate\")?.value ||\n dateStr(new Date());\n const rnum = parseInt(document.getElementById(\"p-rnum\")?.value) || 1;\n const runit = document.getElementById(\"p-runit\")?.value || \"blocks\";\n let instances = buildClassInstances({\n isRecur,\n startVal,\n rnum,\n runit,\n days,\n startMin,\n prog,\n capacity,\n duration: dur,\n announcement,\n title,\n instByDay,\n });\n if (scope === \"one\") instances = instances.slice(0, 1);\n try {\n const created = await apiFetch(\"/createClass\", {\n method: \"POST\",\n body: JSON.stringify({\n classes: instances,\n pushToTrainerize: API.pushToTrainerize,\n }),\n });\n if (!created || !created.success || !created.created?.length) {\n throw new Error(created && created.error || \"class create failed\");\n }\n const res = await apiFetch(\"/addParticipants\", {\n method: \"POST\",\n body: JSON.stringify({\n classRecordIds: created.created,\n clientRecordIds: [...participantSel.keys()],\n }),\n });\n if (res && res.success) {\n toast(\n `✓ Reserved ${participantSel.size} member${\n participantSel.size !== 1 ? \"s\" : \"\"\n } across ${created.created.length} class${\n created.created.length !== 1 ? \"es\" : \"\"\n }`,\n );\n closeModal();\n } else throw new Error(res && res.error || \"reservation failed\");\n } catch (e) {\n toast(\"Reservation failed: \" + (e.message || e), \"err\");\n if (btn) {\n btn.disabled = false;\n btn.textContent = \"Reserve\";\n }\n }\n}\nfunction toggleTheme() {\n const cur = document.documentElement.getAttribute(\"data-theme\") === \"dark\"\n ? \"dark\"\n : \"light\";\n const next = cur === \"dark\" ? \"light\" : \"dark\";\n document.documentElement.setAttribute(\"data-theme\", next);\n try {\n localStorage.setItem(\"ascend-theme\", next);\n } catch (e) {}\n updateThemeIcon();\n}\nfunction updateThemeIcon() {\n const dark = document.documentElement.getAttribute(\"data-theme\") === \"dark\";\n const btn = document.getElementById(\"theme-btn\");\n if (btn) btn.title = dark ? \"Switch to light\" : \"Switch to dark\";\n}\nfunction refreshFromAirtable() {\n const btn = document.getElementById(\"refresh-btn\");\n if (btn) btn.classList.add(\"active\");\n Promise.resolve(bootstrapFromAirtable()).finally(() => {\n if (btn) btn.classList.remove(\"active\");\n if (API.enabled) toast(\"Refreshed from Airtable\");\n });\n}\nlet undoStack = [], redoStack = [];\nconst HISTORY_MAX = 60;\nfunction snapshot() {\n return JSON.stringify({ events, nextId });\n}\nfunction restore(s) {\n const o = JSON.parse(s);\n events = o.events;\n nextId = o.nextId;\n clearSelection();\n renderEvents();\n}\nfunction pushHistory() {\n undoStack.push(snapshot());\n if (undoStack.length > HISTORY_MAX) undoStack.shift();\n redoStack = [];\n updateUndoRedoUI();\n}\nfunction undo() {\n if (!undoStack.length) return;\n redoStack.push(snapshot());\n restore(undoStack.pop());\n updateUndoRedoUI();\n}\nfunction redo() {\n if (!redoStack.length) return;\n undoStack.push(snapshot());\n restore(redoStack.pop());\n updateUndoRedoUI();\n}\nfunction updateUndoRedoUI() {\n const u = document.getElementById(\"undo-btn\"),\n r = document.getElementById(\"redo-btn\");\n if (u) u.disabled = undoStack.length === 0;\n if (r) r.disabled = redoStack.length === 0;\n}\ndocument.addEventListener(\"keydown\", (e) => {\n const mod = e.metaKey || e.ctrlKey;\n if (!mod) return;\n const k = e.key.toLowerCase();\n if (k === \"z\" && !e.shiftKey) {\n e.preventDefault();\n undo();\n } else if ((k === \"z\" && e.shiftKey) || k === \"y\") {\n e.preventDefault();\n redo();\n }\n});\nupdateThemeIcon();\nupdateUndoRedoUI();\nrenderCalHeader();\nbuildGrid();\nrenderEvents();\nbootstrapFromAirtable();",[181],"4c95a8a8-29b1-4b22-a425-5f71cfb55473","Builder.html","cb1bb712-879d-11f1-89b3-1607ee4eb77e",19,["D",1784982109436],"\n\n\n\n\nAscend — Class Calendar\n\n\n\n\n\n\n

\n\n\n\n\n\n

\n\n

\nNew class\n\n

\n\n\n\n\n\n\n",[189],"pulls","branches","forks","envVars",{"_202":185,"_204":61},"connections",{"_202":61,"_203":61},"count","unfilledCount","emptyCount",{"_41":188,"_32":189,"_30":190,"_156":-5,"_39":40,"_38":191,"_158":47,"_36":223,"_13":185,"_33":20,"_34":193,"_24":47,"_162":-5,"_211":224,"_27":225},{"_41":180,"_32":181,"_30":182,"_156":-5,"_39":40,"_38":183,"_158":47,"_36":220,"_13":185,"_33":160,"_34":186,"_24":47,"_162":-5,"_211":221,"_27":222},{"_41":172,"_32":173,"_30":174,"_156":-5,"_39":40,"_38":175,"_158":47,"_36":217,"_13":177,"_33":160,"_34":178,"_24":47,"_162":-5,"_211":218,"_27":219},{"_41":164,"_32":165,"_30":56,"_156":-5,"_39":40,"_38":166,"_158":25,"_36":214,"_13":168,"_33":169,"_34":170,"_24":47,"_162":-5,"_211":215,"_27":216},{"_41":153,"_32":154,"_30":155,"_156":-5,"_39":40,"_38":157,"_158":25,"_36":210,"_13":61,"_33":160,"_34":161,"_24":47,"_162":-5,"_211":212,"_27":213},["D",1784989470246],"children",[],[154],["D",1784982122663],[],[165],["D",1784989498832],[],[173],["D",1784981631606],[],[181],["D",1784982109436],[],[189],["D",1784924009269],{"_95":94,"_103":99},{"_95":94,"_96":97,"_98":99,"_18":-5,"_100":101,"_102":47},{"_13":84,"_32":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_122":263,"_264":265,"_266":267,"_268":47,"_269":47,"_270":47,"_271":25,"_272":-5,"_273":-7,"_274":-7,"_275":61,"_276":47,"_277":47,"_278":-5,"_279":47,"_280":47,"_281":47,"_282":-5},"ENV",{"_234":235,"_236":237,"_238":85,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v25