lots of file surgery, it works

2025-07-24 12:08:10 -07:00
parent 2db5514f2c
commit 85160caae0
4 changed files with 62 additions and 47 deletions
@@ -0,0 +1,106 @@
+import { HStack, Flex, Tabs } from "@chakra-ui/react";
+import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
+import { SearchBar } from "../components/SearchBar";
+import { SettingsButton } from "../components/SettingsButton";
+import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
+import { Gas } from "./DashboardCanvasNav/Gas";
+import { Seismic } from "./DashboardCanvasNav/Seismic";
+import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
+import { useState } from "react";
+
+export function DashboardCanvas() {
+  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 onAddWidget = () => {
+    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 onRemoveWidget = (id) => {
+    setLayout(prev => prev.filter(w => w.i !== id));
+  }
+
+  const onLayoutChange = (newLayout) => { 
+    setLayout(newLayout);
+    console.log('Updated layout:', newLayout)
+  };
+
+  return (
+    /* HEADER */
+    <Tabs.Root defaultValue="my dashboard">
+      <Flex 
+        as="header"
+				position="sticky"
+				top="0"
+				bg="base200"
+				px={6}
+				py={3}
+				align="center"
+				justify="space-between"
+      >
+        <Tabs.List>
+          <Tabs.Trigger value="my dashboard">
+            My Dashboard
+          </Tabs.Trigger>
+          <Tabs.Trigger value="gas">
+            Gas
+          </Tabs.Trigger>
+          <Tabs.Trigger value="seismic">
+            Seismic
+          </Tabs.Trigger>
+          <Tabs.Trigger value="remote sensing">
+            Remote Sensing
+          </Tabs.Trigger>
+                  <Tabs.Trigger value="daily activity">
+            Daily Activity
+          </Tabs.Trigger>
+        </Tabs.List>
+
+        <HStack>
+          <SearchBar />
+          <SettingsButton 
+            onAddWidget={ onAddWidget }
+            // onEditWidgets={ onEditWidgets }
+            onDeleteWidgets={ onRemoveWidget }
+          />
+        </HStack>
+      </Flex>
+
+      {/* CANVAS */}
+      <Tabs.Content value="my dashboard">
+        <WidgetCanvas 
+          layout={layout}
+          onLayoutChange={onLayoutChange}
+        />
+      </Tabs.Content>
+      <Tabs.Content value="gas">
+        <Gas />
+      </Tabs.Content>
+      <Tabs.Content value="seismic">
+        <Seismic />
+      </Tabs.Content>
+      <Tabs.Content value="remote sensing">
+        <RemoteSensing />
+      </Tabs.Content>
+      <Tabs.Content value="daily activity">
+        <DailyActivity />
+      </Tabs.Content>
+    </Tabs.Root>
+  );
+}