Todo App

\n setText(e.target.value)}\n />\n \n \n );\n}\n\nfunction TodoItem(\n { todo, onEdit, onDelete, visibleFields }: {\n todo: Todo;\n onEdit: (todo: Todo) => void;\n onDelete: (id: number) => void;\n visibleFields: VisibleFields;\n },\n) {\n return (\n

\n {todo.text}\n onEdit(todo)}\n >\n Edit\n \n onDelete(todo.id)}\n >\n Delete\n \n

\n {visibleFields.category &&

Category: {todo.category}

}\n {visibleFields.dateAdded &&

Added: {todo.dateAdded}

}\n {visibleFields.dateDue &&

Due: {todo.dateDue}

}\n {visibleFields.link &&

Link: {todo.link}

}\n {visibleFields.phoneNumber &&

Phone: {todo.phoneNumber}

}\n {visibleFields.notes &&

Notes: {todo.notes}

}\n

\n );\n}\n\nfunction EditOverlay({ todo, onSave, onCancel }: { todo: Todo; onSave: (todo: Todo) => void; onCancel: () => void }) {\n const [editedTodo, setEditedTodo] = useState(todo);\n\n const handleChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setEditedTodo({ ...editedTodo, [name]: value });\n };\n\n return (\n

Edit Todo

\n {Object.entries(editedTodo).map(([key, value]) =>\n key !== \"id\" && (\n \n {key.charAt(0).toUpperCase() + key.slice(1)}:\n {key === \"notes\"\n ? (\n \n )\n : (\n \n )}\n \n )\n )}\n

\n \n \n

\n );\n}\n\nfunction SettingsOverlay(\n { visibleFields, onToggle, onClose }: {\n visibleFields: VisibleFields;\n onToggle: (field: keyof VisibleFields) => void;\n onClose: () => void;\n },\n) {\n return (\n

Settings

Select which fields should be visible in the todo list:

\n {Object.entries(visibleFields).map(([field, isVisible]) => (\n \n onToggle(field as keyof VisibleFields)}\n />\n {field.charAt(0).toUpperCase() + field.slice(1)}\n \n ))}\n

\n \n

\n );\n}\n\nfunction TodoApp(): JSX.Element {\n const [todos, setTodos] = useState([]);\n const [isDarkMode, setIsDarkMode] = useState(false);\n const [editingTodo, setEditingTodo] = useState(null);\n const [isSettingsOpen, setIsSettingsOpen] = useState(false);\n const [visibleFields, setVisibleFields] = useState({\n category: true,\n dateAdded: true,\n dateDue: true,\n link: true,\n phoneNumber: true,\n notes: true,\n });\n\n useEffect(() => {\n fetchTodos();\n loadPreferences();\n }, []);\n\n useEffect(() => {\n savePreferences();\n }, [isDarkMode, visibleFields]);\n\n const fetchTodos = async () => {\n try {\n const data = await api.get(\"/todos\");\n setTodos(data);\n } catch (error) {\n console.error(\"Error fetching todos:\", error);\n }\n };\n\n const loadPreferences = () => {\n const storedDarkMode = storage.get(\"isDarkMode\");\n if (storedDarkMode !== null) setIsDarkMode(storedDarkMode);\n\n const storedVisibleFields = storage.get(\"visibleFields\");\n if (storedVisibleFields !== null) setVisibleFields(storedVisibleFields);\n };\n\n const savePreferences = () => {\n storage.set(\"isDarkMode\", isDarkMode);\n storage.set(\"visibleFields\", visibleFields);\n };\n\n const addTodo = async (text: string) => {\n const newTodo = {\n text,\n category: \"\",\n dateAdded: new Date().toISOString().split(\"T\")[0],\n dateDue: \"\",\n link: \"\",\n phoneNumber: \"\",\n notes: \"\",\n };\n\n try {\n await api.post(\"/todos\", newTodo);\n fetchTodos();\n } catch (error) {\n console.error(\"Error adding todo:\", error);\n }\n };\n\n const deleteTodo = async (id: number) => {\n try {\n await api.delete(`/todos/${id}`);\n fetchTodos();\n } catch (error) {\n console.error(\"Error deleting todo:\", error);\n }\n };\n\n const saveTodoEdits = async (editedTodo: Todo) => {\n try {\n await api.put(`/todos/${editedTodo.id}`, editedTodo);\n setEditingTodo(null);\n fetchTodos();\n } catch (error) {\n console.error(\"Error updating todo:\", error);\n }\n };\n\n const toggleVisibleField = (field: keyof VisibleFields) => {\n setVisibleFields(prev => ({ ...prev, [field]: !prev[field] }));\n };\n\n return (\n

\n \n\n

\n ))}\n

\n\n {editingTodo && (\n setEditingTodo(null)}\n />\n )}\n\n {isSettingsOpen && (\n setIsSettingsOpen(false)}\n />\n )}\n\n \n

