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

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

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-07-23 16:40:52 -07:00
parent 0ca419a093
commit d61fd3dd02
4 changed files with 75 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Canvas/Canvas.jsx
+43 -2
View File
@@ -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 />
{view === "widget" && <WidgetCanvas />}
<CanvasHeader
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
+6 -4
View File
@@ -3,9 +3,7 @@ import { CanvasHeaderNav } from "./CanvasHeaderNav";
import { SearchBar } from "./SearchBar";
import { SettingsButton } from "./SettingsButton";
export default function CanvasHeader() {
export default function CanvasHeader({ onAddWidget, onEditWidgets, onDeleteWidgets }) {
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
+16 -16
View File
@@ -5,21 +5,21 @@
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
}
export function SettingsButton({ onAddWidget, onEditWidgets, onDeleteWidgets }) {
// 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 handleEditWidgdets = () => {
// console.log("Edit Widgets clicked")
// // TODO: Implement widget-editing logic
// }
const handleDeleteWidgets = () => {
console.log("Delete Widgets clicked");
// TODO: Implement widget-deletion logic
}
// const handleDeleteWidgets = () => {
// console.log("Delete Widgets clicked");
// // 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={handleEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
<Menu.Item onClick={ onAddWidget } value="addwidget">Add Widget</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
+10 -10
View File
@@ -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([
{ 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 [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)
};
// const onLayoutChange = (newLayout) => {
// setLayout(newLayout);
// console.log('Updated layout:', newLayout)
// };
// don't allow text highlighting when dragging
const handleDragStart = () => {