Stundenpläne

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_158":159,"_160":161},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_119":-5,"_20":120,"_22":121,"_122":123,"_124":125,"_25":126,"_24":-5,"_127":-5,"_128":-5,"_129":53,"_130":131,"_132":44,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","soremo","name","Stundenplaene","branchName","main","version","path","","project",{"_33":62,"_13":14,"_45":63,"_64":-5,"_65":53,"_66":67,"_68":67,"_69":19,"_70":-5,"_71":72,"_73":37,"_74":53,"_75":-5,"_76":-5,"_77":78,"_79":80,"_81":82,"_83":84,"_85":86,"_87":-5,"_88":89,"_90":89,"_91":92,"_93":92,"_94":92,"_95":89,"_96":89,"_97":98,"_99":100,"_101":102,"_103":53},"tree",[57],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":56},"id","9f8c1424-eeab-4d62-89eb-6f55e227750f","main.ts","fileId","dda8eb84-9fee-11f1-90b4-1607ee4eb77e","parentId","branchId","57164d3a-701c-4033-8315-38a2ff50f581","branchVersion",11,"latest",true,"createdAt",["D",1787720183270],10,"fileType","http","content","/**\n * Stundenplan-App für Val Town\n * ------------------------------\n * Verwaltet mehrere wiederkehrende Wochen-Stundenpläne (z.B. je einer pro Person)\n * und stellt sie als abonnierbare ICS-Kalender bereit.\n *\n * Deployment:\n * 1. Auf val.town einen neuen \"HTTP\" Val anlegen.\n * 2. Diesen gesamten Dateiinhalt einfügen und speichern.\n * 3. Die Val-URL öffnen -> UI zum Anlegen/Bearbeiten der Stundenpläne.\n * 4. Pro Stundenplan gibt es einen ICS-Link (https://.../ics/.ics), den man\n * in einer Kalender-App als Kalenderabo hinzufügen kann.\n */\n\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// ---------------------------------------------------------------------------\n// Konstanten\n// ---------------------------------------------------------------------------\n\n// Anker-Datumswerte für eine beliebige, DST-unkritische Woche (Mo 2024-01-08).\n// Der genaue Tag ist irrelevant, nur der Wochentag zählt - RRULE:FREQ=WEEKLY\n// lässt das Ereignis unbegrenzt wöchentlich wiederkehren.\nconst WEEKDAYS = [\n { key: \"MO\", label: \"Montag\", anchor: \"20240108\" },\n { key: \"DI\", label: \"Dienstag\", anchor: \"20240109\" },\n { key: \"MI\", label: \"Mittwoch\", anchor: \"20240110\" },\n { key: \"DO\", label: \"Donnerstag\", anchor: \"20240111\" },\n { key: \"FR\", label: \"Freitag\", anchor: \"20240112\" },\n { key: \"SA\", label: \"Samstag\", anchor: \"20240113\" },\n { key: \"SO\", label: \"Sonntag\", anchor: \"20240114\" },\n];\n\nconst VTIMEZONE_BERLIN = [\n \"BEGIN:VTIMEZONE\",\n \"TZID:Europe/Berlin\",\n \"X-LIC-LOCATION:Europe/Berlin\",\n \"BEGIN:DAYLIGHT\",\n \"TZOFFSETFROM:+0100\",\n \"TZOFFSETTO:+0200\",\n \"TZNAME:CEST\",\n \"DTSTART:19700329T020000\",\n \"RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=-1SU\",\n \"END:DAYLIGHT\",\n \"BEGIN:STANDARD\",\n \"TZOFFSETFROM:+0200\",\n \"TZOFFSETTO:+0100\",\n \"TZNAME:CET\",\n \"DTSTART:19701025T030000\",\n \"RRULE:FREQ=YEARLY;BYMONTH=10;BYDAY=-1SU\",\n \"END:STANDARD\",\n \"END:VTIMEZONE\",\n].join(\"\\r\\n\");\n\n// ---------------------------------------------------------------------------\n// Datenbank\n// ---------------------------------------------------------------------------\n\nasync function ensureTable() {\n await sqlite.execute(`\n create table if not exists stundenplaene (\n id text primary key,\n name text not null,\n data text not null,\n created_at text not null,\n updated_at text not null\n )\n `);\n}\n\nfunction rowToRecord(row: any) {\n let data;\n try {\n data = JSON.parse(row.data);\n } catch (_e) {\n console.error(\n \"Beschädigte data-Spalte bei Stundenplan \" + row.id +\n \", verwende leere Struktur.\",\n );\n data = { slots: [], schedule: {}, extras: [] };\n }\n return {\n id: row.id,\n name: row.name,\n data,\n created_at: row.created_at,\n updated_at: row.updated_at,\n };\n}\n\nasync function listSchedules() {\n const res = await sqlite.execute(\n \"select id, name, created_at, updated_at from stundenplaene order by name collate nocase asc\",\n );\n return res.rows.map((r: any) => ({\n id: r.id,\n name: r.name,\n created_at: r.created_at,\n updated_at: r.updated_at,\n }));\n}\n\nasync function getSchedule(id: string) {\n const res = await sqlite.execute({\n sql: \"select * from stundenplaene where id = :id\",\n args: { id },\n });\n if (!res.rows.length) return null;\n return rowToRecord(res.rows[0]);\n}\n\nasync function createSchedule(name: string) {\n const id = crypto.randomUUID();\n const now = new Date().toISOString();\n const data = { slots: [], schedule: {}, extras: [] };\n await sqlite.execute({\n sql:\n \"insert into stundenplaene (id, name, data, created_at, updated_at) values (:id, :name, :data, :created_at, :updated_at)\",\n args: {\n id,\n name,\n data: JSON.stringify(data),\n created_at: now,\n updated_at: now,\n },\n });\n return getSchedule(id);\n}\n\nasync function updateSchedule(\n id: string,\n name: string,\n slots: any[],\n schedule: any,\n extras: any[],\n) {\n const now = new Date().toISOString();\n const data = { slots, schedule, extras };\n const res = await sqlite.execute({\n sql:\n \"update stundenplaene set name = :name, data = :data, updated_at = :now where id = :id\",\n args: { id, name, data: JSON.stringify(data), now },\n });\n if (res.rowsAffected === 0) return null;\n return getSchedule(id);\n}\n\nasync function deleteSchedule(id: string) {\n const res = await sqlite.execute({\n sql: \"delete from stundenplaene where id = :id\",\n args: { id },\n });\n return res.rowsAffected > 0;\n}\n\n// ---------------------------------------------------------------------------\n// ICS-Erzeugung\n// ---------------------------------------------------------------------------\n\nfunction icsEscape(s: string) {\n return String(s == null ? \"\" : s)\n .replace(/\\\\/g, \"\\\\\\\\\")\n .replace(/;/g, \"\\\\;\")\n .replace(/,/g, \"\\\\,\")\n .replace(/\\r?\\n/g, \"\\\\n\");\n}\n\nfunction foldLine(line: string) {\n const bytes = new TextEncoder().encode(line);\n if (bytes.length <= 75) return line;\n const out: string[] = [];\n let start = 0;\n let first = true;\n const decoder = new TextDecoder();\n while (start < bytes.length) {\n const limit = first ? 75 : 74;\n let end = Math.min(start + limit, bytes.length);\n while (end < bytes.length && (bytes[end] & 0xc0) === 0x80) end--;\n out.push((first ? \"\" : \" \") + decoder.decode(bytes.slice(start, end)));\n start = end;\n first = false;\n }\n return out.join(\"\\r\\n\");\n}\n\nfunction timeToCompact(t: string) {\n const [h, m] = String(t).split(\":\");\n return h.padStart(2, \"0\") + m.padStart(2, \"0\");\n}\n\nfunction pad2(n: number) {\n return String(n).padStart(2, \"0\");\n}\n\nfunction nowUtcStamp() {\n const d = new Date();\n return (\n d.getUTCFullYear() +\n pad2(d.getUTCMonth() + 1) +\n pad2(d.getUTCDate()) +\n \"T\" +\n pad2(d.getUTCHours()) +\n pad2(d.getUTCMinutes()) +\n pad2(d.getUTCSeconds()) +\n \"Z\"\n );\n}\n\n// Fasst Stunden-Slots und freie Zusatztermine zu einer einheitlichen Terminliste\n// zusammen. Wird sowohl für den ICS-Export als auch für die Kombi-Ansicht genutzt.\n// \"id\" ist pro Termin stabil (Slot-ID bzw. \"EX-\"+Extra-ID), damit sich ICS-UIDs\n// beim Speichern nicht aendern - sonst würden Kalender-Apps Termine neu anlegen\n// statt sie zu aktualisieren.\nfunction expandEvents(\n data: any,\n): Array<\n {\n id: string;\n weekday: string;\n start: string;\n end: string;\n subject: string;\n label?: string;\n }\n> {\n const events: Array<\n {\n id: string;\n weekday: string;\n start: string;\n end: string;\n subject: string;\n label?: string;\n }\n > = [];\n const slots = (data.slots || []).slice().sort((a: any, b: any) =>\n String(a.start).localeCompare(b.start)\n );\n for (const day of WEEKDAYS) {\n const dayEntries = (data.schedule && data.schedule[day.key]) || {};\n for (const slot of slots) {\n const subject = String(dayEntries[slot.id] || \"\").trim();\n if (!subject) continue;\n events.push({\n id: slot.id,\n weekday: day.key,\n start: slot.start,\n end: slot.end,\n subject,\n label: slot.label,\n });\n }\n }\n for (const extra of Array.isArray(data.extras) ? data.extras : []) {\n const subject = String(extra.label || \"\").trim();\n if (!subject || !extra.start || !extra.end) continue;\n events.push({\n id: \"EX-\" + extra.id,\n weekday: extra.weekday,\n start: extra.start,\n end: extra.end,\n subject,\n });\n }\n return events;\n}\n\nfunction buildIcs(record: any, host: string) {\n const data = record.data;\n const domain = (host || \"stundenplan.val.run\").replace(/[^a-zA-Z0-9.-]/g, \"\");\n const lines: string[] = [];\n lines.push(\"BEGIN:VCALENDAR\");\n lines.push(\"VERSION:2.0\");\n lines.push(\"PRODID:-//Stundenplan App//DE\");\n lines.push(\"CALSCALE:GREGORIAN\");\n lines.push(\"METHOD:PUBLISH\");\n lines.push(foldLine(\"X-WR-CALNAME:\" + icsEscape(record.name)));\n lines.push(\"X-WR-TIMEZONE:Europe/Berlin\");\n lines.push(\"REFRESH-INTERVAL;VALUE=DURATION:PT12H\");\n lines.push(\"X-PUBLISHED-TTL:PT12H\");\n lines.push(VTIMEZONE_BERLIN);\n\n const stamp = nowUtcStamp();\n\n for (const ev of expandEvents(data)) {\n const day = WEEKDAYS.find((d) => d.key === ev.weekday);\n if (!day) continue;\n const dtStart = day.anchor + \"T\" + timeToCompact(ev.start) + \"00\";\n const dtEnd = day.anchor + \"T\" + timeToCompact(ev.end) + \"00\";\n const uid = record.id + \"-\" + ev.weekday + \"-\" + ev.id + \"@\" + domain;\n lines.push(\"BEGIN:VEVENT\");\n lines.push(foldLine(\"UID:\" + uid));\n lines.push(\"DTSTAMP:\" + stamp);\n lines.push(foldLine(\"DTSTART;TZID=Europe/Berlin:\" + dtStart));\n lines.push(foldLine(\"DTEND;TZID=Europe/Berlin:\" + dtEnd));\n lines.push(\"RRULE:FREQ=WEEKLY\");\n lines.push(foldLine(\"SUMMARY:\" + icsEscape(ev.subject)));\n if (ev.label) {\n lines.push(\n foldLine(\n \"DESCRIPTION:\" +\n icsEscape(ev.label + \" (\" + ev.start + \"\\u2013\" + ev.end + \")\"),\n ),\n );\n }\n lines.push(\"END:VEVENT\");\n }\n\n lines.push(\"END:VCALENDAR\");\n return lines.join(\"\\r\\n\") + \"\\r\\n\";\n}\n\n// ---------------------------------------------------------------------------\n// Zugriffsschutz (HTTP Basic Auth)\n// ---------------------------------------------------------------------------\n// Schuetzt den Editor, die API und die Personen-Auswahl fuer die Kombi-Ansicht,\n// da diese Seiten alle Namen offenlegen bzw. Aenderungen erlauben. NICHT\n// geschuetzt: die einzelnen ICS-Kalenderabos (Kalender-Apps koennen sich nicht\n// interaktiv anmelden) und eine bereits fertig zusammengestellte Kombi-Ansicht\n// (per Link direkt aufrufbar, wie bei den ICS-Abos: der Link selbst ist die\n// Berechtigung). Zugangsdaten werden als Val-Town-Umgebungsvariablen\n// BASIC_AUTH_USER und BASIC_AUTH_PASS hinterlegt. Ist BASIC_AUTH_PASS nicht\n// gesetzt, bleibt die App ungeschuetzt (praktisch fuer die Ersteinrichtung,\n// sollte danach aber unbedingt gesetzt werden).\nfunction requireAuth(req: Request): Response | null {\n const expectedPass = Deno.env.get(\"BASIC_AUTH_PASS\");\n if (!expectedPass) return null;\n const expectedUser = Deno.env.get(\"BASIC_AUTH_USER\") || \"stundenplan\";\n\n const auth = req.headers.get(\"Authorization\");\n if (auth) {\n const [, encoded] = auth.split(\" \");\n try {\n const decoded = atob(encoded || \"\");\n const idx = decoded.indexOf(\":\");\n const user = idx === -1 ? decoded : decoded.slice(0, idx);\n const pass = idx === -1 ? \"\" : decoded.slice(idx + 1);\n if (user === expectedUser && pass === expectedPass) return null;\n } catch (_e) {\n // fall through to 401\n }\n }\n\n return new Response(\"Zugriff verweigert\", {\n status: 401,\n headers: { \"WWW-Authenticate\": 'Basic realm=\"Stundenplan\"' },\n });\n}\n\n// ---------------------------------------------------------------------------\n// Frontend (HTML/CSS/JS, keine externen Abhängigkeiten)\n// ---------------------------------------------------------------------------\n\nconst CSS = `\n :root { color-scheme: light; }\n * { box-sizing: border-box; }\n body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background: #f5f5f7; color: #1d1d1f; }\n #app { max-width: 900px; margin: 0 auto; padding: 16px 16px 64px; }\n h1 { font-size: 22px; margin: 4px 0 16px; }\n h2 { font-size: 16px; margin: 24px 0 8px; color: #333; }\n .topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px;\n flex-wrap: wrap; margin-bottom: 8px; position: sticky; top: 0; background: #f5f5f7;\n padding: 8px 0; z-index: 5; }\n .topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }\n .btn { border: 1px solid #d2d2d7; background: #fff; color: #1d1d1f; border-radius: 8px;\n padding: 8px 14px; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; }\n .btn:hover { background: #f0f0f2; }\n .btn.primary { background: #0071e3; color: #fff; border-color: #0071e3; }\n .btn.primary:hover { background: #0077ed; }\n .btn.danger { color: #d70015; border-color: #f3c7c9; }\n .btn.danger:hover { background: #fdeeee; }\n .btn.small { padding: 5px 10px; font-size: 12px; }\n .muted { color: #6e6e73; }\n .small { font-size: 12px; }\n .error { color: #d70015; }\n .hint { color: #6e6e73; font-size: 13px; margin-top: -4px; }\n .picker-list { display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 8px;\n padding: 4px; }\n .picker-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;\n font-size: 14px; cursor: pointer; }\n .picker-row:hover { background: #f5f5f7; }\n .card-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }\n .card { background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }\n .card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }\n .card-header h2 { margin: 0; font-size: 17px; color: #1d1d1f; }\n .card-actions { margin-top: 10px; display: flex; gap: 8px; }\n .url-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }\n .url-input { flex: 1; min-width: 180px; font-size: 12px; padding: 7px 8px; border-radius: 8px;\n border: 1px solid #d2d2d7; background: #fafafa; color: #444; }\n .name-input { font-size: 18px; padding: 8px 10px; border-radius: 8px; border: 1px solid #d2d2d7;\n width: 100%; max-width: 420px; }\n .field-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;\n color: #6e6e73; margin: 18px 0 6px; }\n table { border-collapse: collapse; width: 100%; background: #fff; border-radius: 8px; overflow: hidden; }\n table.slots th, table.slots td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left; }\n table.slots input[type=text] { width: 100%; padding: 6px; border: 1px solid #d2d2d7; border-radius: 6px; }\n table.slots input[type=time] { padding: 6px; border: 1px solid #d2d2d7; border-radius: 6px; }\n table.slots select { padding: 6px; border: 1px solid #d2d2d7; border-radius: 6px; background: #fff; }\n .grid-wrap { overflow-x: auto; border-radius: 8px; }\n table.grid { min-width: 640px; }\n table.grid th, table.grid td { border: 1px solid #eee; padding: 4px; text-align: left; vertical-align: top; }\n table.grid thead th { background: #fafafa; font-size: 12px; text-align: center; padding: 8px 4px; }\n table.grid th.row-label { background: #fafafa; font-size: 12px; white-space: nowrap; padding: 8px; }\n .cell-input { width: 100%; min-width: 80px; padding: 6px; border: 1px solid #e2e2e2; border-radius: 6px;\n font-size: 13px; }\n .danger-zone { margin-top: 40px; padding-top: 16px; border-top: 1px solid #e2e2e2; }\n`;\n\nconst CLIENT_JS = `\n(function () {\n \"use strict\";\n\n var WEEKDAYS = [\n { key: \"MO\", label: \"Mo\", full: \"Montag\" },\n { key: \"DI\", label: \"Di\", full: \"Dienstag\" },\n { key: \"MI\", label: \"Mi\", full: \"Mittwoch\" },\n { key: \"DO\", label: \"Do\", full: \"Donnerstag\" },\n { key: \"FR\", label: \"Fr\", full: \"Freitag\" },\n { key: \"SA\", label: \"Sa\", full: \"Samstag\" },\n { key: \"SO\", label: \"So\", full: \"Sonntag\" }\n ];\n\n var appEl = document.getElementById(\"app\");\n var current = null;\n var dirty = false;\n\n function el(tag, attrs, children) {\n var node = document.createElement(tag);\n if (attrs) {\n for (var key in attrs) {\n if (key === \"class\") node.className = attrs[key];\n else if (key === \"text\") node.textContent = attrs[key];\n else if (key.indexOf(\"on\") === 0 && typeof attrs[key] === \"function\") {\n node.addEventListener(key.slice(2), attrs[key]);\n } else {\n node.setAttribute(key, attrs[key]);\n }\n }\n }\n if (children) {\n children.forEach(function (c) { if (c) node.appendChild(c); });\n }\n return node;\n }\n\n function api(path, method, body) {\n return fetch(path, {\n method: method || \"GET\",\n headers: body ? { \"content-type\": \"application/json\" } : undefined,\n body: body ? JSON.stringify(body) : undefined\n }).then(function (res) {\n if (!res.ok) {\n return res.text().then(function (t) { throw new Error(t || (\"HTTP \" + res.status)); });\n }\n if (res.status === 204) return null;\n return res.json();\n });\n }\n\n function newId() {\n return \"s\" + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);\n }\n\n function icsUrls(id) {\n var https = window.location.origin + \"/ics/\" + id + \".ics\";\n var webcal = https.replace(/^https?:\\\\/\\\\//, \"webcal://\");\n return { https: https, webcal: webcal };\n }\n\n function formatDate(iso) {\n try {\n var d = new Date(iso);\n return d.toLocaleString(\"de-DE\", { day: \"2-digit\", month: \"2-digit\", year: \"numeric\", hour: \"2-digit\", minute: \"2-digit\" });\n } catch (e) { return iso; }\n }\n\n function showList() {\n current = null;\n document.title = \"Stundenpläne\";\n appEl.innerHTML = \"\";\n appEl.appendChild(el(\"div\", { class: \"topbar\" }, [\n el(\"h1\", { text: \"Stundenpläne\" }),\n el(\"div\", { class: \"topbar-actions\" }, [\n el(\"a\", { class: \"btn\", href: \"/timetable\", text: \"Kombi-Ansicht\" }),\n el(\"button\", { class: \"btn primary\", text: \"+ Neuer Stundenplan\", onclick: onCreate })\n ])\n ]));\n var listEl = el(\"div\", { class: \"card-list\" });\n appEl.appendChild(listEl);\n listEl.appendChild(el(\"p\", { class: \"muted\", text: \"Lade...\" }));\n\n api(\"/api/schedules\").then(function (schedules) {\n listEl.innerHTML = \"\";\n if (!schedules.length) {\n listEl.appendChild(el(\"p\", { class: \"muted\", text: \"Noch keine Stundenpläne angelegt.\" }));\n return;\n }\n schedules.forEach(function (s) { listEl.appendChild(renderCard(s)); });\n }).catch(function (err) {\n listEl.innerHTML = \"\";\n listEl.appendChild(el(\"p\", { class: \"error\", text: \"Fehler beim Laden: \" + err.message }));\n });\n }\n\n function renderCard(s) {\n var urls = icsUrls(s.id);\n var urlInput = el(\"input\", { type: \"text\", readonly: \"readonly\", value: urls.https, class: \"url-input\" });\n var copyBtn = el(\"button\", { class: \"btn small\", text: \"Link kopieren\", onclick: function () {\n urlInput.select();\n navigator.clipboard && navigator.clipboard.writeText(urls.https).then(function () {\n copyBtn.textContent = \"Kopiert!\";\n setTimeout(function () { copyBtn.textContent = \"Link kopieren\"; }, 1500);\n });\n }});\n\n return el(\"div\", { class: \"card\" }, [\n el(\"div\", { class: \"card-header\" }, [\n el(\"h2\", { text: s.name }),\n el(\"span\", { class: \"muted small\", text: \"Geändert: \" + formatDate(s.updated_at) })\n ]),\n el(\"div\", { class: \"url-row\" }, [\n urlInput, copyBtn,\n el(\"a\", { class: \"btn small\", href: urls.webcal, text: \"Abonnieren\" })\n ]),\n el(\"div\", { class: \"card-actions\" }, [\n el(\"button\", { class: \"btn\", text: \"Bearbeiten\", onclick: function () { openEditor(s.id); } }),\n el(\"button\", { class: \"btn danger\", text: \"Löschen\", onclick: function () { onDelete(s); } })\n ])\n ]);\n }\n\n function onCreate() {\n var name = window.prompt(\"Name der Person / des Stundenplans:\");\n if (!name) return;\n api(\"/api/schedules\", \"POST\", { name: name }).then(function (created) {\n openEditor(created.id);\n }).catch(function (err) { window.alert(\"Fehler: \" + err.message); });\n }\n\n function onDelete(s) {\n if (!window.confirm('Stundenplan \"' + s.name + '\" wirklich löschen? Das Kalender-Abo funktioniert danach nicht mehr.')) return;\n api(\"/api/schedules/\" + s.id, \"DELETE\").then(function () { showList(); })\n .catch(function (err) { window.alert(\"Fehler: \" + err.message); });\n }\n\n function openEditor(id) {\n appEl.innerHTML = \"\";\n appEl.appendChild(el(\"p\", { class: \"muted\", text: \"Lade...\" }));\n api(\"/api/schedules/\" + id).then(function (record) {\n if (!record.data.slots) record.data.slots = [];\n if (!record.data.schedule) record.data.schedule = {};\n if (!record.data.extras) record.data.extras = [];\n current = record;\n dirty = false;\n renderEditor();\n }).catch(function (err) {\n appEl.innerHTML = \"\";\n appEl.appendChild(el(\"p\", { class: \"error\", text: \"Fehler beim Laden: \" + err.message }));\n });\n }\n\n function markDirty() {\n dirty = true;\n var status = document.getElementById(\"save-status\");\n if (status) status.textContent = \"Nicht gespeichert\";\n }\n\n function renderEditor() {\n appEl.innerHTML = \"\";\n var urls = icsUrls(current.id);\n\n var nameInput = el(\"input\", { type: \"text\", value: current.name, class: \"name-input\" });\n nameInput.addEventListener(\"input\", function () { current.name = nameInput.value; markDirty(); });\n\n var urlInput = el(\"input\", { type: \"text\", readonly: \"readonly\", value: urls.https, class: \"url-input\" });\n var copyBtn = el(\"button\", { class: \"btn small\", text: \"Link kopieren\", onclick: function () {\n urlInput.select();\n navigator.clipboard && navigator.clipboard.writeText(urls.https).then(function () {\n copyBtn.textContent = \"Kopiert!\";\n setTimeout(function () { copyBtn.textContent = \"Link kopieren\"; }, 1500);\n });\n }});\n\n appEl.appendChild(el(\"div\", { class: \"topbar\" }, [\n el(\"button\", { class: \"btn\", text: \"Zurück\", onclick: function () {\n if (dirty && !window.confirm(\"Ungespeicherte Aenderungen verwerfen?\")) return;\n showList();\n } }),\n el(\"div\", { id: \"save-status\", class: \"muted small\", text: dirty ? \"Nicht gespeichert\" : \"Gespeichert\" }),\n el(\"button\", { class: \"btn primary\", text: \"Speichern\", onclick: onSave })\n ]));\n\n appEl.appendChild(el(\"label\", { class: \"field-label\", text: \"Name\" }));\n appEl.appendChild(nameInput);\n\n appEl.appendChild(el(\"label\", { class: \"field-label\", text: \"Kalender-Abo-Link (ICS)\" }));\n appEl.appendChild(el(\"div\", { class: \"url-row\" }, [\n urlInput, copyBtn,\n el(\"a\", { class: \"btn small\", href: urls.webcal, text: \"Abonnieren\" })\n ]));\n appEl.appendChild(el(\"p\", { class: \"hint\", text: \"Diesen Link in einer Kalender-App als Abo hinzufügen. Aenderungen erscheinen dort automatisch beim nächsten Aktualisieren der App.\" }));\n\n appEl.appendChild(el(\"h2\", { text: \"Stunden-Zeiten\" }));\n var slotsWrap = el(\"div\", { class: \"slots-table\" });\n appEl.appendChild(slotsWrap);\n renderSlotsTable(slotsWrap);\n appEl.appendChild(el(\"button\", { class: \"btn\", text: \"+ Stunde hinzufügen\", onclick: function () {\n current.data.slots.push({ id: newId(), label: \"\", start: \"08:00\", end: \"08:45\" });\n markDirty();\n renderSlotsTable(slotsWrap);\n renderGrid(gridWrap);\n } }));\n\n appEl.appendChild(el(\"h2\", { text: \"Wochenplan\" }));\n var gridWrap = el(\"div\", { class: \"grid-wrap\" });\n appEl.appendChild(gridWrap);\n renderGrid(gridWrap);\n\n appEl.appendChild(el(\"h2\", { text: \"Weitere Termine\" }));\n appEl.appendChild(el(\"p\", { class: \"hint\", text: \"Für Termine, die nicht ins Stundenraster passen, z.B. eine AG. Wiederholen sich ebenfalls wöchentlich.\" }));\n var extrasWrap = el(\"div\", { class: \"extras-table\" });\n appEl.appendChild(extrasWrap);\n renderExtrasTable(extrasWrap);\n appEl.appendChild(el(\"button\", { class: \"btn\", text: \"+ Termin hinzufügen\", onclick: function () {\n current.data.extras.push({ id: newId(), label: \"\", weekday: \"MO\", start: \"14:00\", end: \"15:00\" });\n markDirty();\n renderExtrasTable(extrasWrap);\n } }));\n\n appEl.appendChild(el(\"div\", { class: \"danger-zone\" }, [\n el(\"button\", { class: \"btn danger\", text: \"Stundenplan löschen\", onclick: function () { onDelete(current); } })\n ]));\n }\n\n function renderSlotsTable(container) {\n container.innerHTML = \"\";\n if (!current.data.slots.length) {\n container.appendChild(el(\"p\", { class: \"muted\", text: \"Noch keine Stunden definiert.\" }));\n return;\n }\n var table = el(\"table\", { class: \"slots\" });\n table.appendChild(el(\"thead\", null, [\n el(\"tr\", null, [\n el(\"th\", { text: \"Bezeichnung\" }), el(\"th\", { text: \"Von\" }),\n el(\"th\", { text: \"Bis\" }), el(\"th\", { text: \"\" })\n ])\n ]));\n var tbody = el(\"tbody\");\n current.data.slots.forEach(function (slot) {\n var labelInput = el(\"input\", { type: \"text\", value: slot.label, placeholder: \"z.B. 1. Stunde\" });\n labelInput.addEventListener(\"input\", function () { slot.label = labelInput.value; markDirty(); });\n var startInput = el(\"input\", { type: \"time\", value: slot.start });\n startInput.addEventListener(\"input\", function () { slot.start = startInput.value; markDirty(); });\n var endInput = el(\"input\", { type: \"time\", value: slot.end });\n endInput.addEventListener(\"input\", function () { slot.end = endInput.value; markDirty(); });\n var removeBtn = el(\"button\", { class: \"btn small danger\", text: \"Entfernen\", onclick: function () {\n current.data.slots = current.data.slots.filter(function (s) { return s.id !== slot.id; });\n WEEKDAYS.forEach(function (d) {\n if (current.data.schedule[d.key]) delete current.data.schedule[d.key][slot.id];\n });\n markDirty();\n renderSlotsTable(container);\n var gridWrap = document.querySelector(\".grid-wrap\");\n if (gridWrap) renderGrid(gridWrap);\n } });\n tbody.appendChild(el(\"tr\", null, [\n el(\"td\", null, [labelInput]), el(\"td\", null, [startInput]),\n el(\"td\", null, [endInput]), el(\"td\", null, [removeBtn])\n ]));\n });\n table.appendChild(tbody);\n container.appendChild(table);\n }\n\n function renderExtrasTable(container) {\n container.innerHTML = \"\";\n if (!current.data.extras.length) {\n container.appendChild(el(\"p\", { class: \"muted\", text: \"Keine weiteren Termine.\" }));\n return;\n }\n var table = el(\"table\", { class: \"slots\" });\n table.appendChild(el(\"thead\", null, [\n el(\"tr\", null, [\n el(\"th\", { text: \"Bezeichnung\" }), el(\"th\", { text: \"Wochentag\" }),\n el(\"th\", { text: \"Von\" }), el(\"th\", { text: \"Bis\" }), el(\"th\", { text: \"\" })\n ])\n ]));\n var tbody2 = el(\"tbody\");\n current.data.extras.forEach(function (extra) {\n var labelInput = el(\"input\", { type: \"text\", value: extra.label, placeholder: \"z.B. AG Schach\" });\n labelInput.addEventListener(\"input\", function () { extra.label = labelInput.value; markDirty(); });\n var daySelect = el(\"select\");\n WEEKDAYS.forEach(function (d) {\n var opt = el(\"option\", { value: d.key, text: d.full });\n if (d.key === extra.weekday) opt.setAttribute(\"selected\", \"selected\");\n daySelect.appendChild(opt);\n });\n daySelect.addEventListener(\"change\", function () { extra.weekday = daySelect.value; markDirty(); });\n var startInput = el(\"input\", { type: \"time\", value: extra.start });\n startInput.addEventListener(\"input\", function () { extra.start = startInput.value; markDirty(); });\n var endInput = el(\"input\", { type: \"time\", value: extra.end });\n endInput.addEventListener(\"input\", function () { extra.end = endInput.value; markDirty(); });\n var removeBtn = el(\"button\", { class: \"btn small danger\", text: \"Entfernen\", onclick: function () {\n current.data.extras = current.data.extras.filter(function (e) { return e.id !== extra.id; });\n markDirty();\n renderExtrasTable(container);\n } });\n tbody2.appendChild(el(\"tr\", null, [\n el(\"td\", null, [labelInput]), el(\"td\", null, [daySelect]),\n el(\"td\", null, [startInput]), el(\"td\", null, [endInput]), el(\"td\", null, [removeBtn])\n ]));\n });\n table.appendChild(tbody2);\n container.appendChild(table);\n }\n\n function renderGrid(container) {\n container.innerHTML = \"\";\n if (!current.data.slots.length) {\n container.appendChild(el(\"p\", { class: \"muted\", text: \"Erst Stunden-Zeiten anlegen, um den Wochenplan auszufüllen.\" }));\n return;\n }\n var sorted = current.data.slots.slice().sort(function (a, b) {\n return (a.start || \"\").localeCompare(b.start || \"\");\n });\n var table = el(\"table\", { class: \"grid\" });\n var headerRow = el(\"tr\", null, [el(\"th\", { text: \"Stunde\" })]);\n WEEKDAYS.forEach(function (d) { headerRow.appendChild(el(\"th\", { text: d.label })); });\n table.appendChild(el(\"thead\", null, [headerRow]));\n var tbody = el(\"tbody\");\n sorted.forEach(function (slot) {\n var th = el(\"th\", { class: \"row-label\" });\n th.appendChild(el(\"div\", { text: slot.label || \"(ohne Namen)\" }));\n th.appendChild(el(\"div\", { class: \"muted small\", text: slot.start + \"-\" + slot.end }));\n var row = el(\"tr\", null, [th]);\n WEEKDAYS.forEach(function (d) {\n if (!current.data.schedule[d.key]) current.data.schedule[d.key] = {};\n var value = current.data.schedule[d.key][slot.id] || \"\";\n var input = el(\"input\", { type: \"text\", value: value, placeholder: \"frei\", class: \"cell-input\" });\n input.addEventListener(\"input\", function () {\n current.data.schedule[d.key][slot.id] = input.value;\n markDirty();\n });\n row.appendChild(el(\"td\", null, [input]));\n });\n tbody.appendChild(row);\n });\n table.appendChild(tbody);\n container.appendChild(table);\n }\n\n function onSave() {\n var slots = current.data.slots;\n for (var i = 0; i < slots.length; i++) {\n if (!slots[i].start || !slots[i].end) {\n window.alert(\"Bitte bei jeder Stunde Start- und Endzeit angeben.\");\n return;\n }\n }\n var extras = current.data.extras;\n for (var j = 0; j < extras.length; j++) {\n if (!extras[j].label || !String(extras[j].label).trim()) {\n window.alert(\"Bitte bei jedem weiteren Termin eine Bezeichnung angeben.\");\n return;\n }\n if (!extras[j].start || !extras[j].end) {\n window.alert(\"Bitte bei jedem weiteren Termin Start- und Endzeit angeben.\");\n return;\n }\n if (extras[j].start >= extras[j].end) {\n window.alert(\"Bei einem Termin (\" + extras[j].label + \") muss die Startzeit vor der Endzeit liegen.\");\n return;\n }\n }\n api(\"/api/schedules/\" + current.id, \"PUT\", {\n name: current.name, slots: current.data.slots, schedule: current.data.schedule, extras: current.data.extras\n }).then(function (updated) {\n current = updated;\n dirty = false;\n var status = document.getElementById(\"save-status\");\n if (status) status.textContent = \"Gespeichert\";\n }).catch(function (err) { window.alert(\"Fehler beim Speichern: \" + err.message); });\n }\n\n showList();\n})();\n`;\n\nconst HTML = `\n\n\n\n\nStundenpläne\n\n\n\n

