Refactor made changes to file structures

2026-06-10 14:00:37 -07:00
parent 305ee4e757
commit baaf162df9
46 changed files with 42 additions and 177 deletions
@@ -0,0 +1,7 @@
+import { Button } from "@chakra-ui/react";
+
+export function CancelButton ({onCancel}) {
+  return (
+    <Button onClick={onCancel} borderRadius="md">Cancel</Button>
+  )
+}
@@ -0,0 +1,39 @@
+// DEPRECATED
+
+// import GlobalMap from "./views/GlobalMap";
+// import RegionalMap from "./views/RegionalMap";
+// import Volcano from "./views/Volcano";
+// import Admin from "./views/Admin";
+// import Account from "./views/Account"
+// import Home from "./views/Home";
+// import { DASHBOARD_VIEWS, ADMIN_VIEWS, VOLCANO_VIEWS } from "@/constants/viewKeys";
+// import { chakra } from "@chakra-ui/react";
+// import Personal from "./views/Personal";
+// import Security from "./views/Security";
+//
+// export default function Canvas(props) {
+//   const { view } = props;
+//
+//   return (
+//         <chakra.div width="100%" height="100%">
+//             {/* Check if view is a tab inside the Home Header */}
+//             { DASHBOARD_VIEWS.includes(view) && (
+//                 <Home {...props}/>
+//             )}
+//             {/* Check if view is a tab inside the Volcano Header */}
+//             { VOLCANO_VIEWS.includes(view) && (
+//                 <Volcano {...props}/>
+//             )}
+//             {/* Check if view is a tab inside the Admin Header */}
+//             { ADMIN_VIEWS.includes(view) && (
+//                 <Admin {...props}/>
+//             )}
+//             {view === "global" && <GlobalMap />}
+//             {view === "regional" && <RegionalMap />}
+//             {view === "account" && <Account />}
+//             {view === "settings" && <Personal />}
+//             {view === "personal" && <Personal />}
+//             {view === "security" && <Security />}
+//         </chakra.div>
+//     );
+// }
@@ -0,0 +1,27 @@
+import { MoveDiagonal2 } from 'lucide-react';
+import React from "react";
+
+const CustomResizeHandle = React.forwardRef((props, ref) => {
+  const { handleAxis, isVisable, ...restProps } = props;
+  if (!isVisable) return null;
+  return (
+    <div
+      ref={ref}
+      {...restProps}
+      className={`resize-hande-${handleAxis}`}
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        cursor: "pointer",
+        width: "20px",
+        height: "20px",
+        zIndex: "1",
+      }}
+    >
+      <MoveDiagonal2 />
+    </div>
+  );
+});
+
+export default CustomResizeHandle;
@@ -0,0 +1,95 @@
+// DEPRECATED
+
+// import Header from './Header/Header.jsx';
+// import Sidebar from './Sidebar/Sidebar.jsx';
+// import Canvas from './Canvas/Canvas.jsx';
+// import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react';
+// import { useState } from 'react';
+// import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx';
+//
+// export default function Dashboard() {
+//   const recipe = useRecipe({ key: "dashboard" });
+//   const styles = recipe();
+//
+//   const [darkMode, setDarkMode] = useState(false);
+//   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
+//   const [isDelete, setIsDelete] = useState(false);
+//   const [originalLayout, setOriginalLayout] = useState([]);
+//   const [originalWidgets, setOriginalWidgets] = useState([]);
+//   const [view, setView] = useState("mydashboard");
+//   const [layout, setLayout] = useState([]);
+//   const [widgetArray, setWidgetArray] = useState([]);
+//   const dialog = useDialog();
+//
+//   const beginEditIfNeeded = () => {
+//     if ( !isEditable ) {
+//       setOriginalLayout(layout);
+//       setOriginalWidgets(widgetArray);
+//     }
+//   };
+//
+//   const onCancel = () => {
+//     console.log("canceling changes...");
+//     console.log(originalWidgets);
+//     if (originalLayout.length) {
+//       setLayout(originalLayout.map(item => ({
+//         ...item,
+//         static: true
+//       })));
+//     };
+//     setWidgetArray(originalWidgets);
+//     setIsEditable(false);
+//     setIsDelete(false);
+//     setOriginalLayout([]);
+//     setOriginalWidgets([]);
+//   }
+//
+//   // Prevent navigation while in Edit mode without saving or cancelling
+//   const handleViewChange = (nextView) => {
+//     console.log("1. handling view change")
+//     if (view === "mydashboard" && isEditable) {
+//       console.log("2. currently editing");
+//       dialog.setOpen(true);
+//       return;
+//
+//       // const confirmed = window.confirm(
+//       //   "You have unsaved changes. Discard them and continue?"
+//       // );
+//       // if (!confirmed) return;
+//       // onCancel();
+//     }
+//     setView(nextView);
+//   };
+//
+//   const onLayoutChange = (newLayout) => setLayout(newLayout);
+//
+//   // Prop Forwarding
+//   const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange,
+//     onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, originalWidgets, setOriginalWidgets, beginEditIfNeeded
+//   };
+//   const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
+//   const headerProps = { onChangeView: handleViewChange };
+//
+//   return (
+//     <>
+//       <DialogPopup dialog={dialog} />
+//       <Grid css={styles}
+//         templateRows="1fr 11fr"
+//         // templateColumns="1fr 20fr"
+//         templateColumns="auto 1fr"
+//         height="100vh"
+//         width="100vw"
+//       >
+//         <GridItem rowSpan={1} colSpan={2}>
+//           <Header {...headerProps}/>
+//         </GridItem>
+//         <GridItem colSpan={1}>
+//           <Sidebar {...sidebarProps}/>
+//         </GridItem>
+//         <GridItem colSpan={1} width="100%" overflow="auto">
+//           <Canvas {...canvasProps}/>
+//         </GridItem>
+//       </Grid>
+//     </>
+//   );
+// }
@@ -0,0 +1,9 @@
+import { Button } from "@chakra-ui/react";
+
+export default function DeleteAllButton ({onDeleteAll}) {
+  return (
+    <Button onClick={onDeleteAll} color="#FFFFFF" bg="#EF4444" _hover={{ bg: "bg.error", color: "#EF4444"}}>
+      Delete All
+    </Button>
+  )
+}
@@ -0,0 +1,57 @@
+import { Box, Menu, Portal } from '@chakra-ui/react'
+import AlertLevel from "@/components/Widgets/AlertLevelWidget.jsx";
+
+export default function FirstWidgetButton({ appendWidget }) {
+  const triggerItem = (
+    <>
+      <Menu.Trigger asChild>
+        <Box
+          p={6}
+          m="auto"
+          mt={6}
+          align="center"
+          textAlign="center"
+          justify="center"
+          width="400px"
+          borderRadius="md"
+          boxShadow="md"
+          border="2px dashed"
+          borderColor="gray.300"
+          bg="gray.50"
+          cursor="pointer"
+          _hover = {{
+            bg: "gray.100",
+            borderColor: "gray.400",
+            boxShadow: "lg",
+          }}
+        >
+          Add Your First Widget
+        </Box>
+      </Menu.Trigger>
+    </>
+  );
+  const positioning = { placement: "bottom-middle" };
+  // const WidgetMenuProps = { appendWidget, triggerItem, positioning };
+  return (
+    // <WidgetMenu {...WidgetMenuProps} />
+    <Menu.Root positioning={positioning}>
+      {triggerItem}
+      <Portal>
+        <Menu.Positioner>
+          <Menu.Content>
+            <Menu.Item
+              value="AlertLevel"
+              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
+            >
+              Alert Level
+            </Menu.Item>
+            <Menu.Item value="CO2">CO2</Menu.Item>
+            <Menu.Item value="Ivans">IVANS</Menu.Item>
+            <Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
+            <Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Portal>
+    </Menu.Root>
+  );
+}
@@ -0,0 +1,7 @@
+import { Button } from "@chakra-ui/react";
+
+export function SaveButton ({onSave}) {
+  return (
+    <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
+  )
+}
@@ -0,0 +1,26 @@
+import { Menu, Portal } from "@chakra-ui/react";
+import AlertLevel from "../Widgets/AlertLevelWidget.jsx";
+
+export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
+  return (
+    <Menu.Root positioning={positioning}>
+      {triggerItem}
+      <Portal>
+        <Menu.Positioner>
+          <Menu.Content>
+            <Menu.Item 
+              value="AlertLevel" 
+              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
+            >
+              Alert Level
+            </Menu.Item>
+            <Menu.Item value="CO2">CO2</Menu.Item>
+            <Menu.Item value="Ivans">IVANS</Menu.Item>
+            <Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
+            <Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Portal>
+    </Menu.Root>
+  )
+}
@@ -0,0 +1,35 @@
+import { Tooltip as ChakraTooltip, Portal } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
+  const {
+    showArrow,
+    children,
+    disabled,
+    portalled = true,
+    content,
+    contentProps,
+    portalRef,
+    ...rest
+  } = props
+
+  if (disabled) return children
+
+  return (
+    <ChakraTooltip.Root {...rest}>
+      <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraTooltip.Positioner>
+          <ChakraTooltip.Content ref={ref} {...contentProps}>
+            {showArrow && (
+              <ChakraTooltip.Arrow>
+                <ChakraTooltip.ArrowTip />
+              </ChakraTooltip.Arrow>
+            )}
+            {content}
+          </ChakraTooltip.Content>
+        </ChakraTooltip.Positioner>
+      </Portal>
+    </ChakraTooltip.Root>
+  )
+})