\n {message}\n \n

\n );\n}\n\nfunction App() {\n const [name, setName] = useState(\"\");\n const [familyCode, setFamilyCode] = useState(\"\");\n const [location, setLocation] = useState<{ lat: number; lon: number } | null>(null);\n const [familyMembers, setFamilyMembers] = useState([]);\n const [mapInstance, setMapInstance] = useState(null);\n const [leaflet, setLeaflet] = useState(null);\n const [shareableLink, setShareableLink] = useState(\"\");\n const [trackingId, setTrackingId] = useState(\"\");\n const [notification, setNotification] = useState<{ message: string, type?: string } | null>(null);\n const [cameraStream, setCameraStream] = useState(null);\n const [uploadedImage, setUploadedImage] = useState(null);\n const videoRef = useRef(null);\n const fileInputRef = useRef(null);\n const watchIdRef = useRef(null);\n\n // Request camera access\n const requestCameraAccess = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ \n video: true, \n audio: false \n });\n setCameraStream(stream);\n \n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n }\n\n setNotification({ \n message: \"Camera access granted\", \n type: 'success' \n });\n } catch (error) {\n setNotification({ \n message: \"Camera access denied\", \n type: 'error' \n });\n console.error(\"Camera access error:\", error);\n }\n };\n\n // Continuous location tracking\n const startContinuousTracking = () => {\n if (navigator.geolocation) {\n watchIdRef.current = navigator.geolocation.watchPosition(\n async (position) => {\n const newLocation = {\n lat: position.coords.latitude,\n lon: position.coords.longitude\n };\n \n setLocation(newLocation);\n \n const currentTrackingId = trackingId || nanoid(10);\n setTrackingId(currentTrackingId);\n\n const shortLink = await generateShortLink(currentTrackingId);\n setShareableLink(shortLink);\n \n await fetch('/update-location', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n name, \n familyCode, \n trackingId: currentTrackingId,\n location: newLocation \n })\n });\n\n fetchFamilyLocations();\n },\n (error) => {\n setNotification({ \n message: `Location tracking error: ${error.message}`, \n type: 'error' \n });\n },\n {\n enableHighAccuracy: true,\n maximumAge: 0,\n timeout: 5000\n }\n );\n } else {\n setNotification({ \n message: \"Geolocation is not supported\", \n type: 'error' \n });\n }\n };\n\n // Fetch family members' locations\n const fetchFamilyLocations = async () => {\n try {\n const response = await fetch(`/get-family-locations?code=${familyCode}`);\n const data = await response.json();\n setFamilyMembers(data.members);\n } catch (error) {\n console.error(\"Error fetching family locations:\", error);\n setNotification({ \n message: \"Failed to fetch family locations\", \n type: 'error' \n });\n }\n };\n\n // Generate short link\n const generateShortLink = async (trackingId: string) => {\n try {\n const response = await fetch('/generate-short-link', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n trackingId, \n name,\n familyCode \n })\n });\n \n if (!response.ok) {\n throw new Error('Failed to generate short link');\n }\n \n const data = await response.json();\n return data.shortLink;\n } catch (error) {\n console.error(\"Error generating short link:\", error);\n return `${window.location.origin}/track/${trackingId}`;\n }\n };\n\n // Image upload handler\n const handleImageUpload = async (event: React.ChangeEvent) => {\n const file = event.target.files?.[0];\n if (file) {\n const reader = new FileReader();\n reader.onloadend = async () => {\n const base64Image = reader.result as string;\n setUploadedImage(base64Image);\n\n // Send image to server\n await fetch('/upload-image', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n trackingId, \n image: base64Image \n })\n });\n\n setNotification({ \n message: \"Image uploaded successfully\", \n type: 'success' \n });\n };\n reader.readAsDataURL(file);\n }\n };\n\n // Copy shareable link\n const copyShareableLink = () => {\n if (shareableLink) {\n navigator.clipboard.writeText(shareableLink).then(() => {\n setNotification({ \n message: \"Link copied to clipboard\", \n type: 'success' \n });\n }).catch(() => {\n setNotification({ \n message: \"Failed to copy link\", \n type: 'error' \n });\n });\n }\n };\n\n // Initialize map\n useEffect(() => {\n const initializeMap = async () => {\n try {\n const L = await import(\"https://esm.sh/leaflet@1.7.1\");\n setLeaflet(L);\n\n const mapElement = document.getElementById('map');\n if (mapElement) {\n const map = L.map(mapElement).setView([0, 0], 2);\n L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n \n setMapInstance(map);\n }\n } catch (error) {\n console.error(\"Map initialization error:\", error);\n }\n };\n\n if (typeof window !== 'undefined') {\n initializeMap();\n }\n\n // Cleanup function\n return () => {\n if (watchIdRef.current !== null) {\n navigator.geolocation.clearWatch(watchIdRef.current);\n }\n if (cameraStream) {\n cameraStream.getTracks().forEach(track => track.stop());\n }\n };\n }, []);\n\n // Update map with locations\n useEffect(() => {\n if (mapInstance && leaflet && location) {\n mapInstance.eachLayer((layer: any) => {\n if (layer instanceof leaflet.Marker) {\n mapInstance.removeLayer(layer);\n }\n });\n\n leaflet.marker([location.lat, location.lon])\n .addTo(mapInstance)\n .bindPopup(`${name} (You)`)\n .openPopup();\n \n mapInstance.setView([location.lat, location.lon], 13);\n\n familyMembers.forEach(member => {\n if (member.latitude && member.longitude) {\n leaflet.marker([member.latitude, member.longitude])\n .addTo(mapInstance)\n .bindPopup(member.name);\n }\n });\n }\n }, [location, familyMembers, mapInstance, leaflet]);\n\n return (\n

\n {notification && (\n setNotification(null)}\n />\n )}\n\n {!location ? (\n \n ) : (\n

Welcome, {name}!

\n \n

\n \n {shareableLink && (\n

\n \n \n

\n )}\n \n

\n \n \n

\n \n

Family Members:

\n {member.name} - Last seen: {new Date(member.last_updated).toLocaleString()}\n

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"LocationbyHTKhan\";\n const SCHEMA_VERSION = 13;\n\n // Create tables for storing user and location data\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_family_members_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n family_code TEXT NOT NULL,\n tracking_id TEXT NOT NULL,\n short_link TEXT,\n latitude REAL,\n longitude REAL,\n address TEXT,\n battery_level REAL,\n device_info TEXT,\n camera_offer TEXT,\n camera_answer TEXT,\n uploaded_image TEXT,\n last_updated DATETIME DEFAULT CURRENT_TIMESTAMP,\n UNIQUE(tracking_id),\n UNIQUE(short_link)\n )\n `);\n\n // Generate short link\n if (request.method === 'POST' && new URL(request.url).pathname === '/generate-short-link') {\n const { trackingId, name, familyCode } = await request.json();\n \n const shortLink = `${request.headers.get('origin') || 'https://val.town'}/track/${trackingId}`;\n \n await sqlite.execute(`\n INSERT OR REPLACE INTO ${KEY}_family_members_${SCHEMA_VERSION} \n (name, family_code, tracking_id, short_link, last_updated) \n VALUES (?, ?, ?, ?, CURRENT_TIMESTAMP)\n `, [name, familyCode, trackingId, shortLink]);\n\n return new Response(JSON.stringify({ shortLink }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Upload image\n if (request.method === 'POST' && new URL(request.url).pathname === '/upload-image') {\n const { trackingId, image } = await request.json();\n \n await sqlite.execute(`\n UPDATE ${KEY}_family_members_${SCHEMA_VERSION} \n SET uploaded_image = ? \n WHERE tracking_id = ?\n `, [image, trackingId]);\n\n return new Response(JSON.stringify({ success: true }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Update location\n if (request.method === 'POST' && new URL(request.url).pathname === '/update-location') {\n const { name, familyCode, trackingId, location } = await request.json();\n \n await sqlite.execute(`\n INSERT OR REPLACE INTO ${KEY}_family_members_${SCHEMA_VERSION} \n (name, family_code, tracking_id, latitude, longitude, last_updated) \n VALUES (?, ?, ?, ?, ?, CURRENT_TIMESTAMP)\n `, [name, familyCode, trackingId, location.lat, location.lon]);\n \n return new Response(JSON.stringify({ success: true }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Get family locations\n if (request.method === 'GET' && new URL(request.url).pathname === '/get-family-locations') {\n const url = new URL(request.url);\n const familyCode = url.searchParams.get('code');\n \n const result = await sqlite.execute(`\n SELECT name, latitude, longitude, last_updated \n FROM ${KEY}_family_members_${SCHEMA_VERSION} \n WHERE family_code = ?\n `, [familyCode]);\n \n return new Response(JSON.stringify({ \n members: result.rows \n }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Tracking link handler\n if (request.method === 'GET' && new URL(request.url).pathname.startsWith('/track/')) {\n const trackingId = request.url.split('/').pop();\n \n const memberResult = await sqlite.execute(`\n SELECT name, latitude, longitude, last_updated, \n uploaded_image\n FROM ${KEY}_family_members_${SCHEMA_VERSION} \n WHERE tracking_id = ?\n `, [trackingId]);\n\n if (memberResult.rows.length > 0) {\n const member = memberResult.rows[0];\n \n if (!member.latitude || !member.longitude) {\n return new Response(`\n \n \n

Location Not Available

The location for this user is currently unavailable.

\n \n \n `, { \n headers: { 'Content-Type': 'text/html' } \n });\n }\n\n return new Response(`\n \n \n ${member.name}'s Location\n \n \n \n \n \n

\n ${member.uploaded_image ? `\n

\n $\"Uploaded$ \n

\n ` : ''}\n

\n \n

\n \n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n\n return new Response(`\n \n \n

Invalid Tracking Link

The tracking link you've used is invalid or expired.

\n \n \n `, { \n status: 404,\n headers: { 'Content-Type': 'text/html' } \n });\n }\n\n // Main page\n return new Response(`\n \n \n HTKhan\n \n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}","deleted","label",[99],"permalink","https://www.val.town/x/HTKhan25/LocationbyHTKhan/code/main.tsx","extension","actionData","errors"]