From 3a4565e120c9deca7d7cc0ea87e4c9f21b099736 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Wed, 3 Sep 2025 17:22:24 -0700 Subject: [PATCH] Add Volcano tabs along with functioning boilerplate component views --- client/src/components/Canvas/Canvas.jsx | 11 +- .../CanvasComponents/CanvasHeaderTabs.jsx | 28 +++++ .../Canvas/CanvasComponents/DialogPopup.jsx | 2 +- client/src/components/Canvas/views/Admin.jsx | 2 +- .../src/components/Canvas/views/Volcano.jsx | 110 +++++++----------- .../VolcanoTabs/OfficialInstitutions.jsx | 22 ++++ .../Canvas/views/VolcanoTabs/PartnerData.jsx | 22 ++++ .../Canvas/views/VolcanoTabs/Reports.jsx | 22 ++++ .../Canvas/views/VolcanoTabs/SocialMedia.jsx | 22 ++++ .../Canvas/views/VolcanoTabs/VolcanoHome.jsx | 70 +++++++++++ client/src/components/Sidebar/Sidebar.jsx | 2 +- client/src/constants/viewKeys.js | 19 ++- 12 files changed, 261 insertions(+), 71 deletions(-) create mode 100644 client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx create mode 100644 client/src/components/Canvas/views/VolcanoTabs/OfficialInstitutions.jsx create mode 100644 client/src/components/Canvas/views/VolcanoTabs/PartnerData.jsx create mode 100644 client/src/components/Canvas/views/VolcanoTabs/Reports.jsx create mode 100644 client/src/components/Canvas/views/VolcanoTabs/SocialMedia.jsx create mode 100644 client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx diff --git a/client/src/components/Canvas/Canvas.jsx b/client/src/components/Canvas/Canvas.jsx index a254f7b..d842f4a 100644 --- a/client/src/components/Canvas/Canvas.jsx +++ b/client/src/components/Canvas/Canvas.jsx @@ -4,13 +4,16 @@ import Volcano from "./views/Volcano"; import Admin from "./views/Admin"; import Account from "./views/Account" import Home from "./views/Home"; -import { DASHBOARD_VIEWS, ADMIN_VIEWS } from "@/constants/viewKeys"; +import { DASHBOARD_VIEWS, VOLCANO_VIEWS, ADMIN_VIEWS } from "@/constants/viewKeys"; import { chakra } from "@chakra-ui/react"; import Personal from "./views/Personal"; import Security from "./views/Security"; export default function Canvas(props) { const { view } = props; + + // Derive values for volcano tabs + const VOLCANO_VALUES = VOLCANO_VIEWS.map(t => typeof t === "string" ? t : t.value) return ( @@ -18,13 +21,17 @@ export default function Canvas(props) { { DASHBOARD_VIEWS.includes(view) && ( )} + {/* Check if view is a tab inside the Volcano Header */} + { VOLCANO_VALUES.includes(view) && ( + + )} {/* Check if view is a tab inside the Admin Header */} { ADMIN_VIEWS.includes(view) && ( )} {view === "global" && } {view === "regional" && } - {view === "volcano" && } + {/* {view === "volcano" && } */} {view === "account" && } {view === "settings" && } {view === "personal" && } diff --git a/client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx b/client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx new file mode 100644 index 0000000..aff5efe --- /dev/null +++ b/client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx @@ -0,0 +1,28 @@ +import { Flex, Tabs } from '@chakra-ui/react' + +// This component needs to be nested inside of a Tabs.Root to work properly +export function CanvasHeaderTabs({ view, onChangeView, tabs }) { + return ( + + + {tabs.map(({ value, label }) => + + { label } + + )} + + + ) +} \ No newline at end of file diff --git a/client/src/components/Canvas/CanvasComponents/DialogPopup.jsx b/client/src/components/Canvas/CanvasComponents/DialogPopup.jsx index f7e90cf..9957dc9 100644 --- a/client/src/components/Canvas/CanvasComponents/DialogPopup.jsx +++ b/client/src/components/Canvas/CanvasComponents/DialogPopup.jsx @@ -20,7 +20,7 @@ export default function DialogPopup({dialog}) { - + diff --git a/client/src/components/Canvas/views/Admin.jsx b/client/src/components/Canvas/views/Admin.jsx index b332fc6..f159e22 100644 --- a/client/src/components/Canvas/views/Admin.jsx +++ b/client/src/components/Canvas/views/Admin.jsx @@ -1,4 +1,4 @@ -import { Box, Text, Flex, Tabs, HStack } from '@chakra-ui/react'; +import { Flex, Tabs, HStack } from '@chakra-ui/react'; import { MEDataEntry } from './AdminTabs/MEDataEntry'; import { ProjectCollector } from './AdminTabs/ProjectCollector'; import { NASApplication } from './AdminTabs/NASApplication'; diff --git a/client/src/components/Canvas/views/Volcano.jsx b/client/src/components/Canvas/views/Volcano.jsx index 985b7e6..ec015fc 100644 --- a/client/src/components/Canvas/views/Volcano.jsx +++ b/client/src/components/Canvas/views/Volcano.jsx @@ -1,70 +1,50 @@ -import { Box, Text, Heading, DataList, HStack } from '@chakra-ui/react'; -import React from "react"; +import { Box, Text, Heading, DataList, HStack, Tabs } from '@chakra-ui/react'; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; +import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs'; +import { VOLCANO_VIEWS } from '@/constants/viewKeys'; +import { VolcanoHome } from './VolcanoTabs/VolcanoHome'; +import { PartnerData } from './VolcanoTabs/PartnerData'; +import { Reports } from './VolcanoTabs/Reports'; +import { OfficialInstitutions } from './VolcanoTabs/OfficialInstitutions'; +import { SocialMedia } from './VolcanoTabs/SocialMedia'; +import { SearchBar } from "../CanvasComponents/SearchBar"; +import { SettingsButton } from "../CanvasComponents/SettingsButton"; -export default function Volcano() { - const position = [46.2, -122.18]; // Mt. St. Helens - const stats = [ - { label: "Elevation", value: "2,539 (m) 8,330 (ft)", helpText: "Volcano Elevation" }, - { label: "Volcano Type", value: "Stratovolcano", helpText: "Volcano Type" }, - { label: "Composition", value: "Basalt to Ryodacite", helpText: "Volcano Composition" }, - { label: "Recent Eruptions", value: "1980, 2004-2008", helpText: "Last Eruption" }, - { label: "Threat Potential", value: "Very High", helpText: "Threat Potential" }, - - ] - - const historyText = ` - Mount St. Helens, located in the Cascade Range of Washington State, is one of the most - active and well-known volcanoes in the United States. It famously erupted on May 18, 1980, - in one of the most significant volcanic events in U.S. history, which caused widespread - devastation and loss of life. The eruption reduced the mountain’s summit and created a large - crater. Subsequent dome-building eruptions continued through the 2000s, and the volcano - remains closely monitored today. - `; - +export default function Volcano({ view, onChangeView }) { return ( - - - Mount St. Helens - United States CVO - + onChangeView(e.value)} + variant="line" + width="100%" + height="100%" + lazyMount + // Prevent navigation away from 'My Dashboard' while in Edit mode + onValueChange={(e) => { + const nextView = e.value; + onChangeView(nextView); + }} + > + {/* HEADER */} + - - - - - - CVO — Home of the volcanoligists - - - - - - - - - {stats.map((item) => ( - - - {item.label} - - - {item.value} - - - ))} - - - - - Historical Summary - - { historyText} - - - - + {/* CANVAS */} + + + + + + + + + + + + + + + + ); -} \ No newline at end of file +} diff --git a/client/src/components/Canvas/views/VolcanoTabs/OfficialInstitutions.jsx b/client/src/components/Canvas/views/VolcanoTabs/OfficialInstitutions.jsx new file mode 100644 index 0000000..295b8a9 --- /dev/null +++ b/client/src/components/Canvas/views/VolcanoTabs/OfficialInstitutions.jsx @@ -0,0 +1,22 @@ +import { Box, Text } from "@chakra-ui/react"; + +export function OfficialInstitutions() { + return( + + + Official Institutions dashboard coming soon. + + + ); +} \ No newline at end of file diff --git a/client/src/components/Canvas/views/VolcanoTabs/PartnerData.jsx b/client/src/components/Canvas/views/VolcanoTabs/PartnerData.jsx new file mode 100644 index 0000000..f700bd2 --- /dev/null +++ b/client/src/components/Canvas/views/VolcanoTabs/PartnerData.jsx @@ -0,0 +1,22 @@ +import { Box, Text } from "@chakra-ui/react"; + +export function PartnerData() { + return( + + + Partner Data dashboard coming soon. + + + ); +} \ No newline at end of file diff --git a/client/src/components/Canvas/views/VolcanoTabs/Reports.jsx b/client/src/components/Canvas/views/VolcanoTabs/Reports.jsx new file mode 100644 index 0000000..64a6c59 --- /dev/null +++ b/client/src/components/Canvas/views/VolcanoTabs/Reports.jsx @@ -0,0 +1,22 @@ +import { Box, Text } from "@chakra-ui/react"; + +export function Reports() { + return( + + + Reports dashboard coming soon. + + + ); +} \ No newline at end of file diff --git a/client/src/components/Canvas/views/VolcanoTabs/SocialMedia.jsx b/client/src/components/Canvas/views/VolcanoTabs/SocialMedia.jsx new file mode 100644 index 0000000..e9a3e7d --- /dev/null +++ b/client/src/components/Canvas/views/VolcanoTabs/SocialMedia.jsx @@ -0,0 +1,22 @@ +import { Box, Text } from "@chakra-ui/react"; + +export function SocialMedia() { + return( + + + Social Media dashboard coming soon. + + + ); +} \ No newline at end of file diff --git a/client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx b/client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx new file mode 100644 index 0000000..62bf539 --- /dev/null +++ b/client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx @@ -0,0 +1,70 @@ +import { Box, Text, Heading, DataList, HStack } from '@chakra-ui/react'; +import React from "react"; +import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; + +export function VolcanoHome() { + const position = [46.2, -122.18]; // Mt. St. Helens + const stats = [ + { label: "Elevation", value: "2,539 (m) 8,330 (ft)", helpText: "Volcano Elevation" }, + { label: "Volcano Type", value: "Stratovolcano", helpText: "Volcano Type" }, + { label: "Composition", value: "Basalt to Ryodacite", helpText: "Volcano Composition" }, + { label: "Recent Eruptions", value: "1980, 2004-2008", helpText: "Last Eruption" }, + { label: "Threat Potential", value: "Very High", helpText: "Threat Potential" }, + + ] + + const historyText = ` + Mount St. Helens, located in the Cascade Range of Washington State, is one of the most + active and well-known volcanoes in the United States. It famously erupted on May 18, 1980, + in one of the most significant volcanic events in U.S. history, which caused widespread + devastation and loss of life. The eruption reduced the mountain’s summit and created a large + crater. Subsequent dome-building eruptions continued through the 2000s, and the volcano + remains closely monitored today. + `; + + return ( + + + Mount St. Helens - United States CVO + + + + + + + + CVO — Home of the volcanoligists + + + + + + + + + {stats.map((item) => ( + + + {item.label} + + + {item.value} + + + ))} + + + + + Historical Summary + + { historyText} + + + + + ); +} \ No newline at end of file diff --git a/client/src/components/Sidebar/Sidebar.jsx b/client/src/components/Sidebar/Sidebar.jsx index c2b151c..4829f91 100644 --- a/client/src/components/Sidebar/Sidebar.jsx +++ b/client/src/components/Sidebar/Sidebar.jsx @@ -31,7 +31,7 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) { {icon: FaHome, name: "Home", view: "mydashboard"}, {icon: FaGlobeAmericas, name: "Global Map", view: "global"}, {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"}, - {icon: FaVolcano, name: "Volcano", view: "volcano"}, + {icon: FaVolcano, name: "Volcano", view: "volcanohome"}, {icon: HiUsers, name: "Admin", view: "medataentry"} ]; }, [view]); diff --git a/client/src/constants/viewKeys.js b/client/src/constants/viewKeys.js index 1a19c2f..5398c90 100644 --- a/client/src/constants/viewKeys.js +++ b/client/src/constants/viewKeys.js @@ -1,8 +1,18 @@ // Main views called from Home tab -> Canvas navigation header export const DASHBOARD_VIEWS = ["mydashboard", "gas", "seismic", "remote", "daily"] +// Volcano views called from Volcano tab -> Canvas navigation header +// export const VOLCANO_VIEWS = ["volcanohome", "partner", "reports", "official", "social"] +export const VOLCANO_VIEWS = [ + { value: "volcanohome", label: "Volcano Home" }, + { value: "partner", label: "Partner Data" }, + { value: "reports", label: "Reports" }, + { value: "official", label: "Official Institutions" }, + { value: "social", label: "Social Media" }, +] + // Admin views called from Admin tab -> Canvas navigation header -export const ADMIN_VIEWS = ["admin", "medataentry", "projectcollector", "nasapplication", "ivans"] +export const ADMIN_VIEWS = ["medataentry", "projectcollector", "nasapplication", "ivans"] // Sub views called from inside Home.jsx export const VIEW_LABELS = { @@ -14,6 +24,13 @@ export const VIEW_LABELS = { global: "Global Map", regional: "Regional Map", volcano: "Volcano", + + // Volcano navigation tabs + volcanohome: "Volcano Home", + partner: "Partner Data", + reports: "Reports", + official: "Official Institutions", + social: "Social Media", // Admin navigation tabs admin: "Admin",