added tabs and file restructure

2025-07-24 08:52:20 -07:00
parent 0ca419a093
commit 1d5b00448b
13 changed files with 184 additions and 89 deletions
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function DailyActivity() {
+  return(
+    <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+      <Box
+        bg="bg" 
+        shadow="md" 
+        borderRadius="md"
+        p={8}
+        width="600px"
+        height="100px"
+        textAlign="center"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Text fontsize="2xl" fontWeight="bold" color="gray.700">Daily Activity dashboard coming soon.</Text>
+      </Box>
+    </Box>
+  );
+}
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function Gas() {
+	return(
+		<Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+			<Box
+				bg="bg" 
+				shadow="md" 
+				borderRadius="md"
+				p={8}
+				width="600px"
+				height="100px"
+				textAlign="center"
+				display="flex"
+				alignItems="center"
+				justifyContent="center"
+			>
+				<Text fontsize="2xl" fontWeight="bold" color="gray.700">Gas dashboard coming soon.</Text>
+			</Box>
+		</Box>
+	);
+}
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function RemoteSensing() {
+  return(
+    <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+			<Box
+				bg="bg" 
+				shadow="md" 
+				borderRadius="md"
+				p={8}
+				width="600px"
+				height="100px"
+				textAlign="center"
+				display="flex"
+				alignItems="center"
+				justifyContent="center"
+			>
+				<Text fontsize="2xl" fontWeight="bold" color="gray.700">Remote Sensing dashboard coming soon.</Text>
+			</Box>
+		</Box>
+  );
+}
@@ -0,0 +1,22 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export function Seismic() {
+	return(
+    <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+			<Box
+				bg="bg" 
+				shadow="md" 
+				borderRadius="md"
+				p={8}
+				width="600px"
+				height="100px"
+				textAlign="center"
+				display="flex"
+				alignItems="center"
+				justifyContent="center"
+			>
+				<Text fontsize="2xl" fontWeight="bold" color="gray.700">Seismic dashboard coming soon.</Text>
+			</Box>
+		</Box>
+  );
+}
@@ -0,0 +1,60 @@
+// 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() {
+    // 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 onLayoutChange = (newLayout) => { 
+        setLayout(newLayout);
+        console.log('Updated layout:', newLayout)
+    };
+
+    // don't allow text highlighting when dragging
+    const handleDragStart = () => {
+        document.body.style.userSelect = "none";
+    };
+    // allow text highlighting all other times
+    const handleDragStop = () => {
+        document.body.style.userSelect = "";
+    };
+
+    return (
+        <chakra.div width="100%">
+            <ResponsiveGridLayout
+                className="layout"
+                layout={layout}
+                cols={12} // Total columns in grid
+                rowHeight={30} //Height of a single row in px
+                isBounded={true} // Total width of the grid
+                margin={[10, 10]} // [horizontal, vertical] gap
+                onLayoutChange={onLayoutChange}
+                draggableHandle=".widget-handle" // Make only the header draggable
+                onDragStart={handleDragStart}
+                onDragStop={handleDragStop}
+            >
+                {layout.map((item) => (
+                    // this flex wrapper allows the widget to shrink down to the header size, no less
+                    <Flex key={item.i} css={styles.root} height="100%" >
+                        <Widget title="VDAP Widget" />
+                    </Flex>
+                ))}
+            </ResponsiveGridLayout>
+        </chakra.div>
+    );
+}