chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new 'views' directory that handles what the Canvas displays. Refactor Canvas.jsx to act as a router between canvas views. Add /views/WidgetCanvas to handle default view

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-07-21 14:12:32 -07:00
parent a1f2fcc9be
commit 8a34f11a46
4 changed files with 19 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Canvas/Canvas.jsx
+15 -37
View File
@@ -1,45 +1,23 @@
// 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 CanvasHeader from './CanvasHeader';
import GridLayout from 'react-grid-layout';
import Widget from './Widget.jsx';
import { Box } from '@chakra-ui/react';
// This Canvas component will be used to dynamically populate
// the main canvas section of the web App with a default state
// of 'WidgetCanvas'
import { useState } from "react";
import { Box } from "@chakra-ui/react";
import CanvasHeader from "./CanvasHeader";
import WidgetCanvas from "./views/WidgetCanvas";
import MapCanvas from "./views/MapCanvas";
import AdminCanvas from "./views/AdminCanvas";
export default function Canvas() {
// Define widgets initial position and size
// TODO Add dynamic adding/deleting of widgets via options button
const [layout, setLayout] = useState([
{ i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
{ i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
{ i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
]);
const onLayoutChange = (newLayout) => {
setLayout(newLayout);
console.log('Updated layout:', newLayout)
};
const [view, setView] = useState("widget");
return (
<Box height="100%" width="100%">
<CanvasHeader />
<GridLayout
className="layout"
layout={layout}
cols={12} // Total columns in grid
rowHeight={30} //Height of a single row in px
width={1200} // Total width of the grid
margin={[10, 10]} // [horizontal, vertical] gap
onLayoutChange={onLayoutChange}
draggableHandle=".widget-handle" // Make only the header draggable
>
{layout.map((item) => (
<div key={item.i} style={{ background: '#f0f0f0', borderRadius: 4 }}>
<Widget title="VDAP Widget" />
</div>
))}
</GridLayout>
<CanvasHeader onSwitchView={setView} />
{view === "widget" && <WidgetCanvas />}
{view === "map" && <MapCanvas />}
{view === "admin" && <AdminCanvas />}
</Box>
);
}
client/src/components/layout/Canvas/CanvasHeader.jsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react";
import { CanvasHeaderNav } from "./CanvasHeaderNav.jsx";
import { SearchBar } from "./SearchBar.jsx";
import { SettingsButton } from "./SettingsButton.jsx";
import { CanvasHeaderNav } from "./CanvasHeaderNav";
import { SearchBar } from "./SearchBar";
import { SettingsButton } from "./SettingsButton";
client/src/components/layout/Canvas/Widget.jsx
-60
View File
@@ -1,4 +1,3 @@
// Widget.jsx
export default function Widget({ title }) {
return (
<>
@@ -15,62 +14,3 @@ export default function Widget({ title }) {
);
}
// The below code has been moved to Canvas.jsx
// // 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 from 'react-grid-layout';
// export default function Widget() {
// // Define widgets initial position and size
// // TODO Add dynamic adding/deleting of widgets via options button
// const [layout, setLayout] = useState([
// { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
// { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
// { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
// ]);
// const onLayoutChange = (newLayout) => {
// setLayout(newLayout);
// console.log('Updated layout:', newLayout)
// };
// return (
// <GridLayout
// className="layout"
// layout={layout}
// cols={12} // Total columns in grid
// rowHeight={30} //Height of a single row in px
// width={1200} // Total width of the grid
// margin={[10, 10]} // [horizontal, vertical] gap
// onLayoutChange={onLayoutChange}
// draggableHandle=".widget-handle" // Make only the header draggable
// >
// <div key="myWidget1" style={{ background: '#f0f0f0', borderRadius: 4 }}>
// <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
// VDAP Widget
// </div>
// <div style={{ padding: '8px' }}>
// This is the widget content - drag or resize me!
// </div>
// </div><div key="myWidget2" style={{ background: '#f0f0f0', borderRadius: 4 }}>
// <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
// VDAP Widget
// </div>
// <div style={{ padding: '8px' }}>
// This is the widget content - drag or resize me!
// </div>
// </div><div key="myWidget3" style={{ background: '#f0f0f0', borderRadius: 4 }}>
// <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
// VDAP Widget
// </div>
// <div style={{ padding: '8px' }}>
// This is the widget content - drag or resize me!
// </div>
// </div>
// </GridLayout>
// );
// }
client/src/components/layout/Header/UserAvatarMenu.jsx
+1 -1
View File
@@ -8,7 +8,7 @@ export default function UserAvatarMenu({ name, avatar }) {
<Box
rounded="full"
tabIndex={0}
_hover={{ boxShadow: "0 0 0 2px rgb(37, 77, 197)" }}
_hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
>
<Avatar.Root shape="full">
<Avatar.Fallback name={name} />