\n\n\n\n`;\n\n// ---------------------------------------------------------------------------\n// Kombi-Ansicht: gemeinsame Hilfsfunktionen\n// ---------------------------------------------------------------------------\n\nfunction escapeHtml(s: string) {\n return String(s == null ? \"\" : s)\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\n// Laesst nur gueltige Hex-Farben durch (3 oder 6 Stellen), sonst Grau als\n// Rueckfallwert - verhindert, dass Farbwerte aus der URL das style-Attribut\n// aufbrechen koennten.\nfunction sanitizeColor(c: string) {\n const clean = String(c || \"\").replace(/^#/, \"\").trim();\n return /^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{3}$/.test(clean) ? clean : \"999999\";\n}\n\nfunction contrastTextColor(hex: string) {\n const clean = sanitizeColor(hex);\n const full = clean.length === 3\n ? clean.split(\"\").map((c) => c + c).join(\"\")\n : clean;\n const r = parseInt(full.slice(0, 2), 16);\n const g = parseInt(full.slice(2, 4), 16);\n const b = parseInt(full.slice(4, 6), 16);\n const brightness = (r * 299 + g * 587 + b * 114) / 1000;\n return brightness > 150 ? \"#161616\" : \"#ffffff\";\n}\n\nfunction timeToMinutes(t: string) {\n const [h, m] = String(t).split(\":\").map((x) => parseInt(x, 10));\n return (h || 0) * 60 + (m || 0);\n}\n\nfunction minutesToLabel(m: number) {\n const h = Math.floor(m / 60);\n const mm = m % 60;\n return pad2(h) + \":\" + pad2(mm);\n}\n\n// Parst den URL-Parameter \"p\" im Format \"id1:farbe1,id2:farbe2,...\".\n// Die Reihenfolge in der Liste bestimmt die Spaltenreihenfolge in der Ansicht.\nfunction parsePeopleParam(raw: string): Array<{ id: string; color: string }> {\n return raw\n .split(\",\")\n .map((chunk) => chunk.trim())\n .filter(Boolean)\n .map((chunk) => {\n const parts = chunk.split(\":\");\n const id = (parts[0] || \"\").trim();\n const color = (parts[1] || \"\").trim();\n return id ? { id, color } : null;\n })\n .filter((x): x is { id: string; color: string } => !!x);\n}\n\n// Kleine Fehlerseite fuer ungültige/veraltete Kombi-Ansicht-Links. Räumt einen\n// eventuell im LocalStorage gespeicherten, nicht mehr gültigen Link auf, sonst\n// würde man beim erneuten Aufruf immer wieder hierher umgeleitet.\nfunction timetableErrorPage(message: string) {\n return `\n\n\n\n\nWochenplan\n\n\n\n

