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 )}\n

\n View Source\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 const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const url = new URL(request.url);\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(\"/table/\")) {\n const tableName = url.pathname.split(\"/\").pop();\n const result = await sqlite.execute(`SELECT rowid, * FROM ${tableName}`);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname.startsWith(\"/schema/\")) {\n const tableName = url.pathname.split(\"/\").pop();\n const result = await sqlite.execute(`PRAGMA table_info(${tableName})`);\n return new Response(JSON.stringify(result.rows.map(row => ({ name: row.name, type: row.type }))), {\n headers: { \"Content-Type\": \"application/json\" },\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 = 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 let query;\n let queryParams;\n\n if (\"rowid\" in data) {\n query = `UPDATE ${tableName} SET ${setClause} WHERE rowid = ?`;\n queryParams = [...values, data.rowid];\n } else {\n const whereClause = columns.map(col => `${col} = ?`).join(\" AND \");\n query = `UPDATE ${tableName} SET ${setClause} WHERE ${whereClause}`;\n queryParams = [...values, ...values];\n }\n\n await sqlite.execute(query, queryParams);\n return new Response(\"Updated successfully\", { status: 200 });\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 = 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 placeholders = columns.map(() => \"?\").join(\", \");\n\n const query = `INSERT INTO ${tableName} (${columns.join(\", \")}) VALUES (${placeholders})`;\n\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}\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`;\n\nexport default vtTokenSessionAuth(server);","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/sqliteAdminDashboard/code/main.tsx","extension","actionData","errors"]