chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'add/dashboard/tabs' into 'main'

Browse Source 
Add/dashboard/tabs

See merge request vkuchenik/website-framework!24
This commit is contained in:
vkuchenik
2025-07-24 20:00:51 +00:00
parent 95be8eac21 741668f241
commit cc6d141d19
13 changed files with 223 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Canvas/Canvas.jsx
+2 -46
View File
@@ -3,59 +3,16 @@
// of 'WidgetCanvas'
import { Box } from "@chakra-ui/react";
import { useState } from 'react';
import CanvasHeader from "./CanvasHeader";
import WidgetCanvas from "./views/WidgetCanvas";
import GlobalMapCanvas from "./views/GlobalMapCanvas";
import RegionalMapCanvas from "./views/RegionalMapCanvas";
import VolcanoCanvas from "./views/VolcanoCanvas";
import AdminCanvas from "./views/AdminCanvas";
import { DashboardCanvas } from "./views/DashboardCanvas";
export default function Canvas({ view }) {
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 addWidget = () => {
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 removeWidget = (id) => {
setLayout(prev => prev.filter(w => w.i !== id));
}
const onLayoutChange = (newLayout) => {
setLayout(newLayout);
console.log('Updated layout:', newLayout)
};
return (
<Box height="100%" width="100%">
<CanvasHeader
onAddWidget={ addWidget }
onEditWidgets={() => console.log('Edit Widgets')}
onDeleteWidgets={() => console.log('Delete Widgets')}
/>
{view === "widget" &&
<WidgetCanvas
layout={ layout }
onLayoutChange={ onLayoutChange }
removeWidget={ removeWidget }
/>}
{view === "widget" && <DashboardCanvas />}
{view === "global" && <GlobalMapCanvas />}
{view === "regional" && <RegionalMapCanvas />}
{view === "volcano" && <VolcanoCanvas />}
@@ -63,4 +20,3 @@ export default function Canvas({ view }) {
</Box>
);
}
client/src/components/layout/Canvas/CanvasHeader.jsx
-35
View File
@@ -1,35 +0,0 @@
import { Flex, HStack, chakra, useRecipe } from "@chakra-ui/react";
import { CanvasHeaderNav } from "./CanvasHeaderNav";
import { SearchBar } from "./SearchBar";
import { SettingsButton } from "./SettingsButton";
export default function CanvasHeader({ onAddWidget, onEditWidgets, onDeleteWidgets }) {
const recipe = useRecipe({ key: "canvas" });
const styles = recipe();
return (
<chakra.div css={styles}>
<Flex
as="header"
position="sticky"
top="0"
bg="base200"
borderBottom="1px solid"
borderColor="gray.200"
px={6}
py={3}
align="center"
justify="space-between"
>
<CanvasHeaderNav />
<HStack spacing={3}>
<SearchBar />
<SettingsButton
onAddWidget={ onAddWidget }
onEditWidgets={ onEditWidgets }
onDeleteWidgets={ onDeleteWidgets }
/>
</HStack>
</Flex>
</chakra.div>
);
}
client/src/components/layout/Canvas/CanvasHeaderNav.jsx
-22
View File
@@ -1,22 +0,0 @@
import { HStack, Link } from "@chakra-ui/react"
const navItems = [
{ label: "My Dashboard", href: "#dashboard" },
{ label: "Gas", href: "#gas" },
{ label: "Seismic", href: "#seismic" },
{ label: "Remote Sensing", href: "#remote" },
{ label: "Daily Activity", href: "#daily" },
];
export function CanvasHeaderNav() {
return (
<HStack as="nav" gap="8">
{navItems.map(({ label, href }) => (
<Link key={href} href={href} fontWeight="medium">
{label}
</Link>
))}
</HStack>
);
}
client/src/components/layout/Canvas/SearchBar.jsx → client/src/components/layout/Canvas/components/SearchBar.jsx
View File
client/src/components/layout/Canvas/SettingsButton.jsx → client/src/components/layout/Canvas/components/SettingsButton.jsx
+3 -18
View File
@@ -5,22 +5,7 @@
import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
import { FiSettings } from "react-icons/fi";
export function SettingsButton({ onAddWidget, onEditWidgets, onDeleteWidgets }) {
// const handleAddWidget = () => {
// console.log("Add Widget clicked");
// // TODO: Implement widget-adding logic
// }
// const handleEditWidgdets = () => {
// console.log("Edit Widgets clicked")
// // TODO: Implement widget-editing logic
// }
// const handleDeleteWidgets = () => {
// console.log("Delete Widgets clicked");
// // TODO: Implement widget-deletion logic
// }
export function SettingsButton({onAddWidget, onEditWidgdets, onRemoveWidgets}) {
return (
// This uses Chakra's built in menu component
<Menu.Root>
@@ -33,9 +18,9 @@ export function SettingsButton({ onAddWidget, onEditWidgets, onDeleteWidgets })
<Menu.Positioner>
<Menu.Content>
<Menu.Item onClick={onAddWidget} value="addwidget">Add Widget</Menu.Item>
<Menu.Item onClick={ onEditWidgets } value ="editwidget">Edit Widgets</Menu.Item>
<Menu.Item onClick={onEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
<Menu.Item
onClick={ onDeleteWidgets }
onClick={onRemoveWidgets}
color="fg.error"
_hover={{ bg: "bg.error", color: "fg.error "}}
>
client/src/components/layout/Canvas/Widget.jsx → client/src/components/layout/Canvas/components/Widget.jsx
View File
client/src/components/layout/Canvas/views/DashboardCanvas.jsx
+106
View File
@@ -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>
);
}
client/src/components/layout/Canvas/views/DashboardCanvasNav/DailyActivity.jsx
+22
View File
@@ -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>
);
}
client/src/components/layout/Canvas/views/DashboardCanvasNav/Gas.jsx
+22
View File
@@ -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>
);
}
client/src/components/layout/Canvas/views/DashboardCanvasNav/RemoteSensing.jsx
+22
View File
@@ -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>
);
}
client/src/components/layout/Canvas/views/DashboardCanvasNav/Seismic.jsx
+22
View File
@@ -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>
);
}
client/src/components/layout/Canvas/views/WidgetCanvas.jsx → client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx
+2 -13
View File
@@ -4,27 +4,16 @@
import { useState } from 'react';
import GridLayout, { WidthProvider } from 'react-grid-layout';
import Widget from '../Widget.jsx';
import Widget from '../../components/Widget.jsx';
import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
export default function WidgetCanvas({ layout, onLayoutChange, removeWidget }) {
export default function WidgetCanvas({layout, onLayoutChange}) {
// 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";