/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { Hono } from "https://esm.sh/hono"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { BrowserRouter, Link, Route, Routes, useNavigate, useParams, } from "https://esm.sh/react-router-dom@6.11.2?deps=react@18.2.0"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; import { z } from "https://esm.sh/zod@3.21.4"; import { lastlogin } from "https://esm.town/v/stevekrouse/lastlogin_safe"; import { LoginWithGoogleButton } from "https://esm.town/v/stevekrouse/LoginWithGoogleButton"; const ADMIN_EMAILS = ["steveykrouse@gmail.com"]; const ClassSchema = z.object({ name: z.string().min(1, "Name is required"), dayOfWeek: z.enum(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]), startTime: z.string().regex(/^\d{2}:\d{2}$/, "Invalid time format"), endTime: z.string().regex(/^\d{2}:\d{2}$/, "Invalid time format"), maxStudents: z.number().int().positive(), weeks: z.number().int().positive(), }); function App({ email, isAdmin }) { return (

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

); } function Home() { return (

Welcome to Karate Studio

Discover the art of karate and unleash your potential!

); } function Login() { return (

Login

via LastLogin

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

Available Classes

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

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

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

{classInfo.name}

Day: {classInfo.dayOfWeek}

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

Weeks: {classInfo.weeks}

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

{email && ( isRegistered ? ( ) : ( ) )} {isAdmin && (

)}

); } function Admin() { return (

Admin Panel

); } function ClassForm() { const { id } = useParams(); const [formData, setFormData] = useState({ name: "", dayOfWeek: "", startTime: "", endTime: "", maxStudents: "", weeks: "", }); const [errors, setErrors] = useState({}); const navigate = useNavigate(); useEffect(() => { if (id) { fetch(`/api/classes/${id}`) .then(res => res.json()) .then(data => { setFormData({ ...data, maxStudents: data.maxStudents.toString(), weeks: data.weeks.toString(), }); }) .catch(error => console.error("Error fetching class data:", error)); } }, [id]); const handleSubmit = (e) => { e.preventDefault(); try { const validatedData = ClassSchema.parse({ ...formData, maxStudents: parseInt(formData.maxStudents), weeks: parseInt(formData.weeks), }); const method = id ? "PUT" : "POST"; const url = id ? `/api/classes/${id}` : "/api/classes"; fetch(url, { method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(validatedData), }) .then(() => navigate("/classes")) .catch(error => console.error("Error submitting class form:", error)); } catch (error) { if (error instanceof z.ZodError) { setErrors(error.flatten().fieldErrors); } } }; const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; return ( ); } function BulkAddUsers() { const { id } = useParams(); const [emails, setEmails] = useState(""); const [message, setMessage] = useState(""); const navigate = useNavigate(); const handleSubmit = (e) => { e.preventDefault(); const emailList = emails.split(/[\s,]+/).filter(email => email.trim() !== ""); fetch(`/api/classes/${id}/bulk-add`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ emails: emailList }), }) .then(res => res.json()) .then(data => { console.log("Bulk add response:", data); setMessage(`Successfully added ${data.addedCount} users to the class.`); setTimeout(() => navigate(`/classes/${id}`), 2000); }) .catch(error => { console.error("Error bulk adding users:", error); setMessage("An error occurred while adding users."); }); }; return (

Bulk Add Users to Class

User Emails

setEmails(e.target.value)}
          className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          rows="5"
          placeholder="Enter email addresses, separated by commas or newlines"
          required
        />
      </div>
      <button type="submit" className="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
        Add Users
      </button>
      {message && <p className="mt-4 text-center text-green-600">{message}</p>}
    </form>
  );
}

if (typeof document !== "undefined") {
  client();
}

const app = new Hono();

