🔍 Val Town SQLite Explorer

\n \n setQuery(e.target.value)}\n placeholder={`SQL query for ${table} (e.g., SELECT * FROM ${table} LIMIT 10)`}\n style={{ width: '100%', padding: '10px', marginBottom: '10px' }}\n />\n \n \n {error && (\n

\n Error: {error}\n

\n )}\n {results && (\n

Query Results

\n \n \n \n {results.columns.map((col, idx) => (\n \n ))}\n \n \n \n {results.rows.map((row, rowIdx) => (\n \n {Object.values(row).map((cell, cellIdx) => (\n \n ))}\n \n ))}\n \n

\n {col}\n
\n {typeof cell === 'object' \n ? JSON.stringify(cell) \n : String(cell)}\n

\n )}\n

\n );\n}\n\nwindow.initClient = function() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n const root = createRoot(rootElement);\n root.render();\n }\n};\n\nif (typeof document !== \"undefined\") {\n window.initClient();\n}\n\nexport default async function server(request: Request): Promise {\n // Handle GET requests by serving the HTML\n if (request.method === 'GET') {\n return new Response(`\n \n \n \n \n \n Val Town SQLite Explorer\n \n \n \n

\n \n \n \n \n \n `, {\n headers: {\n 'Content-Type': 'text/html',\n 'Access-Control-Allow-Origin': '*'\n }\n });\n }\n\n // CORS handling\n if (request.method === 'OPTIONS') {\n return new Response(null, {\n headers: {\n 'Access-Control-Allow-Origin': '*',\n 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',\n 'Access-Control-Allow-Headers': 'Content-Type, Accept',\n 'Access-Control-Max-Age': '86400'\n }\n });\n }\n\n // Ensure POST request\n if (request.method !== 'POST') {\n return new Response('Method Not Allowed', { \n status: 405,\n headers: {\n 'Access-Control-Allow-Origin': '*',\n 'Content-Type': 'text/plain'\n }\n });\n }\n\n try {\n // Dynamic import for SQLite\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n\n // Parse request body\n const { query, table } = await request.json();\n\n if (!query || !table) {\n throw new Error('Query and table are required');\n }\n\n // Validate table name to prevent SQL injection\n const allowedTables = [\n 'val_town_agent_specifications', \n 'val_town_agent_tasks'\n ];\n\n if (!allowedTables.includes(table)) {\n throw new Error('Invalid table name');\n }\n\n // Execute the query\n const result = await sqlite.execute(query);\n\n return new Response(JSON.stringify(result), {\n headers: {\n 'Content-Type': 'application/json',\n 'Access-Control-Allow-Origin': '*'\n }\n });\n } catch (error) {\n console.error(\"SQLite Query Error:\", error);\n\n return new Response(\n JSON.stringify({\n error: \"SQLite Query Failed\",\n details: error.toString(),\n stack: error.stack\n }),\n {\n status: 500,\n headers: {\n 'Content-Type': 'application/json',\n 'Access-Control-Allow-Origin': '*'\n }\n }\n );\n }\n}\n\nconst css = `\nbody {\n font-family: system-ui, sans-serif;\n line-height: 1.6;\n background-color: #f4f4f4;\n margin: 0;\n padding: 0;\n}\n#root {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\ninput, select {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\nbutton {\n background-color: #4CAF50;\n color: white;\n padding: 10px 15px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\nbutton:hover {\n background-color: #45a049;\n}\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\ntable {\n width: 100%;\n border-collapse: collapse;\n}\nth, td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n}\nth {\n background-color: #f2f2f2;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/granin/sqliteExplorerApp/code/main.tsx","extension","actionData","errors"]