From a027b8a96f4fbc212ff44619dc94b97b6d9b6a4c Mon Sep 17 00:00:00 2001 From: Carter Date: Wed, 12 Mar 2025 10:46:47 -0600 Subject: [PATCH] added grain bag list and svgs --- src/grainBag/grainBagCard.tsx | 4 +- src/grainBag/grainBagList.tsx | 35 +++++++---- src/grainBag/grainBagSVG.tsx | 8 +-- src/pages/Bins.tsx | 108 ++++++++++------------------------ 4 files changed, 59 insertions(+), 96 deletions(-) diff --git a/src/grainBag/grainBagCard.tsx b/src/grainBag/grainBagCard.tsx index 51f055e..c48feb5 100644 --- a/src/grainBag/grainBagCard.tsx +++ b/src/grainBag/grainBagCard.tsx @@ -1,8 +1,8 @@ -import { Box, Card, Typography } from "@material-ui/core"; +import { Box, Card, Typography } from "@mui/material"; import GrainDescriber from "grain/GrainDescriber"; import { GrainBag } from "models/GrainBag"; import moment from "moment"; -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import GrainBagSVG from "./grainBagSVG"; interface Props { diff --git a/src/grainBag/grainBagList.tsx b/src/grainBag/grainBagList.tsx index 9ef6717..b403dd3 100644 --- a/src/grainBag/grainBagList.tsx +++ b/src/grainBag/grainBagList.tsx @@ -1,11 +1,19 @@ -import { Box, Button, createStyles, Grid, makeStyles, Theme, Typography } from "@material-ui/core"; +import { + Box, + Button, + Grid, + Theme, + Typography +} from "@mui/material"; import React from "react"; -import ScrollMenu from "react-horizontal-scroll-menu"; -import { useHistory } from "react-router"; -import { ArrowForward, ArrowBack } from "@material-ui/icons"; +// import ScrollMenu from "react-horizontal-scroll-menu"; +// import { useHistory } from "react-router"; +import { ArrowForward, ArrowBack } from "@mui/icons-material"; import { useMobile } from "hooks"; import { GrainBag } from "models/GrainBag"; import GrainBagCard from "./grainBagCard"; +import { makeStyles } from "@mui/styles"; +import { useNavigate } from "react-router-dom"; interface Props { grainBags: GrainBag[]; @@ -13,8 +21,8 @@ interface Props { gridView?: boolean; } -const useStyles = makeStyles((theme: Theme) => - createStyles({ +const useStyles = makeStyles((theme: Theme) => { + return ({ gridListTile: { minHeight: "184px", height: "auto !important", @@ -25,23 +33,25 @@ const useStyles = makeStyles((theme: Theme) => visibility: "hidden" } }) -); +}); export default function GrainBagList(props: Props) { const { grainBags, title, gridView } = props; const classes = useStyles(); - const history = useHistory(); + // const history = useHistory(); + const navigate = useNavigate() const isMobile = useMobile(); const goToBag = (i: number) => { let path = "/grainbags/" + grainBags[i].key(); - history.replace(path); + // history.replace(path); + navigate(path, { replace: true }) }; const scroll = () => { return ( - ))} - /> + /> */} ); }; @@ -86,7 +96,8 @@ export default function GrainBagList(props: Props) { return ( {title && {title}} - {gridView ? grid() : scroll()} + {/* {gridView ? grid() : scroll()} */} + {grid()} ); } diff --git a/src/grainBag/grainBagSVG.tsx b/src/grainBag/grainBagSVG.tsx index 384eba4..5b070bc 100644 --- a/src/grainBag/grainBagSVG.tsx +++ b/src/grainBag/grainBagSVG.tsx @@ -1,12 +1,12 @@ -import { Box, makeStyles, Theme, createStyles } from "@material-ui/core"; -import React from "react"; +import { Box, Theme } from "@mui/material"; +import { makeStyles } from "@mui/styles"; const GRAIN_COLOUR = "#b5a962"; const useStyles = makeStyles((theme: Theme) => { - return createStyles({ + return ({ bag: { - fill: theme.palette.type === "light" ? "#373737" : "#292929", + fill: theme.palette.mode === "light" ? "#373737" : "#292929", fillOpacity: 1 }, inventory: { diff --git a/src/pages/Bins.tsx b/src/pages/Bins.tsx index 2a3aefd..95d53f0 100644 --- a/src/pages/Bins.tsx +++ b/src/pages/Bins.tsx @@ -13,7 +13,7 @@ import { Divider, FormControl, FormControlLabel, - Grid, + Grid2 as Grid, // GridList, // GridListTile, IconButton, @@ -85,6 +85,7 @@ import AddBinFab from "bin/AddBinFab"; import { GrainBag } from "models/GrainBag"; import { getThemeType } from "theme/themeType"; import GrainBagSettings from "grainBag/grainBagSettings"; +import GrainBagList from "grainBag/grainBagList"; // import { useHistory } from "react-router"; const useStyles = makeStyles((theme: Theme) => { @@ -233,35 +234,6 @@ export default function Bins(props: Props) { boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original })); - // const StyledToggleButtonGroup = withStyles(theme => ({ - // grouped: { - // //margin: theme.spacing(-0.5), - // border: "none", - // padding: theme.spacing(1), - // "&:not(:first-child):not(:last-child)": { - // borderRadius: 24, - // marginRight: theme.spacing(0.5), - // marginLeft: theme.spacing(0.5) - // }, - // "&:first-child": { - // borderRadius: 24, - // marginLeft: theme.spacing(0.25) - // }, - // "&:last-child": { - // borderRadius: 24, - // marginRight: theme.spacing(0.25) - // } - // }, - // root: { - // backgroundColor: darken( - // theme.palette.background.paper, - // getThemeType() === "light" ? 0.05 : 0.25 - // ), - // borderRadius: 24, - // content: "border-box" - // } - // }))(ToggleButtonGroup); - const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({ root: { backgroundColor: "transparent", @@ -282,26 +254,6 @@ export default function Bins(props: Props) { selected: {} })); - // const StyledToggle = withStyles({ - // root: { - // backgroundColor: "transparent", - // overflow: "visible", - // content: "content-box", - // "&$selected": { - // backgroundColor: "gold", - // color: "black", - // borderRadius: 24, - // fontWeight: "bold" - // }, - // "&$selected:hover": { - // backgroundColor: "rgb(255, 255, 0)", - // color: "black", - // borderRadius: 24 - // } - // }, - // selected: {} - // })(ToggleButton); - useEffect(() => { let ebt = sessionStorage.getItem("expandBinTotal"); if (ebt === "true") { @@ -666,10 +618,10 @@ export default function Bins(props: Props) { {displayGrain && ( - + - + - + - + - + - + - + - - {/* + */} + /> @@ -842,7 +794,7 @@ export default function Bins(props: Props) { return ( - + - + {charts[carouselIndex]} - +