${escapeHtml(message)}

Zur Auswahl

\n \n\n`;\n}\n\n// ---------------------------------------------------------------------------\n// Kombi-Ansicht: serverseitig gerenderte, schreibgeschuetzte Wochenansicht\n// ---------------------------------------------------------------------------\n// Kombiniert mehrere Stundenplaene zeitgenau in einem Raster. Da jeder\n// Stundenplan seine eigenen Stunden-Zeiten haben kann, wird nicht ueber\n// gemeinsame \"Stunden\"-Zeilen kombiniert, sondern ueber echte Uhrzeiten:\n// jede Person bekommt pro Wochentag eine Unterspalte, Termine werden darin\n// nach tatsaechlicher Start-/Endzeit positioniert.\n\nconst TIMETABLE_VIEW_CSS = `\n :root { color-scheme: light; }\n * { box-sizing: border-box; }\n body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background: #f5f5f7; color: #1d1d1f; }\n .tt-wrap { max-width: 1100px; margin: 0 auto; padding: 16px 16px 48px; }\n .tt-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px;\n flex-wrap: wrap; margin-bottom: 8px; }\n h1 { font-size: 20px; margin: 4px 0; }\n .tt-link { font-size: 13px; color: #0071e3; text-decoration: none; }\n .tt-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }\n .tt-legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px;\n background: #fff; border-radius: 8px; padding: 5px 9px; box-shadow: 0 1px 2px rgba(0,0,0,.06);\n transition: opacity .15s; }\n .tt-legend-item.tt-hidden { opacity: .4; }\n .tt-legend-item input[type=checkbox] { margin: 0; }\n .tt-legend-item input[type=color] { width: 22px; height: 22px; padding: 0; border: none;\n border-radius: 5px; background: none; cursor: pointer; }\n .tt-grid { display: flex; background: #fff; border-radius: 10px; overflow: hidden;\n box-shadow: 0 1px 2px rgba(0,0,0,.06); }\n .tt-axis { flex: none; width: 46px; border-right: 1px solid #eee; }\n .tt-axis-ticks { position: relative; }\n .tt-tick { position: absolute; right: 6px; font-size: 10px; color: #8a8a8e; line-height: 1; }\n .tt-day { flex: 1; min-width: 0; border-right: 1px solid #eee; }\n .tt-day:last-child { border-right: none; }\n .tt-day-header { text-align: center; font-size: 12px; font-weight: 600; padding: 8px 2px;\n border-bottom: 1px solid #eee; background: #fafafa; }\n .tt-day-body { position: relative; }\n .tt-hline { position: absolute; left: 0; right: 0; border-top: 1px solid #f0f0f0; }\n .tt-event { position: absolute; border-radius: 4px; overflow: hidden; padding: 2px;\n display: flex; align-items: center; justify-content: center; }\n .tt-event-label {\n transform: rotate(-90deg);\n white-space: nowrap;\n text-align: center;\n font-size: 11px;\n font-weight: 600;\n }\n .tt-empty { padding: 40px 16px; text-align: center; color: #6e6e73; }\n @media (max-width: 640px) {\n .tt-event-label { font-size: 9.5px; }\n .tt-day-header { font-size: 10px; }\n }\n`;\n\nconst TIMETABLE_PX_PER_MIN = 1.5;\n\n// Läuft im Browser auf der Wochenplan-Seite. Liest die vom Server eingebettete\n// Personenliste (window.__TT_STATE__), macht Checkbox (ein-/ausblenden) und\n// Farbfeld in der Legende interaktiv, passt Spaltenbreiten live an, hält die\n// Adresszeile per history.replaceState synchron und merkt sich die zuletzt\n// angezeigte Auswahl im LocalStorage.\nconst TIMETABLE_VIEW_JS = `\n(function () {\n \"use strict\";\n var state = window.__TT_STATE__ || [];\n\n function sanitizeColor(c) {\n var clean = String(c || \"\").replace(/^#/, \"\");\n return /^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{3}$/.test(clean) ? clean : \"999999\";\n }\n\n function contrastTextColor(hex) {\n var clean = sanitizeColor(hex);\n var full = clean.length === 3 ? clean.split(\"\").map(function (c) { return c + c; }).join(\"\") : clean;\n var r = parseInt(full.slice(0, 2), 16);\n var g = parseInt(full.slice(2, 4), 16);\n var b = parseInt(full.slice(4, 6), 16);\n var brightness = (r * 299 + g * 587 + b * 114) / 1000;\n return brightness > 150 ? \"#161616\" : \"#ffffff\";\n }\n\n var STORAGE_KEY = \"stundenplan_tt_state\";\n\n function buildParams() {\n var p = state.filter(function (x) { return x.visible; })\n .map(function (x) { return x.id + \":\" + sanitizeColor(x.color); })\n .join(\",\");\n var h = state.filter(function (x) { return !x.visible; })\n .map(function (x) { return x.id + \":\" + sanitizeColor(x.color); })\n .join(\",\");\n return { p: p, h: h };\n }\n\n function updateUrlAndStorage() {\n var params = buildParams();\n var url = new URL(window.location.href);\n if (params.p) { url.searchParams.set(\"p\", params.p); } else { url.searchParams.delete(\"p\"); }\n if (params.h) { url.searchParams.set(\"h\", params.h); } else { url.searchParams.delete(\"h\"); }\n window.history.replaceState(null, \"\", url.toString());\n try { window.localStorage.setItem(STORAGE_KEY, JSON.stringify(params)); } catch (e) {}\n }\n\n function applyLayout() {\n var visible = state.filter(function (p) { return p.visible; });\n var n = visible.length || 1;\n visible.forEach(function (p, idx) {\n var left = (idx / n) * 100;\n var width = 100 / n;\n var color = sanitizeColor(p.color);\n var textColor = contrastTextColor(color);\n var blocks = document.querySelectorAll('.tt-event[data-person=\"' + p.id + '\"]');\n for (var i = 0; i < blocks.length; i++) {\n blocks[i].style.left = left + \"%\";\n blocks[i].style.width = width + \"%\";\n blocks[i].style.display = \"\";\n blocks[i].style.background = \"#\" + color;\n blocks[i].style.color = textColor;\n }\n });\n state.filter(function (p) { return !p.visible; }).forEach(function (p) {\n var blocks = document.querySelectorAll('.tt-event[data-person=\"' + p.id + '\"]');\n for (var i = 0; i < blocks.length; i++) { blocks[i].style.display = \"none\"; }\n });\n }\n\n state.forEach(function (p) {\n var item = document.querySelector('.tt-legend-item[data-person=\"' + p.id + '\"]');\n if (!item) return;\n var checkbox = item.querySelector('input[type=checkbox]');\n var colorInput = item.querySelector('input[type=color]');\n if (checkbox) {\n checkbox.addEventListener(\"change\", function () {\n p.visible = checkbox.checked;\n item.classList.toggle(\"tt-hidden\", !p.visible);\n applyLayout();\n updateUrlAndStorage();\n });\n }\n if (colorInput) {\n colorInput.addEventListener(\"input\", function () {\n p.color = colorInput.value;\n applyLayout();\n updateUrlAndStorage();\n });\n }\n });\n\n applyLayout();\n try { window.localStorage.setItem(STORAGE_KEY, JSON.stringify(buildParams())); } catch (e) {}\n})();\n`;\n\nfunction renderTimetableView(\n people: Array<{ record: any; color: string; visible: boolean }>,\n) {\n const perPerson = people.map((p) => ({\n record: p.record,\n color: sanitizeColor(p.color),\n visible: p.visible,\n events: expandEvents(p.record.data),\n }));\n\n // Zeitraster und Wochentage richten sich nach ALLEN Personen (auch versteckten),\n // damit beim spaeteren Wiedereinblenden nichts ausserhalb des gerenderten\n // Rasters liegt.\n const dayHasContent: Record = {};\n let minMinutes = Infinity;\n let maxMinutes = -Infinity;\n for (const p of perPerson) {\n for (const ev of p.events) {\n dayHasContent[ev.weekday] = true;\n const s = timeToMinutes(ev.start);\n const e = timeToMinutes(ev.end);\n if (s < minMinutes) minMinutes = s;\n if (e > maxMinutes) maxMinutes = e;\n }\n }\n if (!isFinite(minMinutes)) {\n minMinutes = 8 * 60;\n maxMinutes = 16 * 60;\n }\n minMinutes = Math.floor(minMinutes / 30) * 30;\n maxMinutes = Math.ceil(maxMinutes / 30) * 30;\n const totalMinutes = Math.max(maxMinutes - minMinutes, 30);\n const bodyHeight = Math.round(totalMinutes * TIMETABLE_PX_PER_MIN);\n\n const shownDays = WEEKDAYS.filter((d) => dayHasContent[d.key]);\n const days = shownDays.length ? shownDays : WEEKDAYS.slice(0, 5);\n\n const legendHtml = perPerson\n .map(\n (p) =>\n '

