Merge branch 'feature/first-widget-button' into 'main'

Feature/first widget button

See merge request vkuchenik/website-framework!57

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

@@ -0,0 +1,50 @@
+import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
+import AlertLevel from './AlertLevelWidget'
+// import AddWidgetMenu from './AddWidgetMenu';
+
+export default function FirstWidgetButton({ appendWidget }) {
+    return (
+        <Menu.Root positioning={{ placement: "bottom-middle" }} >
+            <Menu.Trigger asChild>
+                <Box
+                    p={6}
+                    m="auto"
+                    mt={6}
+                    align="center"
+                    textAlign="center"
+                    justify="center"
+                    width="400px"
+                    borderRadius="md" 
+                    boxShadow="md"
+                    border="2px dashed"
+                    borderColor="gray.300"
+                    bg="gray.50"
+                    cursor="pointer"
+                    _hover = {{
+                        bg: "gray.100",
+                        borderColor: "gray.400",
+                        boxShadow: "lg",
+                    }}
+                >
+                    Add First Widget
+                </Box>
+            </Menu.Trigger>
+            <Portal>
+                <Menu.Positioner>
+                    <Menu.Content>
+                        <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>
+                        <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
+                    </Menu.Content>
+                </Menu.Positioner>
+            </Portal>
+        </Menu.Root>
+    );
+}

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 (

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -1,8 +1,9 @@
 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}) {
+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
@@ -24,6 +25,23 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
     });
   };
 
+  // Show large 'Add Widget' button when dashboard is empty
+  if ( !widgetArray.length ) {
+    return (
+      <Flex
+        align="center"
+        justify="center"
+        h="100%"
+        w="100%"
+        bg="gray.150"
+        borderRadius="md"
+      >
+        <FirstWidgetButton appendWidget={ appendWidget } />  
+      </Flex>
+    );
+  }
+
+  // Show responsive grid of widgets 
   return (
     <chakra.div width="100%">
       <ResponsiveGridLayout
@@ -41,14 +59,15 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         position="relative"
         resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
       >
-        {merged.map((item) => {
+         { merged.map((item) => {
-          const Widget = item.widget;
+            const Widget = item.widget;
-          return (
+            return (
-            <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
+              <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>
+              </Flex>
-          )
+            );
-        })}
+          })
+        }
       </ResponsiveGridLayout>
     </chakra.div>
   );

client/src/components/Sidebar/Sidebar.jsx

@@ -94,13 +94,14 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
         )
       })}
       <ColorModeButton 
-      onClick={
+        onClick={
-        () => {
+          () => {
-          setDarkMode(!darkMode);
+            setDarkMode(!darkMode);
-          toggleColorMode();
+            toggleColorMode();
-        }}
+          }}
-      position="absolute" 
+        position="absolute" 
-      bottom="2"/>
+        bottom="2"
+      />
     </Box>
   );
 }