chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Volcano tabs along with functioning boilerplate component views

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-09-03 17:22:24 -07:00
parent ff783f59a2
commit 3a4565e120
12 changed files with 261 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/Canvas.jsx
+9 -2
View File
@@ -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 (
<chakra.div width="100%" height="100%">
@@ -18,13 +21,17 @@ export default function Canvas(props) {
{ DASHBOARD_VIEWS.includes(view) && (
<Home {...props}/>
)}
{/* Check if view is a tab inside the Volcano Header */}
{ VOLCANO_VALUES.includes(view) && (
<Volcano {...props}/>
)}
{/* Check if view is a tab inside the Admin Header */}
{ ADMIN_VIEWS.includes(view) && (
<Admin {...props}/>
)}
{view === "global" && <GlobalMap />}
{view === "regional" && <RegionalMap />}
{view === "volcano" && <Volcano />}
{/* {view === "volcano" && <Volcano />} */}
{view === "account" && <Account />}
{view === "settings" && <Personal />}
{view === "personal" && <Personal />}
client/src/components/Canvas/CanvasComponents/CanvasHeaderTabs.jsx
+28
View File
@@ -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 (
<Flex
as="header"
position="sticky"
top="0"
zIndex="dropdown" // zIndex: 1100
bg="base200"
px={5}
pt={3}
pb={2}
align="center"
justify="space-between"
width="100%"
>
<Tabs.List>
{tabs.map(({ value, label }) =>
<Tabs.Trigger key={value} value={value} fontSize="lg">
{ label }
</Tabs.Trigger>
)}
</Tabs.List>
</Flex>
)
}
client/src/components/Canvas/CanvasComponents/DialogPopup.jsx
+1 -1
View File
@@ -20,7 +20,7 @@ export default function DialogPopup({dialog}) {
<Dialog.ActionTrigger asChild>
<Button variant="outline">No</Button>
</Dialog.ActionTrigger>
<Button bg="tomato">Yes</Button>
<Button bg="red.500">Yes</Button>
</Dialog.Footer>
<Dialog.CloseTrigger asChild>
<CloseButton size="sm" />
client/src/components/Canvas/views/Admin.jsx
+1 -1
View File
@@ -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';
client/src/components/Canvas/views/Volcano.jsx
+45 -65
View File
@@ -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 (
<Box width="100%" px={6} py={4}>
<Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
Mount St. Helens - United States CVO
</Heading>
<Tabs.Root
key={view}
value={view}
// onValueChange={(e) => 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 */}
<CanvasHeaderTabs tabs={VOLCANO_VIEWS} />
<Box height="550px" borderRadius="md" overflow="hidden" boxShadow="md" mb={6}>
<MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; OpenStreetMap contributors'
/>
<Marker position={position}>
<Popup>
CVO — Home of the volcanoligists
</Popup>
</Marker>
</MapContainer>
</Box>
<HStack align="start" spacing={10} mt={4}>
<Box width="300px" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
<DataList.Root orientation="horizontal">
{stats.map((item) => (
<DataList.Item key={item.label}>
<DataList.ItemLabel>
{item.label}
</DataList.ItemLabel>
<DataList.ItemValue>
{item.value}
</DataList.ItemValue>
</DataList.Item>
))}
</DataList.Root>
</Box>
<Box flex="1" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
<Heading textAlign="center" pb={2}>Historical Summary</Heading>
<Text>
{ historyText}
</Text>
</Box>
</HStack>
</Box>
{/* CANVAS */}
<Tabs.Content value="volcanohome">
<VolcanoHome />
</Tabs.Content>
<Tabs.Content value="partner">
<PartnerData />
</Tabs.Content>
<Tabs.Content value="reports">
<Reports />
</Tabs.Content>
<Tabs.Content value="official">
<OfficialInstitutions />
</Tabs.Content>
<Tabs.Content value="social">
<SocialMedia />
</Tabs.Content>
</Tabs.Root>
);
}
}
client/src/components/Canvas/views/VolcanoTabs/OfficialInstitutions.jsx
+22
View File
@@ -0,0 +1,22 @@
import { Box, Text } from "@chakra-ui/react";
export function OfficialInstitutions() {
return(
<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
<Box
bg="bg"
shadow="md"
borderRadius="md"
p={8}
width="600px"
height="100px"
textAlign="center"
display="flex"
alignItems="center"
justifyContent="center"
>
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Official Institutions dashboard coming soon.</Text>
</Box>
</Box>
);
}
client/src/components/Canvas/views/VolcanoTabs/PartnerData.jsx
+22
View File
@@ -0,0 +1,22 @@
import { Box, Text } from "@chakra-ui/react";
export function PartnerData() {
return(
<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
<Box
bg="bg"
shadow="md"
borderRadius="md"
p={8}
width="600px"
height="100px"
textAlign="center"
display="flex"
alignItems="center"
justifyContent="center"
>
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Partner Data dashboard coming soon.</Text>
</Box>
</Box>
);
}
client/src/components/Canvas/views/VolcanoTabs/Reports.jsx
+22
View File
@@ -0,0 +1,22 @@
import { Box, Text } from "@chakra-ui/react";
export function Reports() {
return(
<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
<Box
bg="bg"
shadow="md"
borderRadius="md"
p={8}
width="600px"
height="100px"
textAlign="center"
display="flex"
alignItems="center"
justifyContent="center"
>
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Reports dashboard coming soon.</Text>
</Box>
</Box>
);
}
client/src/components/Canvas/views/VolcanoTabs/SocialMedia.jsx
+22
View File
@@ -0,0 +1,22 @@
import { Box, Text } from "@chakra-ui/react";
export function SocialMedia() {
return(
<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
<Box
bg="bg"
shadow="md"
borderRadius="md"
p={8}
width="600px"
height="100px"
textAlign="center"
display="flex"
alignItems="center"
justifyContent="center"
>
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Social Media dashboard coming soon.</Text>
</Box>
</Box>
);
}
client/src/components/Canvas/views/VolcanoTabs/VolcanoHome.jsx
+70
View File
@@ -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 (
<Box width="100%" px={6} py={4}>
<Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
Mount St. Helens - United States CVO
</Heading>
<Box height="550px" borderRadius="md" overflow="hidden" boxShadow="md" mb={6}>
<MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; OpenStreetMap contributors'
/>
<Marker position={position}>
<Popup>
CVO — Home of the volcanoligists
</Popup>
</Marker>
</MapContainer>
</Box>
<HStack align="start" spacing={10} mt={4}>
<Box width="300px" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
<DataList.Root orientation="horizontal">
{stats.map((item) => (
<DataList.Item key={item.label}>
<DataList.ItemLabel>
{item.label}
</DataList.ItemLabel>
<DataList.ItemValue>
{item.value}
</DataList.ItemValue>
</DataList.Item>
))}
</DataList.Root>
</Box>
<Box flex="1" height="200px" overflowY="auto" p={4} border="1px solid" borderColor="gray.200" borderRadius="md" bg="gray.50" boxShadow="sm">
<Heading textAlign="center" pb={2}>Historical Summary</Heading>
<Text>
{ historyText}
</Text>
</Box>
</HStack>
</Box>
);
}
client/src/components/Sidebar/Sidebar.jsx
+1 -1
View File
@@ -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]);
client/src/constants/viewKeys.js
+18 -1
View File
@@ -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",