138 lines
3.7 KiB
React
138 lines
3.7 KiB
React
import { HStack, Flex, Tabs, Button, Box } 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, useEffect } from "react";
|
|
|
|
export function DashboardCanvas({ layout, setLayout, onLayoutChange }) {
|
|
const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
|
|
const [newCounter, setNewCounter] = useState(3);
|
|
const [originalLayout, setOriginalLayout] = useState([]);
|
|
|
|
useEffect(() => {
|
|
setLayout(prevLayout =>
|
|
prevLayout.map(item => ({
|
|
...item,
|
|
static: !isEditable // static false means resizable/editable
|
|
}))
|
|
);
|
|
}, [isEditable]);
|
|
|
|
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 onEditWidgets = () => {
|
|
console.log("widgets are now editable");
|
|
setOriginalLayout(layout); // Backup layout before editing
|
|
setIsEditable(true); // Enable edit mode
|
|
}
|
|
|
|
const onSave = () => {
|
|
setOriginalLayout([]) // Clear backup layout
|
|
setIsEditable(false);
|
|
}
|
|
|
|
const onCancel = () => {
|
|
if (originalLayout.length) {
|
|
setLayout(originalLayout.map(item => ({
|
|
...item,
|
|
static: true
|
|
})));
|
|
};
|
|
setOriginalLayout([]);
|
|
setIsEditable(false);
|
|
}
|
|
|
|
const onDeleteWidgets = (id) => {
|
|
setLayout(prev => prev.filter(w => w.i !== id));
|
|
}
|
|
|
|
return (
|
|
/* HEADER */
|
|
<Tabs.Root lazyMount defaultValue="my dashboard">
|
|
<Flex
|
|
as="header"
|
|
position="sticky"
|
|
top="0"
|
|
zIndex="banner"
|
|
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 >
|
|
{isEditable ? (
|
|
<>
|
|
<Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
|
|
<Button onClick={onCancel} borderRadius="md">Cancel</Button>
|
|
</>
|
|
):(
|
|
<>
|
|
<SearchBar />
|
|
<SettingsButton
|
|
onAddWidget={ onAddWidget }
|
|
onEditWidgets={ onEditWidgets }
|
|
onDeleteWidgets={ onDeleteWidgets }
|
|
/>
|
|
</>
|
|
)}
|
|
</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>
|
|
);
|
|
} |