Skip to content

Commit

Permalink
got formatting and display issues ironed out. saving state just in ca…
Browse files Browse the repository at this point in the history
…se i break it again later on
  • Loading branch information
siddheshraze committed Nov 20, 2023
1 parent 3e908b1 commit d76a921
Show file tree
Hide file tree
Showing 12 changed files with 200 additions and 315 deletions.
98 changes: 0 additions & 98 deletions NextJSApp/frontend/app/(endpoints)/layout.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,18 @@ import Typography from "@mui/joy/Typography";
import {Button, DialogActions, DialogContent, DialogTitle, Grid, Modal, ModalDialog, Stack} from "@mui/joy";
import Divider from "@mui/joy/Divider";
import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
import {AttributesCard, CensusCard, PersonnelCard, QuadratCard, SpeciesCard} from "@/components/iconselections";
import Box from "@mui/joy/Box";
import PersonnelBackground from '@/public/personneliconphoto.jpg';
import SpeciesBackground from '@/public/speciesiconphoto.jpg';
import AttributeBackground from '@/public/attributesiconphoto.jpg';
import CensusBackground from '@/public/censusiconphoto.jpg';
import QuadratBackground from '@/public/quadraticonphoto.jpg';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import DescriptionIcon from '@mui/icons-material/Description';
import GridOnIcon from '@mui/icons-material/GridOn';
import WidgetsIcon from '@mui/icons-material/Widgets';
import BugReportIcon from '@mui/icons-material/BugReport';
import {TemplateCard} from "@/components/iconselection";

