Merge branch 'feature/add-widgets' into 'main'

Add dynamic widget adding functionality, along with boilerplate for edit and delete functionality

See merge request vkuchenik/website-framework!23

client/src/components/layout/Canvas/Canvas.jsx

@@ -3,6 +3,7 @@
 // of 'WidgetCanvas' 
 
 import { Box } from "@chakra-ui/react";
+import { useState } from 'react';
 import CanvasHeader from "./CanvasHeader";
 import WidgetCanvas from "./views/WidgetCanvas";
 import GlobalMapCanvas from "./views/GlobalMapCanvas";
@@ -11,10 +12,50 @@ import VolcanoCanvas from "./views/VolcanoCanvas";
 import AdminCanvas from "./views/AdminCanvas";
 
 export default function Canvas({ view }) {
+    const [layout, setLayout] = useState([
+        { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+        { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+        { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
+    ]);
+    const [newCounter, setNewCounter] = useState(3);
+
+    const addWidget = () => {
+        const newId = newCounter.toString();
+        setLayout(prev => [
+            ...prev,
+            {
+                i: newId,
+                x: (prev.length * 3) % 12,
+                y: Infinity, 
+                w: 3, 
+                h: 3
+            }
+        ]);
+        setNewCounter(prev => prev + 1);
+    };
+
+    const removeWidget = (id) => {
+        setLayout(prev => prev.filter(w => w.i !== id));
+    }
+
+    const onLayoutChange = (newLayout) => { 
+        setLayout(newLayout);
+        console.log('Updated layout:', newLayout)
+    };
+
     return (
         <Box height="100%" width="100%">
-            <CanvasHeader />
+            <CanvasHeader 
-            {view === "widget" && <WidgetCanvas />}
+                onAddWidget={ addWidget }
+                onEditWidgets={() => console.log('Edit Widgets')}
+                onDeleteWidgets={() => console.log('Delete Widgets')}
+            />
+            {view === "widget" && 
+                <WidgetCanvas 
+                    layout={ layout }
+                    onLayoutChange={ onLayoutChange }
+                    removeWidget={ removeWidget }
+                />}
             {view === "global" && <GlobalMapCanvas />}
             {view === "regional" && <RegionalMapCanvas />}
             {view === "volcano" && <VolcanoCanvas />}

client/src/components/layout/Canvas/CanvasHeader.jsx

@@ -3,9 +3,7 @@ import { CanvasHeaderNav } from "./CanvasHeaderNav";
 import { SearchBar } from "./SearchBar";
 import { SettingsButton } from "./SettingsButton";
 
-
+export default function CanvasHeader({ onAddWidget, onEditWidgets, onDeleteWidgets }) {
-
-export default function CanvasHeader() {
     const recipe = useRecipe({ key: "canvas" });
     const styles = recipe();
     return (
@@ -25,7 +23,11 @@ export default function CanvasHeader() {
                 <CanvasHeaderNav />
                 <HStack spacing={3}>
                     <SearchBar />
-                    <SettingsButton />
+                    <SettingsButton
+                        onAddWidget={ onAddWidget }
+                        onEditWidgets={ onEditWidgets }
+                        onDeleteWidgets={ onDeleteWidgets }
+                    />
                 </HStack>
             </Flex>
         </chakra.div>

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

@@ -5,21 +5,21 @@
 import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";
 
-export function SettingsButton(props) {
+export function SettingsButton({ onAddWidget, onEditWidgets, onDeleteWidgets }) {
-    const handleAddWidget = () => {
+    // const handleAddWidget = () => {
-        console.log("Add Widget clicked");
+    //     console.log("Add Widget clicked");
-        // TODO: Implement widget-adding logic
+    //     // TODO: Implement widget-adding logic
-    }
+    // }
 
-    const handleEditWidgdets = () => {
+    // const handleEditWidgdets = () => {
-        console.log("Edit Widgets clicked")
+    //     console.log("Edit Widgets clicked")
-        // TODO: Implement widget-editing logic
+    //     // TODO: Implement widget-editing logic
-    }
+    // }
 
-    const handleDeleteWidgets = () => {
+    // const handleDeleteWidgets = () => {
-        console.log("Delete Widgets clicked");
+    //     console.log("Delete Widgets clicked");
-        // TODO: Implement widget-deletion logic
+    //     // TODO: Implement widget-deletion logic
-    }
+    // }
     
     return (
         // This uses Chakra's built in menu component
@@ -32,10 +32,10 @@ export function SettingsButton(props) {
             <Portal>
                 <Menu.Positioner>
                     <Menu.Content>
-                        <Menu.Item onClick={handleAddWidget} value="addwidget">Add Widget</Menu.Item>
+                        <Menu.Item onClick={ onAddWidget } value="addwidget">Add Widget</Menu.Item>
-                        <Menu.Item onClick={handleEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
+                        <Menu.Item onClick={ onEditWidgets } value ="editwidget">Edit Widgets</Menu.Item>
                         <Menu.Item 
-                            onClick={handleDeleteWidgets}
+                            onClick={ onDeleteWidgets }
                             color="fg.error"
                             _hover={{ bg: "bg.error", color: "fg.error "}}
                         >

client/src/components/layout/Canvas/views/WidgetCanvas.jsx

@@ -7,23 +7,23 @@ import GridLayout, { WidthProvider } from 'react-grid-layout';
 import Widget from '../Widget.jsx';
 import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
 
-export default function WidgetCanvas() {
+export default function WidgetCanvas({ layout, onLayoutChange, removeWidget }) {
     // Define widgets initial position and size
     // TODO Add dynamic adding/deleting of widgets via options button 
     const recipe = useSlotRecipe({ key: "widget" });
     const styles = recipe(); // using root recipe for widget below
     const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
 
-    const [layout, setLayout] = useState([
+    // const [layout, setLayout] = useState([
-        { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+    //     { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
-        { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
+    //     { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false },
-        { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
+    //     { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: false }
-    ]);
+    // ]);
 
-    const onLayoutChange = (newLayout) => { 
+    // const onLayoutChange = (newLayout) => { 
-        setLayout(newLayout);
+    //     setLayout(newLayout);
-        console.log('Updated layout:', newLayout)
+    //     console.log('Updated layout:', newLayout)
-    };
+    // };
 
     // don't allow text highlighting when dragging
     const handleDragStart = () => {