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

Connect Alert Level widget creation to First Widget Button

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-08-11 12:18:04 -07:00
parent 28a59ab366
commit 672fcff01d
3 changed files with 13 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx
+9 -27
View File
@@ -1,10 +1,10 @@
import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
import AlertLevel from './AlertLevelWidget'
// import AddWidgetMenu from './AddWidgetMenu';
export default function FirstWidgetButton() {
export default function FirstWidgetButton({ appendWidget }) {
return (
<Menu.Root positioning={{ placement: "right-start" }} >
<Menu.Root positioning={{ placement: "bottom-middle" }} >
<Menu.Trigger asChild>
<Box
p={6}
@@ -32,7 +32,12 @@ export default function FirstWidgetButton() {
<Portal>
<Menu.Positioner>
<Menu.Content>
<Menu.Item value="alert level">Alert Level</Menu.Item>
<Menu.Item
value="AlertLevel"
onClick={() => appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)}
>
Alert Level
</Menu.Item>
<Menu.Item value="co2">CO2</Menu.Item>
<Menu.Item value="ivans">IVANS</Menu.Item>
<Menu.Item value="plume heights">Plume Heights</Menu.Item>
@@ -41,28 +46,5 @@ export default function FirstWidgetButton() {
</Menu.Positioner>
</Portal>
</Menu.Root>
// <Box
// p={6}
// m={4}
// borderRadius="md"
// boxShadow="md"
// border="2px dashed"
// borderColor="gray.300"
// bg="gray.50"
// textAlign="center"
// cursor="pointer"
// _hover = {{
// bg: "gray.100",
// borderColor: "gray.400",
// boxShadow: "lg",
// }}
// transition="all 0.2s ease-in-out"
// >
// {/* <AddWidgetMenu /> */}
// <Heading fontWeight="bold" fontSize="xl" color="gray.700">
// Add First Widget
// </Heading>
// </Box>
);
}
client/src/components/Canvas/views/Home.jsx
+1 -2
View File
@@ -11,7 +11,6 @@ import { SaveButton } from "../CanvasComponents/SaveButton";
import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
import { v4 as uuid } from 'uuid';
export default function Home({...props}) {
// deconstructing props
const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel,
@@ -99,7 +98,7 @@ export default function Home({...props}) {
}
// Prop Forwarding
const MyDashboardProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray };
const MyDashboardProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget };
const settingsButtonProps = { onEditWidgets, onDeleteWidgets, appendWidget };
return (
client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx
+3 -3
View File
@@ -3,7 +3,7 @@ import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';
export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray}) {
export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget}) {
console.log("rendering MyDashboard");
const recipe = useSlotRecipe({ key: "widget" });
const styles = recipe(); // using root recipe for widget below
@@ -36,7 +36,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
bg="gray.150"
borderRadius="md"
>
<FirstWidgetButton />
<FirstWidgetButton appendWidget={ appendWidget } />
</Flex>
);
}
@@ -63,7 +63,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
const Widget = item.widget;
return (
<Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
<Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
<Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget} appendWidget={appendWidget}/>
</Flex>
);
})