Add sightings page + report form, fix stream API mapping, add nav link
This commit is contained in:
BizzleBot
parent
86ce153ad2
commit
857f5a2396
@ -7,6 +7,7 @@ import { Menu, X, Eye, Tv2, TreePine, Heart, Calendar, Info } from 'lucide-react
|
||||
const links = [
|
||||
{ href: '/streams', label: 'Live Cams', icon: Tv2 },
|
||||
{ href: '/wildlife', label: 'Wildlife', icon: TreePine },
|
||||
{ href: '/sightings', label: 'Sightings', icon: Eye },
|
||||
{ href: '/events', label: 'Events', icon: Calendar },
|
||||
{ href: '/donate', label: 'Donate', icon: Heart },
|
||||
{ href: '/about', label: 'About', icon: Info },
|
||||
|
||||
156
app/sightings/ReportForm.tsx
Normal file
156
app/sightings/ReportForm.tsx
Normal file
@ -0,0 +1,156 @@
|
||||
'use client';
|
||||
import React, { useState } from 'react';
|
||||
import { Send, MapPin, Loader2 } from 'lucide-react';
|
||||
|
||||
const SPECIES_OPTIONS = [
|
||||
'Burrowing Owl',
|
||||
'Gopher Tortoise',
|
||||
'Roseate Spoonbill',
|
||||
'Florida Scrub-Jay',
|
||||
'Manatee',
|
||||
'Red-shouldered Hawk',
|
||||
'Osprey',
|
||||
'Great Blue Heron',
|
||||
'Other',
|
||||
];
|
||||
|
||||
export default function ReportForm() {
|
||||
const [species, setSpecies] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [lat, setLat] = useState('');
|
||||
const [lng, setLng] = useState('');
|
||||
const [locating, setLocating] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const getLocation = () => {
|
||||
if (!navigator.geolocation) { setError('Geolocation not supported'); return; }
|
||||
setLocating(true);
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
setLat(pos.coords.latitude.toFixed(6));
|
||||
setLng(pos.coords.longitude.toFixed(6));
|
||||
setLocating(false);
|
||||
},
|
||||
() => { setError('Could not get location'); setLocating(false); }
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!species || !lat || !lng) { setError('Species and location are required'); return; }
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'}/api/sightings`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
species,
|
||||
description,
|
||||
gps_lat: parseFloat(lat),
|
||||
gps_lng: parseFloat(lng),
|
||||
}),
|
||||
}
|
||||
);
|
||||
if (!res.ok) throw new Error('Failed to submit');
|
||||
setSubmitted(true);
|
||||
} catch {
|
||||
setError('Submission failed — you may need to log in first');
|
||||
}
|
||||
};
|
||||
|
||||
if (submitted) {
|
||||
return (
|
||||
<div className="bg-emerald-500/10 border border-emerald-500/20 rounded-2xl p-8 text-center space-y-3">
|
||||
<div className="text-4xl">✅</div>
|
||||
<h3 className="text-xl font-bold text-emerald-400">Sighting Reported!</h3>
|
||||
<p className="text-stone-400 text-sm">Thank you! An admin will verify your report.</p>
|
||||
<button
|
||||
onClick={() => { setSubmitted(false); setSpecies(''); setDescription(''); }}
|
||||
className="text-sm text-teal font-bold hover:underline"
|
||||
>
|
||||
Report another sighting
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="bg-surfaceGreen border border-white/5 rounded-2xl p-6 space-y-5">
|
||||
<h2 className="text-xl font-bold text-white">Report a Sighting</h2>
|
||||
|
||||
{error && (
|
||||
<div className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Species */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold text-stone-300">Species *</label>
|
||||
<select
|
||||
value={species}
|
||||
onChange={(e) => setSpecies(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white focus:outline-none focus:border-teal/50"
|
||||
>
|
||||
<option value="">Select species...</option>
|
||||
{SPECIES_OPTIONS.map((s) => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold text-stone-300">Location *</label>
|
||||
<div className="flex gap-3">
|
||||
<input
|
||||
type="number"
|
||||
step="any"
|
||||
value={lat}
|
||||
onChange={(e) => setLat(e.target.value)}
|
||||
placeholder="Latitude"
|
||||
className="flex-1 bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white placeholder:text-stone-600 focus:outline-none focus:border-teal/50"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
step="any"
|
||||
value={lng}
|
||||
onChange={(e) => setLng(e.target.value)}
|
||||
placeholder="Longitude"
|
||||
className="flex-1 bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white placeholder:text-stone-600 focus:outline-none focus:border-teal/50"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={getLocation}
|
||||
disabled={locating}
|
||||
className="px-4 py-2.5 rounded-lg bg-teal/10 border border-teal/20 text-teal text-sm font-bold hover:bg-teal/20 transition-all flex items-center gap-1.5"
|
||||
>
|
||||
{locating ? <Loader2 size={14} className="animate-spin" /> : <MapPin size={14} />}
|
||||
{locating ? 'Finding...' : 'Use GPS'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold text-stone-300">Notes</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="What did you observe? Behavior, number of animals, habitat..."
|
||||
rows={3}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white placeholder:text-stone-600 focus:outline-none focus:border-teal/50 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 rounded-xl bg-teal hover:bg-tealLight text-white font-bold text-sm flex items-center justify-center gap-2 transition-all active:scale-[0.98]"
|
||||
>
|
||||
<Send size={16} /> Submit Sighting
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
98
app/sightings/page.tsx
Normal file
98
app/sightings/page.tsx
Normal file
@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
import { Eye, MapPin, CheckCircle, Clock } from 'lucide-react';
|
||||
import { api, Sighting } from '@/lib/api';
|
||||
import { format } from 'date-fns';
|
||||
import type { Metadata } from 'next';
|
||||
import ReportForm from './ReportForm';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Wildlife Sightings',
|
||||
description: 'Browse recent wildlife sightings and report your own in Cape Coral.',
|
||||
};
|
||||
|
||||
const SPECIES_EMOJI: Record<string, string> = {
|
||||
'Burrowing Owl': '🦉',
|
||||
'Gopher Tortoise': '🐢',
|
||||
'Roseate Spoonbill': '🦩',
|
||||
'Scrub-Jay': '🐦',
|
||||
'Manatee': '🐋',
|
||||
};
|
||||
|
||||
async function getSightings(): Promise<Sighting[]> {
|
||||
try { return await api.getSightings(); }
|
||||
catch { return []; }
|
||||
}
|
||||
|
||||
export default async function SightingsPage() {
|
||||
const sightings = await getSightings();
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto px-6 py-16 space-y-14">
|
||||
<header className="space-y-4">
|
||||
<div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
|
||||
<Eye size={16} /> Community Science
|
||||
</div>
|
||||
<h1 className="text-4xl font-black text-white">Wildlife Sightings</h1>
|
||||
<p className="text-stone-400 text-lg max-w-2xl leading-relaxed">
|
||||
Help us track Cape Coral's wildlife. Report what you see — every sighting helps conservation efforts.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Report Form */}
|
||||
<ReportForm />
|
||||
|
||||
{/* Recent Sightings */}
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-2xl font-bold text-white">Recent Sightings</h2>
|
||||
{sightings.length === 0 ? (
|
||||
<div className="flex flex-col items-center py-16 gap-4 text-stone-500">
|
||||
<Eye size={48} className="text-stone-600" />
|
||||
<p className="text-lg font-semibold">No sightings yet</p>
|
||||
<p className="text-sm">Be the first to report a wildlife sighting!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{sightings.map((s) => (
|
||||
<div key={s.id} className="bg-surfaceGreen border border-white/5 rounded-2xl p-5 hover:border-teal/20 transition-all flex gap-5">
|
||||
{/* Species icon */}
|
||||
<div className="shrink-0 w-14 h-14 rounded-xl bg-teal/10 border border-teal/20 flex items-center justify-center text-2xl">
|
||||
{SPECIES_EMOJI[s.species] || '🦎'}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="font-bold text-white text-lg">{s.species}</h3>
|
||||
<p className="text-sm text-stone-400 flex items-center gap-1.5">
|
||||
<MapPin size={12} />
|
||||
{s.gps_lat.toFixed(4)}°N, {Math.abs(s.gps_lng).toFixed(4)}°W
|
||||
</p>
|
||||
</div>
|
||||
{s.verified ? (
|
||||
<span className="flex items-center gap-1 text-xs font-bold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-full">
|
||||
<CheckCircle size={12} /> Verified
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-1 text-xs font-bold text-amber-400 bg-amber-500/10 px-2.5 py-1 rounded-full">
|
||||
<Clock size={12} /> Pending
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{s.description && (
|
||||
<p className="text-sm text-stone-400 leading-relaxed">{s.description}</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 text-xs text-stone-500">
|
||||
{s.reporter && <span>Reported by {s.reporter.name}</span>}
|
||||
<span>{format(new Date(s.created_at), 'MMM d, yyyy')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
13
lib/api.ts
13
lib/api.ts
@ -60,6 +60,18 @@ export interface Event {
|
||||
capacity?: number;
|
||||
}
|
||||
|
||||
export interface Sighting {
|
||||
id: string;
|
||||
species: string;
|
||||
gps_lat: number;
|
||||
gps_lng: number;
|
||||
photo_url?: string;
|
||||
description: string;
|
||||
verified: boolean;
|
||||
created_at: string;
|
||||
reporter?: { id: string; name: string };
|
||||
}
|
||||
|
||||
export interface Burrow {
|
||||
id: string;
|
||||
lat: number;
|
||||
@ -81,4 +93,5 @@ export const api = {
|
||||
body: JSON.stringify({ email }),
|
||||
}),
|
||||
getBurrows: () => apiFetch<Burrow[]>('/api/burrows'),
|
||||
getSightings: () => apiFetch<Sighting[]>('/api/sightings'),
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user