\n \n

\n \n } />\n } />\n } />\n } />\n {isAdmin && (\n <>\n } />\n } />\n } />\n } />\n \n )}\n \n

\n \n );\n}\n\nfunction Home() {\n return (\n

Welcome to Karate Studio

Discover the art of karate and unleash your potential!

\n );\n}\n\nfunction Login() {\n return (\n

Login

\n \n

\n \n via LastLogin\n \n

\n );\n}\n\nfunction ClassList({ email }) {\n const [classes, setClasses] = useState([]);\n\n useEffect(() => {\n fetch(\"/api/classes\")\n .then(res => res.json())\n .then(data => {\n console.log(\"Fetched classes:\", data);\n setClasses(data);\n })\n .catch(error => console.error(\"Error fetching classes:\", error));\n }, []);\n\n return (\n

Available Classes

\n \n {c.name} - {c.dayOfWeek} {c.startTime}-{c.endTime}\n \n
\n Registrations: {c.registrationCount} / {c.maxStudents}\n
\n

\n );\n}\n\nfunction ClassDetails({ email, isAdmin }) {\n const { id } = useParams();\n const [classInfo, setClassInfo] = useState(null);\n const [isRegistered, setIsRegistered] = useState(false);\n const navigate = useNavigate();\n\n useEffect(() => {\n console.log(\"Fetching class details for ID:\", id);\n fetch(`/api/classes/${id}`)\n .then(res => res.json())\n .then(data => {\n console.log(\"Fetched class details:\", data);\n setClassInfo(data);\n })\n .catch(error => console.error(\"Error fetching class details:\", error));\n\n if (email) {\n console.log(\"Checking registration status for email:\", email);\n fetch(`/api/classes/${id}/registration?email=${email}`)\n .then(res => res.json())\n .then(data => {\n console.log(\"Fetched registration status:\", data);\n setIsRegistered(data.registered);\n })\n .catch(error => console.error(\"Error fetching registration status:\", error));\n }\n }, [id, email]);\n\n if (!classInfo) return

;\n\n const handleRegister = () => {\n fetch(`/api/classes/${id}/register`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ email }),\n })\n .then(res => res.json())\n .then(data => {\n console.log(\"Registration response:\", data);\n setIsRegistered(true);\n setClassInfo(prevInfo => ({\n ...prevInfo,\n registrationCount: prevInfo.registrationCount + 1,\n }));\n })\n .catch(error => console.error(\"Error registering:\", error));\n };\n\n const handleCancel = () => {\n fetch(`/api/classes/${id}/cancel`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ email }),\n })\n .then(res => res.json())\n .then(data => {\n console.log(\"Cancellation response:\", data);\n setIsRegistered(false);\n setClassInfo(prevInfo => ({\n ...prevInfo,\n registrationCount: prevInfo.registrationCount - 1,\n }));\n })\n .catch(error => console.error(\"Error cancelling registration:\", error));\n };\n\n const handleDelete = () => {\n if (window.confirm(\"Are you sure you want to delete this class?\")) {\n fetch(`/api/classes/${id}`, { method: \"DELETE\" })\n .then(() => navigate(\"/classes\"))\n .catch(error => console.error(\"Error deleting class:\", error));\n }\n };\n\n return (\n

{classInfo.name}

Day: {classInfo.dayOfWeek}

Time: {classInfo.startTime} - {classInfo.endTime}

Weeks: {classInfo.weeks}

Students: {classInfo.registrationCount} / {classInfo.maxStudents}

\n {email && (\n isRegistered\n ? (\n \n )\n : (\n = classInfo.maxStudents}\n className=\"bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:bg-gray-400\"\n >\n Register\n \n )\n )}\n {isAdmin && (\n

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

\n )}\n

\n );\n}\n\nfunction Admin() {\n return (\n

Admin Panel

\n \n \n \n

\n );\n}\n\nfunction ClassForm() {\n const { id } = useParams();\n const [formData, setFormData] = useState({\n name: \"\",\n dayOfWeek: \"\",\n startTime: \"\",\n endTime: \"\",\n maxStudents: \"\",\n weeks: \"\",\n });\n const [errors, setErrors] = useState({});\n const navigate = useNavigate();\n\n useEffect(() => {\n if (id) {\n fetch(`/api/classes/${id}`)\n .then(res => res.json())\n .then(data => {\n setFormData({\n ...data,\n maxStudents: data.maxStudents.toString(),\n weeks: data.weeks.toString(),\n });\n })\n .catch(error => console.error(\"Error fetching class data:\", error));\n }\n }, [id]);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n try {\n const validatedData = ClassSchema.parse({\n ...formData,\n maxStudents: parseInt(formData.maxStudents),\n weeks: parseInt(formData.weeks),\n });\n\n const method = id ? \"PUT\" : \"POST\";\n const url = id ? `/api/classes/${id}` : \"/api/classes\";\n\n fetch(url, {\n method,\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(validatedData),\n })\n .then(() => navigate(\"/classes\"))\n .catch(error => console.error(\"Error submitting class form:\", error));\n } catch (error) {\n if (error instanceof z.ZodError) {\n setErrors(error.flatten().fieldErrors);\n }\n }\n };\n\n const handleChange = (e) => {\n setFormData({ ...formData, [e.target.name]: e.target.value });\n };\n\n return (\n

\n Class Name\n \n {errors.name &&

{errors.name}

}\n

\n\n

\n Day of Week\n \n \n {[\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"].map(day => (\n \n ))}\n \n {errors.dayOfWeek &&

{errors.dayOfWeek}

}\n

\n\n

\n Start Time\n \n {errors.startTime &&

{errors.startTime}

}\n

\n\n

\n End Time\n \n {errors.endTime &&

{errors.endTime}

}\n

\n\n

\n Max Students\n \n {errors.maxStudents &&

{errors.maxStudents}

}\n

\n\n

\n Number of Weeks\n \n {errors.weeks &&

{errors.weeks}

}\n

\n\n \n

\n );\n}\n\nfunction BulkAddUsers() {\n const { id } = useParams();\n const [emails, setEmails] = useState(\"\");\n const [message, setMessage] = useState(\"\");\n const navigate = useNavigate();\n\n const handleSubmit = (e) => {\n e.preventDefault();\n const emailList = emails.split(/[\\s,]+/).filter(email => email.trim() !== \"\");\n\n fetch(`/api/classes/${id}/bulk-add`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ emails: emailList }),\n })\n .then(res => res.json())\n .then(data => {\n console.log(\"Bulk add response:\", data);\n setMessage(`Successfully added ${data.addedCount} users to the class.`);\n setTimeout(() => navigate(`/classes/${id}`), 2000);\n })\n .catch(error => {\n console.error(\"Error bulk adding users:\", error);\n setMessage(\"An error occurred while adding users.\");\n });\n };\n\n return (\n \n );\n}\n\nfunction client() {\n const root = document.getElementById(\"root\");\n if (root) {\n const email = root.getAttribute(\"data-email\");\n const isAdmin = root.getAttribute(\"data-is-admin\") === \"true\";\n createRoot(root).render();\n }\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nconst app = new Hono();\n\napp.get(\"/api/classes\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"karate_classes\";\n const SCHEMA_VERSION = 2;\n\n const classes = await sqlite.execute(`\n SELECT c.*, COUNT(r.id) as registrationCount\n FROM ${KEY}_classes_${SCHEMA_VERSION} c\n LEFT JOIN ${KEY}_registrations_${SCHEMA_VERSION} r ON c.id = r.classId AND r.cancelledAt IS NULL\n GROUP BY c.id\n `);\n return c.json(classes.rows);\n});\n\napp.get(\"/api/classes/:id\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"karate_classes\";\n const SCHEMA_VERSION = 2;\n const id = c.req.param(\"id\");\n\n const classInfo = await sqlite.execute(\n `\n SELECT c.*, COUNT(r.id) as registrationCount\n FROM ${KEY}_classes_${SCHEMA_VERSION} c\n LEFT JOIN ${KEY}_registrations_${SCHEMA_VERSION} r ON c.id = r.classId AND r.cancelledAt IS NULL\n WHERE c.id = ?\n GROUP BY c.id\n `,\n [id],\n );\n\n if (classInfo.rows.length === 0) {\n return c.notFound();\n }\n return c.json(classInfo.rows[0]);\n});\n\napp.post(\"/api/classes\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"karate_classes\";\n const SCHEMA_VERSION = 2;\n const email = c.req.header(\"X-LastLogin-Email\");\n\n if (!email || !ADMIN_EMAILS.includes(email)) {\n return c.text(\"Unauthorized\", 401);\n }\n\n const body = await c.req.json();\n const { name, dayOfWeek, startTime, endTime, maxStudents, weeks } = ClassSchema.parse(body);\n\n await sqlite.execute(\n `INSERT INTO ${KEY}_classes_${SCHEMA_VERSION} (name, dayOfWeek, startTime, endTime, maxStudents, weeks) VALUES (?, ?, ?, ?, ?, ?)`,\n [name, dayOfWeek, startTime, endTime, maxStudents, weeks],\n );\n return c.text(\"Class created\", 201);\n});\n\napp.put(\"/api/classes/:id\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"karate_classes\";\n const SCHEMA_VERSION = 2;\n const email = c.req.header(\"X-LastLogin-Email\");\n\n if (!email || !ADMIN_EMAILS.includes(email)) {\n return c.text(\"Unauthorized\", 401);\n }\n\n const id = c.req.param(\"id\");\n const body = await c.req.json();\n const { name, dayOfWeek, startTime, endTime, maxStudents, weeks } = ClassSchema.parse(body);\n\n await sqlite.execute(\n `UPDATE ${KEY}_classes_${SCHEMA_VERSION} SET name = ?, dayOfWeek = ?, startTime = ?, endTime = ?, maxStudents = ?, weeks = ? WHERE id = ?`,\n [name, dayOfWeek, startTime, endTime, maxStudents, weeks, id],\n );\n return c.text(\"Class updated\");\n});\n\napp.delete(\"/api/classes/:id\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"karate_classes\";\n const SCHEMA_VERSION = 2;\n const email = c.req.header(\"X-LastLogin-Email\");\n\n if (!email || !ADMIN_EMAILS.includes(email)) {\n return c.text(\"Unauthorized\", 401);\n }\n\n const id = c.req.param(\"id\");\n await sqlite.execute(`DELETE FROM ${KEY}_classes_${SCHEMA_VERSION} WHERE id = ?`, [id]);\n return c.text(\"Class deleted\");\n});\n\napp.post(\"/api/classes/:id/register\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"karate_classes\";\n const SCHEMA_VERSION = 2;\n const email = c.req.header(\"X-LastLogin-Email\");\n\n if (!email) {\n return c.text(\"Unauthorized\", 401);\n }\n\n const classId = c.req.param(\"id\");\n const studentResult = await sqlite.execute(`SELECT id FROM ${KEY}_students_${SCHEMA_VERSION} WHERE email = ?`, [\n email,\n ]);\n let studentId;\n if (studentResult.rows.length === 0) {\n const insertResult = await sqlite.execute(`INSERT INTO ${KEY}_students_${SCHEMA_VERSION} (email) VALUES (?)`, [\n email,\n ]);\n studentId = insertResult.lastInsertRowid;\n } else {\n studentId = studentResult.rows[0].id;\n }\n\n const existingRegistration = await sqlite.execute(\n `SELECT id FROM ${KEY}_registrations_${SCHEMA_VERSION} WHERE studentId = ? AND classId = ? AND cancelledAt IS NULL`,\n [studentId, classId],\n );\n\n if (existingRegistration.rows.length === 0) {\n await sqlite.execute(\n `INSERT INTO ${KEY}_registrations_${SCHEMA_VERSION} (studentId, classId) VALUES (?, ?)`,\n [studentId, classId],\n );\n return c.json({ message: \"Registered for class\" });\n } else {\n return c.json({ message: \"Already registered for this class\" }, 400);\n }\n});\n\napp.post(\"/api/classes/:id/cancel\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"karate_classes\";\n const SCHEMA_VERSION = 2;\n const email = c.req.header(\"X-LastLogin-Email\");\n\n if (!email) {\n return c.text(\"Unauthorized\", 401);\n }\n\n const classId = c.req.param(\"id\");\n const studentResult = await sqlite.execute(`SELECT id FROM ${KEY}_students_${SCHEMA_VERSION} WHERE email = ?`, [\n email,\n ]);\n if (studentResult.rows.length === 0) {\n return c.json({ message: \"Student not found\" }, 404);\n }\n const studentId = studentResult.rows[0].id;\n await sqlite.execute(\n `UPDATE ${KEY}_registrations_${SCHEMA_VERSION} SET cancelledAt = CURRENT_TIMESTAMP WHERE studentId = ? AND classId = ? AND cancelledAt IS NULL`,\n [studentId, classId],\n );\n return c.json({ message: \"Cancelled registration\" });\n});\n\napp.get(\"/api/classes/:id/registration\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"karate_classes\";\n const SCHEMA_VERSION = 2;\n const email = c.req.query(\"email\");\n\n if (!email) {\n return c.json({ message: \"Email is required\" }, 400);\n }\n\n const classId = c.req.param(\"id\");\n const registration = await sqlite.execute(\n `\n SELECT r.id\n FROM ${KEY}_registrations_${SCHEMA_VERSION} r\n JOIN ${KEY}_students_${SCHEMA_VERSION} s ON r.studentId = s.id\n WHERE s.email = ? AND r.classId = ? AND r.cancelledAt IS NULL\n `,\n [email, classId],\n );\n return c.json({ registered: registration.rows.length > 0 });\n});\n\napp.post(\"/api/classes/:id/bulk-add\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"karate_classes\";\n const SCHEMA_VERSION = 2;\n const email = c.req.header(\"X-LastLogin-Email\");\n\n if (!email || !ADMIN_EMAILS.includes(email)) {\n return c.text(\"Unauthorized\", 401);\n }\n\n const classId = c.req.param(\"id\");\n const { emails } = await c.req.json();\n let addedCount = 0;\n\n for (const email of emails) {\n let studentId;\n const studentResult = await sqlite.execute(`SELECT id FROM ${KEY}_students_${SCHEMA_VERSION} WHERE email = ?`, [\n email,\n ]);\n if (studentResult.rows.length === 0) {\n const insertResult = await sqlite.execute(`INSERT INTO ${KEY}_students_${SCHEMA_VERSION} (email) VALUES (?)`, [\n email,\n ]);\n studentId = insertResult.lastInsertRowid;\n } else {\n studentId = studentResult.rows[0].id;\n }\n\n const existingRegistration = await sqlite.execute(\n `SELECT id FROM ${KEY}_registrations_${SCHEMA_VERSION} WHERE studentId = ? AND classId = ? AND cancelledAt IS NULL`,\n [studentId, classId],\n );\n\n if (existingRegistration.rows.length === 0) {\n await sqlite.execute(\n `INSERT INTO ${KEY}_registrations_${SCHEMA_VERSION} (studentId, classId) VALUES (?, ?)`,\n [studentId, classId],\n );\n addedCount++;\n }\n }\n\n return c.json({ message: \"Bulk add completed\", addedCount });\n});\n\nasync function handler(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"karate_classes\";\n const SCHEMA_VERSION = 2;\n\n // Set up database tables\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_students_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT UNIQUE NOT NULL\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_classes_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n dayOfWeek TEXT NOT NULL,\n startTime TEXT NOT NULL,\n endTime TEXT NOT NULL,\n maxStudents INTEGER NOT NULL,\n weeks INTEGER NOT NULL\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_registrations_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n studentId INTEGER NOT NULL,\n classId INTEGER NOT NULL,\n registeredAt DATETIME DEFAULT CURRENT_TIMESTAMP,\n cancelledAt DATETIME,\n FOREIGN KEY (studentId) REFERENCES ${KEY}_students_${SCHEMA_VERSION}(id),\n FOREIGN KEY (classId) REFERENCES ${KEY}_classes_${SCHEMA_VERSION}(id)\n )\n `);\n\n const url = new URL(request.url);\n const email = request.headers.get(\"X-LastLogin-Email\");\n const isAdmin = email && ADMIN_EMAILS.includes(email);\n\n if (url.pathname.startsWith(\"/api\")) {\n return app.fetch(request);\n }\n\n // Serve HTML for all other routes\n return new Response(\n `\n \n \n \n \n \n Karate Studio\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nexport default lastlogin(handler);","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/karate_classes/code/main.tsx","extension","actionData","errors"]

Welcome to Karate Studio

Login

Available Classes

{classInfo.name}

Admin Panel

Bulk Add Users to Class