app.get("/api/classes", async (c) => {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;

app.get("/api/classes/:id", async (c) => {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;
  const id = c.req.param("id");

const classInfo = await sqlite.execute(
    `
    SELECT c.*, COUNT(r.id) as registrationCount
    FROM ${KEY}_classes_${SCHEMA_VERSION} c
    LEFT JOIN ${KEY}_registrations_${SCHEMA_VERSION} r ON c.id = r.classId AND r.cancelledAt IS NULL
    WHERE c.id = ?
    GROUP BY c.id
  `,
    [id],
  );

if (classInfo.rows.length === 0) {
    return c.notFound();
  }
  return c.json(classInfo.rows[0]);
});

app.post("/api/classes", async (c) => {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;
  const email = c.req.header("X-LastLogin-Email");

if (!email || !ADMIN_EMAILS.includes(email)) {
    return c.text("Unauthorized", 401);
  }

const body = await c.req.json();
  const { name, dayOfWeek, startTime, endTime, maxStudents, weeks } = ClassSchema.parse(body);

await sqlite.execute(
    `INSERT INTO ${KEY}_classes_${SCHEMA_VERSION} (name, dayOfWeek, startTime, endTime, maxStudents, weeks) VALUES (?, ?, ?, ?, ?, ?)`,
    [name, dayOfWeek, startTime, endTime, maxStudents, weeks],
  );
  return c.text("Class created", 201);
});

app.put("/api/classes/:id", async (c) => {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;
  const email = c.req.header("X-LastLogin-Email");

if (!email || !ADMIN_EMAILS.includes(email)) {
    return c.text("Unauthorized", 401);
  }

const id = c.req.param("id");
  const body = await c.req.json();
  const { name, dayOfWeek, startTime, endTime, maxStudents, weeks } = ClassSchema.parse(body);

await sqlite.execute(
    `UPDATE ${KEY}_classes_${SCHEMA_VERSION} SET name = ?, dayOfWeek = ?, startTime = ?, endTime = ?, maxStudents = ?, weeks = ? WHERE id = ?`,
    [name, dayOfWeek, startTime, endTime, maxStudents, weeks, id],
  );
  return c.text("Class updated");
});

app.delete("/api/classes/:id", async (c) => {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;
  const email = c.req.header("X-LastLogin-Email");

if (!email || !ADMIN_EMAILS.includes(email)) {
    return c.text("Unauthorized", 401);
  }

const id = c.req.param("id");
  await sqlite.execute(`DELETE FROM ${KEY}_classes_${SCHEMA_VERSION} WHERE id = ?`, [id]);
  return c.text("Class deleted");
});

app.post("/api/classes/:id/register", async (c) => {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;
  const email = c.req.header("X-LastLogin-Email");

if (!email) {
    return c.text("Unauthorized", 401);
  }

const existingRegistration = await sqlite.execute(
    `SELECT id FROM ${KEY}_registrations_${SCHEMA_VERSION} WHERE studentId = ? AND classId = ? AND cancelledAt IS NULL`,
    [studentId, classId],
  );

if (existingRegistration.rows.length === 0) {
    await sqlite.execute(
      `INSERT INTO ${KEY}_registrations_${SCHEMA_VERSION} (studentId, classId) VALUES (?, ?)`,
      [studentId, classId],
    );
    return c.json({ message: "Registered for class" });
  } else {
    return c.json({ message: "Already registered for this class" }, 400);
  }
});

app.post("/api/classes/:id/cancel", async (c) => {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;
  const email = c.req.header("X-LastLogin-Email");

if (!email) {
    return c.text("Unauthorized", 401);
  }

app.get("/api/classes/:id/registration", async (c) => {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;
  const email = c.req.query("email");

if (!email) {
    return c.json({ message: "Email is required" }, 400);
  }

app.post("/api/classes/:id/bulk-add", async (c) => {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;
  const email = c.req.header("X-LastLogin-Email");

if (!email || !ADMIN_EMAILS.includes(email)) {
    return c.text("Unauthorized", 401);
  }

const classId = c.req.param("id");
  const { emails } = await c.req.json();
  let addedCount = 0;

for (const email of emails) {
    let studentId;
    const studentResult = await sqlite.execute(`SELECT id FROM ${KEY}_students_${SCHEMA_VERSION} WHERE email = ?`, [
      email,
    ]);
    if (studentResult.rows.length === 0) {
      const insertResult = await sqlite.execute(`INSERT INTO ${KEY}_students_${SCHEMA_VERSION} (email) VALUES (?)`, [
        email,
      ]);
      studentId = insertResult.lastInsertRowid;
    } else {
      studentId = studentResult.rows[0].id;
    }

const existingRegistration = await sqlite.execute(
      `SELECT id FROM ${KEY}_registrations_${SCHEMA_VERSION} WHERE studentId = ? AND classId = ? AND cancelledAt IS NULL`,
      [studentId, classId],
    );

return c.json({ message: "Bulk add completed", addedCount });
});

async function handler(request: Request): Promise<Response> {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 2;

// Set up database tables
  await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_students_${SCHEMA_VERSION} (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      email TEXT UNIQUE NOT NULL
    )
  `);

await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_classes_${SCHEMA_VERSION} (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      name TEXT NOT NULL,
      dayOfWeek TEXT NOT NULL,
      startTime TEXT NOT NULL,
      endTime TEXT NOT NULL,
      maxStudents INTEGER NOT NULL,
      weeks INTEGER NOT NULL
    )
  `);

await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_registrations_${SCHEMA_VERSION} (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      studentId INTEGER NOT NULL,
      classId INTEGER NOT NULL,
      registeredAt DATETIME DEFAULT CURRENT_TIMESTAMP,
      cancelledAt DATETIME,
      FOREIGN KEY (studentId) REFERENCES ${KEY}_students_${SCHEMA_VERSION}(id),
      FOREIGN KEY (classId) REFERENCES ${KEY}_classes_${SCHEMA_VERSION}(id)
    )
  `);

const url = new URL(request.url);
  const email = request.headers.get("X-LastLogin-Email");
  const isAdmin = email && ADMIN_EMAILS.includes(email);

if (url.pathname.startsWith("/api")) {
    return app.fetch(request);
  }

// Serve HTML for all other routes
  return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Karate Studio</title>
      <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body>
      <div id="root" data-email="${email || ""}" data-is-admin="${isAdmin}"></div>
      <script src="https://esm.town/v/std/catch"></script>
      <script type="module" src="${import.meta.url}"></script>
    </body>
    </html>
  `,
    {
      headers: { "Content-Type": "text/html" },
    },
  );
}

export default lastlogin(handler);</article></body></html>

karate_classes