\n );\n}\n\nfunction mountClient() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n }\n}\n\nif (typeof document !== \"undefined\") {\n mountClient();\n}\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const dbName = config.dbName();\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${dbName} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n category TEXT DEFAULT '',\n dateAdded TEXT DEFAULT '',\n dateDue TEXT DEFAULT '',\n link TEXT DEFAULT '',\n phoneNumber TEXT DEFAULT '',\n notes TEXT DEFAULT '',\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const url = new URL(request.url);\n\n if (request.method === \"GET\" && url.pathname === \"/todos\") {\n const result = await sqlite.execute(`\n SELECT id, text, category, dateAdded, dateDue, link, phoneNumber, notes\n FROM ${dbName}\n ORDER BY created_at DESC\n `);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"POST\" && url.pathname === \"/todos\") {\n const { text, category, dateAdded, dateDue, link, phoneNumber, notes } = await request.json();\n await sqlite.execute(\n `INSERT INTO ${dbName} \n (text, category, dateAdded, dateDue, link, phoneNumber, notes)\n VALUES (?, ?, ?, ?, ?, ?, ?)`,\n [text, category, dateAdded, dateDue, link, phoneNumber, notes],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"PUT\" && /^\\/todos\\/\\d+$/.test(url.pathname)) {\n const id = url.pathname.split(\"/\").pop();\n const { text, category, dateAdded, dateDue, link, phoneNumber, notes } = await request.json();\n await sqlite.execute(\n `UPDATE ${dbName}\n SET text = ?, category = ?, dateAdded = ?, dateDue = ?, link = ?, phoneNumber = ?, notes = ?\n WHERE id = ?`,\n [text, category, dateAdded, dateDue, link, phoneNumber, notes, id],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"DELETE\" && /^\\/todos\\/\\d+$/.test(url.pathname)) {\n const id = url.pathname.split(\"/\").pop();\n await sqlite.execute(\n `DELETE FROM ${dbName} WHERE id = ?`,\n [id],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n \n \n \n Todo App\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-light: #f8f9fa;\n --text-light: #212529;\n --bg-dark: #212529;\n --text-dark: #f8f9fa;\n --primary: #007bff;\n --secondary: #6c757d;\n --success: #28a745;\n --danger: #dc3545;\n --warning: #ffc107;\n --info: #17a2b8;\n --light: #f8f9fa;\n --dark: #343a40;\n}\n\nbody {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 0;\n transition: background-color 0.3s, color 0.3s;\n}\n\n#app-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.light-mode {\n background-color: var(--bg-light);\n color: var(--text-light);\n}\n\n.dark-mode {\n background-color: var(--bg-dark);\n color: var(--text-dark);\n}\n\n#app-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n}\n\n#app-main {\n flex-grow: 1;\n}\n\n#add-todo-form {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n#new-todo-input {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid var(--secondary);\n border-radius: 4px;\n font-size: 16px;\n}\n\nbutton {\n padding: 10px 15px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n#add-todo-button {\n background-color: var(--primary);\n color: white;\n}\n\n#add-todo-button:hover {\n background-color: #0056b3;\n}\n\n#todo-list {\n list-style-type: none;\n padding: 0;\n}\n\n.todo-item {\n background-color: rgba(255, 255, 255, 0.05);\n border-radius: 4px;\n padding: 15px;\n margin-bottom: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.todo-text {\n flex-grow: 1;\n margin-right: 10px;\n}\n\n.edit-todo-button, .delete-todo-button {\n padding: 5px 10px;\n margin-left: 5px;\n}\n\n.edit-todo-button {\n background-color: var(--info);\n color: white;\n}\n\n.delete-todo-button {\n background-color: var(--danger);\n color: white;\n}\n\n.todo-details {\n width: 100%;\n margin-top: 10px;\n font-size: 0.9em;\n color: var(--secondary);\n}\n\n.overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.overlay-content {\n background-color: var(--bg-light);\n color: var(--text-light);\n padding: 20px;\n border-radius: 8px;\n max-width: 500px;\n width: 90%;\n}\n\n.dark-mode .overlay-content {\n background-color: var(--bg-dark);\n color: var(--text-dark);\n}\n\n.form-grid {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n.form-grid label {\n text-align: right;\n padding-right: 10px;\n}\n\n.form-grid input, .form-grid textarea {\n width: 100%;\n padding: 5px;\n border: 1px solid var(--secondary);\n border-radius: 4px;\n}\n\n.button-group {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n}\n\n.checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n#app-footer {\n margin-top: 20px;\n text-align: center;\n}\n\n#view-source-link {\n color: var(--secondary);\n text-decoration: none;\n}\n\n#view-source-link:hover {\n text-decoration: underline;\n}\n\n@media (max-width: 600px) {\n .form-grid {\n grid-template-columns: 1fr;\n }\n\n .form-grid label {\n text-align: left;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/arfan/todoApp/code/main.tsx","extension","actionData","errors"]