Adding dialogs instead of window messages

This commit is contained in:
2025-08-11 15:10:58 -07:00
parent 9ad6e3b799
commit f8c9a0cc0b
3 changed files with 19 additions and 9 deletions
@@ -10,7 +10,7 @@ export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
<Menu.Content> <Menu.Content>
<Menu.Item <Menu.Item
value="AlertLevel" value="AlertLevel"
onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 4, 7)} // width and height are passed through here for each widget onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)} // width and height are passed through here for each widget
> >
Alert Level Alert Level
</Menu.Item> </Menu.Item>
+2 -2
View File
@@ -33,14 +33,14 @@ export default function Home({...props}) {
resizeHandles: ['se'] resizeHandles: ['se']
} }
]); ]);
onEditWidgets(); // onEditWidgets();
}; };
function appendWidget(name, w, h, minw, minh, maxw, maxh) { function appendWidget(name, w, h, minw, minh, maxw, maxh) {
const newID = uuid(); // could be replaced with something else like guid const newID = uuid(); // could be replaced with something else like guid
setWidgetArray([ // updating widget array containing info on the types of widgets setWidgetArray([ // updating widget array containing info on the types of widgets
...widgetArray, ...widgetArray,
{i: newID, widget: name } {i: newID, widget: name, resizable: true }
]); ]);
onAddWidget(newID, w, h, minw, minh, maxw, maxh); // updating array containing info on layout of widgets onAddWidget(newID, w, h, minw, minh, maxw, maxh); // updating array containing info on layout of widgets
} }
+16 -6
View File
@@ -1,8 +1,9 @@
import Header from './Header/Header.jsx'; import Header from './Header/Header.jsx';
import Sidebar from './Sidebar/Sidebar.jsx'; import Sidebar from './Sidebar/Sidebar.jsx';
import Canvas from './Canvas/Canvas.jsx'; import Canvas from './Canvas/Canvas.jsx';
import { Grid, GridItem, useRecipe, Dialog } from '@chakra-ui/react'; import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
import { useState } from 'react'; import { useState } from 'react';
import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
export default function Dashboard() { export default function Dashboard() {
const recipe = useRecipe({ key: "dashboard" }); const recipe = useRecipe({ key: "dashboard" });
@@ -15,6 +16,7 @@ export default function Dashboard() {
const [view, setView] = useState("mydashboard"); const [view, setView] = useState("mydashboard");
const [layout, setLayout] = useState([]); const [layout, setLayout] = useState([]);
const [widgetArray, setWidgetArray] = useState([]); const [widgetArray, setWidgetArray] = useState([]);
const dialog = useDialog();
const onCancel = () => { const onCancel = () => {
// This is a test comment // This is a test comment
@@ -33,11 +35,19 @@ export default function Dashboard() {
// Prevent navigation while in Edit mode without saving or cancelling // Prevent navigation while in Edit mode without saving or cancelling
const handleViewChange = (nextView) => { const handleViewChange = (nextView) => {
if (view === "mydashboard" && isEditable) { if (view === "mydashboard" && isEditable) {
const confirmed = window.confirm( dialog.open();
"You have unsaved changes. Discard them and continue?" <DialogPopup dialog={dialog}/>
);
if (!confirmed) return;
onCancel(); // Discards the layout
// const confirmed = window.confirm(
// "You have unsaved changes. Discard them and continue?"
// );
// if (!confirmed) return;
// onCancel();
} }
setView(nextView); setView(nextView);
}; };