export default function Page() {
const currentPlot = usePlotContext();
Expand Down Expand Up @@ -48,42 +59,36 @@ export default function Page() {
else {
return (
<>
<Stack direction={"column"}>
<Box sx={{
// flex: 1,
// flexGrow: 1,
// display: 'flex',
display: 'inherit',
flexDirection: 'column',
}}>
<Typography display={"block"}>You have selected {currentPlot ? currentPlot!.key : "no plot"}</Typography>
<Typography display={"block"}>You have selected {currentCensus ? currentCensus : "no census"}</Typography>
<Typography display={"block"}>You have selected {currentQuadrat ? currentQuadrat : "no quadrat"}</Typography>
<Grid container spacing={2} sx={{flexGrow: 1}}>
<Grid xs={5}>
<PersonnelCard />
{/*<Grid container spacing={2} sx={{flexGrow: 1}}>*/}
<Grid container columnSpacing={2} rowSpacing={10}>
<Grid xs={4}>
{TemplateCard(PersonnelBackground, <AccountCircleIcon />, "Personnel", "/personnel")}
</Grid>
<Grid xs={2}>

<Grid xs={4}>
{TemplateCard(AttributeBackground, <DescriptionIcon />, "Attributes", "/attributes")}
</Grid>
<Grid xs={5}>
<AttributesCard />
<Grid xs={4}>
{TemplateCard(CensusBackground, <GridOnIcon />, "Census", "/census")}
</Grid>

<Grid xs={3}>

</Grid>
<Grid xs={6}>
<CensusCard />
</Grid>
<Grid xs={3}>

{TemplateCard(QuadratBackground, <WidgetsIcon />, "Quadrats", "/quadrats")}
</Grid>

<Grid xs={5}>
<QuadratCard />
</Grid>
<Grid xs={2}>

</Grid>
<Grid xs={5}>
<SpeciesCard />
<Grid xs={6}>
{TemplateCard(SpeciesBackground, <BugReportIcon />, "Species", "/species")}
</Grid>
</Grid>
</Stack>
</Box>
</>
);
}
Expand Down
File renamed without changes.
File renamed without changes.
87 changes: 87 additions & 0 deletions NextJSApp/frontend/app/(hub)/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
"use client";
import * as React from "react";
import {subtitle, title} from "@/config/primitives";
import {redirect, usePathname} from "next/navigation";
import {useSession} from "next-auth/react";
import {Box, Stack} from "@mui/joy";
import Sidebar from "@/components/sidebar";
import Divider from "@mui/joy/Divider";
import Header from "@/components/header";

export default function EndpointLayout({children,}: { children: React.ReactNode }) {
useSession({
required: true,
onUnauthenticated() {
redirect('/login');
},
});

function renderSwitch(endpoint: string) {
switch (endpoint) {
case '/dashboard':
return (
<>
<h3 className={title({color: "cyan"})} key={endpoint}>Dashboard View</h3>
</>
)
case '/data':
return (
<>
<h2 className={title({color: "green"})} key={endpoint}>Data Hub</h2>
</>
)
case '/files':
return (
<>
<h3 className={title({color: "pink"})} key={endpoint}>File Hub</h3>
</>
)
default:
return (
<>
</>
);
}
}

let pathname = usePathname();
return (
<>
{/*<Stack direction={"row"}>*/}
{/*</Stack>*/}
<Sidebar/>
<Header />
<Box
component="main"
className="MainContent"
sx={{
marginLeft: '25px',
marginTop: 'var(--Header-height)',
display: 'flex',
flexDirection: 'column',
minWidth: 0,
gap: 1,
flexGrow: 1,
flexShrink: 1,
}}
>
<Box sx={{display: 'flex', alignItems: 'left', paddingTop: '25px', paddingBottom: '25px'}}>
{renderSwitch(pathname)}
</Box>
<Box sx={{display: 'flex', alignItems: 'center'}}>
{children}
</Box>
<Box mt={3} position="absolute" bottom="25px" right="calc(40% - var(--Sidebar-width))"
sx={{display: 'flex', alignItems: 'center', flexDirection: 'row'}}>
<Box>
<h1 className={title({color: "violet"})}>ForestGEO&nbsp;</h1>
</Box>
<Divider orientation={"vertical"} sx={{marginRight: 2}}/>
<Box>
<p className={subtitle({color: "cyan"})}>A data entry and validation system for your convenience.</p>
</Box>
</Box>
</Box>
</>
);
}
27 changes: 16 additions & 11 deletions NextJSApp/frontend/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,22 @@ export default function RootLayout({children,}: { children: React.ReactNode; })
return (
<>
<html lang="en" suppressContentEditableWarning suppressHydrationWarning className={"dark"}>
<head>
<title>ForestGEO Data Entry</title>
</head>
<ContextsProvider>
<Providers>
<Box sx={{display: 'flex', minHeight: '100vh', minWidth: '100vh'}}>
{children}
</Box>
{/*<DrawerNav />*/}
</Providers>
</ContextsProvider>
<head>
<title>ForestGEO Data Entry</title>
</head>
<body>
<ContextsProvider>
<Providers>
{/*<Box sx={{display: 'block flex', flexGrow: 1}}>*/}
{/* {children}*/}
{/*</Box>*/}
<Box sx={{display: 'flex', width: '100%', height: '100%'}}>
{children}
</Box>
{/*<DrawerNav />*/}
</Providers>
</ContextsProvider>
</body>
</html>
</>
);
Expand Down
47 changes: 47 additions & 0 deletions NextJSApp/frontend/components/iconselection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import {Card, CardCover, Link} from '@mui/joy';
import {CardContent} from "@mui/joy";
import Typography from "@mui/joy/Typography";

import Image from 'next/image';
import NextLink from 'next/link';

export function TemplateCard(image: any, cardIcon: any, cardTitle: string, cardLink: string) {
return (
<>
{/*<Card sx={{ minHeight: '280px', maxWidth: '350px'}}>*/}
<Card>
<CardCover>
<Image
src={image}
alt=""
/>
</CardCover>
<CardCover
sx={{
background:
'linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
}}
/>
<CardContent sx={{ justifyContent: 'flex-end' }}>
<Typography level="title-lg" textColor="#fff">
<Link
component={NextLink}
overlay
underline="none"
href={cardLink}
sx={{ color: 'text.tertiary' }}
>
{cardTitle}
</Link>
</Typography>
<Typography
startDecorator={cardIcon}
textColor="neutral.300"
>
View and Edit
</Typography>
</CardContent>
</Card>
</>
);
}
Loading

0 comments on commit d76a921

Please sign in to comment.