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

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

Browse Source 
added submenu to settings

See merge request vkuchenik/website-framework!43
This commit is contained in:
vkuchenik
2025-08-04 19:21:04 +00:00
parent eca6bc2405 6f41df3f88
commit 543d481aa9
9 changed files with 161 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/package-lock.json
Generated
+15 -1
View File
@@ -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
+2 -1
View File
@@ -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
+35
View File
@@ -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
+10
View File
@@ -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
+5 -8
View File
@@ -1,15 +1,12 @@
// This component displays a drop down menu when clicked, with custom functionality
// 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 { 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 (
// This uses Chakra's built in menu component
<Menu.Root>
<Menu.Trigger asChild>
<Menu.Trigger asChild >
<IconButton variant="ghost" size="md" borderRadius="xl">
<FiSettings />
</IconButton>
@@ -17,7 +14,7 @@ export function SettingsButton({onAddWidget, onEditWidgets, onDeleteWidgets}) {
<Portal>
<Menu.Positioner>
<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={onDeleteWidgets}
client/src/components/layout/Canvas/components/Widget.jsx
+2 -4
View File
@@ -1,13 +1,11 @@
import { useSlotRecipe, chakra, Flex, CloseButton, Text } from "@chakra-ui/react"
export default function Widget({ id, title, isEditable, isDelete, DeleteWidget }) {
// console.log("rendering widget");
export default function Widget({ id, title, isEditable, isDelete, DeleteWidget, children }) {
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
+19 -14
View File
@@ -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 }) {
const [newCounter, setNewCounter] = useState(3);
// Adding a widget triggers Edit mode
const onAddWidget = () => {
const newId = newCounter.toString();
export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChange }) {
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([]);
const onAddWidget = (ID) => {
setLayout(prev => [
...prev,
{
i: newId,
i: ID,
x: (prev.length * 3) % 12,
y: Infinity,
w: 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}
onLayoutChange={onLayoutChange}
isEditable={isEditable}
isDelete={isDelete}
DeleteWidget={DeleteWidget}
layout={ layout }
onLayoutChange={ onLayoutChange }
isEditable={ isEditable }
isDelete={ isDelete }
DeleteWidget={ DeleteWidget }
setWidgetArray={ setWidgetArray }
widgetArray={ widgetArray }
/>
</Tabs.Content>
<Tabs.Content value="gas">
client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx
+19 -19
View File
@@ -1,27 +1,25 @@
// 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
// 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 handleDragStart = () => { document.body.style.userSelect = "none"; }; // don't allow text highlighting when dragging
const handleDragStop = () => { document.body.style.userSelect = ""; }; // allow text highlighting all other times
let merged = [];
// don't allow text highlighting when dragging
const handleDragStart = () => {
document.body.style.userSelect = "none";
console.log("widgetArray: ", widgetArray);
console.log("layout: ", layout);
if (widgetArray.length && layout.length) {
const widgetMap = new Map(widgetArray.map(item => [item.i, item]));
merged = layout.map(item => {
return {
...item,
...widgetMap.get(item.i)
};
// allow text highlighting all other times
const handleDragStop = () => {
document.body.style.userSelect = "";
});
};
return (
@@ -38,12 +36,14 @@ export default function WidgetCanvas({layout, onLayoutChange, isEditable, isDele
onDragStart={handleDragStart}
onDragStop={handleDragStop}
>
{layout.map((item) => (
// this flex wrapper allows the widget to shrink down to the header size, no less
{merged.map((item) => {
const Widget = item.widget;
return (
<Flex key={item.i} css={styles.root} height="100%" >
<Widget id={item.i} title="VDAP Widget" isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
<Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
</Flex>
))}
)
})}
</ResponsiveGridLayout>
</chakra.div>
);
client/src/components/layout/Dashboard.jsx
+2 -6
View File
@@ -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([
{ 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 [layout, setLayout] = useState([]);
const onCancel = () => {
console.log("canceling changes...");