From 85160caae0d68592057427edcad1b52b684617f3 Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Thu, 24 Jul 2025 12:08:10 -0700 Subject: [PATCH] lots of file surgery, it works --- .../src/components/layout/Canvas/Canvas.jsx | 25 +++++----- .../Canvas/components/SettingsButton.jsx | 23 ++------- ...ashboardCanvas.jsx => DashboardCanvas.jsx} | 48 +++++++++++++++++-- .../views/DashboardCanvasNav/WidgetCanvas.jsx | 13 +---- 4 files changed, 62 insertions(+), 47 deletions(-) rename client/src/components/layout/Canvas/views/{MyDashboardCanvas.jsx => DashboardCanvas.jsx} (59%) diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx index a12282a..96e61d2 100644 --- a/client/src/components/layout/Canvas/Canvas.jsx +++ b/client/src/components/layout/Canvas/Canvas.jsx @@ -1,23 +1,22 @@ // This Canvas component will be used to dynamically populate // the main canvas section of the web App with a default state -// of 'DashboardCanvas' +// of 'WidgetCanvas' import { Box } from "@chakra-ui/react"; import GlobalMapCanvas from "./views/GlobalMapCanvas"; import RegionalMapCanvas from "./views/RegionalMapCanvas"; import VolcanoCanvas from "./views/VolcanoCanvas"; import AdminCanvas from "./views/AdminCanvas"; -import { MyDashboardCanvas } from "./views/MyDashboardCanvas"; +import { DashboardCanvas } from "./views/DashboardCanvas"; export default function Canvas({ view }) { - return ( - - {view === "widget" && } - {view === "global" && } - {view === "regional" && } - {view === "volcano" && } - {view === "admin" && } - - ); -} - + return ( + + {view === "widget" && } + {view === "global" && } + {view === "regional" && } + {view === "volcano" && } + {view === "admin" && } + + ); +} \ No newline at end of file diff --git a/client/src/components/layout/Canvas/components/SettingsButton.jsx b/client/src/components/layout/Canvas/components/SettingsButton.jsx index afb7936..ee080ff 100644 --- a/client/src/components/layout/Canvas/components/SettingsButton.jsx +++ b/client/src/components/layout/Canvas/components/SettingsButton.jsx @@ -5,22 +5,7 @@ import { Button, IconButton, Menu, Portal } from "@chakra-ui/react"; import { FiSettings } from "react-icons/fi"; -export function SettingsButton(props) { - const handleAddWidget = () => { - console.log("Add Widget clicked"); - // TODO: Implement widget-adding logic - } - - const handleEditWidgdets = () => { - console.log("Edit Widgets clicked") - // TODO: Implement widget-editing logic - } - - const handleDeleteWidgets = () => { - console.log("Delete Widgets clicked"); - // TODO: Implement widget-deletion logic - } - +export function SettingsButton({onAddWidget, onEditWidgdets, onRemoveWidgets}) { return ( // This uses Chakra's built in menu component @@ -32,10 +17,10 @@ export function SettingsButton(props) { - Add Widget - Edit Widgets + Add Widget + Edit Widgets diff --git a/client/src/components/layout/Canvas/views/MyDashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx similarity index 59% rename from client/src/components/layout/Canvas/views/MyDashboardCanvas.jsx rename to client/src/components/layout/Canvas/views/DashboardCanvas.jsx index 4bd1129..a297ba5 100644 --- a/client/src/components/layout/Canvas/views/MyDashboardCanvas.jsx +++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx @@ -6,9 +6,43 @@ import { DailyActivity } from "./DashboardCanvasNav/DailyActivity"; import { Gas } from "./DashboardCanvasNav/Gas"; import { Seismic } from "./DashboardCanvasNav/Seismic"; import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing"; +import { useState } from "react"; + +export function DashboardCanvas() { + 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 onAddWidget = () => { + 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 onRemoveWidget = (id) => { + setLayout(prev => prev.filter(w => w.i !== id)); + } + + const onLayoutChange = (newLayout) => { + setLayout(newLayout); + console.log('Updated layout:', newLayout) + }; -export function MyDashboardCanvas() { return ( + /* HEADER */ - + + {/* CANVAS */} - + diff --git a/client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx index 68d5532..7364386 100644 --- a/client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx +++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx @@ -7,24 +7,13 @@ 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() { +export default function WidgetCanvas({layout, onLayoutChange}) { // 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([ - { 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 onLayoutChange = (newLayout) => { - setLayout(newLayout); - console.log('Updated layout:', newLayout) - }; - // don't allow text highlighting when dragging const handleDragStart = () => { document.body.style.userSelect = "none";