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

Merge branch 'main' into 'feature/dashboard/dark-mode'

Browse Source 
# Conflicts:
#   client/src/App.jsx
#   client/src/components/header.jsx
#   client/src/components/sidebar.jsx
This commit is contained in:
vkuchenik
2025-07-16 19:35:22 +00:00
parent 466ee6edc4 b4dd663a1d
commit e7abce2ed1
10 changed files with 422 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
-20
View File
@@ -1,20 +0,0 @@
# website-framework
## Add your files
- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
- [ ] [Add files using the command line](https://docs.gitlab.com/topics/git/add_files/#add-files-to-a-git-repository) or push an existing Git repository with the following command:
```
cd existing_repo
git remote add origin https://code.usgs.gov/vkuchenik/website-framework.git
git branch -M main
git push -uf origin main
```
## Name
Basic Webapp Framework
## Description
Building a foundational webapp framework that can be repurposed.
client/package-lock.json
Generated
+1
View File
@@ -4286,6 +4286,7 @@
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
client/src/App.jsx
+13 -4
View File
@@ -3,11 +3,13 @@ import Header from './components/header.jsx';
import Sidebar from './components/sidebar.jsx';
import Widget from './components/Widget.jsx'
import { Grid, GridItem, useRecipe } from "@chakra-ui/react"
import CanvasHeader from './components/CanvasHeader.jsx'
function App() {
const recipe = useRecipe({ key: "canvas" });
const styles = recipe();
return (
<Grid css={styles}
templateRows="1fr 11fr"
@@ -23,12 +25,17 @@ function App() {
</GridItem>
<GridItem colSpan={1}>
<Grid
templateRows="repeat(6 1fr)"
templateColumns="repeat(4 1fr)"
templateRows="repeat(12, 1fr)"
templateColumns="repeat(4, 1fr)"
height="100%"
width="100%"
>
<Widget />
>
<GridItem colSpan={4} rowSpan={1}>
<CanvasHeader />
</GridItem>
<GridItem colSpan={4} rowSpan={5}>
<Widget />
</GridItem>
</Grid>
</GridItem>
</Grid>
@@ -36,3 +43,5 @@ function App() {
}
export default App
client/src/components/CanvasHeader.jsx
+30
View File
@@ -0,0 +1,30 @@
import { Flex, HStack } from "@chakra-ui/react";
import { CanvasHeaderNav } from "./CanvasHeaderNav";
import { SearchBar } from "./SearchBar";
import { SettingsButton } from "./SettingsButton";
export default function CanvasHeader() {
return (
<>
<Flex
as="header"
position="sticky"
top="0"
// zIndex="banner"
bg="white"
borderBottom="1px solid"
borderColor="gray.200"
px={6}
py={3}
align="center"
justify="space-between"
>
<CanvasHeaderNav />
<HStack spacing={3}>
<SearchBar />
<SettingsButton />
</HStack>
</Flex>
</>
);
}
client/src/components/CanvasHeaderNav.jsx
+22
View File
@@ -0,0 +1,22 @@
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/SearchBar.jsx
+10
View File
@@ -0,0 +1,10 @@
import { Input, InputGroup } from "@chakra-ui/react";
import { FiSearch } from "react-icons/fi"
export function SearchBar({ placeholder="Search...", size="sm", width="200px"}) {
return (
<InputGroup startElement={<FiSearch />}>
<Input placeholder="Enter volcano to search" />
</InputGroup>
);
}
client/src/components/SettingsButton.jsx
+54
View File
@@ -0,0 +1,54 @@
// This component displays a drop down menu when clicked, with custom functionality
// for 'Add Widget', 'Edit Widgets', and 'Remove Widgets'. This component will
// control settings related to the Widgets on the main canvas.
import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
import { FiSettings } from "react-icons/fi";
export function SettingsButton(props) {
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
}
return (
// This uses Chakra's built in menu component
<Menu.Root>
<Menu.Trigger asChild>
<IconButton variant="ghost" size="md">
<FiSettings />
</IconButton>
</Menu.Trigger>
<Portal>
<Menu.Positioner>
<Menu.Content>
<Menu.Item onClick={handleAddWidget} value="addwidget">Add Widget</Menu.Item>
<Menu.Item onClick={handleEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
<Menu.Item
onClick={handleDeleteWidgets}
color="fg.error"
_hover={{ bg: "bg.error", color: "fg.error "}}
>
Delete Widgets
</Menu.Item>
</Menu.Content>
</Menu.Positioner>
</Portal>
</Menu.Root>
);
}
client/src/components/Widget.jsx
+6 -1
View File
@@ -1,8 +1,13 @@
// 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 from 'react-grid-layout';
export default function Widget() {
// Define widgets initial position and size
// Define widgets initial position and size
// TODO Add dynamic adding/deleting of widgets via options button
const [layout, setLayout] = useState([
{ i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
{ i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
client/src/components/header.jsx
+21 -8
View File
@@ -1,22 +1,35 @@
import { chakra, useRecipe, Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react"
import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal } from "@chakra-ui/react"
export default function Header() {
const recipe = useRecipe({ key: "header" });
const styles = recipe();
return (
<chakra.div css={styles}>
<Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
<Button variant="plain">
<Stack gap="0">
<Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
<Text color="fg.muted" textStyle="sm">{user.email}</Text>
</Stack>
<Stack gap="0">
<Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
<Text color="fg.muted" textStyle="sm">{user.email}</Text>
</Stack>
{/* Add a drop down menu to the avatar */}
<Menu.Root>
<Menu.Trigger rounded="full" focusRing="outside">
<Avatar.Root>
<Avatar.Fallback name={user.name} />
<Avatar.Image src={user.avatar} />
</Avatar.Root>
</Button>
</Menu.Trigger>
<Portal>
<Menu.Positioner zIndex="popover">
<Menu.Content>
<Menu.Item value="account">Account</Menu.Item>
<Menu.Item value="settings">Settings</Menu.Item>
<Menu.Item value="logout">Logout</Menu.Item>
</Menu.Content>
</Menu.Positioner>
</Portal>
</Menu.Root>
{/* End drop down menu */}
</chakra.div>
);
}
client/src/components/sidebar.jsx
+265 -44
View File
@@ -1,5 +1,5 @@
import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack } from "@chakra-ui/react";
import { useColorModeValue, ColorModeButton } from "@/components/ui/color-mode";
import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
import { ColorModeButton } from "@/components/ui/color-mode";
import { FaVolcano } from "react-icons/fa6";
import { RxHamburgerMenu } from "react-icons/rx";
import { useState } from "react";
@@ -57,57 +57,278 @@ export const Users = createIcon({
),
});
export default function Sidebar () {
const variant = useColorModeValue("ghost", "solid")
export default function Sidebar() {
const [isOpen, setIsOpen] = useState(true);
const [hasFinishedClosing, setHasFinishedClosing] = useState(true);
const [activeButton, setActiveButton] = useState(0)
const recipe = useSlotRecipe({ key: "sidebar" });
const styles = recipe();
const toggleSidebar = () => {
if (isOpen) {
setHasFinishedClosing(false);
setTimeout(() => setIsOpen(false), 10); // Kick off transition
setTimeout(() => setHasFinishedClosing(true), 400); // Match sidebar transition duration
} else {
setIsOpen(true);
setHasFinishedClosing(true);
}
};
return (
<chakra.div css={styles.root}>
{isOpen ? (
<>
<CloseButton color="secondary" size="sm" _hover={{bg: "#EDF1F1"}} variant="ghost" onClick={() => setIsOpen(!isOpen)}></CloseButton>
<Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined}>
<PushPin fill="iconFill" /> Dashboard
</Button>
<Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined}>
<Globe fill="iconFill" stroke="black" /> Global Map
</Button>
<Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined}>
<MapMarker fill="iconFill" stroke="black"/> Regional Map
</Button>
<Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined}>
<FaVolcano color="color"/> Volcano
</Button>
<Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined}>
<Users fill="iconFill" stroke="black"/> Admin
</Button>
</>
) : (
<>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" onClick={() => setIsOpen(!isOpen)}>
<RxHamburgerMenu />
</IconButton>
<IconButton color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
<PushPin fill="white"/>
</IconButton>
<IconButton color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
<Box
css={styles.root}
w={isOpen ? "220px" : "86px"}
transition="width 0.4s ease"
>
<IconButton
aria-label="Toggle Sidebar"
variant="ghost"
size="md"
onClick={toggleSidebar}
>
<RxHamburgerMenu />
</IconButton>
{/* Dashboard */}
<Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined}>
{isOpen ? (
<>
<PushPin fill="white" />
{/* Make text appear gradually instead of popping in */}
<span
style={{
marginLeft: "8px",
opacity: isOpen ? 1 : 0,
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
overflow: "hidden",
whiteSpace: "nowrap",
display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}}
>
Dashboard
</span>
</>
) : (
<PushPin fill="white" />
)}
</Button>
{/* Global Map */}
<Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined}>
{isOpen ? (
<>
<Globe fill="white" stroke="black" />
</IconButton>
<IconButton color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
<MapMarker fill="white" stroke="black" />
</IconButton>
<IconButton color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
{/* Make text appear gradually instead of popping in */}
<span
style={{
marginLeft: "8px",
opacity: isOpen ? 1 : 0,
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
overflow: "hidden",
whiteSpace: "nowrap",
display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}}
>
Global Map
</span>
</>
) : (
<Globe fill="white" stroke="black" />
)}
</Button>
{/* Regional Map */}
<Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined}>
{isOpen ? (
<>
<MapMarker fill="white" stroke="black"/>
{/* Make text appear gradually instead of popping in */}
<span
style={{
marginLeft: "8px",
opacity: isOpen ? 1 : 0,
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
overflow: "hidden",
whiteSpace: "nowrap",
display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}}
>
Regional Map
</span>
</>
) : (
<MapMarker fill="white" stroke="black" />
)}
</Button>
{/* Volcano */}
<Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined}>
{isOpen ? (
<>
{/* <FaVolcano size={20} style={{ marginRight: "1px" }} /> */}
<FaVolcano />
</IconButton>
<IconButton color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
{/* Make text appear gradually instead of popping in */}
<span
style={{
marginLeft: "8px",
opacity: isOpen ? 1 : 0,
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
overflow: "hidden",
whiteSpace: "nowrap",
display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}}
>
Volcano
</span>
</>
) : (
<FaVolcano />
)}
</Button>
{/* Admin */}
<Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined}>
{isOpen ? (
<>
{/* <Users boxSize={5} style={{ marginRight: "8px" }} /> */}
<Users fill="white" stroke="black" />
</IconButton>
</>
)}
{/* Make text appear gradually instead of popping in */}
<span
style={{
marginLeft: "8px",
opacity: isOpen ? 1 : 0,
maxWidth: isOpen ? "200px" : "0px", // prevent layout from expanding before fade-in
overflow: "hidden",
whiteSpace: "nowrap",
display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}}
>
Admin
</span>
</>
) : (
<Users fill="white" stroke="black" />
)}
</Button>
<ColorModeButton position="absolute" bottom="2"/>
</chakra.div>
</Box>
);
}
// THIS CODE WORKS, SAVE IN CASE OF EMERGENCY
// Needed to refactor in order allow transitions to work properly
// export default function Sidebar () {
// const [isOpen, setIsOpen] = useState(true);
// const [activeButton, setActiveButton] = useState("Dashboard")
// return (
// <>
// {isOpen && (
// <Box w="100%" h="100%"
// borderRight="1px"
// borderColor="black"
// borderStyle="solid"
// display="flex"
// flexDirection="column"
// justifyContent="start"
// alignItems="start"
// gap={4} paddingTop={4}
// paddingLeft={14} paddingRight={3}
// >
// {/* <CloseButton color="secondary" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton> */}
// {/* <RxHamburgerMenu color="secondary" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></RxHamburgerMenu> */}
// <Button
// aria-lable="Toggle Sidebar"
// color="secondary"
// _hover={{bg: "#EDF1F1"}}
// size="md" variant="ghost"
// left="-10"
// // ml="auto" // Margin-left: auto, pushes hamburger menu to right side
// onClick={() => setIsOpen(!isOpen)}
// >
// <RxHamburgerMenu />
// </Button>
// <Button color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
// <PushPin fill="white" /> Dashboard
// </Button>
// <Button color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
// <Globe fill="white" stroke="black" /> Global Map
// </Button>
// <Button color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
// <MapMarker fill="white" stroke="black"/> Regional Map
// </Button>
// <Button color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
// <FaVolcano /> Volcano
// </Button>
// <Button color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
// <Users fill="white" stroke="black" /> Admin
// </Button>
// </Box>
// )}
// {!isOpen && (
// <Box w="100%" h="100%"
// borderRight="1px"
// borderColor="black"
// borderStyle="solid"
// display="flex"
// flexDirection="column"
// justifyContent="start"
// alignItems="start"
// gap={4} padding={4}
// >
// <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="md" variant="ghost" onClick={() => setIsOpen(!isOpen)}>
// <RxHamburgerMenu />
// </IconButton>
// <IconButton color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
// <PushPin fill="white"/>
// </IconButton>
// <IconButton color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
// <Globe fill="white" stroke="black" />
// </IconButton>
// <IconButton color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
// <MapMarker fill="white" stroke="black" />
// </IconButton>
// <IconButton color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
// <FaVolcano />
// </IconButton>
// <IconButton color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
// <Users fill="white" stroke="black" />
// </IconButton>
// </Box>
// )}
// </>
// );
// }