' +\n '' +\n escapeHtml(p.record.name) +\n \"

\",\n )\n .join(\"\");\n\n const ticks: number[] = [];\n for (let m = Math.ceil(minMinutes / 60) * 60; m <= maxMinutes; m += 60) {\n ticks.push(m);\n }\n\n const axisHtml = ticks\n .map(\n (m) =>\n '

' +\n minutesToLabel(m) +\n \"

\",\n )\n .join(\"\");\n\n // Nur sichtbare Personen teilen sich die Spaltenbreite; versteckte werden\n // (fuer den Fall ohne JavaScript) direkt mit display:none gerendert.\n const visiblePeople = perPerson.filter((p) => p.visible);\n const n = visiblePeople.length || 1;\n\n const dayColsHtml = days\n .map((day) => {\n const hlines = ticks\n .map(\n (m) =>\n '

',\n )\n .join(\"\");\n const blocks = perPerson\n .map((p) => {\n const textColor = contrastTextColor(p.color);\n const visibleIdx = visiblePeople.indexOf(p);\n const left = p.visible ? (visibleIdx / n) * 100 : 0;\n const width = p.visible ? 100 / n : 100;\n const displayStyle = p.visible ? \"\" : \"display:none;\";\n return p.events\n .filter((ev) => ev.weekday === day.key)\n .map((ev) => {\n const top = Math.round(\n (timeToMinutes(ev.start) - minMinutes) * TIMETABLE_PX_PER_MIN,\n );\n const height = Math.max(\n Math.round(\n (timeToMinutes(ev.end) - timeToMinutes(ev.start)) *\n TIMETABLE_PX_PER_MIN,\n ),\n 14,\n );\n return (\n '

