From 1d5b00448be26ae847a10b2e2ce41e32a2a331cf Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Thu, 24 Jul 2025 08:52:20 -0700 Subject: [PATCH 1/4] added tabs and file restructure --- .../src/components/layout/Canvas/Canvas.jsx | 24 ++++--- .../components/layout/Canvas/CanvasHeader.jsx | 33 ---------- .../layout/Canvas/CanvasHeaderNav.jsx | 22 ------- .../Canvas/{ => components}/SearchBar.jsx | 0 .../{ => components}/SettingsButton.jsx | 0 .../layout/Canvas/{ => components}/Widget.jsx | 0 .../layout/Canvas/views/AdminCanvas.jsx | 40 ++++++------ .../layout/Canvas/views/DashboardCanvas.jsx | 64 +++++++++++++++++++ .../DashboardCanvasNav/DailyActivity.jsx | 22 +++++++ .../Canvas/views/DashboardCanvasNav/Gas.jsx | 22 +++++++ .../DashboardCanvasNav/RemoteSensing.jsx | 22 +++++++ .../views/DashboardCanvasNav/Seismic.jsx | 22 +++++++ .../{ => DashboardCanvasNav}/WidgetCanvas.jsx | 2 +- 13 files changed, 184 insertions(+), 89 deletions(-) delete mode 100644 client/src/components/layout/Canvas/CanvasHeader.jsx delete mode 100644 client/src/components/layout/Canvas/CanvasHeaderNav.jsx rename client/src/components/layout/Canvas/{ => components}/SearchBar.jsx (100%) rename client/src/components/layout/Canvas/{ => components}/SettingsButton.jsx (100%) rename client/src/components/layout/Canvas/{ => components}/Widget.jsx (100%) create mode 100644 client/src/components/layout/Canvas/views/DashboardCanvas.jsx create mode 100644 client/src/components/layout/Canvas/views/DashboardCanvasNav/DailyActivity.jsx create mode 100644 client/src/components/layout/Canvas/views/DashboardCanvasNav/Gas.jsx create mode 100644 client/src/components/layout/Canvas/views/DashboardCanvasNav/RemoteSensing.jsx create mode 100644 client/src/components/layout/Canvas/views/DashboardCanvasNav/Seismic.jsx rename client/src/components/layout/Canvas/views/{ => DashboardCanvasNav}/WidgetCanvas.jsx (97%) diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx index a527aa8..585d3d6 100644 --- a/client/src/components/layout/Canvas/Canvas.jsx +++ b/client/src/components/layout/Canvas/Canvas.jsx @@ -1,25 +1,23 @@ // This Canvas component will be used to dynamically populate // the main canvas section of the web App with a default state -// of 'WidgetCanvas' +// of 'DashboardCanvas' import { Box } from "@chakra-ui/react"; -import CanvasHeader from "./CanvasHeader"; -import WidgetCanvas from "./views/WidgetCanvas"; import GlobalMapCanvas from "./views/GlobalMapCanvas"; import RegionalMapCanvas from "./views/RegionalMapCanvas"; import VolcanoCanvas from "./views/VolcanoCanvas"; import AdminCanvas from "./views/AdminCanvas"; +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" && } + + ); } diff --git a/client/src/components/layout/Canvas/CanvasHeader.jsx b/client/src/components/layout/Canvas/CanvasHeader.jsx deleted file mode 100644 index cfe2076..0000000 --- a/client/src/components/layout/Canvas/CanvasHeader.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react"; -import { CanvasHeaderNav } from "./CanvasHeaderNav"; -import { SearchBar } from "./SearchBar"; -import { SettingsButton } from "./SettingsButton"; - - - -export default function CanvasHeader() { - const recipe = useRecipe({ key: "canvas" }); - const styles = recipe(); - return ( - - - - - - - - - - ); -} \ No newline at end of file diff --git a/client/src/components/layout/Canvas/CanvasHeaderNav.jsx b/client/src/components/layout/Canvas/CanvasHeaderNav.jsx deleted file mode 100644 index b80d7c5..0000000 --- a/client/src/components/layout/Canvas/CanvasHeaderNav.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import { HStack, Link } from "@chakra-ui/react" - -const navItems = [ - { label: "My Dashboard", href: "#dashboard" }, - { label: "Gas", href: "#gas" }, - { label: "Seismic", href: "#seismic" }, - { label: "Remote Sensing", href: "#remote" }, - { label: "Daily Activity", href: "#daily" }, -]; - -export function CanvasHeaderNav() { - return ( - - {navItems.map(({ label, href }) => ( - - {label} - - ))} - - ); -} - diff --git a/client/src/components/layout/Canvas/SearchBar.jsx b/client/src/components/layout/Canvas/components/SearchBar.jsx similarity index 100% rename from client/src/components/layout/Canvas/SearchBar.jsx rename to client/src/components/layout/Canvas/components/SearchBar.jsx diff --git a/client/src/components/layout/Canvas/SettingsButton.jsx b/client/src/components/layout/Canvas/components/SettingsButton.jsx similarity index 100% rename from client/src/components/layout/Canvas/SettingsButton.jsx rename to client/src/components/layout/Canvas/components/SettingsButton.jsx diff --git a/client/src/components/layout/Canvas/Widget.jsx b/client/src/components/layout/Canvas/components/Widget.jsx similarity index 100% rename from client/src/components/layout/Canvas/Widget.jsx rename to client/src/components/layout/Canvas/components/Widget.jsx diff --git a/client/src/components/layout/Canvas/views/AdminCanvas.jsx b/client/src/components/layout/Canvas/views/AdminCanvas.jsx index 5cbb749..51a85c4 100644 --- a/client/src/components/layout/Canvas/views/AdminCanvas.jsx +++ b/client/src/components/layout/Canvas/views/AdminCanvas.jsx @@ -1,24 +1,24 @@ import { Box, Text } from '@chakra-ui/react'; export default function AdminCanvas() { - return ( - - - - Admin Canvas coming soon! - - - - ); + return ( + + + + Admin Canvas coming soon! + + + + ); } \ No newline at end of file diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx new file mode 100644 index 0000000..5fee2cc --- /dev/null +++ b/client/src/components/layout/Canvas/views/DashboardCanvas.jsx @@ -0,0 +1,64 @@ +import { HStack, Flex, Tabs } from "@chakra-ui/react"; +import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas"; +import { SearchBar } from "../components/SearchBar"; +import { SettingsButton } from "../components/SettingsButton"; +import { DailyActivity } from "./DashboardCanvasNav/DailyActivity"; +import { Gas } from "./DashboardCanvasNav/Gas"; +import { Seismic } from "./DashboardCanvasNav/Seismic"; +import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing"; + +export function DashboardCanvas() { + return ( + + + + + My Dashboard + + + Gas + + + Seismic + + + Remote Sensing + + + Daily Activity + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/client/src/components/layout/Canvas/views/DashboardCanvasNav/DailyActivity.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/DailyActivity.jsx new file mode 100644 index 0000000..888ff00 --- /dev/null +++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/DailyActivity.jsx @@ -0,0 +1,22 @@ +import { Box, Text } from "@chakra-ui/react"; + +export function DailyActivity() { + return( + + + Daily Activity dashboard coming soon. + + + ); +} \ No newline at end of file diff --git a/client/src/components/layout/Canvas/views/DashboardCanvasNav/Gas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/Gas.jsx new file mode 100644 index 0000000..7589d69 --- /dev/null +++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/Gas.jsx @@ -0,0 +1,22 @@ +import { Box, Text } from "@chakra-ui/react"; + +export function Gas() { + return( + + + Gas dashboard coming soon. + + + ); +} \ No newline at end of file diff --git a/client/src/components/layout/Canvas/views/DashboardCanvasNav/RemoteSensing.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/RemoteSensing.jsx new file mode 100644 index 0000000..1f0437b --- /dev/null +++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/RemoteSensing.jsx @@ -0,0 +1,22 @@ +import { Box, Text } from "@chakra-ui/react"; + +export function RemoteSensing() { + return( + + + Remote Sensing dashboard coming soon. + + + ); +} \ No newline at end of file diff --git a/client/src/components/layout/Canvas/views/DashboardCanvasNav/Seismic.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/Seismic.jsx new file mode 100644 index 0000000..42d2570 --- /dev/null +++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/Seismic.jsx @@ -0,0 +1,22 @@ +import { Box, Text } from "@chakra-ui/react"; + +export function Seismic() { + return( + + + Seismic dashboard coming soon. + + + ); +} \ No newline at end of file diff --git a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx b/client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx similarity index 97% rename from client/src/components/layout/Canvas/views/WidgetCanvas.jsx rename to client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx index 33e0912..68d5532 100644 --- a/client/src/components/layout/Canvas/views/WidgetCanvas.jsx +++ b/client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx @@ -4,7 +4,7 @@ import { useState } from 'react'; import GridLayout, { WidthProvider } from 'react-grid-layout'; -import Widget from '../Widget.jsx'; +import Widget from '../../components/Widget.jsx'; import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react'; export default function WidgetCanvas() { From 2cdc5e1e825387890d1e5e48968079afaf3edf78 Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Thu, 24 Jul 2025 08:57:24 -0700 Subject: [PATCH 2/4] file name change --- .../Canvas/views/{DashboardCanvas.jsx => MyDashboardCanvas.jsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename client/src/components/layout/Canvas/views/{DashboardCanvas.jsx => MyDashboardCanvas.jsx} (100%) diff --git a/client/src/components/layout/Canvas/views/DashboardCanvas.jsx b/client/src/components/layout/Canvas/views/MyDashboardCanvas.jsx similarity index 100% rename from client/src/components/layout/Canvas/views/DashboardCanvas.jsx rename to client/src/components/layout/Canvas/views/MyDashboardCanvas.jsx From 2db5514f2c5476bc0f321b74a82420c3f0b4d5cd Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Thu, 24 Jul 2025 09:01:35 -0700 Subject: [PATCH 3/4] fixing refrences after file rename --- client/src/components/layout/Canvas/Canvas.jsx | 4 ++-- .../src/components/layout/Canvas/views/MyDashboardCanvas.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/components/layout/Canvas/Canvas.jsx b/client/src/components/layout/Canvas/Canvas.jsx index 585d3d6..a12282a 100644 --- a/client/src/components/layout/Canvas/Canvas.jsx +++ b/client/src/components/layout/Canvas/Canvas.jsx @@ -7,12 +7,12 @@ import GlobalMapCanvas from "./views/GlobalMapCanvas"; import RegionalMapCanvas from "./views/RegionalMapCanvas"; import VolcanoCanvas from "./views/VolcanoCanvas"; import AdminCanvas from "./views/AdminCanvas"; -import { DashboardCanvas } from "./views/DashboardCanvas"; +import { MyDashboardCanvas } from "./views/MyDashboardCanvas"; export default function Canvas({ view }) { return ( - {view === "widget" && } + {view === "widget" && } {view === "global" && } {view === "regional" && } {view === "volcano" && } diff --git a/client/src/components/layout/Canvas/views/MyDashboardCanvas.jsx b/client/src/components/layout/Canvas/views/MyDashboardCanvas.jsx index 5fee2cc..4bd1129 100644 --- a/client/src/components/layout/Canvas/views/MyDashboardCanvas.jsx +++ b/client/src/components/layout/Canvas/views/MyDashboardCanvas.jsx @@ -7,7 +7,7 @@ import { Gas } from "./DashboardCanvasNav/Gas"; import { Seismic } from "./DashboardCanvasNav/Seismic"; import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing"; -export function DashboardCanvas() { +export function MyDashboardCanvas() { return ( Date: Thu, 24 Jul 2025 12:08:10 -0700 Subject: [PATCH 4/4] 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";