Ready to roll

No active shift

\n Start a shift to pull in the default checklist, add custom tasks, and keep notes as you go.\n

\n \n

\n `;\n\n const startShiftBtn = document.getElementById(\"start-shift-btn\");\n startShiftBtn?.addEventListener(\"click\", async () => {\n const payload = await api(\"/api/shifts/start\", { method: \"POST\" });\n appState = {\n ...(appState as AppStatePayload),\n activeShift: payload,\n };\n await fetchState();\n showToast(\"Shift started\");\n render();\n });\n return;\n }\n\n const progress = activeShift.shift.totalCount\n ? Math.round((activeShift.shift.completedCount / activeShift.shift.totalCount) * 100)\n : 0;\n\n const groupedTasks = groupTasks(activeShift.tasks);\n const sectionsMarkup = [...groupedTasks.entries()].map(([section, tasks]) => `\n

${escapeHtml(section)}

\n ${tasks.filter((task) => task.completed).length}/${tasks.length}\n

\n ${tasks.map((task) => `\n \n \n

${escapeHtml(task.label)}

${task.source === \"custom\" ? \"Custom task\" : \"Template task\"} · ${escapeHtml(formatClock(task.completedAt))}

\n ${task.completed ? \"Done\" : \"Open\"}\n \n `).join(\"\")}\n

\n `).join(\"\");\n\n homeView.innerHTML = `\n

Active shift

${escapeHtml(formatDateTime(activeShift.shift.startedAt))}

\n \n

\n\n

\n ${activeShift.shift.completedCount}/${activeShift.shift.totalCount}\n tasks done\n

\n ${progress}%\n completed\n

\n ${[...groupedTasks.keys()].length}\n sections\n

\n\n

Custom add

Add a task mid-shift

\n \n

\n\n

Shift notes

What happened?

\n \n

\n\n

Checklist

Work the board

\n ${sectionsMarkup}\n

\n `;\n\n homeView.querySelectorAll('input[type=\"checkbox\"][data-task-id]').forEach((checkbox) => {\n checkbox.addEventListener(\"change\", async () => {\n const taskId = Number(checkbox.dataset.taskId);\n await api(\"/api/tasks/\" + taskId, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ completed: checkbox.checked }),\n });\n await fetchState();\n showToast(checkbox.checked ? \"Task completed\" : \"Task reopened\");\n render();\n });\n });\n\n const customTaskForm = document.getElementById(\"custom-task-form\") as HTMLFormElement | null;\n customTaskForm?.addEventListener(\"submit\", async (event) => {\n event.preventDefault();\n const formData = new FormData(customTaskForm);\n await api(\"/api/shifts/\" + activeShift.shift.id + \"/tasks\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n section: String(formData.get(\"section\") ?? \"\"),\n label: String(formData.get(\"label\") ?? \"\"),\n }),\n });\n customTaskForm.reset();\n await fetchState();\n showToast(\"Custom task added\");\n render();\n });\n\n const notesForm = document.getElementById(\"notes-form\") as HTMLFormElement | null;\n notesForm?.addEventListener(\"submit\", async (event) => {\n event.preventDefault();\n const formData = new FormData(notesForm);\n await api(\"/api/shifts/\" + activeShift.shift.id + \"/notes\", {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ notes: String(formData.get(\"notes\") ?? \"\") }),\n });\n await fetchState();\n showToast(\"Notes saved\");\n render();\n });\n\n const endShiftBtn = document.getElementById(\"end-shift-btn\");\n endShiftBtn?.addEventListener(\"click\", async () => {\n await api(\"/api/shifts/\" + activeShift.shift.id + \"/end\", { method: \"POST\" });\n await fetchState();\n showToast(\"Shift ended\");\n render();\n });\n}\n\nfunction renderHistoryCard(shift: ShiftHistoryEntry): string {\n const doneTasks = shift.tasks.filter((task) => task.completed);\n return `\n

Completed shift

${escapeHtml(formatDateTime(shift.startedAt))}

\n ${shift.completedCount}/${shift.totalCount}\n

\n Ended ${escapeHtml(formatDateTime(shift.endedAt))}\n

\n ${shift.notes\n ? `

${escapeHtml(shift.notes)}

`\n : \"\"}\n

\n ${doneTasks.length\n ? doneTasks.slice(0, 4).map((task) => escapeHtml(task.label)).join(\" · \")\n : \"No tasks were completed in this shift.\"}\n

\n `;\n}\n\nfunction renderHistory(): void {\n historyView.classList.toggle(\"hidden\", currentView !== \"history\" || !currentUser?.email);\n\n if (!currentUser?.email || !appState) {\n historyView.innerHTML = \"\";\n return;\n }\n\n historyView.innerHTML = `\n

Shift archive

History

\n ${\n appState.history.length\n ? appState.history.map(renderHistoryCard).join(\"\")\n : '

No completed shifts yet. Finish your first one to build history.

'\n }\n

\n `;\n}\n\nfunction renderTemplates(): void {\n templatesView.classList.toggle(\"hidden\", currentView !== \"templates\" || !currentUser?.email);\n\n if (!currentUser?.email || !appState) {\n templatesView.innerHTML = \"\";\n return;\n }\n\n const groupedTemplates = new Map();\n for (const item of appState.templates) {\n const existing = groupedTemplates.get(item.section) ?? [];\n existing.push(item);\n groupedTemplates.set(item.section, existing);\n }\n\n templatesView.innerHTML = `\n

Reusable list

Templates

\n Default checklist items are baked in. Add your own recurring tasks here so new shifts start closer to reality.\n

\n \n

\n\n

Current template library

What a shift starts with

\n ${[...groupedTemplates.entries()].map(([section, items]) => `\n

${escapeHtml(section)}

\n ${items.length} items\n

\n ${items.map((item) => `\n

\n \n

${escapeHtml(item.label)}

${item.source === \"default\" ? \"Default\" : \"Your template\"}

\n ${item.source}\n

\n `).join(\"\")}\n

\n `;\n\n const templateForm = document.getElementById(\"template-form\") as HTMLFormElement | null;\n templateForm?.addEventListener(\"submit\", async (event) => {\n event.preventDefault();\n const formData = new FormData(templateForm);\n await api(\"/api/templates\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n section: String(formData.get(\"section\") ?? \"\"),\n label: String(formData.get(\"label\") ?? \"\"),\n }),\n });\n templateForm.reset();\n await fetchState();\n showToast(\"Template item added\");\n render();\n });\n}\n\nfunction render(): void {\n document.title = `${APP_NAME} v${VERSION}`;\n renderAuth();\n renderNav();\n renderHome();\n renderHistory();\n renderTemplates();\n}\n\nviewNav.querySelectorAll(\"button\").forEach((button) => {\n button.addEventListener(\"click\", () => {\n currentView = (button.dataset.view as ViewName) || \"home\";\n render();\n });\n});\n\ninitialize().catch((error) => {\n console.error(error);\n showToast(\"Could not load app\");\n});\n","deleted","label",[177,159],"FRONTEND","permalink","https://www.val.town/x/arfan/shift-todos/code/FRONTEND/script.ts","extension","actionData","errors"]