' +\n escapeHtml(ev.subject) +\n \"

\"\n );\n })\n .join(\"\");\n })\n .join(\"\");\n return (\n '

' +\n day.label +\n '

' +\n hlines +\n blocks +\n \"

\"\n );\n })\n .join(\"\");\n\n const stateJson = JSON.stringify(\n perPerson.map((p) => ({\n id: p.record.id,\n name: p.record.name,\n color: p.color,\n visible: p.visible,\n })),\n ).replace(/\n\n\n\n\nWochenplan\n\n\n\n

\n \n

${legendHtml}

${axisHtml}

\n ${dayColsHtml}\n

\n\n\n\n`;\n}\n\n// ---------------------------------------------------------------------------\n// Kombi-Ansicht: Personen-Auswahl (geschuetzt)\n// ---------------------------------------------------------------------------\n\nconst PICKER_JS = `\n(function () {\n \"use strict\";\n\n // Wurde diese Ansicht schon einmal mit Auswahl aufgerufen, direkt dorthin\n // weiterleiten - spart in dem Fall die Anmeldung fuer die Personen-Auswahl.\n var savedRaw = null;\n try { savedRaw = window.localStorage.getItem(\"stundenplan_tt_state\"); } catch (e) {}\n if (savedRaw) {\n try {\n var saved = JSON.parse(savedRaw);\n if (saved && (saved.p || saved.h)) {\n var qs = [];\n if (saved.p) qs.push(\"p=\" + encodeURIComponent(saved.p));\n if (saved.h) qs.push(\"h=\" + encodeURIComponent(saved.h));\n window.location.replace(\"/timetable?\" + qs.join(\"&\"));\n return;\n }\n } catch (e) {}\n }\n\n var PALETTE = [\"e63946\",\"f4a261\",\"2a9d8f\",\"264653\",\"e9c46a\",\"8ab4f8\",\"c77dff\",\"06d6a0\",\"ff6b6b\",\"4ecdc4\"];\n var appEl = document.getElementById(\"app\");\n var all = [];\n var selected = [];\n\n function el(tag, attrs, children) {\n var node = document.createElement(tag);\n if (attrs) {\n for (var key in attrs) {\n if (key === \"class\") node.className = attrs[key];\n else if (key === \"text\") node.textContent = attrs[key];\n else if (key.indexOf(\"on\") === 0 && typeof attrs[key] === \"function\") {\n node.addEventListener(key.slice(2), attrs[key]);\n } else {\n node.setAttribute(key, attrs[key]);\n }\n }\n }\n if (children) { children.forEach(function (c) { if (c) node.appendChild(c); }); }\n return node;\n }\n\n function buildUrl() {\n var parts = selected.map(function (s) { return s.id + \":\" + s.color.replace(\"#\", \"\"); });\n return window.location.origin + \"/timetable?p=\" + encodeURIComponent(parts.join(\",\"));\n }\n\n function move(index, delta) {\n var target = index + delta;\n if (target < 0 || target >= selected.length) return;\n var tmp = selected[index];\n selected[index] = selected[target];\n selected[target] = tmp;\n render();\n }\n\n var linkSection = null;\n\n function refreshLink() {\n if (!linkSection) return;\n linkSection.innerHTML = \"\";\n if (selected.length) {\n var url = buildUrl();\n var urlInput = el(\"input\", { type: \"text\", readonly: \"readonly\", value: url, class: \"url-input\" });\n var copyBtn = el(\"button\", { class: \"btn small\", text: \"Link kopieren\", onclick: function () {\n urlInput.select();\n navigator.clipboard && navigator.clipboard.writeText(url).then(function () {\n copyBtn.textContent = \"Kopiert!\";\n setTimeout(function () { copyBtn.textContent = \"Link kopieren\"; }, 1500);\n });\n }});\n linkSection.appendChild(el(\"div\", { class: \"url-row\" }, [\n urlInput, copyBtn,\n el(\"a\", { class: \"btn primary small\", href: url, target: \"_blank\", text: \"Ansicht öffnen\" })\n ]));\n linkSection.appendChild(el(\"p\", { class: \"hint\", text: \"Dieser Link funktioniert auch ohne Anmeldung - wer ihn hat, kann die Ansicht sehen.\" }));\n } else {\n linkSection.appendChild(el(\"p\", { class: \"muted\", text: \"Erst Personen auswählen, um einen Link zu erhalten.\" }));\n }\n }\n\n function render() {\n appEl.innerHTML = \"\";\n appEl.appendChild(el(\"div\", { class: \"topbar\" }, [\n el(\"a\", { class: \"btn\", href: \"/\", text: \"Zurück zur Übersicht\" }),\n el(\"h1\", { text: \"Kombi-Ansicht erstellen\" })\n ]));\n appEl.appendChild(el(\"p\", { class: \"hint\", text: \"Personen auswählen. Reihenfolge und Farbe bestimmen, wie die Spalten in der Ansicht erscheinen.\" }));\n\n appEl.appendChild(el(\"h2\", { text: \"Verfügbare Stundenpläne\" }));\n var listEl = el(\"div\", { class: \"picker-list\" });\n all.forEach(function (person) {\n var isSelected = selected.some(function (s) { return s.id === person.id; });\n var row = el(\"label\", { class: \"picker-row\" });\n var checkbox = el(\"input\", { type: \"checkbox\" });\n checkbox.checked = isSelected;\n checkbox.addEventListener(\"change\", function () {\n if (checkbox.checked) {\n selected.push({ id: person.id, name: person.name, color: \"#\" + PALETTE[selected.length % PALETTE.length] });\n } else {\n selected = selected.filter(function (s) { return s.id !== person.id; });\n }\n render();\n });\n row.appendChild(checkbox);\n row.appendChild(el(\"span\", { text: person.name }));\n listEl.appendChild(row);\n });\n if (!all.length) listEl.appendChild(el(\"p\", { class: \"muted\", text: \"Noch keine Stundenpläne vorhanden.\" }));\n appEl.appendChild(listEl);\n\n appEl.appendChild(el(\"h2\", { text: \"Ausgewählt (Reihenfolge = Spaltenreihenfolge)\" }));\n if (!selected.length) {\n appEl.appendChild(el(\"p\", { class: \"muted\", text: \"Noch niemand ausgewählt.\" }));\n } else {\n var table = el(\"table\", { class: \"slots\" });\n var tbody = el(\"tbody\");\n selected.forEach(function (s, idx) {\n var colorInput = el(\"input\", { type: \"color\", value: s.color });\n colorInput.addEventListener(\"input\", function () {\n s.color = colorInput.value;\n refreshLink();\n });\n var upBtn = el(\"button\", { class: \"btn small\", text: \"↑\", onclick: function () { move(idx, -1); } });\n var downBtn = el(\"button\", { class: \"btn small\", text: \"↓\", onclick: function () { move(idx, 1); } });\n var removeBtn = el(\"button\", { class: \"btn small danger\", text: \"Entfernen\", onclick: function () {\n selected = selected.filter(function (x) { return x.id !== s.id; });\n render();\n } });\n tbody.appendChild(el(\"tr\", null, [\n el(\"td\", null, [document.createTextNode(s.name)]),\n el(\"td\", null, [colorInput]),\n el(\"td\", null, [upBtn, downBtn]),\n el(\"td\", null, [removeBtn])\n ]));\n });\n table.appendChild(tbody);\n appEl.appendChild(table);\n }\n\n appEl.appendChild(el(\"h2\", { text: \"Link zur Ansicht\" }));\n linkSection = el(\"div\", { class: \"link-section\" });\n appEl.appendChild(linkSection);\n refreshLink();\n }\n\n fetch(\"/api/schedules\").then(function (res) {\n if (!res.ok) throw new Error(\"HTTP \" + res.status);\n return res.json();\n }).then(function (schedules) {\n all = schedules;\n render();\n }).catch(function (err) {\n appEl.innerHTML = \"\";\n appEl.appendChild(el(\"p\", { class: \"error\", text: \"Fehler beim Laden: \" + err.message }));\n });\n})();\n`;\n\nconst PICKER_HTML = `\n\n\n\n\nKombi-Ansicht erstellen\n\n\n\n

\n\n\n`;\n\n// ---------------------------------------------------------------------------\n// HTTP-Handler\n// ---------------------------------------------------------------------------\n\nfunction json(data: unknown, status = 200) {\n return new Response(JSON.stringify(data), {\n status,\n headers: { \"content-type\": \"application/json; charset=utf-8\" },\n });\n}\n\nfunction badRequest(message: string) {\n return json({ error: message }, 400);\n}\n\nexport default async function (req: Request): Promise {\n await ensureTable();\n const url = new URL(req.url);\n const path = url.pathname;\n\n try {\n if (path === \"/\" && req.method === \"GET\") {\n const authResp = requireAuth(req);\n if (authResp) return authResp;\n return new Response(HTML, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n }\n\n if (\n path === \"/api/schedules\" ||\n path.match(/^\\/api\\/schedules\\/[a-zA-Z0-9-]+$/)\n ) {\n const authResp = requireAuth(req);\n if (authResp) return authResp;\n }\n\n if (path === \"/api/schedules\" && req.method === \"GET\") {\n return json(await listSchedules());\n }\n\n if (path === \"/api/schedules\" && req.method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n const name = String(body.name || \"\").trim();\n if (!name) return badRequest(\"Name ist erforderlich.\");\n return json(await createSchedule(name), 201);\n }\n\n const itemMatch = path.match(/^\\/api\\/schedules\\/([a-zA-Z0-9-]+)$/);\n if (itemMatch) {\n const id = itemMatch[1];\n\n if (req.method === \"GET\") {\n const record = await getSchedule(id);\n if (!record) return json({ error: \"Nicht gefunden\" }, 404);\n return json(record);\n }\n\n if (req.method === \"PUT\") {\n const body = await req.json().catch(() => ({}));\n const name = String(body.name || \"\").trim();\n if (!name) return badRequest(\"Name ist erforderlich.\");\n const slots = Array.isArray(body.slots) ? body.slots : [];\n for (const s of slots) {\n if (!s || typeof s.id !== \"string\" || !s.start || !s.end) {\n return badRequest(\"Jede Stunde braucht id, start und end.\");\n }\n }\n const schedule = body.schedule && typeof body.schedule === \"object\"\n ? body.schedule\n : {};\n const extras = Array.isArray(body.extras) ? body.extras : [];\n const validWeekdays = new Set(WEEKDAYS.map((d) => d.key));\n for (const ex of extras) {\n if (!ex || typeof ex.id !== \"string\") {\n return badRequest(\"Jeder Termin braucht eine id.\");\n }\n if (!validWeekdays.has(ex.weekday)) {\n return badRequest(\"Ungültiger Wochentag bei einem Termin.\");\n }\n if (!ex.start || !ex.end) {\n return badRequest(\"Jeder Termin braucht Start- und Endzeit.\");\n }\n if (!String(ex.label || \"\").trim()) {\n return badRequest(\"Jeder Termin braucht eine Bezeichnung.\");\n }\n }\n const updated = await updateSchedule(id, name, slots, schedule, extras);\n if (!updated) return json({ error: \"Nicht gefunden\" }, 404);\n return json(updated);\n }\n\n if (req.method === \"DELETE\") {\n const ok = await deleteSchedule(id);\n if (!ok) return json({ error: \"Nicht gefunden\" }, 404);\n return new Response(null, { status: 204 });\n }\n }\n\n if (path === \"/timetable\" && req.method === \"GET\") {\n const pParam = url.searchParams.get(\"p\");\n const hParam = url.searchParams.get(\"h\");\n\n if (pParam || hParam) {\n // Fertig zusammengestellte Ansicht: kein Login noetig, der Link mit den\n // (nicht erratbaren) Stundenplan-IDs ist selbst die Berechtigung -\n // dasselbe Prinzip wie bei den ICS-Abos. \"h\" (hidden) enthaelt Personen,\n // die zwar in der Legende bleiben, aber ausgeblendet sind.\n const visiblePairs = pParam ? parsePeopleParam(pParam) : [];\n const hiddenPairs = hParam ? parsePeopleParam(hParam) : [];\n if (!visiblePairs.length && !hiddenPairs.length) {\n return new Response(\n timetableErrorPage(\"Keine gültigen Personen angegeben.\"),\n {\n status: 400,\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n },\n );\n }\n const people: Array<{ record: any; color: string; visible: boolean }> =\n [];\n for (const pair of visiblePairs) {\n const record = await getSchedule(pair.id);\n if (record) people.push({ record, color: pair.color, visible: true });\n }\n for (const pair of hiddenPairs) {\n const record = await getSchedule(pair.id);\n if (record) {\n people.push({ record, color: pair.color, visible: false });\n }\n }\n if (!people.length) {\n return new Response(\n timetableErrorPage(\n \"Diese Stundenpläne wurden nicht gefunden - vielleicht wurden sie gelöscht.\",\n ),\n {\n status: 404,\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n },\n );\n }\n return new Response(renderTimetableView(people), {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n }\n\n // Personen-Auswahl: die HTML-Huelle selbst enthaelt keine Namen und bleibt\n // ungeschuetzt, damit das Skript zuerst im LocalStorage nach einer zuletzt\n // angesehenen Ansicht suchen kann, ohne dafuer schon eingeloggt zu sein.\n // Die eigentliche Namensliste kommt weiterhin nur ueber das geschuetzte\n // /api/schedules.\n return new Response(PICKER_HTML, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n }\n\n const icsMatch = path.match(/^\\/ics\\/([a-zA-Z0-9-]+?)(?:\\.ics)?$/);\n if (icsMatch && req.method === \"GET\") {\n const record = await getSchedule(icsMatch[1]);\n if (!record) {\n return new Response(\"Kalender nicht gefunden\", { status: 404 });\n }\n const ics = buildIcs(record, url.host);\n return new Response(ics, {\n headers: {\n \"content-type\": \"text/calendar; charset=utf-8\",\n \"cache-control\": \"public, max-age=1800\",\n },\n });\n }\n\n return new Response(\"Not found\", { status: 404 });\n } catch (err) {\n console.error(err);\n return json({ error: String((err as Error)?.message || err) }, 500);\n }\n}","deleted",false,"label","stundenplaene",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":58,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_59":60,"_18":61},["D",1787720183270],"children",[],[35],"0d8f5cae-9f0a-4f91-8c29-52b97dbc7da4",["D",1787598369461],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","5d48cd83-4af1-4c6d-bbb2-a55ca600b9b7","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","c29954f2-52fb-4a15-9575-096b30301bff","tursoName","0d8f5cae9f0a4f918c2952b97dbc7da4","tursoHostname","0d8f5cae9f0a4f918c2952b97dbc7da4-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789468254172],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_118":114},"org",{"_11":12,"_112":-5,"_113":114,"_71":72,"_115":116,"_117":53},"branch",{"_17":42,"_13":16,"_33":40,"_104":62,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":14,"_111":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJkWFlhZDJOamZwZmMzS1U0Y2dIM2RzSWxTVSJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":62,"_13":14,"_45":153,"_64":-5,"_65":53,"_66":67,"_68":67,"_69":19,"_70":-5,"_71":72,"_73":37,"_74":53,"_75":-5,"_76":-5,"_77":78,"_79":80,"_81":82,"_83":84,"_85":154,"_87":-5,"_88":89,"_90":89,"_91":92,"_93":92,"_94":92,"_95":89,"_96":89,"_97":155,"_99":156,"_101":157,"_103":53},[150],"files",[150],"counts",{"_139":78,"_140":141,"_142":78,"_31":143,"_144":145},[137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":138},[35],"pulls","branches",1,"forks",{"_146":148,"_149":78},"connections",{"_146":78,"_147":78},"count","unfilledCount",2,"emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":58,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_59":151,"_18":152},[],[35],["D",1787598369461],["D",1789468254172],{"_11":12,"_118":114},{"_11":12,"_112":-5,"_113":114,"_71":72,"_115":116,"_117":53},{"_17":42,"_13":16,"_33":40,"_104":62,"_105":-5,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":14,"_111":12},"ctx",{"_97":-5,"_134":191,"_192":193,"_194":195,"_196":53,"_197":53,"_198":53,"_199":44,"_200":-5,"_201":-7,"_202":-7,"_203":78,"_204":53,"_205":53,"_206":-5,"_207":53,"_208":53,"_209":53,"_210":-5},"ENV",{"_162":163,"_164":165,"_166":16,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Code