Tables

fetchTableData(table)}\n className={selectedTable === table ? \"active\" : \"\"}\n >\n {table}\n \n ))}\n

SQLite Dashboard

\n {error &&

{error}

}\n {selectedTable && (\n

{selectedTable}

\n \n \n \n {tableSchema.map((col) => (\n \n ))}\n \n \n \n \n {tableData.map((row, index) => (\n \n {tableSchema.map((col) => (\n \n ))}\n \n \n ))}\n \n {tableSchema.map((col) => (\n \n ))}\n \n \n \n

\n {col.name} ({col.type})\n	Actions
\n {editingRow === index\n ? (\n handleInputChange(index, col.name, e.target.value)}\n />\n )\n : (\n row[col.name]\n )}\n	\n {editingRow === index\n ? \n : }\n
\n handleNewRowInputChange(col.name, e.target.value)}\n placeholder={`New ${col.name}`}\n />\n	\n \n

\n handlePageChange(page - 1)}\n disabled={page <= 1}\n >\n Previous\n \n \n Page {page} of {totalPages}\n \n handlePageChange(page + 1)}\n disabled={page >= totalPages}\n >\n Next\n \n

\n )}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const url = new URL(request.url);\n const params = Object.fromEntries(url.searchParams.entries());\n\n if (url.pathname === \"/tables\") {\n const result = await sqlite.execute(\"SELECT name FROM sqlite_master WHERE type='table'\");\n return new Response(JSON.stringify(result.rows.map((row) => row.name)), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname.startsWith(\"/tableData/\")) {\n const tableName = decodeURIComponent(url.pathname.split(\"/\").pop());\n const page = parseInt(params.page) || 1;\n const pageSize = parseInt(params.pageSize) || 10;\n const offset = (page - 1) * pageSize;\n\n // Get total row count\n const countResult = await sqlite.execute(`SELECT COUNT(*) as count FROM \"${tableName}\"`);\n const totalRows = countResult.rows[0].count;\n\n // Get table data with pagination\n const dataResult = await sqlite.execute(\n `SELECT rowid, * FROM \"${tableName}\" LIMIT ? OFFSET ?`,\n [pageSize, offset],\n );\n\n // Get table schema\n const schemaResult = await sqlite.execute(`PRAGMA table_info(\"${tableName}\")`);\n const schema = schemaResult.rows.map((row) => ({\n name: row.name,\n type: row.type,\n }));\n\n return new Response(\n JSON.stringify({\n data: dataResult.rows,\n schema,\n totalRows,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n if (url.pathname.startsWith(\"/update/\")) {\n if (request.method !== \"POST\") {\n return new Response(\"Method Not Allowed\", { status: 405 });\n }\n const tableName = decodeURIComponent(url.pathname.split(\"/\").pop());\n const data = await request.json();\n const columns = Object.keys(data).filter((col) => col !== \"rowid\");\n const values = columns.map((col) => data[col]);\n const setClause = columns.map((col) => `\"${col}\" = ?`).join(\", \");\n\n if (\"rowid\" in data) {\n const query = `UPDATE \"${tableName}\" SET ${setClause} WHERE rowid = ?`;\n const queryParams = [...values, data.rowid];\n await sqlite.execute(query, queryParams);\n return new Response(\"Updated successfully\", { status: 200 });\n } else {\n return new Response(\"rowid is required to update a row\", { status: 400 });\n }\n }\n\n if (url.pathname.startsWith(\"/insert/\")) {\n if (request.method !== \"POST\") {\n return new Response(\"Method Not Allowed\", { status: 405 });\n }\n const tableName = decodeURIComponent(url.pathname.split(\"/\").pop());\n const data = await request.json();\n const columns = Object.keys(data);\n const values = columns.map((col) => data[col]);\n const placeholders = columns.map(() => \"?\").join(\", \");\n\n const query = `INSERT INTO \"${tableName}\" (${\n columns.map((col) => `\"${col}\"`).join(\", \")\n }) VALUES (${placeholders})`;\n await sqlite.execute(query, values);\n return new Response(\"Inserted successfully\", { status: 200 });\n }\n\n return new Response(\n `\n \n \n SQLite Dashboard\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n } catch (error) {\n return new Response(`Server error: ${error.message}`, { status: 500 });\n }\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f0f0f0;\n}\n.container {\n display: flex;\n height: 100vh;\n}\n.sidebar {\n width: 200px;\n background-color: #333;\n color: white;\n padding: 20px;\n overflow-y: auto;\n}\n.sidebar h2 {\n margin-top: 0;\n}\n.sidebar ul {\n list-style-type: none;\n padding: 0;\n}\n.sidebar li {\n cursor: pointer;\n padding: 10px;\n margin-bottom: 5px;\n border-radius: 3px;\n}\n.sidebar li:hover {\n background-color: #444;\n}\n.sidebar li.active {\n background-color: #555;\n}\n.main-content {\n flex-grow: 1;\n padding: 20px;\n overflow-y: auto;\n}\nh1, h2 {\n color: #333;\n}\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-top: 20px;\n}\nth, td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n}\nth {\n background-color: #f2f2f2;\n}\n.column-type {\n font-size: 0.8em;\n color: #666;\n}\n.error {\n color: red;\n margin-bottom: 10px;\n}\n.source-link {\n margin-top: 20px;\n text-align: right;\n}\n.source-link a {\n color: #666;\n text-decoration: none;\n}\n.source-link a:hover {\n text-decoration: underline;\n}\nbutton {\n background-color: #4CAF50;\n border: none;\n color: white;\n padding: 5px 10px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 12px;\n margin: 2px 2px;\n cursor: pointer;\n}\ninput {\n width: 100%;\n padding: 5px;\n box-sizing: border-box;\n}\n.pagination {\n margin-top: 10px;\n display: flex;\n align-items: center;\n}\n.pagination button {\n margin-right: 10px;\n}\n.pagination span {\n margin-right: 10px;\n}\n`;\n\nexport default vtTokenSessionAuth(server);","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/scientificCyanHarrier/code/main.tsx","extension","actionData","errors"]