thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added close earthquake log and search modals on click outside

Browse Source
This commit is contained in:
Tim Howitz 2025-06-01 23:02:51 +01:00
parent 128517b388
commit dd650c6ba6
4 changed files with 448 additions and 459 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/profile/page.tsx
View File

@ -229,6 +229,7 @@ export default function Profile() {
}
setIsDeleting(true);
try {
// todo add delete user route
const res = await axios.post(
"/api/delete-user",
{ userId: user!.id },

1
src/app/warehouse/page.tsx
View File

@ -95,6 +95,7 @@ function LogModal({ onClose }: { onClose: () => void }) {
}
setIsSubmitting(true);
try {
// todo!! add log api route
await new Promise((resolve) => setTimeout(resolve, 500)); // Simulated API call
alert(`Logged ${name} to storage: ${storageLocation}`);
onClose();

85
src/components/EarthquakeLogModal.tsx
View File

@ -1,5 +1,5 @@
"use client";
import { useState } from "react";
import { FormEvent, useState, useRef } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
@ -7,10 +7,18 @@ const typeOptions = [
{ value: "volcanic", label: "Volcanic" },
{ value: "tectonic", label: "Tectonic" },
{ value: "collapse", label: "Collapse" },
{ value: "explosion", label: "Explosion" }
{ value: "explosion", label: "Explosion" },
];
export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
export default function EarthquakeLogModal({
open,
onClose,
onSuccess,
}: {
open: boolean;
onClose: () => void;
onSuccess: () => void;
}) {
const [date, setDate] = useState<Date | null>(new Date());
const [magnitude, setMagnitude] = useState("");
const [type, setType] = useState(typeOptions[0].value);
@ -21,15 +29,14 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
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) {
setLatitude(lat);
setLongitude(lon);
if (/^-?\d+(\.\d+)?$/.test(lat) && /^-?\d+(\.\d+)?$/.test(lon)) {
try {
const resp = await fetch(
`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=10`
);
const resp = await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=10`);
if (resp.ok) {
const data = await resp.json();
setCity(
@ -49,7 +56,7 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
}
}
async function handleSubmit(e) {
async function handleSubmit(e: FormEvent) {
e.preventDefault();
setLoading(true);
if (!date || !magnitude || !type || !city || !country || !latitude || !longitude || !depth) {
@ -69,8 +76,8 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
country: country.trim(),
latitude: parseFloat(latitude),
longitude: parseFloat(longitude),
depth
})
depth,
}),
});
if (res.ok) {
const result = await res.json();
@ -88,13 +95,19 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
}
}
function handleOutsideClick(e: React.MouseEvent<HTMLDivElement>) {
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
onClose();
}
}
if (!open) return null;
// Success popup overlay
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">
<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center" onClick={handleOutsideClick}>
<div className="bg-white rounded-lg px-8 py-8 max-w-md w-full relative shadow-lg" ref={modalRef}>
<button
onClick={() => {
setSuccessCode(null);
@ -103,12 +116,10 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
className="absolute right-4 top-4 text-xl text-gray-400 hover:text-gray-700"
aria-label="Close"
>
&times;
×
</button>
<div className="text-center">
<h2 className="text-xl font-semibold mb-3">
Thank you for logging an earthquake!
</h2>
<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>
@ -118,13 +129,10 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
}
return (
<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center">
<div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full relative">
<button
onClick={onClose}
className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg"
>
&times;
<div className="fixed z-50 inset-0 bg-black/40 flex items-center justify-center" onClick={handleOutsideClick}>
<div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full relative" ref={modalRef}>
<button onClick={onClose} className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg">
×
</button>
<h2 className="font-bold text-xl mb-4">Log Earthquake</h2>
<form onSubmit={handleSubmit} className="space-y-3">
@ -132,7 +140,7 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
<label className="block text-sm font-medium">Date</label>
<DatePicker
selected={date}
onChange={date => setDate(date)}
onChange={(date) => setDate(date)}
className="border rounded px-3 py-2 w-full"
dateFormat="yyyy-MM-dd"
maxDate={new Date()}
@ -151,7 +159,7 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
max="10"
step="0.1"
value={magnitude}
onChange={e => {
onChange={(e) => {
const val = e.target.value;
if (parseFloat(val) > 10) return;
setMagnitude(val);
@ -161,13 +169,8 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
</div>
<div>
<label className="block text-sm font-medium">Type</label>
<select
className="border rounded px-3 py-2 w-full"
value={type}
onChange={e => setType(e.target.value)}
required
>
{typeOptions.map(opt => (
<select className="border rounded px-3 py-2 w-full" value={type} onChange={(e) => setType(e.target.value)} required>
{typeOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
@ -176,14 +179,12 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
</div>
<div>
<label className="block text-sm font-medium">City/Area</label>
<span className="block text-xs text-gray-400">
(Use Lat/Lon then press Enter for reverse lookup)
</span>
<span className="block text-xs text-gray-400">(Use Lat/Lon then press Enter for reverse lookup)</span>
<input
type="text"
className="border rounded px-3 py-2 w-full"
value={city}
onChange={e => setCity(e.target.value)}
onChange={(e) => setCity(e.target.value)}
required
/>
</div>
@ -193,7 +194,7 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
type="text"
className="border rounded px-3 py-2 w-full"
value={country}
onChange={e => setCountry(e.target.value)}
onChange={(e) => setCountry(e.target.value)}
required
/>
</div>
@ -204,7 +205,7 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
type="number"
className="border rounded px-3 py-2 w-full"
value={latitude}
onChange={e => handleLatLonChange(e.target.value, longitude)}
onChange={(e) => handleLatLonChange(e.target.value, longitude)}
placeholder="e.g. 36.12"
step="any"
required
@ -216,7 +217,7 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
type="number"
className="border rounded px-3 py-2 w-full"
value={longitude}
onChange={e => handleLatLonChange(latitude, e.target.value)}
onChange={(e) => handleLatLonChange(latitude, e.target.value)}
placeholder="e.g. -115.17"
step="any"
required
@ -229,16 +230,12 @@ export default function EarthquakeLogModal({ open, onClose, onSuccess }) {
type="text"
className="border rounded px-3 py-2 w-full"
value={depth}
onChange={e => setDepth(e.target.value)}
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}
>
<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>

50
src/components/EarthquakeSearchModal.tsx
View File

@ -23,6 +23,8 @@ const COLUMNS = [
{ label: "Date", key: "date" },
];
// todo modify slightly
export default function EarthquakeSearchModal({
open,
onClose,
@ -72,15 +74,12 @@ export default function EarthquakeSearchModal({
// Filter logic
const filteredRows = useMemo(() => {
return results.filter((row) =>
(!filters.code ||
row.code.toLowerCase().includes(filters.code.toLowerCase())) &&
(!filters.location ||
(row.location || "").toLowerCase().includes(filters.location.toLowerCase())) &&
(!filters.magnitude ||
String(row.magnitude).startsWith(filters.magnitude)) &&
(!filters.date ||
row.date.slice(0, 10) === filters.date)
return results.filter(
(row) =>
(!filters.code || row.code.toLowerCase().includes(filters.code.toLowerCase())) &&
(!filters.location || (row.location || "").toLowerCase().includes(filters.location.toLowerCase())) &&
(!filters.magnitude || String(row.magnitude).startsWith(filters.magnitude)) &&
(!filters.date || row.date.slice(0, 10) === filters.date)
);
}, [results, filters]);
@ -111,10 +110,9 @@ export default function EarthquakeSearchModal({
return (
<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">
<button
onClick={onClose}
className="absolute right-4 top-4 text-2xl text-gray-400 hover:text-red-500 font-bold"
>&times;</button>
<button onClick={onClose} className="absolute right-4 top-4 text-2xl text-gray-400 hover:text-red-500 font-bold">
&times;
</button>
<h2 className="font-bold text-xl mb-4">Search Earthquakes</h2>
<form
onSubmit={(e) => {
@ -160,9 +158,7 @@ export default function EarthquakeSearchModal({
Clear
</button>
</form>
{error && (
<div className="text-red-600 font-medium mb-2">{error}</div>
)}
{error && <div className="text-red-600 font-medium mb-2">{error}</div>}
{/* Filter Row */}
<div className="mb-2">
<div className="flex gap-3">
@ -171,17 +167,10 @@ export default function EarthquakeSearchModal({
key={col.key}
type={col.key === "magnitude" ? "number" : col.key === "date" ? "date" : "text"}
value={filters[col.key] || ""}
onChange={e =>
setFilters(f => ({ ...f, [col.key]: e.target.value }))
}
onChange={(e) => setFilters((f) => ({ ...f, [col.key]: e.target.value }))}
className="border border-neutral-200 rounded px-2 py-1 text-xs"
style={{
width:
col.key === "magnitude"
? 70
: col.key === "date"
? 130
: 120,
width: col.key === "magnitude" ? 70 : col.key === "date" ? 130 : 120,
}}
placeholder={`Filter ${col.label}`}
aria-label={`Filter ${col.label}`}
@ -200,14 +189,15 @@ export default function EarthquakeSearchModal({
key={col.key}
className={`font-semibold px-3 py-2 cursor-pointer select-none text-left`}
onClick={() =>
setSort(sort && sort.key === col.key
setSort(
sort && sort.key === col.key
? { key: col.key as keyof Earthquake, dir: sort.dir === "asc" ? "desc" : "asc" }
: { key: col.key as keyof Earthquake, dir: "asc" })
: { key: col.key as keyof Earthquake, dir: "asc" }
)
}
>
{col.label}
{sort?.key === col.key &&
(sort.dir === "asc" ? " ↑" : " ↓")}
{sort?.key === col.key && (sort.dir === "asc" ? " ↑" : " ↓")}
</th>
))}
</tr>
@ -220,7 +210,7 @@ export default function EarthquakeSearchModal({
</td>
</tr>
)}
{sortedRows.map(eq => (
{sortedRows.map((eq) => (
<tr
key={eq.id}
className="hover:bg-blue-50 cursor-pointer border-b"