- +

+ Real-Time Location Tracking @@ -52,7 +52,7 @@ export default function Home() { Real-Time Tracking -

Connect with others in real-time to see their current location.

@@ -60,13 +60,13 @@ export default function Home() { Location Sharing -

Share your location via email links that can be viewed by anyone.

diff --git a/app/src/app/track/page.tsx b/app/src/app/track/page.tsx index 0519ecb..060d391 100644 --- a/app/src/app/track/page.tsx +++ b/app/src/app/track/page.tsx @@ -1 +1,147 @@ - \ No newline at end of file +"use client"; + +import { useState, useEffect } from "react"; +import { useSocket } from "@/hooks/useSocket"; +import Map from "@/components/Map"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { toast } from "sonner"; + +export default function TrackPage() { + const [userId, setUserId] = useState(""); + const [location, setLocation] = useState<{ + latitude: number; + longitude: number; + accuracy?: number; + } | null>(null); + const [isTracking, setIsTracking] = useState(false); + const { isConnected, socket } = useSocket(); + + // Generate a random user ID on component mount if not already set + useEffect(() => { + if (!userId) { + const newUserId = `user_${Math.random().toString(36).substring(2, 9)}`; + setUserId(newUserId); + } + }, [userId]); + + // Handle location updates from the map component + const handleLocationUpdate = (location: { + latitude: number; + longitude: number; + accuracy?: number; + timestamp: Date; + }) => { + setLocation({ + latitude: location.latitude, + longitude: location.longitude, + accuracy: location.accuracy, + }); + + // Only send location updates if we're tracking + if (isTracking && socket && isConnected) { + socket.emit('location:update', { + userId, + latitude: location.latitude, + longitude: location.longitude, + accuracy: location.accuracy, + timestamp: new Date().toISOString() + }); + } + }; + + // Toggle location tracking + const toggleTracking = () => { + if (!isTracking && socket) { + // Register user when starting tracking + socket.emit('user:register', userId); + } + + setIsTracking(!isTracking); + + if (!isTracking) { + toast.success("Location tracking started"); + } else { + toast.info("Location tracking stopped"); + } + }; + + return ( +

Real-Time Location Tracking

+ +

+ + + + Tracking Controls + {isConnected && ( + + + Connected + + )} + + + +

Your user ID: {userId}

+ +

+ {location && ( +

Current Location

Latitude: {location.latitude.toFixed(6)}

Longitude: {location.longitude.toFixed(6)}

+ {location.accuracy && ( +

Accuracy: {location.accuracy.toFixed(2)} meters

+ )} +

+ + + + + + Status + + +

+ Socket Connection: {isConnected ? + Connected : + Disconnected + } +

+ Tracking Status: {isTracking ? + Active : + Inactive + } +

+ Location: {location ? 'Available' : 'Waiting...'} +

+ + +

+ ); +} \ No newline at end of file diff --git a/app/src/components/navbar.tsx b/app/src/components/navbar.tsx new file mode 100644 index 0000000..37f1a5b --- /dev/null +++ b/app/src/components/navbar.tsx @@ -0,0 +1,100 @@ +"use client"; + +import Link from "next/link"; +import { useState } from "react"; +import { MapPin, Menu, X } from "lucide-react"; +import { SimpleThemeToggle } from "@/components/ui/theme-toggle"; +import { Button } from "@/components/ui/button"; + +export default function Navbar() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + return ( +

+ {/* Logo and Title */} + + + Location Tracker + + + {/* Desktop Navigation */} +

+ + Map + + + Track + + + Share + + +

+ + {/* Mobile Navigation Toggle */} +

+ +

+ + {/* Mobile Navigation Menu */} + {isMenuOpen && ( +

+ setIsMenuOpen(false)} + > + Map + + setIsMenuOpen(false)} + > + Track + + setIsMenuOpen(false)} + > + Share + +

+ )} +

+ ); +} \ No newline at end of file diff --git a/app/src/components/theme-provider.tsx b/app/src/components/theme-provider.tsx new file mode 100644 index 0000000..9fced93 --- /dev/null +++ b/app/src/components/theme-provider.tsx @@ -0,0 +1,9 @@ +"use client"; + +import * as React from "react"; +import { ThemeProvider as NextThemesProvider } from "next-themes"; +import { type ThemeProviderProps } from "next-themes/dist/types"; + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return {children}; +} \ No newline at end of file diff --git a/app/src/components/ui/theme-toggle.tsx b/app/src/components/ui/theme-toggle.tsx new file mode 100644 index 0000000..fbf7448 --- /dev/null +++ b/app/src/components/ui/theme-toggle.tsx @@ -0,0 +1,61 @@ +"use client"; + +import * as React from "react"; +import { useTheme } from "next-themes"; +import { Moon, Sun } from "lucide-react"; + +import { Button } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export function ThemeToggle() { + const { setTheme, theme } = useTheme(); + + return ( + + + + + + setTheme("light")}> + Light + + setTheme("dark")}> + Dark + + setTheme("system")}> + System + + + + ); +} + +export function SimpleThemeToggle() { + const { setTheme, theme } = useTheme(); + + const toggleTheme = () => { + setTheme(theme === "dark" ? "light" : "dark"); + }; + + return ( + + ); +} \ No newline at end of file -- cgit v1.2.3-59-g8ed1b