From f2fe8b5fb2310b0fabccfc4eaea224c53f9381ad Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Fri, 8 Aug 2025 13:00:33 -0700 Subject: [PATCH 1/3] Add button when no widgets populate the canvas --- .../CanvasComponents/FirstWidgetButton.jsx | 28 ++++++++++++++ .../Canvas/views/HomeTabs/MyDashboard.jsx | 37 +++++++++++++++---- client/src/components/Sidebar/Sidebar.jsx | 15 ++++---- 3 files changed, 65 insertions(+), 15 deletions(-) create mode 100644 client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx diff --git a/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx b/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx new file mode 100644 index 0000000..f823400 --- /dev/null +++ b/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx @@ -0,0 +1,28 @@ +import { Box, Heading } from '@chakra-ui/react' + +export default function FirstWidgetButton() { + + return ( + + + Add First Widget + + + ); +} \ No newline at end of file diff --git a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx index fcd364f..c1b0075 100644 --- a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx +++ b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx @@ -1,6 +1,7 @@ import GridLayout, { WidthProvider } from 'react-grid-layout'; 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}) { console.log("rendering MyDashboard"); @@ -24,6 +25,22 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet }); }; + if ( !widgetArray.length ) { + return ( + + + + ); + } + return ( } > - {merged.map((item) => { - const Widget = item.widget; - return ( - - - - ) - })} + + { merged.map((item) => { + const Widget = item.widget; + return ( + + + + ); + }) + } + + ); diff --git a/client/src/components/Sidebar/Sidebar.jsx b/client/src/components/Sidebar/Sidebar.jsx index f79fcd1..51f6380 100644 --- a/client/src/components/Sidebar/Sidebar.jsx +++ b/client/src/components/Sidebar/Sidebar.jsx @@ -94,13 +94,14 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) { ) })} { - setDarkMode(!darkMode); - toggleColorMode(); - }} - position="absolute" - bottom="2"/> + onClick={ + () => { + setDarkMode(!darkMode); + toggleColorMode(); + }} + position="absolute" + bottom="2" + /> ); } \ No newline at end of file From 28a59ab366fdef5dbceb0ad78f5d9c393dcc6273 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 11 Aug 2025 11:31:15 -0700 Subject: [PATCH 2/3] Add first widget button with popup menu --- .../CanvasComponents/FirstWidgetButton.jsx | 84 ++++++++++++++----- .../Canvas/views/HomeTabs/MyDashboard.jsx | 8 +- 2 files changed, 65 insertions(+), 27 deletions(-) diff --git a/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx b/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx index f823400..98faf15 100644 --- a/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx +++ b/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx @@ -1,28 +1,68 @@ -import { Box, Heading } from '@chakra-ui/react' +import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react' +// import AddWidgetMenu from './AddWidgetMenu'; export default function FirstWidgetButton() { return ( - - - Add First Widget - - + + + + Add First Widget + + + + + + Alert Level + CO2 + IVANS + Plume Heights + Alert Level Changes + + + + + + // + // {/* */} + // + // Add First Widget + // + // ); } \ No newline at end of file diff --git a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx index c1b0075..ab06e6a 100644 --- a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx +++ b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx @@ -25,13 +25,13 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet }); }; + // Show large 'Add Widget' button when dashboard is empty if ( !widgetArray.length ) { return ( } > - { merged.map((item) => { const Widget = item.widget; return ( @@ -68,8 +68,6 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet ); }) } - - ); From 672fcff01d70cfe891374d5e46f3b66bab097cb9 Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Mon, 11 Aug 2025 12:18:04 -0700 Subject: [PATCH 3/3] Connect Alert Level widget creation to First Widget Button --- .../CanvasComponents/FirstWidgetButton.jsx | 36 +++++-------------- client/src/components/Canvas/views/Home.jsx | 3 +- .../Canvas/views/HomeTabs/MyDashboard.jsx | 6 ++-- 3 files changed, 13 insertions(+), 32 deletions(-) diff --git a/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx b/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx index 98faf15..849cfc2 100644 --- a/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx +++ b/client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx @@ -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 ( - + - Alert Level + appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)} + > + Alert Level + CO2 IVANS Plume Heights @@ -41,28 +46,5 @@ export default function FirstWidgetButton() { - - // - // {/* */} - // - // Add First Widget - // - // ); } \ No newline at end of file diff --git a/client/src/components/Canvas/views/Home.jsx b/client/src/components/Canvas/views/Home.jsx index 095816c..d44c8c4 100644 --- a/client/src/components/Canvas/views/Home.jsx +++ b/client/src/components/Canvas/views/Home.jsx @@ -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 ( diff --git a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx index ab06e6a..dd1cefd 100644 --- a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx +++ b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx @@ -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" > - + ); } @@ -63,7 +63,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet const Widget = item.widget; return ( - + ); })