alert level has a complete form

+ 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

client/src/components/Canvas/CanvasComponents/AddWidgetMenu.jsx

@@ -1,18 +1,8 @@
 import { IoIosArrowBack } from "react-icons/io";
 import { Menu, Portal } from "@chakra-ui/react";
-import { v4 as uuid } from 'uuid';
 import AlertLevel from "./AlertLevelWidget";
 
-export default function AddWidgetMenu({onAddWidget, widgetArray, setWidgetArray}) {
-  function appendWidget(name) {
-    const newID = uuid();      // could be replaced with something else like guid
-    setWidgetArray([           // updating widget array containing info on the types of widgets
-      ...widgetArray,
-      {i: newID, widget: name}
-    ]);
-    onAddWidget(newID);       // updating array containing info on layout of widgets
-  }
-
+export default function AddWidgetMenu({appendWidget}) {
   return (
     <Menu.Root>
       <Menu.TriggerItem>
@@ -23,10 +13,22 @@ export default function AddWidgetMenu({onAddWidget, widgetArray, setWidgetArray}
           <Menu.Content>
             <Menu.Item 
               value="AlertLevel" 
-              onClick={() => appendWidget(AlertLevel)}
+              onClick={() => appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)}  // width and height are passed through here for each widget
             >
               Alert Level
             </Menu.Item>
+            <Menu.Item>
+              CO2
+            </Menu.Item>
+            <Menu.Item>
+              IVANS
+            </Menu.Item>
+            <Menu.Item>
+              Plume Heights
+            </Menu.Item>
+            <Menu.Item>
+              Alert Level Changes
+            </Menu.Item>
           </Menu.Content>
         </Menu.Positioner>
       </Portal>

client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx

@@ -1,27 +1,65 @@
 import Widget from "./Widget";
-import { HStack, Box, Field, Input, Button } from "@chakra-ui/react";
+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);
+  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 id={id} title="Alert Level" isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}>
-      <Box 
-        as="form" 
-        onSubmit={handleSubmit(onSubmit)}
-        width="100%"
-        height="100%"
-        p={2}
-      >
-        <Field.Root orientation="horizontal" >
-            <HStack display="flex" spacing={4} align="center" width="100%">
-              <Field.Label display="flex" whiteSpace="nowrap">Country Name</Field.Label>
-              <Input {...register("countryname")} placeholder="Enter country name"/>
-            </HStack>
-        </Field.Root>
-      </Box>
+    <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>
   );
 }

client/src/components/Canvas/CanvasComponents/SettingsButton.jsx

@@ -2,7 +2,8 @@ import { IconButton, Menu, Portal } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";
 import AddWidgetMenu from "./AddWidgetMenu";
 
-export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets, widgetArray, setWidgetArray}) {    
+export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget}) {  
+  const addWidgetMenuProps = { appendWidget }
   return (
     <Menu.Root>
       <Menu.Trigger asChild >
@@ -13,7 +14,7 @@ export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets, wid
       <Portal>
         <Menu.Positioner>
           <Menu.Content>
-            <AddWidgetMenu onAddWidget={onAddWidget} setWidgetArray={setWidgetArray} widgetArray={widgetArray}/>
+            <AddWidgetMenu {...addWidgetMenuProps}/>
             <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
             <Menu.Item 
               onClick={onDeleteWidgets}
@@ -27,9 +28,4 @@ export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets, wid
       </Portal>
     </Menu.Root>
   );
-}
-
-
-
-
-
+}

client/src/components/Canvas/CanvasComponents/Widget.jsx

@@ -1,10 +1,13 @@
 import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
-import { FaEllipsisH } from "react-icons/fa";
+import { GrUndo } from "react-icons/gr";
 
-export default function Widget({ id, title, isEditable, isDelete, DeleteWidget, children }) {
+export default function Widget(props) {
+  // deconstructing props
+  const { id, title, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit, children } = props;
   const recipe = useSlotRecipe({ key: "widget" });
   const styles = recipe();
 
+
   return (
     <>
       <chakra.div css={styles.header} cursor={isEditable ? "move":"default"}>
@@ -19,12 +22,14 @@ export default function Widget({ id, title, isEditable, isDelete, DeleteWidget,
           <>
             <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
               <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
-              <IconButton size="xs" bg="base300" cursor="pointer"><FaEllipsisH fill="text"/></IconButton>
+              {isSubmit ? (
+                <IconButton onClick={() => setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"><GrUndo fill="text" /></IconButton>
+              ):(null)}
             </Flex>
           </>
         )}
       </chakra.div>
-      <chakra.div height="100%" mb="3">
+      <chakra.div height="100%" mb="2">
         {children}
       </chakra.div>
     </>