Merge branch 'dashboardCanvas/Widget/add-widgets-menu' into 'main'

added submenu to settings

See merge request vkuchenik/website-framework!43

client/package-lock.json

@@ -21,7 +21,8 @@
         "react-icons": "^5.5.0",
         "react-leaflet": "^5.0.0",
         "react-resizable": "^3.0.5",
-        "tailwindcss": "^4.1.11"
+        "tailwindcss": "^4.1.11",
+        "uuid": "^11.1.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.29.0",
@@ -4776,6 +4777,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",

client/package.json

@@ -23,7 +23,8 @@
     "react-icons": "^5.5.0",
     "react-leaflet": "^5.0.0",
     "react-resizable": "^3.0.5",
-    "tailwindcss": "^4.1.11"
+    "tailwindcss": "^4.1.11",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",

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

@@ -0,0 +1,35 @@
+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
+  }
+
+  return (
+    <Menu.Root>
+      <Menu.TriggerItem>
+        <IoIosArrowBack /> Add Widget
+      </Menu.TriggerItem>
+      <Portal>
+        <Menu.Positioner>
+          <Menu.Content>
+            <Menu.Item 
+              value="AlertLevel" 
+              onClick={() => appendWidget(AlertLevel)}
+            >
+              Alert Level
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Portal>
+    </Menu.Root>
+  )
+}

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

@@ -0,0 +1,10 @@
+import Widget from "./Widget";
+import { Text } from "@chakra-ui/react";
+
+export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
+  return (
+    <Widget id={id} title="Alert Level" isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}>
+      <Text>Input volcano and country</Text>
+    </Widget>
+  );
+}

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

@@ -1,36 +1,33 @@
-// This component displays a drop down menu when clicked, with custom functionality
+import { IconButton, Menu, Portal } from "@chakra-ui/react";
-// for 'Add Widget', 'Edit Widgets', and 'Remove Widgets'. This component will 
-// control settings related to the Widgets on the main canvas. 
-
-import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";
+import AddWidgetMenu from "./AddWidgetMenu";
 
-export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets}) {    
+export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets, widgetArray, setWidgetArray}) {    
-    return (
+  return (
-        // This uses Chakra's built in menu component
+    // This uses Chakra's built in menu component
-        <Menu.Root>
+    <Menu.Root>
-            <Menu.Trigger asChild>
+      <Menu.Trigger asChild >
-                <IconButton variant="ghost" size="md" borderRadius="xl">
+          <IconButton variant="ghost" size="md" borderRadius="xl">
-                    <FiSettings />
+            <FiSettings />
-                </IconButton>
+          </IconButton>
-            </Menu.Trigger>
+      </Menu.Trigger>
-            <Portal>
+      <Portal>
-                <Menu.Positioner>
+        <Menu.Positioner>
-                    <Menu.Content>
+          <Menu.Content>
-                        <Menu.Item onClick={onAddWidget} value="addwidget">Add Widget</Menu.Item>
+            <AddWidgetMenu onAddWidget={onAddWidget} setWidgetArray={setWidgetArray} widgetArray={widgetArray}/>
-                        <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
+            <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
-                        <Menu.Item 
+            <Menu.Item 
-                            onClick={onDeleteWidgets}
+              onClick={onDeleteWidgets}
-                            color="fg.error"
+              color="fg.error"
-                            _hover={{ bg: "bg.error", color: "fg.error "}}
+              _hover={{ bg: "bg.error", color: "fg.error "}}
-                        >
+            >
-                            Delete Widgets
+              Delete Widgets
-                        </Menu.Item>
+            </Menu.Item>
-                    </Menu.Content>
+          </Menu.Content>
-                </Menu.Positioner>
+        </Menu.Positioner>
-            </Portal>
+      </Portal>
-        </Menu.Root>
+    </Menu.Root>
-    );
+  );
 }
 
 

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

@@ -1,13 +1,11 @@
 import { useSlotRecipe, chakra, Flex, CloseButton, Text } from "@chakra-ui/react"
 
