Compare commits
2 Commits
6d25e72292
...
6cd95fa0e4
| Author | SHA1 | Date | |
|---|---|---|---|
| 6cd95fa0e4 | |||
| f88f783de9 |
@ -6,134 +6,117 @@ import Sidebar from "@components/Sidebar";
|
||||
import { createPoster } from "@utils/axiosHelpers";
|
||||
import { Earthquake } from "@prismaclient";
|
||||
import { getRelativeDate } from "@utils/formatters";
|
||||
import GeologicalEvent from "@appTypes/Event";
|
||||
import GeologicalEvent from "@appTypes/GeologicalEvent";
|
||||
import EarthquakeSearchModal from "@components/EarthquakeSearchModal";
|
||||
import EarthquakeLogModal from "@components/EarthquakeLogModal"; // If you use a separate log modal
|
||||
import { useStoreState } from "@hooks/store";
|
||||
|
||||
// Optional: "No Access Modal" - as in your original
|
||||
function NoAccessModal({ open, onClose }) {
|
||||
if (!open) return null;
|
||||
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-8 max-w-xs w-full text-center relative">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg"
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<h2 className="font-bold text-xl mb-4">Access Denied</h2>
|
||||
<p className="text-gray-600 mb-3">
|
||||
Sorry, you do not have access rights to Log an Earthquake. Please Log in here, or contact an Admin if you believe this is a mistake
|
||||
</p>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2"
|
||||
>OK</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
if (!open) return null;
|
||||
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-8 max-w-xs w-full text-center relative">
|
||||
<button onClick={onClose} className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg" aria-label="Close">
|
||||
×
|
||||
</button>
|
||||
<h2 className="font-bold text-xl mb-4">Access Denied</h2>
|
||||
<p className="text-gray-600 mb-3">
|
||||
Sorry, you do not have access rights to Log an Earthquake. Please Log in here, or contact an Admin if you believe this
|
||||
is a mistake
|
||||
</p>
|
||||
<button onClick={onClose} className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2">
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default function Earthquakes() {
|
||||
const [selectedEventId, setSelectedEventId] = useState("");
|
||||
const [hoveredEventId, setHoveredEventId] = useState("");
|
||||
const [searchModalOpen, setSearchModalOpen] = useState(false);
|
||||
const [logModalOpen, setLogModalOpen] = useState(false);
|
||||
const [noAccessModalOpen, setNoAccessModalOpen] = useState(false);
|
||||
const [selectedEventId, setSelectedEventId] = useState("");
|
||||
const [hoveredEventId, setHoveredEventId] = useState("");
|
||||
const [searchModalOpen, setSearchModalOpen] = useState(false);
|
||||
const [logModalOpen, setLogModalOpen] = useState(false);
|
||||
const [noAccessModalOpen, setNoAccessModalOpen] = useState(false);
|
||||
|
||||
// Your user/role logic
|
||||
const user = useStoreState((state) => state.user);
|
||||
const role: "GUEST" | "SCIENTIST" | "ADMIN" = user?.role ?? "GUEST";
|
||||
const canLogEarthquake = role === "SCIENTIST" || role === "ADMIN";
|
||||
// Your user/role logic
|
||||
const user = useStoreState((state) => state.user);
|
||||
const role: "GUEST" | "SCIENTIST" | "ADMIN" = user?.role ?? "GUEST";
|
||||
const canLogEarthquake = role === "SCIENTIST" || role === "ADMIN";
|
||||
|
||||
// Fetch earthquakes (10 days recent)
|
||||
const { data, error, isLoading, mutate } = useSWR(
|
||||
"/api/earthquakes",
|
||||
createPoster({ rangeDaysPrev: 10 })
|
||||
);
|
||||
// Fetch earthquakes (10 days recent)
|
||||
const { data, error, isLoading, mutate } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 10 }));
|
||||
|
||||
// Shape for Map/Sidebar
|
||||
const earthquakeEvents = useMemo(
|
||||
() =>
|
||||
data && data.earthquakes
|
||||
? data.earthquakes
|
||||
.map(
|
||||
(x: Earthquake): GeologicalEvent => ({
|
||||
id: x.code,
|
||||
title: `Earthquake in ${x.location || (x.code && x.code.split("-")[2])}`,
|
||||
magnitude: x.magnitude,
|
||||
longitude: x.longitude,
|
||||
latitude: x.latitude,
|
||||
text1: "",
|
||||
text2: getRelativeDate(x.date),
|
||||
date: x.date,
|
||||
})
|
||||
)
|
||||
.sort(
|
||||
(a: GeologicalEvent, b: GeologicalEvent) =>
|
||||
new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||
)
|
||||
: [],
|
||||
[data]
|
||||
);
|
||||
// Shape for Map/Sidebar
|
||||
const earthquakeEvents = useMemo(
|
||||
() =>
|
||||
data && data.earthquakes
|
||||
? data.earthquakes
|
||||
.map(
|
||||
(x: Earthquake): GeologicalEvent => ({
|
||||
id: x.code,
|
||||
title: `Earthquake in ${x.location || (x.code && x.code.split("-")[2])}`,
|
||||
magnitude: x.magnitude,
|
||||
longitude: x.longitude,
|
||||
latitude: x.latitude,
|
||||
text1: "",
|
||||
text2: getRelativeDate(x.date),
|
||||
date: x.date,
|
||||
code: x.code,
|
||||
})
|
||||
)
|
||||
.sort((a: GeologicalEvent, b: GeologicalEvent) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
: [],
|
||||
[data]
|
||||
);
|
||||
|
||||
// Handler for log
|
||||
const handleLogClick = () => {
|
||||
if (canLogEarthquake) {
|
||||
setLogModalOpen(true);
|
||||
} else {
|
||||
setNoAccessModalOpen(true);
|
||||
}
|
||||
};
|
||||
// Handler for log
|
||||
const handleLogClick = () => {
|
||||
if (canLogEarthquake) {
|
||||
setLogModalOpen(true);
|
||||
} else {
|
||||
setNoAccessModalOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-3.5rem)] w-full overflow-hidden">
|
||||
<div className="flex-grow h-full">
|
||||
<Map
|
||||
events={earthquakeEvents}
|
||||
selectedEventId={selectedEventId}
|
||||
setSelectedEventId={setSelectedEventId}
|
||||
hoveredEventId={hoveredEventId}
|
||||
setHoveredEventId={setHoveredEventId}
|
||||
mapType="Earthquakes"
|
||||
/>
|
||||
</div>
|
||||
<Sidebar
|
||||
logTitle="Log an Earthquake"
|
||||
logSubtitle="Record new earthquakes - time/date, location, magnitude, observatory and scientists"
|
||||
recentsTitle="Recent Earthquakes"
|
||||
events={earthquakeEvents}
|
||||
selectedEventId={selectedEventId}
|
||||
setSelectedEventId={setSelectedEventId}
|
||||
hoveredEventId={hoveredEventId}
|
||||
setHoveredEventId={setHoveredEventId}
|
||||
button1Name="Log an Earthquake"
|
||||
button2Name="Search Earthquakes"
|
||||
onButton1Click={handleLogClick}
|
||||
onButton2Click={() => setSearchModalOpen(true)}
|
||||
button1Disabled={!canLogEarthquake}
|
||||
/>
|
||||
{/* ---- SEARCH MODAL ---- */}
|
||||
<EarthquakeSearchModal
|
||||
open={searchModalOpen}
|
||||
onClose={() => setSearchModalOpen(false)}
|
||||
onSelect={(eq) => setSelectedEventId(eq.code)}
|
||||
/>
|
||||
{/* ---- LOGGING MODAL ---- */}
|
||||
<EarthquakeLogModal
|
||||
open={logModalOpen}
|
||||
onClose={() => setLogModalOpen(false)}
|
||||
onSuccess={() => mutate()}
|
||||
/>
|
||||
{/* ---- NO ACCESS ---- */}
|
||||
<NoAccessModal
|
||||
open={noAccessModalOpen}
|
||||
onClose={() => setNoAccessModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-3.5rem)] w-full overflow-hidden">
|
||||
<div className="flex-grow h-full">
|
||||
<Map
|
||||
events={earthquakeEvents}
|
||||
selectedEventId={selectedEventId}
|
||||
setSelectedEventId={setSelectedEventId}
|
||||
hoveredEventId={hoveredEventId}
|
||||
setHoveredEventId={setHoveredEventId}
|
||||
mapType="Earthquakes"
|
||||
/>
|
||||
</div>
|
||||
<Sidebar
|
||||
logTitle="Log an Earthquake"
|
||||
logSubtitle="Record new earthquakes - time/date, location, magnitude, observatory and scientists"
|
||||
recentsTitle="Recent Earthquakes"
|
||||
events={earthquakeEvents}
|
||||
selectedEventId={selectedEventId}
|
||||
setSelectedEventId={setSelectedEventId}
|
||||
hoveredEventId={hoveredEventId}
|
||||
setHoveredEventId={setHoveredEventId}
|
||||
button1Name="Log an Earthquake"
|
||||
button2Name="Search Earthquakes"
|
||||
onButton1Click={handleLogClick}
|
||||
onButton2Click={() => setSearchModalOpen(true)}
|
||||
button1Disabled={!canLogEarthquake}
|
||||
/>
|
||||
{/* ---- SEARCH MODAL ---- */}
|
||||
<EarthquakeSearchModal
|
||||
open={searchModalOpen}
|
||||
onClose={() => setSearchModalOpen(false)}
|
||||
onSelect={(eq) => setSelectedEventId(eq.code)}
|
||||
/>
|
||||
{/* ---- LOGGING MODAL ---- */}
|
||||
<EarthquakeLogModal open={logModalOpen} onClose={() => setLogModalOpen(false)} onSuccess={() => mutate()} />
|
||||
{/* ---- NO ACCESS ---- */}
|
||||
<NoAccessModal open={noAccessModalOpen} onClose={() => setNoAccessModalOpen(false)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
@ -15,216 +15,216 @@
|
||||
} */
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* Increase specificity and use !important where necessary */
|
||||
.mapboxgl-popup .mapboxgl-popup-content {
|
||||
@apply rounded-xl p-4 px-5 drop-shadow-lg border border-neutral-300 max-w-xs !important;
|
||||
@apply rounded-xl p-4 px-5 drop-shadow-lg border border-neutral-300 max-w-xs !important;
|
||||
}
|
||||
|
||||
/* Hide the popup tip */
|
||||
.mapboxgl-popup .mapboxgl-popup-tip {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Child elements */
|
||||
.mapboxgl-popup-content h3 {
|
||||
@apply text-sm font-medium text-neutral-800 !important;
|
||||
@apply text-sm font-medium text-neutral-800 !important;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content p {
|
||||
@apply text-xs text-neutral-600 !important;
|
||||
@apply text-xs text-neutral-600 !important;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content p+p {
|
||||
@apply text-neutral-500 !important;
|
||||
.mapboxgl-popup-content p + p {
|
||||
@apply text-neutral-500 !important;
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
/* default styles if needed */
|
||||
/* default styles if needed */
|
||||
}
|
||||
|
||||
.icon-link:hover,
|
||||
.icon-link:focus {
|
||||
background-color: #16424b;
|
||||
background-color: #16424b;
|
||||
}
|
||||
|
||||
.icon-link:hover h3,
|
||||
.icon-link:focus h3,
|
||||
.icon-link:hover p,
|
||||
.icon-link:focus p {
|
||||
color: #fff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.icon-link:hover h3,
|
||||
.icon-link:hover p,
|
||||
.icon-link:focus h3,
|
||||
.icon-link:focus p {
|
||||
color: #111;
|
||||
/* or black */
|
||||
color: #111;
|
||||
/* or black */
|
||||
}
|
||||
|
||||
/* ---- LAVA FLOOD OVERLAY ---- */
|
||||
.lava-flood-overlay {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: -100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
transition: top 0.9s cubic-bezier(.6, 0, .2, 1);
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: -100vh;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
transition: top 0.9s cubic-bezier(0.6, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.lava-flood-overlay.lava-active {
|
||||
top: 0;
|
||||
transition: top 0.33s cubic-bezier(.6, 0, .2, 1);
|
||||
top: 0;
|
||||
transition: top 0.33s cubic-bezier(0.6, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.lava-flood-overlay img,
|
||||
.lava-gradient {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
filter: brightness(1.15) saturate(1.8) drop-shadow(0 0 80px #ff5500);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
filter: brightness(1.15) saturate(1.8) drop-shadow(0 0 80px #ff5500);
|
||||
}
|
||||
|
||||
/* ---- INSANE SCREEN SHAKE (LinkedIn) ---- */
|
||||
@keyframes supershake {
|
||||
0% {
|
||||
transform: translate(0, 0) rotate(0);
|
||||
}
|
||||
0% {
|
||||
transform: translate(0, 0) rotate(0);
|
||||
}
|
||||
|
||||
5% {
|
||||
transform: translate(-20px, 5px) rotate(-2deg);
|
||||
}
|
||||
5% {
|
||||
transform: translate(-20px, 5px) rotate(-2deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translate(18px, -8px) rotate(2deg);
|
||||
}
|
||||
10% {
|
||||
transform: translate(18px, -8px) rotate(2deg);
|
||||
}
|
||||
|
||||
15% {
|
||||
transform: translate(-22px, 8px) rotate(-4deg);
|
||||
}
|
||||
15% {
|
||||
transform: translate(-22px, 8px) rotate(-4deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translate(22px, -2px) rotate(4deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(22px, -2px) rotate(4deg);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(-18px, 12px) rotate(-2deg);
|
||||
}
|
||||
25% {
|
||||
transform: translate(-18px, 12px) rotate(-2deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate(18px, -10px) rotate(2deg);
|
||||
}
|
||||
30% {
|
||||
transform: translate(18px, -10px) rotate(2deg);
|
||||
}
|
||||
|
||||
35% {
|
||||
transform: translate(-22px, 14px) rotate(-4deg);
|
||||
}
|
||||
35% {
|
||||
transform: translate(-22px, 14px) rotate(-4deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translate(22px, -12px) rotate(4deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(22px, -12px) rotate(4deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translate(-18px, 8px) rotate(-2deg);
|
||||
}
|
||||
45% {
|
||||
transform: translate(-18px, 8px) rotate(-2deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(18px, -14px) rotate(4deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(18px, -14px) rotate(4deg);
|
||||
}
|
||||
|
||||
55% {
|
||||
transform: translate(-22px, 12px) rotate(-4deg);
|
||||
}
|
||||
55% {
|
||||
transform: translate(-22px, 12px) rotate(-4deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate(22px, -8px) rotate(2deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(22px, -8px) rotate(2deg);
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: translate(-18px, 10px) rotate(-2deg);
|
||||
}
|
||||
65% {
|
||||
transform: translate(-18px, 10px) rotate(-2deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate(18px, -12px) rotate(2deg);
|
||||
}
|
||||
70% {
|
||||
transform: translate(18px, -12px) rotate(2deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-22px, 14px) rotate(-4deg);
|
||||
}
|
||||
75% {
|
||||
transform: translate(-22px, 14px) rotate(-4deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate(22px, -10px) rotate(4deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(22px, -10px) rotate(4deg);
|
||||
}
|
||||
|
||||
85% {
|
||||
transform: translate(-18px, 8px) rotate(-2deg);
|
||||
}
|
||||
85% {
|
||||
transform: translate(-18px, 8px) rotate(-2deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate(18px, -14px) rotate(2deg);
|
||||
}
|
||||
90% {
|
||||
transform: translate(18px, -14px) rotate(2deg);
|
||||
}
|
||||
|
||||
95% {
|
||||
transform: translate(-20px, 5px) rotate(-2deg);
|
||||
}
|
||||
95% {
|
||||
transform: translate(-20px, 5px) rotate(-2deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 0) rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.shake-screen {
|
||||
animation: supershake 1s cubic-bezier(.36, .07, .19, .97) both;
|
||||
animation: supershake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||
}
|
||||
|
||||
/* ---- CRACK + COLLAPSE OVERLAY (X icon) ---- */
|
||||
.crack-overlay {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
transition: transform 1.1s cubic-bezier(.65, .05, .45, 1), opacity 0.5s;
|
||||
will-change: transform, opacity;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.5s;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.crack {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.crack1 {
|
||||
width: 35vw;
|
||||
left: 10vw;
|
||||
top: 22vh;
|
||||
opacity: 0.8;
|
||||
width: 35vw;
|
||||
left: 10vw;
|
||||
top: 22vh;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.crack2 {
|
||||
width: 32vw;
|
||||
right: 12vw;
|
||||
top: 42vh;
|
||||
opacity: 0.7;
|
||||
transform: rotate(-8deg);
|
||||
width: 32vw;
|
||||
right: 12vw;
|
||||
top: 42vh;
|
||||
opacity: 0.7;
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
|
||||
/* Add more .crackN classes if using more cracks */
|
||||
|
||||
/* Collapse falling effect */
|
||||
.crack-collapse {
|
||||
transform: perspective(900px) rotateX(75deg) translateY(80vh) scale(0.9);
|
||||
opacity: 0;
|
||||
transition: transform 1.1s cubic-bezier(.65, .05, .45, 1), opacity 0.6s;
|
||||
}
|
||||
transform: perspective(900px) rotateX(75deg) translateY(80vh) scale(0.9);
|
||||
opacity: 0;
|
||||
transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.6s;
|
||||
}
|
||||
|
||||
@ -7,110 +7,94 @@ import LogObservatoryModal from "@/components/LogObservatoryModal"; // Adjust if
|
||||
import { fetcher } from "@utils/axiosHelpers";
|
||||
import { Observatory } from "@prismaclient";
|
||||
import { getRelativeDate } from "@utils/formatters";
|
||||
import GeologicalEvent from "@appTypes/Event";
|
||||
import GeologicalEvent from "@appTypes/GeologicalEvent";
|
||||
import { useStoreState } from "@hooks/store";
|
||||
|
||||
function NoAccessModal({ open, onClose }) {
|
||||
if (!open) return null;
|
||||
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-8 max-w-xs w-full text-center relative">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg"
|
||||
aria-label="Close"
|
||||
>×</button>
|
||||
<h2 className="font-bold text-xl mb-4">No Access</h2>
|
||||
<p className="text-gray-600 mb-3">Sorry, You do not have access rights, please log in or contact an Admin.</p>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2"
|
||||
>OK</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
if (!open) return null;
|
||||
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-8 max-w-xs w-full text-center relative">
|
||||
<button onClick={onClose} className="absolute right-4 top-4 text-gray-500 hover:text-black text-lg" aria-label="Close">
|
||||
×
|
||||
</button>
|
||||
<h2 className="font-bold text-xl mb-4">No Access</h2>
|
||||
<p className="text-gray-600 mb-3">Sorry, You do not have access rights, please log in or contact an Admin.</p>
|
||||
<button onClick={onClose} className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 mt-2">
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Observatories() {
|
||||
const [selectedEventId, setSelectedEventId] = useState("");
|
||||
const [hoveredEventId, setHoveredEventId] = useState("");
|
||||
const [logModalOpen, setLogModalOpen] = useState(false);
|
||||
const [noAccessModalOpen, setNoAccessModalOpen] = useState(false);
|
||||
|
||||
const user = useStoreState((state) => state.user);
|
||||
const role: "GUEST" | "SCIENTIST" | "ADMIN" = user?.role ?? "GUEST";
|
||||
const canLogObservatory = role === "SCIENTIST" || role === "ADMIN";
|
||||
const [selectedEventId, setSelectedEventId] = useState("");
|
||||
const [hoveredEventId, setHoveredEventId] = useState("");
|
||||
const [logModalOpen, setLogModalOpen] = useState(false);
|
||||
const [noAccessModalOpen, setNoAccessModalOpen] = useState(false);
|
||||
|
||||
const { data, error, isLoading, mutate } = useSWR(
|
||||
"/api/observatories",
|
||||
fetcher
|
||||
);
|
||||
const user = useStoreState((state) => state.user);
|
||||
const role: "GUEST" | "SCIENTIST" | "ADMIN" = user?.role ?? "GUEST";
|
||||
const canLogObservatory = role === "SCIENTIST" || role === "ADMIN";
|
||||
|
||||
const observatoryEvents = useMemo(
|
||||
() =>
|
||||
data && data.observatories
|
||||
? data.observatories
|
||||
.map((x: Observatory): GeologicalEvent & { isFunctional: boolean } => ({
|
||||
id: x.id.toString(),
|
||||
title: ` ${x.name}`,
|
||||
longitude: x.longitude,
|
||||
latitude: x.latitude,
|
||||
isFunctional: x.isFunctional, // <-- include this!
|
||||
text1: "",
|
||||
text2: getRelativeDate(x.dateEstablished),
|
||||
date: x.dateEstablished,
|
||||
}))
|
||||
.sort(
|
||||
(a: GeologicalEvent, b: GeologicalEvent) =>
|
||||
new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||
)
|
||||
: [],
|
||||
[data]
|
||||
);
|
||||
const { data, error, isLoading, mutate } = useSWR("/api/observatories", fetcher);
|
||||
|
||||
const handleLogClick = () => {
|
||||
if (canLogObservatory) {
|
||||
setLogModalOpen(true);
|
||||
} else {
|
||||
setNoAccessModalOpen(true);
|
||||
}
|
||||
};
|
||||
const observatoryEvents = useMemo(
|
||||
() =>
|
||||
data && data.observatories
|
||||
? data.observatories
|
||||
.map((x: Observatory): GeologicalEvent & { isFunctional: boolean } => ({
|
||||
id: x.id.toString(),
|
||||
title: ` ${x.name}`,
|
||||
longitude: x.longitude,
|
||||
latitude: x.latitude,
|
||||
isFunctional: x.isFunctional, // <-- include this!
|
||||
text1: "",
|
||||
text2: getRelativeDate(x.dateEstablished),
|
||||
date: x.dateEstablished,
|
||||
}))
|
||||
.sort((a: GeologicalEvent, b: GeologicalEvent) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
: [],
|
||||
[data]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-3.5rem)] w-full overflow-hidden">
|
||||
<div className="flex-grow h-full">
|
||||
<Map
|
||||
events={observatoryEvents}
|
||||
selectedEventId={selectedEventId}
|
||||
setSelectedEventId={setSelectedEventId}
|
||||
hoveredEventId={hoveredEventId}
|
||||
setHoveredEventId={setHoveredEventId}
|
||||
mapType="observatories"
|
||||
/>
|
||||
</div>
|
||||
<Sidebar
|
||||
logTitle="Observatory Mapping"
|
||||
logSubtitle="Record and search observatories - time/date set-up, location, scientists and recent earthquakes"
|
||||
recentsTitle="New Observatories"
|
||||
events={observatoryEvents}
|
||||
selectedEventId={selectedEventId}
|
||||
setSelectedEventId={setSelectedEventId}
|
||||
hoveredEventId={hoveredEventId}
|
||||
setHoveredEventId={setHoveredEventId}
|
||||
button1Name="Log a New Observatory"
|
||||
button2Name="Search Observatories"
|
||||
onButton1Click={handleLogClick}
|
||||
button1Disabled={!canLogObservatory}
|
||||
/>
|
||||
<LogObservatoryModal
|
||||
open={logModalOpen}
|
||||
onClose={() => setLogModalOpen(false)}
|
||||
onSuccess={() => mutate()}
|
||||
/>
|
||||
<NoAccessModal
|
||||
open={noAccessModalOpen}
|
||||
onClose={() => setNoAccessModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const handleLogClick = () => {
|
||||
if (canLogObservatory) {
|
||||
setLogModalOpen(true);
|
||||
} else {
|
||||
setNoAccessModalOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-3.5rem)] w-full overflow-hidden">
|
||||
<div className="flex-grow h-full">
|
||||
<Map
|
||||
events={observatoryEvents}
|
||||
selectedEventId={selectedEventId}
|
||||
setSelectedEventId={setSelectedEventId}
|
||||
hoveredEventId={hoveredEventId}
|
||||
setHoveredEventId={setHoveredEventId}
|
||||
mapType="observatories"
|
||||
/>
|
||||
</div>
|
||||
<Sidebar
|
||||
logTitle="Observatory Mapping"
|
||||
logSubtitle="Record and search observatories - time/date set-up, location, scientists and recent earthquakes"
|
||||
recentsTitle="New Observatories"
|
||||
events={observatoryEvents}
|
||||
selectedEventId={selectedEventId}
|
||||
setSelectedEventId={setSelectedEventId}
|
||||
hoveredEventId={hoveredEventId}
|
||||
setHoveredEventId={setHoveredEventId}
|
||||
button1Name="Log a New Observatory"
|
||||
button2Name="Search Observatories"
|
||||
onButton1Click={handleLogClick}
|
||||
button1Disabled={!canLogObservatory}
|
||||
/>
|
||||
<LogObservatoryModal open={logModalOpen} onClose={() => setLogModalOpen(false)} onSuccess={() => mutate()} />
|
||||
<NoAccessModal open={noAccessModalOpen} onClose={() => setNoAccessModalOpen(false)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import Link from "next/link";
|
||||
import React, { Dispatch, SetStateAction, useState } from "react";
|
||||
import { TbHexagon } from "react-icons/tb";
|
||||
|
||||
import Event from "@appTypes/Event";
|
||||
import Event from "@appTypes/GeologicalEvent";
|
||||
import getMagnitudeColor from "@utils/getMagnitudeColour";
|
||||
|
||||
function setButton1(button1Name) {
|
||||
|
||||
@ -5,7 +5,7 @@ import React, { Dispatch, SetStateAction, useCallback, useEffect, useRef, useSta
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { GiObservatory } from "react-icons/gi";
|
||||
|
||||
import GeologicalEvent from "@appTypes/Event";
|
||||
import GeologicalEvent from "@appTypes/GeologicalEvent";
|
||||
import getMagnitudeColor from "@utils/getMagnitudeColour";
|
||||
|
||||
interface MapComponentProps {
|
||||
@ -111,12 +111,12 @@ function MapComponent({
|
||||
}
|
||||
|
||||
const observatoryElement = document.createElement("div");
|
||||
const root = createRoot(observatoryElement);
|
||||
root.render(
|
||||
<GiObservatory
|
||||
className={`text-2xl drop-shadow-lg ${event.isFunctional === false ? "text-gray-400" : "text-blue-600"}`}
|
||||
/>
|
||||
);
|
||||
const root = createRoot(observatoryElement);
|
||||
root.render(
|
||||
<GiObservatory
|
||||
className={`text-2xl drop-shadow-lg ${event.isFunctional === false ? "text-gray-400" : "text-blue-600"}`}
|
||||
/>
|
||||
);
|
||||
|
||||
quakeElement.appendChild(pulseElement);
|
||||
quakeElement.appendChild(dotElement);
|
||||
@ -128,6 +128,7 @@ function MapComponent({
|
||||
const popup = new mapboxgl.Popup({ offset: 25, closeButton: false, anchor: "bottom" }).setHTML(`
|
||||
<div>
|
||||
<h3>${event.title}</h3>
|
||||
${mapType !== "observatories" ? `<p style="margin-bottom:3px;">${event.code}` : null}
|
||||
${mapType === "observatories" ? `<p>${event.text1}</p>` : `<p>Magnitude: ${event.magnitude}</p>`}
|
||||
<p>${event.text2}</p>
|
||||
</div>
|
||||
|
||||
@ -1,124 +1,128 @@
|
||||
import React, { Dispatch, SetStateAction, useEffect, useRef } from "react";
|
||||
import { TbHexagon } from "react-icons/tb";
|
||||
import GeologicalEvent from "@appTypes/Event";
|
||||
import GeologicalEvent from "@appTypes/GeologicalEvent";
|
||||
import getMagnitudeColor from "@utils/getMagnitudeColour";
|
||||
interface SidebarProps {
|
||||
logTitle: string;
|
||||
logSubtitle: string;
|
||||
recentsTitle: string;
|
||||
events: GeologicalEvent[];
|
||||
selectedEventId: GeologicalEvent["id"];
|
||||
setSelectedEventId: Dispatch<SetStateAction<string>>;
|
||||
hoveredEventId: GeologicalEvent["id"];
|
||||
setHoveredEventId: Dispatch<SetStateAction<string>>;
|
||||
button1Name: string;
|
||||
button2Name: string;
|
||||
onButton2Click?: () => void;
|
||||
onButton1Click?: () => void;
|
||||
button1Disabled?: boolean;
|
||||
logTitle: string;
|
||||
logSubtitle: string;
|
||||
recentsTitle: string;
|
||||
events: GeologicalEvent[];
|
||||
selectedEventId: GeologicalEvent["id"];
|
||||
setSelectedEventId: Dispatch<SetStateAction<string>>;
|
||||
hoveredEventId: GeologicalEvent["id"];
|
||||
setHoveredEventId: Dispatch<SetStateAction<string>>;
|
||||
button1Name: string;
|
||||
button2Name: string;
|
||||
onButton2Click?: () => void;
|
||||
onButton1Click?: () => void;
|
||||
button1Disabled?: boolean;
|
||||
}
|
||||
|
||||
function MagnitudeNumber({ magnitude }: { magnitude: number }) {
|
||||
const magnitudeStr = magnitude.toFixed(1);
|
||||
const [whole, decimal] = magnitudeStr.split(".");
|
||||
return (
|
||||
<div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
|
||||
<TbHexagon size={40} className="drop-shadow-sm" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex items-baseline font-mono font-bold tracking-tight">
|
||||
<span className="text-xl -mr-1">{whole}</span>
|
||||
<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
|
||||
<span className="text-xs -mr-[1px]">{decimal}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const magnitudeStr = magnitude.toFixed(1);
|
||||
const [whole, decimal] = magnitudeStr.split(".");
|
||||
return (
|
||||
<div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
|
||||
<TbHexagon size={40} className="drop-shadow-sm" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex items-baseline font-mono font-bold tracking-tight">
|
||||
<span className="text-xl -mr-1">{whole}</span>
|
||||
<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
|
||||
<span className="text-xs -mr-[1px]">{decimal}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Sidebar({
|
||||
logTitle,
|
||||
logSubtitle,
|
||||
recentsTitle,
|
||||
events,
|
||||
selectedEventId,
|
||||
setSelectedEventId,
|
||||
hoveredEventId,
|
||||
setHoveredEventId,
|
||||
button1Name,
|
||||
button2Name,
|
||||
onButton2Click,
|
||||
onButton1Click,
|
||||
button1Disabled = false,
|
||||
logTitle,
|
||||
logSubtitle,
|
||||
recentsTitle,
|
||||
events,
|
||||
selectedEventId,
|
||||
setSelectedEventId,
|
||||
hoveredEventId,
|
||||
setHoveredEventId,
|
||||
button1Name,
|
||||
button2Name,
|
||||
onButton2Click,
|
||||
onButton1Click,
|
||||
button1Disabled = false,
|
||||
}: SidebarProps) {
|
||||
const eventsContainerRef = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
if (selectedEventId && eventsContainerRef.current) {
|
||||
const selectedEventElement = eventsContainerRef.current.querySelector(`[data-event-id="${selectedEventId}"]`);
|
||||
if (selectedEventElement) {
|
||||
selectedEventElement.scrollIntoView({
|
||||
block: "center",
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [selectedEventId]);
|
||||
const eventsContainerRef = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
if (selectedEventId && eventsContainerRef.current) {
|
||||
const selectedEventElement = eventsContainerRef.current.querySelector(`[data-event-id="${selectedEventId}"]`);
|
||||
if (selectedEventElement) {
|
||||
selectedEventElement.scrollIntoView({
|
||||
block: "center",
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [selectedEventId]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full w-80 bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg">
|
||||
<div className="py-6 flex flex-col h-full">
|
||||
<div className="px-6 pb-8 border-b border-neutral-200">
|
||||
<h2 className="text-2xl font-bold text-neutral-800 mb-2">{logTitle}</h2>
|
||||
<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
|
||||
<button
|
||||
className={`mt-4 w-full py-2 px-4 rounded-lg transition-colors duration-200 font-medium
|
||||
${button1Disabled
|
||||
? "bg-gray-300 text-gray-500 cursor-not-allowed"
|
||||
: "bg-blue-600 hover:bg-blue-700 text-white"
|
||||
}`}
|
||||
onClick={onButton1Click}
|
||||
type="button"
|
||||
|
||||
tabIndex={button1Disabled ? -1 : 0}
|
||||
aria-disabled={button1Disabled ? "true" : "false"}
|
||||
>
|
||||
{button1Name}
|
||||
</button>
|
||||
<button
|
||||
className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium"
|
||||
onClick={onButton2Click}
|
||||
type="button"
|
||||
>
|
||||
{button2Name}
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-6 pt-6">
|
||||
<h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
|
||||
</div>
|
||||
<div className="flex-1 px-6 overflow-y-auto" ref={eventsContainerRef}>
|
||||
<div className="space-y-3">
|
||||
{events.map((event) => (
|
||||
<button
|
||||
key={event.id}
|
||||
data-event-id={event.id}
|
||||
className={`w-full border ${hoveredEventId === event.id ? "bg-neutral-100" : "bg-white"} ${
|
||||
selectedEventId === event.id ? "border-neutral-800" : "border-neutral-200"
|
||||
} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 shadow-sm text-left`}
|
||||
onClick={() => {
|
||||
setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : ""));
|
||||
}}
|
||||
onMouseEnter={() => setHoveredEventId(event.id)}
|
||||
onMouseLeave={() => setHoveredEventId("")}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-neutral-800 line-clamp-1">{event.title}</p>
|
||||
<p className="text-xs text-neutral-500 mt-1 line-clamp-1">{event.text2}</p>
|
||||
</div>
|
||||
{event.magnitude ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-col h-full w-80 bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg">
|
||||
<div className="py-6 flex flex-col h-full">
|
||||
<div className="px-6 pb-8 border-b border-neutral-200">
|
||||
<h2 className="text-2xl font-bold text-neutral-800 mb-2">{logTitle}</h2>
|
||||
<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
|
||||
<button
|
||||
className={`mt-4 w-full py-2 px-4 rounded-lg transition-colors duration-200 font-medium
|
||||
${
|
||||
button1Disabled
|
||||
? "bg-gray-300 text-gray-500 cursor-not-allowed"
|
||||
: "bg-blue-600 hover:bg-blue-700 text-white"
|
||||
}`}
|
||||
onClick={onButton1Click}
|
||||
type="button"
|
||||
tabIndex={button1Disabled ? -1 : 0}
|
||||
aria-disabled={button1Disabled ? "true" : "false"}
|
||||
>
|
||||
{button1Name}
|
||||
</button>
|
||||
<button
|
||||
className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium"
|
||||
onClick={onButton2Click}
|
||||
type="button"
|
||||
>
|
||||
{button2Name}
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-6 pt-6">
|
||||
<h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
|
||||
</div>
|
||||
<div className="flex-1 px-6 overflow-y-auto" ref={eventsContainerRef}>
|
||||
<div className="space-y-3">
|
||||
{events.map((event) => (
|
||||
<button
|
||||
key={event.id}
|
||||
data-event-id={event.id}
|
||||
className={`w-full border ${
|
||||
selectedEventId === event.id
|
||||
? "border-neutral-500 border-2 shadow-md"
|
||||
: hoveredEventId === event.id
|
||||
? "bg-neutral-100 shadow-sm"
|
||||
: "bg-white border-neutral-200 shadow-sm"
|
||||
} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 text-left`}
|
||||
onClick={() => {
|
||||
setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : ""));
|
||||
}}
|
||||
onMouseEnter={() => setHoveredEventId(event.id)}
|
||||
onMouseLeave={() => setHoveredEventId("")}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-neutral-800 line-clamp-1">{event.title}</p>
|
||||
<p className="text-xs text-neutral-500 mt-1 line-clamp-1">{event.text2}</p>
|
||||
</div>
|
||||
{event.magnitude ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,8 +3,10 @@ interface GeologicalEvent {
|
||||
date: Date;
|
||||
title: string;
|
||||
magnitude?: number;
|
||||
code?: string;
|
||||
longitude: number;
|
||||
latitude: number;
|
||||
isFunctional?: boolean;
|
||||
text1: string;
|
||||
text2: string;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user