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

refactor, further cleaning up sidebar, home, mydashboard, alertlevelwidget, widget, and more misc.

Browse Source
This commit is contained in:
vkuchenik
2026-06-05 11:27:43 -07:00
parent 0715fa61ab
commit a0708fa8ea
12 changed files with 214 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx
+32 -34
View File
@@ -1,62 +1,60 @@
import Widget from "./Widget";
import { Stack, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
import { Fieldset, NativeSelect, For, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { useState } from "react";
import { Asterisk } from 'lucide-react';
export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
const { register, handleSubmit, reset, formState: {errors} } = useForm();
const [isSubmit, setIsSubmit] = useState(false);
const onSubmit = (data) => {
console.log("data: ", data);
if (data.volcanoname === '') {
return null;
}
setIsSubmit(true);
reset();
}
const [isSubmit, setIsSubmit] = useState(false);
// Prop Forwarding
const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit }
return (
<Widget title="Alert Level" {...widgetProps}>
<Widget title="Alert Level" {...widgetProps} >
{!isSubmit ? (
// DISPLAYING INPUT FIElDS AND LABELS
<Box
as="form"
onSubmit={handleSubmit(onSubmit)}
width="100%"
height="100%"
pt={1}
pl={3}
pr={3}
p={3}
display="flex"
flexDir="column"
gap="10"
>
<Field.Root orientation="horizontal">
<Stack direction="column" gap="3" width="100%">
<Stack direction="row" width="100%">
<Field.Label whiteSpace="nowrap" fontWeight="bold">Country Name</Field.Label>
{/* place select drop down menu here instead of asking for input */}
<Input {...register("countryname")} placeholder="Enter country name"/>
</Stack>
<Flex position="relative" dir="column" gap="0.5" width="100%">
<Stack direction="row" width="100%">
<Field.Label display="flex" whiteSpace="nowrap" fontWeight="bold">
Volcano Name <Asterisk color="tomato" />
</Field.Label>
<Input
border={errors.volcanoname ? "2px solid" : undefined}
borderColor={errors.volcanoname ? "tomato" : undefined}
{...register("volcanoname", { required: 'This field is required.' })}
placeholder="Enter volcano name"/>
</Stack>
{errors.volcanoname && <Box cursor="default" userSelect="none" position="absolute" top="40px" left="8.5rem" style={{ color: 'tomato' }}>{errors.volcanoname.message}</Box>}
</Flex>
</Stack>
</Field.Root>
<Button type="submit" size="sm">Submit</Button>
<Fieldset.Root size="md" maxW="md">
<Fieldset.Content>
<Field.Root>
<Field.Label fontWeight="semibold">Volcano</Field.Label>
<Input name="volcanoname" />
</Field.Root>
<Field.Root>
<Field.Label fontWeight="semibold">Country</Field.Label>
<NativeSelect.Root>
<NativeSelect.Field name="country">
<For each={["United Kingdom", "Canada", "United States"]}>
{(item) => (
<option key={item} value={item}>
{item}
</option>
)}
</For>
</NativeSelect.Field>
<NativeSelect.Indicator />
</NativeSelect.Root>
</Field.Root>
</Fieldset.Content>
<Button type="submit" size="sm">Submit</Button>
</Fieldset.Root>
</Box>
):(
// DISPLAYING ALERT LEVEL DATA
client/src/components/Canvas/CanvasComponents/MapSettingsButton.jsx
+1 -2
View File
@@ -1,7 +1,6 @@
import { Box, Checkbox, Separator , CloseButton, Text, chakra, Field, IconButton, Icon, Input, Fieldset, Flex } from "@chakra-ui/react";
import { useState } from "react";
import { ChevronDown } from 'lucide-react';
import { ChevronUp } from 'lucide-react';
import { ChevronDown, ChevronUp, Settings } from 'lucide-react';
export default function MapSettingsButton() {
const [open, setOpen] = useState(false);
client/src/components/Canvas/CanvasComponents/SearchBar.jsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { Input, InputGroup } from "@chakra-ui/react";
import { Search } from 'lucide-react';
export function SearchBar({ placeholder="Enter a volcano to search", size="sm", width="210px" }) {
export function SearchBar({ placeholder, size, width, ...rest }) {
return (
<InputGroup startElement={<Search />}>
<Input
client/src/components/Canvas/CanvasComponents/Widget.jsx
+16 -15
View File
@@ -9,23 +9,24 @@ export default function Widget(props) {
const styles = recipe();
return (
<>
<chakra.div css={styles.header} cursor={isEditable ? "move":"default"}>
<Flex flexDirection="row" justifyContent="space-between" alignItems="center">
<Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
{isDelete ? (
<CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
):(
isSubmit ? (
<IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><Undo fill="text" /></IconButton>
):null
)}
</Flex>
</chakra.div>
<Flex height="100%" mb="2">
<Flex flexDirection="column" w="100%" h="auto">
{/* HEADER */}
<Flex css={styles.header} cursor={isEditable ? "move":"default"} flexDirection="row" w="100%" h="auto" justifyContent="space-between" alignItems="center">
<Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
{isDelete ? (
<CloseButton onClick={() => DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/>
):(
isSubmit ? (
<IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><Undo fill="text" /></IconButton>
):null
)}
</Flex>
{/* CHILDREN */}
<Flex w="100%" h="auto">
{children}
</Flex>
</>
</Flex>
);
}