-export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }) {
+export default function Widget({ id, title, isEditable, isDelete, DeleteWidget, children }) {
-  // console.log("rendering widget");
   const recipe = useSlotRecipe({ key: "widget" });
   const styles = recipe();
 
   return (
     <>
-      {/* {console.log("This widgets id is: ", id)} */}
       <chakra.div css={styles.header} cursor={isEditable ? "move":"default"}>
         {isDelete ? (
           <>
@@ -23,7 +21,7 @@ export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }
         )}
       </chakra.div>
       <chakra.div css={styles.canvas} >
-        This is their widget content - drag or resize me!
+        {children}
       </chakra.div>
     </>
   );

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

@@ -11,25 +11,24 @@ import { CancelButton } from "../components/CancelButton";
 import { SaveButton } from "../components/SaveButton";
 import DeleteAllButton from "../components/DeleteAllButton";
 
-export function DashboardCanvas({ onCancel, isEditable, setIsEditable, isDelete, setIsDelete, view, layout, setLayout, originalLayout, setOriginalLayout, onLayoutChange, onChangeView }) {
+export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChange }) {
-  const [newCounter, setNewCounter] = useState(3);
+  const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
+  const [isDelete, setIsDelete] = useState(false);
+  const [originalLayout, setOriginalLayout] = useState([]);
+  const [widgetArray, setWidgetArray] = useState([]);
 
-  // Adding a widget triggers Edit mode
+  const onAddWidget = (ID) => {
-  const onAddWidget = () => {
-    const newId = newCounter.toString();
-    
     setLayout(prev => [
       ...prev,
-    {
+      {
-      i: newId,
+        i: ID,
-      x: (prev.length * 3) % 12,
+        x: (prev.length * 3) % 12,
-      y: Infinity, 
+        y: Infinity, 
-      w: 3, 
+        w: 3, 
-      h: 3,
+        h: 3,
-      static: false,
+        static: false
-    }
+      }
     ]);
-    setNewCounter(prev => prev + 1);
     onEditWidgets();
   };
 
@@ -73,6 +72,7 @@ export function DashboardCanvas({ onCancel, isEditable, setIsEditable, isDelete,
   const DeleteWidget = (id) => {
     console.log("Deleting widget with id: ", id);
     setLayout(layout => layout.filter(w => w.i !== id));
+    // add removal for widgetArray here
   }
 
   const DeleteAll = () => {
@@ -81,6 +81,7 @@ export function DashboardCanvas({ onCancel, isEditable, setIsEditable, isDelete,
     );
     if (confirm) {
       setLayout([]);
+      setWidgetArray([]);
       onSave();
     }
     else return;
@@ -144,6 +145,8 @@ export function DashboardCanvas({ onCancel, isEditable, setIsEditable, isDelete,
                 onAddWidget={ onAddWidget }
                 onEditWidgets={ onEditWidgets }
                 onDeleteWidgets={ onDeleteWidgets }
+                setWidgetArray={ setWidgetArray }
+                widgetArray={ widgetArray }
               />
             </>
           )}
@@ -153,11 +156,13 @@ export function DashboardCanvas({ onCancel, isEditable, setIsEditable, isDelete,
       {/* CANVAS */}
       <Tabs.Content value="widget">
         <WidgetCanvas 
-          layout={layout}
+          layout={ layout }
-          onLayoutChange={onLayoutChange}
+          onLayoutChange={ onLayoutChange }
-          isEditable={isEditable}
+          isEditable={ isEditable }
-          isDelete={isDelete}
+          isDelete={ isDelete }
-          DeleteWidget={DeleteWidget}
+          DeleteWidget={ DeleteWidget }
+          setWidgetArray={ setWidgetArray }
+          widgetArray={ widgetArray }
         />
       </Tabs.Content>
       <Tabs.Content value="gas">

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

@@ -1,50 +1,50 @@
-// This component defines a generic Widget that can be dynamically resized and 
-// dragged inside the canvas
-// Content not included, must be populated using custom charts plots and notifications
-
-import { useState } from 'react';
 import GridLayout, { WidthProvider } from 'react-grid-layout';
-import Widget from '../../components/Widget.jsx';
 import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
 
-export default function WidgetCanvas({layout, onLayoutChange, isEditable, isDelete, DeleteWidget}) {
+export default function WidgetCanvas({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray}) {
   console.log("rendering widgetcanvas");
-    // Define widgets initial position and size
+  const recipe = useSlotRecipe({ key: "widget" });
-    // TODO Add dynamic adding/deleting of widgets via options button 
+  const styles = recipe(); // using root recipe for widget below
-    const recipe = useSlotRecipe({ key: "widget" });
+  const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
-    const styles = recipe(); // using root recipe for widget below
+  const handleDragStart = () => { document.body.style.userSelect = "none"; }; // don't allow text highlighting when dragging
-    const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
+  const handleDragStop = () => { document.body.style.userSelect = ""; }; // allow text highlighting all other times
+  let merged = [];
 
-    // don't allow text highlighting when dragging
+  console.log("widgetArray: ", widgetArray);
-    const handleDragStart = () => {
+  console.log("layout: ", layout);
-        document.body.style.userSelect = "none";
+  if (widgetArray.length && layout.length) {
-    };
+    const widgetMap = new Map(widgetArray.map(item => [item.i, item]));
-    // allow text highlighting all other times
+    merged = layout.map(item => {
-    const handleDragStop = () => {
+      return {
-        document.body.style.userSelect = "";
+        ...item,
-    };
+        ...widgetMap.get(item.i)
+      };
+    });
+  };
 
-    return (
+  return (
-      <chakra.div width="100%">
+    <chakra.div width="100%">
-        <ResponsiveGridLayout
+      <ResponsiveGridLayout
-          className="layout"
+        className="layout"
-          layout={layout}
+        layout={layout}
-          cols={12} // Total columns in grid
+        cols={12} // Total columns in grid
-          rowHeight={30} //Height of a single row in px
+        rowHeight={30} //Height of a single row in px
-          isBounded={true} // Total width of the grid
+        isBounded={true} // Total width of the grid
-          margin={[10, 10]} // [horizontal, vertical] gap
+        margin={[10, 10]} // [horizontal, vertical] gap
-          onLayoutChange={onLayoutChange}
+        onLayoutChange={onLayoutChange}
-          draggableHandle=".widget-handle" // Make only the header draggable
+        draggableHandle=".widget-handle" // Make only the header draggable
-          onDragStart={handleDragStart}
+        onDragStart={handleDragStart}
-          onDragStop={handleDragStop}
+        onDragStop={handleDragStop}
-        >
+      >
-          {layout.map((item) => (
+        {merged.map((item) => {
-              // this flex wrapper allows the widget to shrink down to the header size, no less
+          const Widget = item.widget;
-              <Flex key={item.i} css={styles.root} height="100%" >
+          return (
-                  <Widget id={item.i} title="VDAP Widget" isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
+            <Flex key={item.i} css={styles.root} height="100%" >
-              </Flex>
+              <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
-          ))}
+            </Flex>
-        </ResponsiveGridLayout>
+          )
+        })}
+      </ResponsiveGridLayout>
     </chakra.div>
   );
 }

client/src/components/layout/Dashboard.jsx

@@ -1,8 +1,8 @@
-import { Global, css } from "@emotion/react";
 import Header from './Header/Header.jsx';
 import Sidebar from './Sidebar/Sidebar.jsx';
 import Canvas from './Canvas/Canvas.jsx';
 import { Grid, GridItem, useRecipe } from '@chakra-ui/react';
+import AlertLevel from './Canvas/components/AlertLevelWidget.jsx';
 import { useState } from 'react';
 
 export default function Dashboard() {
@@ -14,11 +14,7 @@ export default function Dashboard() {
   const [isDelete, setIsDelete] = useState(false);
   const [originalLayout, setOriginalLayout] = useState([]);
   const [view, setView] = useState("widget");
-  const [layout, setLayout] = useState([
+  const [layout, setLayout] = useState([]);
-    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
-    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
-    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true }
-  ]);
 
   const onCancel = () => {
     console.log("canceling changes...");
@@ -87,7 +83,7 @@ export default function Dashboard() {
             isDelete={ isDelete }
             setIsDelete={ setIsDelete }
           />
-        </GridItem> 
+        </GridItem>
       </Grid>
     </>
   );