/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; // [Previous existing code remains unchanged] function AdminDashboard() { const [tables, setTables] = useState([]); const [selectedTable, setSelectedTable] = useState(null); const [tableData, setTableData] = useState([]); const [isLoading, setIsLoading] = useState(false); useEffect(() => { fetchTables(); }, []); const fetchTables = async () => { setIsLoading(true); try { const response = await fetch('/admin/tables'); const data = await response.json(); setTables(data); } catch (error) { console.error('Failed to fetch tables', error); } finally { setIsLoading(false); } }; const fetchTableData = async (tableName) => { setIsLoading(true); try { const response = await fetch(`/admin/table/${tableName}`); const data = await response.json(); setTableData(data); setSelectedTable(tableName); } catch (error) { console.error('Failed to fetch table data', error); } finally { setIsLoading(false); } }; return (

SQLite Admin Dashboard

Available Tables

{isLoading ? (

Loading tables...

) : (

fetchTableData(table)} className={selectedTable === table ? 'selected' : ''} > {table}

)}

{selectedTable ? ( <>

Table: {selectedTable}

{tableData.length > 0 ? ( {Object.keys(tableData[0]).map((header) => ( ))} {tableData.map((row, index) => ( {Object.values(row).map((value, colIndex) => ( ))} ))}

{header}
{String(value)}

) : (

No data in this table.

)} ) : (

Select a table to view its contents

)}

View Source

); } function App() { const [currentStep, setCurrentStep] = useState(0); const [isAdminMode, setIsAdminMode] = useState(false); // [Previous App component code remains unchanged] // Add admin mode toggle to landing page const renderLandingPage = () => (

Home assessment tool

Use our simple assessment tool to discover if upgrading your lighting, heating, water heater, insulation, or going solar is right for you.

); const renderContent = () => { if (isAdminMode) { return ; } switch (currentStep) { case 0: return renderLandingPage(); case 1: return renderCategorySelection(); case 2: return renderCategoryAssessment(); case 3: return renderFinalSummaryPage(); default: return renderLandingPage(); } }; return (

{renderContent()}

); } // Server-side handler for admin routes export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Admin routes for SQLite management if (new URL(request.url).pathname.startsWith('/admin/')) { try { if (request.url.includes('/admin/tables')) { // List all tables const tables = await sqlite.execute('SELECT name FROM sqlite_master WHERE type="table"'); return new Response(JSON.stringify(tables.rows.map(r => r.name)), { headers: { 'Content-Type': 'application/json' } }); } if (request.url.includes('/admin/table/')) { const tableName = new URL(request.url).pathname.split('/').pop(); // Fetch table data const tableData = await sqlite.execute(`SELECT * FROM ${tableName} LIMIT 100`); return new Response(JSON.stringify(tableData.rows), { headers: { 'Content-Type': 'application/json' } }); } } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Existing server response for the main application return new Response( ` Home Upgrade Assessment

`, { headers: { "content-type": "text/html" }, }, ); } // Updated CSS to include admin dashboard styles const css = ` ${css} /* Previous CSS remains unchanged */ .admin-dashboard { max-width: 1200px; margin: 0 auto; padding: 20px; } .admin-layout { display: flex; gap: 20px; margin-top: 20px; } .table-list { flex: 0 0 250px; background-color: #fff; border-radius: 8px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .table-list ul { list-style: none; padding: 0; margin: 0; } .table-list li { padding: 10px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s ease; } .table-list li:hover { background-color: var(--color-accent); } .table-list li.selected { background-color: var(--color-primary); color: white; } .table-data { flex: 1; background-color: #fff; border-radius: 8px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .table-data table { width: 100%; border-collapse: collapse; } .table-data th, .table-data td { border: 1px solid #ddd; padding: 8px; text-align: left; } .table-data th { background-color: var(--color-accent); font-weight: 600; } .landing-buttons { display: flex; justify-content: center; gap: 20px; } .admin-button { background-color: var(--color-primary-dark); } .source-link { display: block; text-align: center; margin-top: 20px; color: var(--color-primary); text-decoration: none; } .source-link:hover { text-decoration: underline; } @media (max-width: 768px) { .admin-layout { flex-direction: column; } .table-list { flex: 1 1 auto; } } `;

soulfulPinkPinniped

Version 17