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

Add Volcano view DataList, historical summary, and map

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-08-06 17:10:33 -07:00
parent 6c4fae9b82
commit c91216d214
1 changed files with 52 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/views/Volcano.jsx
+52 -41
View File
@@ -1,4 +1,4 @@
import { Box, Text, Heading, DataList } from '@chakra-ui/react'; import { Box, Text, Heading, DataList, HStack } from '@chakra-ui/react';
import React from "react"; import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
@@ -12,48 +12,59 @@ export default function Volcano() {
{ label: "Threat Potential", value: "Very High", helpText: "Threat Potential" }, { 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 ( return (
<Box height="550px" width="100%"> <Box width="100%" px={6} py={4}>
<Heading as="h1" pb={3}> <Heading textAlign="center" mb={6} size="xl" fontWeight="bold">
Mt. St. Helens - United States CVO Mount St. Helens - United States CVO
</Heading> </Heading>
<MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
<TileLayer <Box height="550px" borderRadius="md" overflow="hidden" boxShadow="md" mb={6}>
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" <MapContainer center={position} zoom={10} style={{ height: "100%", width: "100%" }}>
attribution='&copy; OpenStreetMap contributors' <TileLayer
/> url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
<Marker position={position}> attribution='&copy; OpenStreetMap contributors'
<Popup> />
CVO — Home of the volcanoligists <Marker position={position}>
</Popup> <Popup>
</Marker> CVO — Home of the volcanoligists
</MapContainer> </Popup>
<DataList.Root orientation="horizontal"> </Marker>
{stats.map((item) => ( </MapContainer>
<DataList.Item key={item.label}> </Box>
<DataList.ItemLabel>{item.label}</DataList.ItemLabel>
<DataList.ItemValue>{item.value}</DataList.ItemValue> <HStack align="start" spacing={10} mt={4}>
</DataList.Item> <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">
</DataList.Root> {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> </Box>
// <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">
// Volcano Canvas coming soon!
// </Text>
// </Box>
// </Box>
); );
} }