brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added grain bag list and svgs

Browse source
This commit is contained in:
Carter 2025-03-12 10:46:47 -06:00
parent 2d78947d2e
commit a027b8a96f
4 changed files with 59 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/grainBag/grainBagCard.tsx
View file

@ -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 GrainDescriber from "grain/GrainDescriber";
import { GrainBag } from "models/GrainBag"; import { GrainBag } from "models/GrainBag";
import moment from "moment"; import moment from "moment";
import React, { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import GrainBagSVG from "./grainBagSVG"; import GrainBagSVG from "./grainBagSVG";
interface Props { interface Props {

35
src/grainBag/grainBagList.tsx
View file

@ -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 React from "react";
import ScrollMenu from "react-horizontal-scroll-menu"; // import ScrollMenu from "react-horizontal-scroll-menu";
import { useHistory } from "react-router"; // import { useHistory } from "react-router";
import { ArrowForward, ArrowBack } from "@material-ui/icons"; import { ArrowForward, ArrowBack } from "@mui/icons-material";
import { useMobile } from "hooks"; import { useMobile } from "hooks";
import { GrainBag } from "models/GrainBag"; import { GrainBag } from "models/GrainBag";
import GrainBagCard from "./grainBagCard"; import GrainBagCard from "./grainBagCard";
import { makeStyles } from "@mui/styles";
import { useNavigate } from "react-router-dom";
interface Props { interface Props {
grainBags: GrainBag[]; grainBags: GrainBag[];
@ -13,8 +21,8 @@ interface Props {
gridView?: boolean; gridView?: boolean;
} }
const useStyles = makeStyles((theme: Theme) => const useStyles = makeStyles((theme: Theme) => {
createStyles({ return ({
gridListTile: { gridListTile: {
minHeight: "184px", minHeight: "184px",
height: "auto !important", height: "auto !important",
@ -25,23 +33,25 @@ const useStyles = makeStyles((theme: Theme) =>
visibility: "hidden" visibility: "hidden"
} }
}) })
); });
export default function GrainBagList(props: Props) { export default function GrainBagList(props: Props) {
const { grainBags, title, gridView } = props; const { grainBags, title, gridView } = props;
const classes = useStyles(); const classes = useStyles();
const history = useHistory(); // const history = useHistory();
const navigate = useNavigate()
const isMobile = useMobile(); const isMobile = useMobile();
const goToBag = (i: number) => { const goToBag = (i: number) => {
let path = "/grainbags/" + grainBags[i].key(); let path = "/grainbags/" + grainBags[i].key();
history.replace(path); // history.replace(path);
navigate(path, { replace: true })
}; };
const scroll = () => { const scroll = () => {
return ( return (
<React.Fragment> <React.Fragment>
<ScrollMenu {/* <ScrollMenu
wheel={false} wheel={false}
alignCenter={false} alignCenter={false}
inertiaScrolling inertiaScrolling
@ -66,7 +76,7 @@ export default function GrainBagList(props: Props) {
<GrainBagCard grainBag={b} /> <GrainBagCard grainBag={b} />
</Box> </Box>
))} ))}
/> /> */}
</React.Fragment> </React.Fragment>
); );
}; };
@ -86,7 +96,8 @@ export default function GrainBagList(props: Props) {
return ( return (
<React.Fragment> <React.Fragment>
{title && <Typography>{title}</Typography>} {title && <Typography>{title}</Typography>}
{gridView ? grid() : scroll()} {/* {gridView ? grid() : scroll()} */}
{grid()}
</React.Fragment> </React.Fragment>
); );
} }

8
src/grainBag/grainBagSVG.tsx
View file

@ -1,12 +1,12 @@
import { Box, makeStyles, Theme, createStyles } from "@material-ui/core"; import { Box, Theme } from "@mui/material";
import React from "react"; import { makeStyles } from "@mui/styles";
const GRAIN_COLOUR = "#b5a962"; const GRAIN_COLOUR = "#b5a962";
const useStyles = makeStyles((theme: Theme) => { const useStyles = makeStyles((theme: Theme) => {
return createStyles({ return ({
bag: { bag: {
fill: theme.palette.type === "light" ? "#373737" : "#292929", fill: theme.palette.mode === "light" ? "#373737" : "#292929",
fillOpacity: 1 fillOpacity: 1
}, },
inventory: { inventory: {

108
src/pages/Bins.tsx
View file

@ -13,7 +13,7 @@ import {
Divider, Divider,
FormControl, FormControl,
FormControlLabel, FormControlLabel,
Grid, Grid2 as Grid,
// GridList, // GridList,
// GridListTile, // GridListTile,
IconButton, IconButton,
@ -85,6 +85,7 @@ import AddBinFab from "bin/AddBinFab";
import { GrainBag } from "models/GrainBag"; import { GrainBag } from "models/GrainBag";
import { getThemeType } from "theme/themeType"; import { getThemeType } from "theme/themeType";
import GrainBagSettings from "grainBag/grainBagSettings"; import GrainBagSettings from "grainBag/grainBagSettings";
import GrainBagList from "grainBag/grainBagList";
// import { useHistory } from "react-router"; // import { useHistory } from "react-router";
const useStyles = makeStyles((theme: Theme) => { 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 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 }) => ({ const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
root: { root: {
backgroundColor: "transparent", backgroundColor: "transparent",
@ -282,26 +254,6 @@ export default function Bins(props: Props) {
selected: {} 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(() => { useEffect(() => {
let ebt = sessionStorage.getItem("expandBinTotal"); let ebt = sessionStorage.getItem("expandBinTotal");
if (ebt === "true") { if (ebt === "true") {
@ -666,10 +618,10 @@ export default function Bins(props: Props) {
<Grid container> <Grid container>
{displayGrain && ( {displayGrain && (
<React.Fragment> <React.Fragment>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<Divider /> <Divider />
</Grid> </Grid>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<BinsList <BinsList
valDisplay={cardValDisplay} valDisplay={cardValDisplay}
gridView={binView === "grid"} gridView={binView === "grid"}
@ -688,10 +640,10 @@ export default function Bins(props: Props) {
)} )}
{displayFert && ( {displayFert && (
<React.Fragment> <React.Fragment>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<Divider /> <Divider />
</Grid> </Grid>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<BinsList <BinsList
valDisplay={cardValDisplay} valDisplay={cardValDisplay}
gridView={binView === "grid"} gridView={binView === "grid"}
@ -711,10 +663,10 @@ export default function Bins(props: Props) {
)} )}
{displayEmpty && ( {displayEmpty && (
<React.Fragment> <React.Fragment>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<Divider /> <Divider />
</Grid> </Grid>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<BinsList <BinsList
valDisplay={cardValDisplay} valDisplay={cardValDisplay}
gridView={binView === "grid"} gridView={binView === "grid"}
@ -767,15 +719,15 @@ export default function Bins(props: Props) {
<React.Fragment> <React.Fragment>
<Grid container> <Grid container>
<React.Fragment> <React.Fragment>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<Divider /> <Divider />
</Grid> </Grid>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
{/* <GrainBagList <GrainBagList
gridView={bagView === "grid"} gridView={bagView === "grid"}
grainBags={grainBags} grainBags={grainBags}
title={"Grain Bags"} title={"Grain Bags"}
/> */} />
</Grid> </Grid>
</React.Fragment> </React.Fragment>
</Grid> </Grid>
@ -842,7 +794,7 @@ export default function Bins(props: Props) {
return ( return (
<React.Fragment> <React.Fragment>
<Grid container direction="row" alignContent="center" alignItems="center"> <Grid container direction="row" alignContent="center" alignItems="center">
<Grid item xs={2}> <Grid size={{ xs: 2 }}>
<Button <Button
style={{ height: 160 }} style={{ height: 160 }}
onClick={() => { onClick={() => {
@ -852,12 +804,12 @@ export default function Bins(props: Props) {
<ArrowBackIos /> <ArrowBackIos />
</Button> </Button>
</Grid> </Grid>
<Grid item xs={8}> <Grid size={{ xs: 8 }}>
<Box height={"180px"} flexDirection="row" display="flex"> <Box height={"180px"} flexDirection="row" display="flex">
{charts[carouselIndex]} {charts[carouselIndex]}
</Box> </Box>
</Grid> </Grid>
<Grid item xs={2}> <Grid size={{ xs: 2 }}>
<Button <Button
style={{ height: 160 }} style={{ height: 160 }}
onClick={() => { onClick={() => {
@ -876,7 +828,7 @@ export default function Bins(props: Props) {
return ( return (
<React.Fragment> <React.Fragment>
<Grid container direction="row" alignContent="center" alignItems="center"> <Grid container direction="row" alignContent="center" alignItems="center">
<Grid style={{ height: "200px" }} item xs={6}> <Grid style={{ height: "200px" }} size={{ xs: 6 }}>
<BinInventoryChart <BinInventoryChart
customLabel="Grain" customLabel="Grain"
inventory={displayedInventory} inventory={displayedInventory}
@ -893,7 +845,7 @@ export default function Bins(props: Props) {
//activeGrain={grainFilter} //activeGrain={grainFilter}
/> />
</Grid> </Grid>
<Grid style={{ height: "200px" }} item xs={6}> <Grid style={{ height: "200px" }} size={{ xs: 6 }}>
<BinInventoryChart <BinInventoryChart
customLabel="Fertilizer" customLabel="Fertilizer"
inventory={displayedFertilizer} inventory={displayedFertilizer}
@ -1172,7 +1124,7 @@ export default function Bins(props: Props) {
alignContent="center" alignContent="center"
alignItems="center" alignItems="center"
justifyContent="space-between"> justifyContent="space-between">
<Grid item> <Grid >
<Box display="flex" paddingY={1} alignContent="center" alignItems="center"> <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
<Typography variant="h6" style={{ fontWeight: 650 }}> <Typography variant="h6" style={{ fontWeight: 650 }}>
Bins - ({paginatedBins.bins.length} of {paginatedBins.binsTotal}) Bins - ({paginatedBins.bins.length} of {paginatedBins.binsTotal})
@ -1238,7 +1190,7 @@ export default function Bins(props: Props) {
</StyledToggleButtonGroup> </StyledToggleButtonGroup>
</Box> </Box>
</Grid> </Grid>
<Grid item> <Grid >
<Box display="flex" paddingY={1} alignContent="center" alignItems="center"> <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
<StyledToggleButtonGroup <StyledToggleButtonGroup
id="tour-graph-tabs" id="tour-graph-tabs"
@ -1300,17 +1252,17 @@ export default function Bins(props: Props) {
alignContent="center" alignContent="center"
alignItems="center" alignItems="center"
justifyContent="space-between"> justifyContent="space-between">
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<Divider /> <Divider />
</Grid> </Grid>
<Grid item> <Grid >
<Box display="flex" paddingY={1} alignContent="center" alignItems="center"> <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
<Typography variant="h6" style={{ fontWeight: 650 }}> <Typography variant="h6" style={{ fontWeight: 650 }}>
Bags Bags
</Typography> </Typography>
</Box> </Box>
</Grid> </Grid>
<Grid item> <Grid >
<Box display="flex" paddingY={1} alignContent="center" alignItems="center"> <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
<StyledToggleButtonGroup <StyledToggleButtonGroup
id="tour-graph-tabs" id="tour-graph-tabs"
@ -1390,31 +1342,31 @@ export default function Bins(props: Props) {
paddingX={isMobile || props.insert ? 1 : 2}> paddingX={isMobile || props.insert ? 1 : 2}>
<Grid container> <Grid container>
{(showing === "all" || showing === "bins") && ( {(showing === "all" || showing === "bins") && (
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
{binsByGrainType()} {binsByGrainType()}
</Grid> </Grid>
)} )}
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
{allLoading ? <Skeleton variant="rectangular" height="200px" /> : totalInventory()} {allLoading ? <Skeleton variant="rectangular" height="200px" /> : totalInventory()}
</Grid> </Grid>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<Divider /> <Divider />
</Grid> </Grid>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
{allLoading ? <Skeleton variant="rectangular" height="200px" /> : binUtilizationList()} {allLoading ? <Skeleton variant="rectangular" height="200px" /> : binUtilizationList()}
</Grid> </Grid>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<Divider /> <Divider />
</Grid> </Grid>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
{allLoading ? <Skeleton variant="rectangular" height="200px" /> : binFanTable()} {allLoading ? <Skeleton variant="rectangular" height="200px" /> : binFanTable()}
</Grid> </Grid>
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
<Divider /> <Divider />
</Grid> </Grid>
{(showing === "all" || showing === "bags") && ( {(showing === "all" || showing === "bags") && (
<Grid item xs={12}> <Grid size={{ xs: 12 }}>
{grainBagDisplay()} {grainBagDisplay()}
</Grid> </Grid>
)} )}