/** @jsxImportSource https://esm.sh/react */ import React from "https://esm.sh/react"; import ReactDOM from "https://esm.sh/react-dom"; import { createRoot } from "https://esm.sh/react-dom/client"; const { useState, useRef, useEffect } = React; function compressImage(file, maxWidth = 800, maxHeight = 800, quality = 0.7) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (event) => { const img = new Image(); img.src = event.target.result as string; img.onload = () => { const canvas = document.createElement('canvas'); let width = img.width; let height = img.height; // Calculate new dimensions while maintaining aspect ratio if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); // Convert to base64 with compression const compressedImage = canvas.toDataURL('image/jpeg', quality); resolve(compressedImage); }; img.onerror = reject; }; reader.onerror = reject; }); } function PhotoUploader({ onPhotoUpload, label = "Upload Photo" }) { const fileInputRef = useRef(null); const handleFileChange = async (event) => { const file = event.target.files[0]; if (file) { try { const compressedImage = await compressImage(file); onPhotoUpload(compressedImage); } catch (error) { console.error("Photo upload failed", error); } } }; return (

); } function ConnectionLine({ type = 'vertical' }) { const lineStyle = { vertical: { width: '2px', height: '50px', backgroundColor: '#3498db', margin: '10px 0' }, horizontal: { width: '50px', height: '2px', backgroundColor: '#e74c3c', margin: '0 10px' }, love: { fontSize: '24px', color: '#e74c3c', margin: '0 10px' } }; return (

{type === 'love' && '❤️'}

); } function FamilyTreeNode({ node, onAddSpouse, onAddChild, onEdit, onPhotoUpload, onSpousePhotoUpload, level = 0 }) { return (

{node.photo ? ( {node.name}

) : ( No Photo )}

onPhotoUpload(node.id, photo)} label="Upload Person Photo" />

{node.name}

{node.spouse && ( <>

{node.spouse.photo ? (

) : ( {node.spouse.name} )}

onSpousePhotoUpload(node.id, photo)} label="Upload Spouse Photo" />

{node.spouse.name}

)}

); } function FamilyTreeChart() { const [nodes, setNodes] = useState({}); const [isLoading, setIsLoading] = useState(true); // Fetch initial family tree data from server useEffect(() => { async function fetchFamilyTree() { try { const response = await fetch('/family-tree'); const data = await response.json(); // Transform server data into client-side state const transformedNodes = data.reduce((acc, node) => { acc[node.id] = { ...node, spouse: node.spouse_id ? { id: node.spouse_id, name: node.spouse_name, photo: node.spouse_photo } : null, children: node.children ? JSON.parse(node.children) : [] }; return acc; }, {}); setNodes(transformedNodes); setIsLoading(false); } catch (error) { console.error("Failed to fetch family tree", error); setIsLoading(false); } } fetchFamilyTree(); }, []); const handleAddSpouse = async (parentId) => { const newSpouseId = `spouse_${Math.random().toString(36).substr(2, 9)}`; const newSpouse = { id: newSpouseId, name: 'New Spouse', photo: null }; try { // Send new spouse data to server const response = await fetch('/add-spouse', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ parentId, spouseId: newSpouseId, name: newSpouse.name }) }); if (response.ok) { setNodes(prevNodes => ({ ...prevNodes, [parentId]: { ...prevNodes[parentId], spouse: newSpouse }, [newSpouseId]: newSpouse })); } } catch (error) { console.error("Failed to add spouse", error); } }; const handleAddChild = async (parentId) => { const newChildId = `child_${Math.random().toString(36).substr(2, 9)}`; const newChild = { id: newChildId, name: 'New Child', photo: null, parents: [parentId] }; try { // Send new child data to server const response = await fetch('/add-child', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ parentId, childId: newChildId, name: newChild.name }) }); if (response.ok) { setNodes(prevNodes => ({ ...prevNodes, [newChildId]: newChild, [parentId]: { ...prevNodes[parentId], children: [...(prevNodes[parentId].children || []), newChildId] } })); } } catch (error) { console.error("Failed to add child", error); } }; const handleEditNode = async (node) => { const newName = prompt('Enter new name', node.name); if (newName !== null) { try { // Send updated name to server const response = await fetch('/edit-node', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ nodeId: node.id, name: newName }) }); if (response.ok) { setNodes(prevNodes => ({ ...prevNodes, [node.id]: { ...prevNodes[node.id], name: newName } })); } } catch (error) { console.error("Failed to edit node", error); } } }; const handlePhotoUpload = async (nodeId, photoData) => { try { // Send photo to server const response = await fetch('/upload-photo', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ nodeId, photo: photoData }) }); if (response.ok) { setNodes(prevNodes => ({ ...prevNodes, [nodeId]: { ...prevNodes[nodeId], photo: photoData } })); } } catch (error) { console.error("Failed to upload photo", error); } }; const handleSpousePhotoUpload = async (nodeId, photoData) => { try { // Send spouse photo to server const response = await fetch('/upload-spouse-photo', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ nodeId, photo: photoData }) }); if (response.ok) { setNodes(prevNodes => ({ ...prevNodes, [nodeId]: { ...prevNodes[nodeId], spouse: { ...prevNodes[nodeId].spouse, photo: photoData } } })); } } catch (error) { console.error("Failed to upload spouse photo", error); } }; const renderTree = (nodeId, level = 0) => { const node = nodes[nodeId]; if (!node) return null; return (

{node.children && node.children.length > 0 && ( )} {node.children && node.children.length > 0 && (

{node.children.map(childId => renderTree(childId, level + 1))}

)}

); }; if (isLoading) { return

; } return (

{renderTree('1')}

); } function App() { return (

🌳 Family Tree Builder

); } // Simplified client-side rendering function renderApp() { const rootElement = document.getElementById("root"); if (rootElement) { const root = createRoot(rootElement); root.render(); } } // Direct client-side initialization if (typeof window !== 'undefined') { window.addEventListener('DOMContentLoaded', renderApp); } 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); const SCHEMA_VERSION = 2; // Create comprehensive tables for storing family tree data await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_family_nodes_${SCHEMA_VERSION} ( id TEXT PRIMARY KEY, name TEXT NOT NULL, photo TEXT, spouse_id TEXT, spouse_name TEXT, spouse_photo TEXT, children TEXT, parent_ids TEXT ) `); // Handle different API routes const url = new URL(request.url); // Fetch entire family tree if (url.pathname === '/family-tree' && request.method === 'GET') { try { const result = await sqlite.execute(` SELECT * FROM ${KEY}_family_nodes_${SCHEMA_VERSION} `); return new Response(JSON.stringify(result.rows), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Add spouse endpoint if (url.pathname === '/add-spouse' && request.method === 'POST') { try { const { parentId, spouseId, name } = await request.json(); await sqlite.execute(` UPDATE ${KEY}_family_nodes_${SCHEMA_VERSION} SET spouse_id = ?, spouse_name = ? WHERE id = ? `, [spouseId, name, parentId]); await sqlite.execute(` INSERT OR REPLACE INTO ${KEY}_family_nodes_${SCHEMA_VERSION} (id, name, spouse_id) VALUES (?, ?, ?) `, [spouseId, name, parentId]); return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Add child endpoint if (url.pathname === '/add-child' && request.method === 'POST') { try { const { parentId, childId, name } = await request.json(); // Retrieve current children and update const parentResult = await sqlite.execute(` SELECT children FROM ${KEY}_family_nodes_${SCHEMA_VERSION} WHERE id = ? `, [parentId]); const currentChildren = parentResult.rows[0]?.children ? JSON.parse(parentResult.rows[0].children) : []; const updatedChildren = [...currentChildren, childId]; await sqlite.execute(` UPDATE ${KEY}_family_nodes_${SCHEMA_VERSION} SET children = ? WHERE id = ? `, [JSON.stringify(updatedChildren), parentId]); await sqlite.execute(` INSERT OR REPLACE INTO ${KEY}_family_nodes_${SCHEMA_VERSION} (id, name, parent_ids) VALUES (?, ?, ?) `, [childId, name, JSON.stringify([parentId])]); return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Edit node endpoint if (url.pathname === '/edit-node' && request.method === 'POST') { try { const { nodeId, name } = await request.json(); await sqlite.execute(` UPDATE ${KEY}_family_nodes_${SCHEMA_VERSION} SET name = ? WHERE id = ? `, [name, nodeId]); return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Photo upload endpoints if (url.pathname === '/upload-photo' && request.method === 'POST') { try { const { nodeId, photo } = await request.json(); await sqlite.execute(` UPDATE ${KEY}_family_nodes_${SCHEMA_VERSION} SET photo = ? WHERE id = ? `, [photo, nodeId]); return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } if (url.pathname === '/upload-spouse-photo' && request.method === 'POST') { try { const { nodeId, photo } = await request.json(); await sqlite.execute(` UPDATE ${KEY}_family_nodes_${SCHEMA_VERSION} SET spouse_photo = ? WHERE id = ? `, [photo, nodeId]); return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Initial root node if not exists const rootCheckResult = await sqlite.execute(` SELECT * FROM ${KEY}_family_nodes_${SCHEMA_VERSION} WHERE id = '1' `); if (rootCheckResult.rows.length === 0) { await sqlite.execute(` INSERT INTO ${KEY}_family_nodes_${SCHEMA_VERSION} (id, name) VALUES ('1', 'Root Person') `); } return new Response(` Family Tree Builder

`, { headers: { "content-type": "text/html" } }); }

Family100