🗃️ ValBase - Lightweight Database Management

\n \n {/* Project Creation Section */}\n

Create New Project

\n \n

\n\n {/* Project List */}\n

Projects

\n {projects.map(project => (\n

selectProject(project.id)}\n style={{ \n cursor: 'pointer', \n padding: '10px', \n backgroundColor: selectedProject === project.id ? '#e0e0e0' : '#f5f5f5',\n margin: '5px 0'\n }}\n >\n {project.name}\n

\n ))}\n

\n\n {/* Table Creation Section */}\n {selectedProject && (\n

Create Table in Project

\n setNewTableName(e.target.value)}\n placeholder=\"Table Name\"\n required\n />\n

setNewTableSchema(e.target.value)}\n              placeholder=\"Table Schema (SQL CREATE TABLE syntax)\"\n              rows={4}\n              required\n            />\n            <button type=\"submit\">Create Table</button>\n          </form>\n\n          {/* Table List */}\n          <div>\n            <h2>Tables in Project</h2>\n            {tables.map(table => (\n              <div \n                key={table.name}\n                style={{ \n                  padding: '10px', \n                  backgroundColor: '#f0f0f0',\n                  margin: '5px 0'\n                }}\n              >\n                {table.name}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"ValBase\";\n\n  // Ensure projects table exists\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_projects (\n      id TEXT PRIMARY KEY,\n      name TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Projects management routes\n  const url = new URL(request.url);\n  \n  // List Projects\n  if (url.pathname === '/list-projects') {\n    const projects = await sqlite.execute(`SELECT * FROM ${KEY}_projects`);\n    return new Response(JSON.stringify(projects.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Create Project\n  if (url.pathname === '/create-project' && request.method === 'POST') {\n    const { name } = await request.json();\n    const projectId = generateProjectId();\n    \n    await sqlite.execute(\n      `INSERT INTO ${KEY}_projects (id, name) VALUES (?, ?)`, \n      [projectId, name]\n    );\n\n    return new Response(JSON.stringify({ id: projectId, name }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // List Tables for a Project\n  if (url.pathname === '/list-tables') {\n    const projectId = url.searchParams.get('projectId');\n    \n    // Dynamic table listing for a specific project\n    const tables = await sqlite.execute(`\n      SELECT name FROM sqlite_master \n      WHERE type='table' AND name LIKE '${KEY}_project_${projectId}_%'\n    `);\n\n    return new Response(JSON.stringify(tables.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Create Table in Project\n  if (url.pathname === '/create-table' && request.method === 'POST') {\n    const { projectId, tableName, schema } = await request.json();\n    const fullTableName = `${KEY}_project_${projectId}_${tableName}`;\n\n    try {\n      // Sanitize and validate schema\n      const sanitizedSchema = schema.replace(/[;'\"]/g, '');\n      \n      await sqlite.execute(`\n        CREATE TABLE IF NOT EXISTS ${fullTableName} (\n          ${sanitizedSchema}\n        )\n      `);\n\n      return new Response(JSON.stringify({ name: fullTableName }), {\n        headers: { 'Content-Type': 'application/json' }\n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: error.message }), {\n        status: 400,\n        headers: { 'Content-Type': 'application/json' }\n      });\n    }\n  }\n\n  // Default HTML response\n  return new Response(`\n    <html>\n      <head>\n        <title>ValBase - Database Management</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <script src=\"https://esm.town/v/std/catch\"></script>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}","deleted","label",[98],"permalink","https://www.val.town/x/kvrt/ValBase/code/main.tsx","extension","actionData","errors"]
</article></body></html>