Added close earthquake log and search modals on click outside
This commit is contained in:
parent
128517b388
commit
dd650c6ba6
@ -229,6 +229,7 @@ export default function Profile() {
|
|||||||
}
|
}
|
||||||
setIsDeleting(true);
|
setIsDeleting(true);
|
||||||
try {
|
try {
|
||||||
|
// todo add delete user route
|
||||||
const res = await axios.post(
|
const res = await axios.post(
|
||||||
"/api/delete-user",
|
"/api/delete-user",
|
||||||
{ userId: user!.id },
|
{ userId: user!.id },
|
||||||
|
|||||||
@ -95,6 +95,7 @@ function LogModal({ onClose }: { onClose: () => void }) {
|
|||||||
}
|
}
|
||||||
setIsSubmitting(true);
|
setIsSubmitting(true);
|
||||||
try {
|
try {
|
||||||
|
// todo!! add log api route
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500)); // Simulated API call
|
await new Promise((resolve) => setTimeout(resolve, 500)); // Simulated API call
|
||||||
alert(`Logged ${name} to storage: ${storageLocation}`);
|
alert(`Logged ${name} to storage: ${storageLocation}`);
|
||||||
onClose();
|
onClose();
|
||||||
|
|||||||
@ -1,248 +1,245 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import { useState } from "react";
|
import { FormEvent, useState, useRef } from "react";
|
||||||
import DatePicker from "react-datepicker";
|
import DatePicker from "react-datepicker";
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
import "react-datepicker/dist/react-datepicker.css";
|
||||||
|
|
||||||
const typeOptions = [
|
const typeOptions = [
|
||||||
{ value: "volcanic", label: "Volcanic" },
|
{ value: "volcanic", label: "Volcanic" },
|
||||||
{ value: "tectonic", label: "Tectonic" },
|
{ value: "tectonic", label: "Tectonic" },
|
||||||
{ value: "collapse", label: "Collapse" },
|
{ value: "collapse", label: "Collapse" },
|
||||||
{ value: "explosion", label: "Explosion" }
|
{ value: "explosion", label: "Explosion" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
|
export default function EarthquakeLogModal({
|
||||||
const [date, setDate] = useState<Date | null>(new Date());
|
open,
|
||||||
const [magnitude, setMagnitude] = useState("");
|
onClose,
|
||||||
const [type, setType] = useState(typeOptions[0].value);
|
onSuccess,
|
||||||
const [city, setCity] = useState("");
|
}: {
|
||||||
const [country, setCountry] = useState("");
|
open: boolean;
|
||||||
const [latitude, setLatitude] = useState("");
|
onClose: () => void;
|
||||||
const [longitude, setLongitude] = useState("");
|
onSuccess: () => void;
|
||||||
const [depth, setDepth] = useState("");
|
}) {
|
||||||
const [loading, setLoading] = useState(false);
|
const [date, setDate] = useState<Date | null>(new Date());
|
||||||
const [successCode, setSuccessCode] = useState<string | null>(null);
|
const [magnitude, setMagnitude] = useState("");
|
||||||
|
const [type, setType] = useState(typeOptions[0].value);
|
||||||
|
const [city, setCity] = useState("");
|
||||||
|
const [country, setCountry] = useState("");
|
||||||
|
const [latitude, setLatitude] = useState("");
|
||||||
|
const [longitude, setLongitude] = useState("");
|
||||||
|
const [depth, setDepth] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [successCode, setSuccessCode] = useState<string | null>(null);
|
||||||
|
const modalRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
async function handleLatLonChange(lat: string, lon: string) {
|
async function handleLatLonChange(lat: string, lon: string) {
|
||||||
setLatitude(lat);
|
setLatitude(lat);
|
||||||
setLongitude(lon);
|
setLongitude(lon);
|
||||||
if (/^-?\d+(\.\d+)?$/.test(lat) && /^-?\d+(\.\d+)?$/.test(lon)) {
|
if (/^-?\d+(\.\d+)?$/.test(lat) && /^-?\d+(\.\d+)?$/.test(lon)) {
|
||||||
try {
|
try {
|
||||||
const resp = await fetch(
|
const resp = await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=10`);
|
||||||
`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=10`
|
if (resp.ok) {
|
||||||
);
|
const data = await resp.json();
|
||||||
if (resp.ok) {
|
setCity(
|
||||||
const data = await resp.json();
|
data.address.city ||
|
||||||
setCity(
|
data.address.town ||
|
||||||
data.address.city ||
|
data.address.village ||
|
||||||
data.address.town ||
|
data.address.hamlet ||
|
||||||
data.address.village ||
|
data.address.county ||
|
||||||
data.address.hamlet ||
|
data.address.state ||
|
||||||
data.address.county ||
|
""
|
||||||
data.address.state ||
|
);
|
||||||
""
|
setCountry(data.address.country || "");
|
||||||
);
|
}
|
||||||
setCountry(data.address.country || "");
|
} catch (e) {
|
||||||
}
|
// ignore
|
||||||
} catch (e) {
|
}
|
||||||
// ignore
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSubmit(e) {
|
async function handleSubmit(e: FormEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
if (!date || !magnitude || !type || !city || !country || !latitude || !longitude || !depth) {
|
if (!date || !magnitude || !type || !city || !country || !latitude || !longitude || !depth) {
|
||||||
alert("Please complete all fields.");
|
alert("Please complete all fields.");
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
const res = await fetch("/api/earthquakes/log", {
|
const res = await fetch("/api/earthquakes/log", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
date,
|
date,
|
||||||
magnitude: parseFloat(magnitude),
|
magnitude: parseFloat(magnitude),
|
||||||
type,
|
type,
|
||||||
location: `${city.trim()}, ${country.trim()}`,
|
location: `${city.trim()}, ${country.trim()}`,
|
||||||
country: country.trim(),
|
country: country.trim(),
|
||||||
latitude: parseFloat(latitude),
|
latitude: parseFloat(latitude),
|
||||||
longitude: parseFloat(longitude),
|
longitude: parseFloat(longitude),
|
||||||
depth
|
depth,
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
const result = await res.json();
|
const result = await res.json();
|
||||||
setSuccessCode(result.code);
|
setSuccessCode(result.code);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
if (onSuccess) onSuccess();
|
if (onSuccess) onSuccess();
|
||||||
} else {
|
} else {
|
||||||
const err = await res.json();
|
const err = await res.json();
|
||||||
alert("Failed to log earthquake! " + (err.error || ""));
|
alert("Failed to log earthquake! " + (err.error || ""));
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
alert("Failed to log. " + e.message);
|
alert("Failed to log. " + e.message);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!open) return null;
|
function handleOutsideClick(e: React.MouseEvent<HTMLDivElement>) {
|
||||||
|
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Success popup overlay
|
if (!open) return null;
|
||||||
if (successCode) {
|
|
||||||
return (
|
|
||||||
<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
|
|
||||||
<div className="bg-white rounded-lg px-8 py-8 max-w-md w-full relative shadow-lg">
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setSuccessCode(null);
|
|
||||||
onClose();
|
|
||||||
}}
|
|
||||||
className="absolute right-4 top-4 text-xl text-gray-400 hover:text-gray-700"
|
|
||||||
aria-label="Close"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
<div className="text-center">
|
|
||||||
<h2 className="text-xl font-semibold mb-3">
|
|
||||||
Thank you for logging an earthquake!
|
|
||||||
</h2>
|
|
||||||
<div className="mb-0">The Earthquake Identifier is</div>
|
|
||||||
<div className="font-mono text-lg mb-4 bg-slate-100 rounded px-2 py-1 inline-block text-blue-800">{successCode}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
// Success popup overlay
|
||||||
<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
|
if (successCode) {
|
||||||
<div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full relative">
|
return (
|
||||||
<button
|
<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center" onClick={handleOutsideClick}>
|
||||||
onClick={onClose}
|
<div className="bg-white rounded-lg px-8 py-8 max-w-md w-full relative shadow-lg" ref={modalRef}>
|
||||||
className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg"
|
<button
|
||||||
>
|
onClick={() => {
|
||||||
×
|
setSuccessCode(null);
|
||||||
</button>
|
onClose();
|
||||||
<h2 className="font-bold text-xl mb-4">Log Earthquake</h2>
|
}}
|
||||||
<form onSubmit={handleSubmit} className="space-y-3">
|
className="absolute right-4 top-4 text-xl text-gray-400 hover:text-gray-700"
|
||||||
<div>
|
aria-label="Close"
|
||||||
<label className="block text-sm font-medium">Date</label>
|
>
|
||||||
<DatePicker
|
×
|
||||||
selected={date}
|
</button>
|
||||||
onChange={date => setDate(date)}
|
<div className="text-center">
|
||||||
className="border rounded px-3 py-2 w-full"
|
<h2 className="text-xl font-semibold mb-3">Thank you for logging an earthquake!</h2>
|
||||||
dateFormat="yyyy-MM-dd"
|
<div className="mb-0">The Earthquake Identifier is</div>
|
||||||
maxDate={new Date()}
|
<div className="font-mono text-lg mb-4 bg-slate-100 rounded px-2 py-1 inline-block text-blue-800">{successCode}</div>
|
||||||
showMonthDropdown
|
</div>
|
||||||
showYearDropdown
|
</div>
|
||||||
dropdownMode="select"
|
</div>
|
||||||
required
|
);
|
||||||
/>
|
}
|
||||||
</div>
|
|
||||||
<div>
|
return (
|
||||||
<label className="block text-sm font-medium">Magnitude</label>
|
<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center" onClick={handleOutsideClick}>
|
||||||
<input
|
<div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full relative" ref={modalRef}>
|
||||||
type="number"
|
<button onClick={onClose} className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg">
|
||||||
className="border rounded px-3 py-2 w-full"
|
×
|
||||||
min="0"
|
</button>
|
||||||
max="10"
|
<h2 className="font-bold text-xl mb-4">Log Earthquake</h2>
|
||||||
step="0.1"
|
<form onSubmit={handleSubmit} className="space-y-3">
|
||||||
value={magnitude}
|
<div>
|
||||||
onChange={e => {
|
<label className="block text-sm font-medium">Date</label>
|
||||||
const val = e.target.value;
|
<DatePicker
|
||||||
if (parseFloat(val) > 10) return;
|
selected={date}
|
||||||
setMagnitude(val);
|
onChange={(date) => setDate(date)}
|
||||||
}}
|
className="border rounded px-3 py-2 w-full"
|
||||||
required
|
dateFormat="yyyy-MM-dd"
|
||||||
/>
|
maxDate={new Date()}
|
||||||
</div>
|
showMonthDropdown
|
||||||
<div>
|
showYearDropdown
|
||||||
<label className="block text-sm font-medium">Type</label>
|
dropdownMode="select"
|
||||||
<select
|
required
|
||||||
className="border rounded px-3 py-2 w-full"
|
/>
|
||||||
value={type}
|
</div>
|
||||||
onChange={e => setType(e.target.value)}
|
<div>
|
||||||
required
|
<label className="block text-sm font-medium">Magnitude</label>
|
||||||
>
|
<input
|
||||||
{typeOptions.map(opt => (
|
type="number"
|
||||||
<option key={opt.value} value={opt.value}>
|
className="border rounded px-3 py-2 w-full"
|
||||||
{opt.label}
|
min="0"
|
||||||
</option>
|
max="10"
|
||||||
))}
|
step="0.1"
|
||||||
</select>
|
value={magnitude}
|
||||||
</div>
|
onChange={(e) => {
|
||||||
<div>
|
const val = e.target.value;
|
||||||
<label className="block text-sm font-medium">City/Area</label>
|
if (parseFloat(val) > 10) return;
|
||||||
<span className="block text-xs text-gray-400">
|
setMagnitude(val);
|
||||||
(Use Lat/Lon then press Enter for reverse lookup)
|
}}
|
||||||
</span>
|
required
|
||||||
<input
|
/>
|
||||||
type="text"
|
</div>
|
||||||
className="border rounded px-3 py-2 w-full"
|
<div>
|
||||||
value={city}
|
<label className="block text-sm font-medium">Type</label>
|
||||||
onChange={e => setCity(e.target.value)}
|
<select className="border rounded px-3 py-2 w-full" value={type} onChange={(e) => setType(e.target.value)} required>
|
||||||
required
|
{typeOptions.map((opt) => (
|
||||||
/>
|
<option key={opt.value} value={opt.value}>
|
||||||
</div>
|
{opt.label}
|
||||||
<div>
|
</option>
|
||||||
<label className="block text-sm font-medium">Country</label>
|
))}
|
||||||
<input
|
</select>
|
||||||
type="text"
|
</div>
|
||||||
className="border rounded px-3 py-2 w-full"
|
<div>
|
||||||
value={country}
|
<label className="block text-sm font-medium">City/Area</label>
|
||||||
onChange={e => setCountry(e.target.value)}
|
<span className="block text-xs text-gray-400">(Use Lat/Lon then press Enter for reverse lookup)</span>
|
||||||
required
|
<input
|
||||||
/>
|
type="text"
|
||||||
</div>
|
className="border rounded px-3 py-2 w-full"
|
||||||
<div className="flex space-x-2">
|
value={city}
|
||||||
<div className="flex-1">
|
onChange={(e) => setCity(e.target.value)}
|
||||||
<label className="block text-sm font-medium">Latitude</label>
|
required
|
||||||
<input
|
/>
|
||||||
type="number"
|
</div>
|
||||||
className="border rounded px-3 py-2 w-full"
|
<div>
|
||||||
value={latitude}
|
<label className="block text-sm font-medium">Country</label>
|
||||||
onChange={e => handleLatLonChange(e.target.value, longitude)}
|
<input
|
||||||
placeholder="e.g. 36.12"
|
type="text"
|
||||||
step="any"
|
className="border rounded px-3 py-2 w-full"
|
||||||
required
|
value={country}
|
||||||
/>
|
onChange={(e) => setCountry(e.target.value)}
|
||||||
</div>
|
required
|
||||||
<div className="flex-1">
|
/>
|
||||||
<label className="block text-sm font-medium">Longitude</label>
|
</div>
|
||||||
<input
|
<div className="flex space-x-2">
|
||||||
type="number"
|
<div className="flex-1">
|
||||||
className="border rounded px-3 py-2 w-full"
|
<label className="block text-sm font-medium">Latitude</label>
|
||||||
value={longitude}
|
<input
|
||||||
onChange={e => handleLatLonChange(latitude, e.target.value)}
|
type="number"
|
||||||
placeholder="e.g. -115.17"
|
className="border rounded px-3 py-2 w-full"
|
||||||
step="any"
|
value={latitude}
|
||||||
required
|
onChange={(e) => handleLatLonChange(e.target.value, longitude)}
|
||||||
/>
|
placeholder="e.g. 36.12"
|
||||||
</div>
|
step="any"
|
||||||
</div>
|
required
|
||||||
<div>
|
/>
|
||||||
<label className="block text-sm font-medium">Depth</label>
|
</div>
|
||||||
<input
|
<div className="flex-1">
|
||||||
type="text"
|
<label className="block text-sm font-medium">Longitude</label>
|
||||||
className="border rounded px-3 py-2 w-full"
|
<input
|
||||||
value={depth}
|
type="number"
|
||||||
onChange={e => setDepth(e.target.value)}
|
className="border rounded px-3 py-2 w-full"
|
||||||
placeholder="e.g. 10 km"
|
value={longitude}
|
||||||
required
|
onChange={(e) => handleLatLonChange(latitude, e.target.value)}
|
||||||
/>
|
placeholder="e.g. -115.17"
|
||||||
</div>
|
step="any"
|
||||||
<button
|
required
|
||||||
type="submit"
|
/>
|
||||||
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 w-full"
|
</div>
|
||||||
disabled={loading}
|
</div>
|
||||||
>
|
<div>
|
||||||
{loading ? "Logging..." : "Log Earthquake"}
|
<label className="block text-sm font-medium">Depth</label>
|
||||||
</button>
|
<input
|
||||||
</form>
|
type="text"
|
||||||
</div>
|
className="border rounded px-3 py-2 w-full"
|
||||||
</div>
|
value={depth}
|
||||||
);
|
onChange={(e) => setDepth(e.target.value)}
|
||||||
|
placeholder="e.g. 10 km"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 w-full" disabled={loading}>
|
||||||
|
{loading ? "Logging..." : "Log Earthquake"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
@ -3,243 +3,233 @@ import { useState, useEffect, useMemo } from "react";
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
export type Earthquake = {
|
export type Earthquake = {
|
||||||
id: string;
|
id: string;
|
||||||
code: string;
|
code: string;
|
||||||
magnitude: number;
|
magnitude: number;
|
||||||
location: string;
|
location: string;
|
||||||
date: string;
|
date: string;
|
||||||
longitude: number;
|
longitude: number;
|
||||||
latitude: number;
|
latitude: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
function formatDate(iso: string) {
|
function formatDate(iso: string) {
|
||||||
return new Date(iso).toLocaleDateString();
|
return new Date(iso).toLocaleDateString();
|
||||||
}
|
}
|
||||||
|
|
||||||
const COLUMNS = [
|
const COLUMNS = [
|
||||||
{ label: "Code", key: "code", className: "font-mono font-bold" },
|
{ label: "Code", key: "code", className: "font-mono font-bold" },
|
||||||
{ label: "Location", key: "location" },
|
{ label: "Location", key: "location" },
|
||||||
{ label: "Magnitude", key: "magnitude", numeric: true },
|
{ label: "Magnitude", key: "magnitude", numeric: true },
|
||||||
{ label: "Date", key: "date" },
|
{ label: "Date", key: "date" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// todo modify slightly
|
||||||
|
|
||||||
export default function EarthquakeSearchModal({
|
export default function EarthquakeSearchModal({
|
||||||
open,
|
open,
|
||||||
onClose,
|
onClose,
|
||||||
onSelect,
|
onSelect,
|
||||||
}: {
|
}: {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onSelect: (eq: Earthquake) => void;
|
onSelect: (eq: Earthquake) => void;
|
||||||
}) {
|
}) {
|
||||||
const [search, setSearch] = useState<string>("");
|
const [search, setSearch] = useState<string>("");
|
||||||
const [results, setResults] = useState<Earthquake[]>([]);
|
const [results, setResults] = useState<Earthquake[]>([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string>("");
|
const [error, setError] = useState<string>("");
|
||||||
|
|
||||||
// Filters per column
|
// Filters per column
|
||||||
const [filters, setFilters] = useState<{ [k: string]: string }>({
|
const [filters, setFilters] = useState<{ [k: string]: string }>({
|
||||||
code: "",
|
code: "",
|
||||||
location: "",
|
location: "",
|
||||||
magnitude: "",
|
magnitude: "",
|
||||||
date: "",
|
date: "",
|
||||||
});
|
});
|
||||||
// Sort state
|
// Sort state
|
||||||
const [sort, setSort] = useState<{ key: keyof Earthquake; dir: "asc" | "desc" } | null>(null);
|
const [sort, setSort] = useState<{ key: keyof Earthquake; dir: "asc" | "desc" } | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open) {
|
if (!open) {
|
||||||
setSearch("");
|
setSearch("");
|
||||||
setResults([]);
|
setResults([]);
|
||||||
setFilters({ code: "", location: "", magnitude: "", date: "" });
|
setFilters({ code: "", location: "", magnitude: "", date: "" });
|
||||||
setError("");
|
setError("");
|
||||||
setSort(null);
|
setSort(null);
|
||||||
}
|
}
|
||||||
}, [open]);
|
}, [open]);
|
||||||
|
|
||||||
const doSearch = async (q = search) => {
|
const doSearch = async (q = search) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setResults([]);
|
setResults([]);
|
||||||
setError("");
|
setError("");
|
||||||
try {
|
try {
|
||||||
const resp = await axios.post("/api/earthquakes/search", { query: q });
|
const resp = await axios.post("/api/earthquakes/search", { query: q });
|
||||||
setResults(resp.data.earthquakes || []);
|
setResults(resp.data.earthquakes || []);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
setError("Failed to search earthquakes.");
|
setError("Failed to search earthquakes.");
|
||||||
}
|
}
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Filter logic
|
// Filter logic
|
||||||
const filteredRows = useMemo(() => {
|
const filteredRows = useMemo(() => {
|
||||||
return results.filter((row) =>
|
return results.filter(
|
||||||
(!filters.code ||
|
(row) =>
|
||||||
row.code.toLowerCase().includes(filters.code.toLowerCase())) &&
|
(!filters.code || row.code.toLowerCase().includes(filters.code.toLowerCase())) &&
|
||||||
(!filters.location ||
|
(!filters.location || (row.location || "").toLowerCase().includes(filters.location.toLowerCase())) &&
|
||||||
(row.location || "").toLowerCase().includes(filters.location.toLowerCase())) &&
|
(!filters.magnitude || String(row.magnitude).startsWith(filters.magnitude)) &&
|
||||||
(!filters.magnitude ||
|
(!filters.date || row.date.slice(0, 10) === filters.date)
|
||||||
String(row.magnitude).startsWith(filters.magnitude)) &&
|
);
|
||||||
(!filters.date ||
|
}, [results, filters]);
|
||||||
row.date.slice(0, 10) === filters.date)
|
|
||||||
);
|
|
||||||
}, [results, filters]);
|
|
||||||
|
|
||||||
// Sort logic
|
// Sort logic
|
||||||
const sortedRows = useMemo(() => {
|
const sortedRows = useMemo(() => {
|
||||||
if (!sort) return filteredRows;
|
if (!sort) return filteredRows;
|
||||||
const sorted = [...filteredRows].sort((a, b) => {
|
const sorted = [...filteredRows].sort((a, b) => {
|
||||||
let valA = a[sort.key];
|
let valA = a[sort.key];
|
||||||
let valB = b[sort.key];
|
let valB = b[sort.key];
|
||||||
if (sort.key === "magnitude") {
|
if (sort.key === "magnitude") {
|
||||||
valA = Number(valA);
|
valA = Number(valA);
|
||||||
valB = Number(valB);
|
valB = Number(valB);
|
||||||
} else if (sort.key === "date") {
|
} else if (sort.key === "date") {
|
||||||
valA = a.date;
|
valA = a.date;
|
||||||
valB = b.date;
|
valB = b.date;
|
||||||
} else {
|
} else {
|
||||||
valA = String(valA || "");
|
valA = String(valA || "");
|
||||||
valB = String(valB || "");
|
valB = String(valB || "");
|
||||||
}
|
}
|
||||||
if (valA < valB) return sort.dir === "asc" ? -1 : 1;
|
if (valA < valB) return sort.dir === "asc" ? -1 : 1;
|
||||||
if (valA > valB) return sort.dir === "asc" ? 1 : -1;
|
if (valA > valB) return sort.dir === "asc" ? 1 : -1;
|
||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
return sorted;
|
return sorted;
|
||||||
}, [filteredRows, sort]);
|
}, [filteredRows, sort]);
|
||||||
|
|
||||||
if (!open) return null;
|
if (!open) return null;
|
||||||
return (
|
return (
|
||||||
<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center animate-fadein">
|
<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center animate-fadein">
|
||||||
<div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl relative">
|
<div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl relative">
|
||||||
<button
|
<button onClick={onClose} className="absolute right-4 top-4 text-2xl text-gray-400 hover:text-red-500 font-bold">
|
||||||
onClick={onClose}
|
×
|
||||||
className="absolute right-4 top-4 text-2xl text-gray-400 hover:text-red-500 font-bold"
|
</button>
|
||||||
>×</button>
|
<h2 className="font-bold text-xl mb-4">Search Earthquakes</h2>
|
||||||
<h2 className="font-bold text-xl mb-4">Search Earthquakes</h2>
|
<form
|
||||||
<form
|
onSubmit={(e) => {
|
||||||
onSubmit={(e) => {
|
e.preventDefault();
|
||||||
e.preventDefault();
|
doSearch();
|
||||||
doSearch();
|
}}
|
||||||
}}
|
className="flex gap-2 mb-3"
|
||||||
className="flex gap-2 mb-3"
|
>
|
||||||
>
|
<input
|
||||||
<input
|
type="text"
|
||||||
type="text"
|
placeholder="e.g. Mexico, EV-7.4-Mexico-00035"
|
||||||
placeholder="e.g. Mexico, EV-7.4-Mexico-00035"
|
value={search}
|
||||||
value={search}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
className="flex-grow px-3 py-2 border rounded"
|
||||||
className="flex-grow px-3 py-2 border rounded"
|
disabled={loading}
|
||||||
disabled={loading}
|
/>
|
||||||
/>
|
<button
|
||||||
<button
|
type="submit"
|
||||||
type="submit"
|
disabled={loading}
|
||||||
disabled={loading}
|
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 min-w-[6.5rem] flex items-center justify-center"
|
||||||
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 min-w-[6.5rem] flex items-center justify-center"
|
>
|
||||||
>
|
{loading ? (
|
||||||
{loading ? (
|
<>
|
||||||
<>
|
<svg className="animate-spin h-4 w-4 mr-2" viewBox="0 0 24 24">
|
||||||
<svg className="animate-spin h-4 w-4 mr-2" viewBox="0 0 24 24">
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
|
||||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
|
</svg>
|
||||||
</svg>
|
Search...
|
||||||
Search...
|
</>
|
||||||
</>
|
) : (
|
||||||
) : (
|
<>Search</>
|
||||||
<>Search</>
|
)}
|
||||||
)}
|
</button>
|
||||||
</button>
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
onClick={() => {
|
||||||
onClick={() => {
|
setSearch("");
|
||||||
setSearch("");
|
setResults([]);
|
||||||
setResults([]);
|
setFilters({ code: "", location: "", magnitude: "", date: "" });
|
||||||
setFilters({ code: "", location: "", magnitude: "", date: "" });
|
}}
|
||||||
}}
|
className="bg-gray-100 text-gray-600 px-3 py-2 rounded hover:bg-gray-200"
|
||||||
className="bg-gray-100 text-gray-600 px-3 py-2 rounded hover:bg-gray-200"
|
>
|
||||||
>
|
Clear
|
||||||
Clear
|
</button>
|
||||||
</button>
|
</form>
|
||||||
</form>
|
{error && <div className="text-red-600 font-medium mb-2">{error}</div>}
|
||||||
{error && (
|
{/* Filter Row */}
|
||||||
<div className="text-red-600 font-medium mb-2">{error}</div>
|
<div className="mb-2">
|
||||||
)}
|
<div className="flex gap-3">
|
||||||
{/* Filter Row */}
|
{COLUMNS.map((col) => (
|
||||||
<div className="mb-2">
|
<input
|
||||||
<div className="flex gap-3">
|
key={col.key}
|
||||||
{COLUMNS.map((col) => (
|
type={col.key === "magnitude" ? "number" : col.key === "date" ? "date" : "text"}
|
||||||
<input
|
value={filters[col.key] || ""}
|
||||||
key={col.key}
|
onChange={(e) => setFilters((f) => ({ ...f, [col.key]: e.target.value }))}
|
||||||
type={col.key === "magnitude" ? "number" : col.key === "date" ? "date" : "text"}
|
className="border border-neutral-200 rounded px-2 py-1 text-xs"
|
||||||
value={filters[col.key] || ""}
|
style={{
|
||||||
onChange={e =>
|
width: col.key === "magnitude" ? 70 : col.key === "date" ? 130 : 120,
|
||||||
setFilters(f => ({ ...f, [col.key]: e.target.value }))
|
}}
|
||||||
}
|
placeholder={`Filter ${col.label}`}
|
||||||
className="border border-neutral-200 rounded px-2 py-1 text-xs"
|
aria-label={`Filter ${col.label}`}
|
||||||
style={{
|
disabled={loading || results.length === 0}
|
||||||
width:
|
/>
|
||||||
col.key === "magnitude"
|
))}
|
||||||
? 70
|
</div>
|
||||||
: col.key === "date"
|
</div>
|
||||||
? 130
|
{/* Results Table */}
|
||||||
: 120,
|
<div className="border rounded shadow-inner bg-white max-h-72 overflow-y-auto">
|
||||||
}}
|
<table className="w-full text-sm">
|
||||||
placeholder={`Filter ${col.label}`}
|
<thead>
|
||||||
aria-label={`Filter ${col.label}`}
|
<tr className="bg-neutral-100 border-b">
|
||||||
disabled={loading || results.length === 0}
|
{COLUMNS.map((col) => (
|
||||||
/>
|
<th
|
||||||
))}
|
key={col.key}
|
||||||
</div>
|
className={`font-semibold px-3 py-2 cursor-pointer select-none text-left`}
|
||||||
</div>
|
onClick={() =>
|
||||||
{/* Results Table */}
|
setSort(
|
||||||
<div className="border rounded shadow-inner bg-white max-h-72 overflow-y-auto">
|
sort && sort.key === col.key
|
||||||
<table className="w-full text-sm">
|
? { key: col.key as keyof Earthquake, dir: sort.dir === "asc" ? "desc" : "asc" }
|
||||||
<thead>
|
: { key: col.key as keyof Earthquake, dir: "asc" }
|
||||||
<tr className="bg-neutral-100 border-b">
|
)
|
||||||
{COLUMNS.map((col) => (
|
}
|
||||||
<th
|
>
|
||||||
key={col.key}
|
{col.label}
|
||||||
className={`font-semibold px-3 py-2 cursor-pointer select-none text-left`}
|
{sort?.key === col.key && (sort.dir === "asc" ? " ↑" : " ↓")}
|
||||||
onClick={() =>
|
</th>
|
||||||
setSort(sort && sort.key === col.key
|
))}
|
||||||
? { key: col.key as keyof Earthquake, dir: sort.dir === "asc" ? "desc" : "asc" }
|
</tr>
|
||||||
: { key: col.key as keyof Earthquake, dir: "asc" })
|
</thead>
|
||||||
}
|
<tbody>
|
||||||
>
|
{sortedRows.length === 0 && !loading && (
|
||||||
{col.label}
|
<tr>
|
||||||
{sort?.key === col.key &&
|
<td colSpan={COLUMNS.length} className="p-3 text-center text-gray-400">
|
||||||
(sort.dir === "asc" ? " ↑" : " ↓")}
|
No results found.
|
||||||
</th>
|
</td>
|
||||||
))}
|
</tr>
|
||||||
</tr>
|
)}
|
||||||
</thead>
|
{sortedRows.map((eq) => (
|
||||||
<tbody>
|
<tr
|
||||||
{sortedRows.length === 0 && !loading && (
|
key={eq.id}
|
||||||
<tr>
|
className="hover:bg-blue-50 cursor-pointer border-b"
|
||||||
<td colSpan={COLUMNS.length} className="p-3 text-center text-gray-400">
|
onClick={() => {
|
||||||
No results found.
|
onSelect(eq);
|
||||||
</td>
|
onClose();
|
||||||
</tr>
|
}}
|
||||||
)}
|
tabIndex={0}
|
||||||
{sortedRows.map(eq => (
|
>
|
||||||
<tr
|
<td className="px-3 py-2 font-mono">{eq.code}</td>
|
||||||
key={eq.id}
|
<td className="px-3 py-2">{eq.location}</td>
|
||||||
className="hover:bg-blue-50 cursor-pointer border-b"
|
<td className="px-3 py-2 font-bold">{eq.magnitude}</td>
|
||||||
onClick={() => {
|
<td className="px-3 py-2">{formatDate(eq.date)}</td>
|
||||||
onSelect(eq);
|
</tr>
|
||||||
onClose();
|
))}
|
||||||
}}
|
</tbody>
|
||||||
tabIndex={0}
|
</table>
|
||||||
>
|
</div>
|
||||||
<td className="px-3 py-2 font-mono">{eq.code}</td>
|
</div>
|
||||||
<td className="px-3 py-2">{eq.location}</td>
|
</div>
|
||||||
<td className="px-3 py-2 font-bold">{eq.magnitude}</td>
|
);
|
||||||
<td className="px-3 py-2">{formatDate(eq.date)}</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user