vkuchenik
aad3a95507
+ alert level now has entry for country and volcano name + widget now has a submit button + now has a refresh button that only appears when something is submitted + adjusted number of columns in grid layout + other small sizing adjustments in canvas
65 lines
2.3 KiB
React
65 lines
2.3 KiB
React
import Widget from "./Widget";
|
|
import { Stack, Box, Field, Input, Button, Text } from "@chakra-ui/react";
|
|
import { useForm } from "react-hook-form";
|
|
import { useState } from "react";
|
|
|
|
export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
|
|
const { register, handleSubmit } = useForm();
|
|
const onSubmit = (data) => {
|
|
console.log(data);
|
|
setIsSubmit(true);
|
|
}
|
|
const [isSubmit, setIsSubmit] = useState(false);
|
|
|
|
// Prop Forwarding
|
|
const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
|
|
return (
|
|
<Widget title="Alert Level" {...widgetProps}>
|
|
{!isSubmit ? (
|
|
<Box
|
|
as="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
width="100%"
|
|
height="100%"
|
|
pt={1}
|
|
pl={3}
|
|
pr={3}
|
|
display="flex"
|
|
flexDir="column"
|
|
gap="3"
|
|
>
|
|
<Field.Root orientation="horizontal" >
|
|
<Stack direction="column" gap="3" width="100%">
|
|
<Stack direction="row" display="flex" flexShrink={1} spacing={4} align="center" width="100%">
|
|
<Field.Label whiteSpace="nowrap" fontWeight="bold">Country Name</Field.Label>
|
|
<Input {...register("countryname")} placeholder="Enter country name"/>
|
|
</Stack>
|
|
<Stack direction="row" display="flex" spacing={4} align="center" width="100%">
|
|
<Field.Label display="flex" whiteSpace="nowrap" fontWeight="bold">Volcano Name</Field.Label>
|
|
<Input {...register("countryname")} placeholder="Enter volcano name"/>
|
|
</Stack>
|
|
</Stack>
|
|
</Field.Root>
|
|
<Button type="submit" size="sm" onClick={() => setIsSubmit(true)}>Submit</Button>
|
|
</Box>
|
|
):(
|
|
<Box p={1} mt={1} ml="auto" mr="auto" width="200px">
|
|
<Box
|
|
bg="bg"
|
|
shadow="md"
|
|
borderRadius="md"
|
|
p={8}
|
|
width="200px"
|
|
height="10px"
|
|
textAlign="center"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Text fontsize="2xl" fontWeight="bold" color="gray.700">Alert Level Data Coming Soon.</Text>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Widget>
|
|
);
|
|
} |