added grain bag list and svgs
This commit is contained in:
Carter
parent
2d78947d2e
commit
a027b8a96f
4 changed files with 59 additions and 96 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<React.Fragment>
|
||||
<ScrollMenu
|
||||
{/* <ScrollMenu
|
||||
wheel={false}
|
||||
alignCenter={false}
|
||||
inertiaScrolling
|
||||
|
|
@ -66,7 +76,7 @@ export default function GrainBagList(props: Props) {
|
|||
<GrainBagCard grainBag={b} />
|
||||
</Box>
|
||||
))}
|
||||
/>
|
||||
/> */}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
|
@ -86,7 +96,8 @@ export default function GrainBagList(props: Props) {
|
|||
return (
|
||||
<React.Fragment>
|
||||
{title && <Typography>{title}</Typography>}
|
||||
{gridView ? grid() : scroll()}
|
||||
{/* {gridView ? grid() : scroll()} */}
|
||||
{grid()}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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) {
|
|||
<Grid container>
|
||||
{displayGrain && (
|
||||
<React.Fragment>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<BinsList
|
||||
valDisplay={cardValDisplay}
|
||||
gridView={binView === "grid"}
|
||||
|
|
@ -688,10 +640,10 @@ export default function Bins(props: Props) {
|
|||
)}
|
||||
{displayFert && (
|
||||
<React.Fragment>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<BinsList
|
||||
valDisplay={cardValDisplay}
|
||||
gridView={binView === "grid"}
|
||||
|
|
@ -711,10 +663,10 @@ export default function Bins(props: Props) {
|
|||
)}
|
||||
{displayEmpty && (
|
||||
<React.Fragment>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<BinsList
|
||||
valDisplay={cardValDisplay}
|
||||
gridView={binView === "grid"}
|
||||
|
|
@ -767,15 +719,15 @@ export default function Bins(props: Props) {
|
|||
<React.Fragment>
|
||||
<Grid container>
|
||||
<React.Fragment>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
{/* <GrainBagList
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<GrainBagList
|
||||
gridView={bagView === "grid"}
|
||||
grainBags={grainBags}
|
||||
title={"Grain Bags"}
|
||||
/> */}
|
||||
/>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
</Grid>
|
||||
|
|
@ -842,7 +794,7 @@ export default function Bins(props: Props) {
|
|||
return (
|
||||
<React.Fragment>
|
||||
<Grid container direction="row" alignContent="center" alignItems="center">
|
||||
<Grid item xs={2}>
|
||||
<Grid size={{ xs: 2 }}>
|
||||
<Button
|
||||
style={{ height: 160 }}
|
||||
onClick={() => {
|
||||
|
|
@ -852,12 +804,12 @@ export default function Bins(props: Props) {
|
|||
<ArrowBackIos />
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<Grid size={{ xs: 8 }}>
|
||||
<Box height={"180px"} flexDirection="row" display="flex">
|
||||
{charts[carouselIndex]}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<Grid size={{ xs: 2 }}>
|
||||
<Button
|
||||
style={{ height: 160 }}
|
||||
onClick={() => {
|
||||
|
|
@ -876,7 +828,7 @@ export default function Bins(props: Props) {
|
|||
return (
|
||||
<React.Fragment>
|
||||
<Grid container direction="row" alignContent="center" alignItems="center">
|
||||
<Grid style={{ height: "200px" }} item xs={6}>
|
||||
<Grid style={{ height: "200px" }} size={{ xs: 6 }}>
|
||||
<BinInventoryChart
|
||||
customLabel="Grain"
|
||||
inventory={displayedInventory}
|
||||
|
|
@ -893,7 +845,7 @@ export default function Bins(props: Props) {
|
|||
//activeGrain={grainFilter}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid style={{ height: "200px" }} item xs={6}>
|
||||
<Grid style={{ height: "200px" }} size={{ xs: 6 }}>
|
||||
<BinInventoryChart
|
||||
customLabel="Fertilizer"
|
||||
inventory={displayedFertilizer}
|
||||
|
|
@ -1172,7 +1124,7 @@ export default function Bins(props: Props) {
|
|||
alignContent="center"
|
||||
alignItems="center"
|
||||
justifyContent="space-between">
|
||||
<Grid item>
|
||||
<Grid >
|
||||
<Box display="flex" paddingY={1} alignContent="center" alignItems="center">
|
||||
<Typography variant="h6" style={{ fontWeight: 650 }}>
|
||||
Bins - ({paginatedBins.bins.length} of {paginatedBins.binsTotal})
|
||||
|
|
@ -1238,7 +1190,7 @@ export default function Bins(props: Props) {
|
|||
</StyledToggleButtonGroup>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid >
|
||||
<Box display="flex" paddingY={1} alignContent="center" alignItems="center">
|
||||
<StyledToggleButtonGroup
|
||||
id="tour-graph-tabs"
|
||||
|
|
@ -1300,17 +1252,17 @@ export default function Bins(props: Props) {
|
|||
alignContent="center"
|
||||
alignItems="center"
|
||||
justifyContent="space-between">
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid >
|
||||
<Box display="flex" paddingY={1} alignContent="center" alignItems="center">
|
||||
<Typography variant="h6" style={{ fontWeight: 650 }}>
|
||||
Bags
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid >
|
||||
<Box display="flex" paddingY={1} alignContent="center" alignItems="center">
|
||||
<StyledToggleButtonGroup
|
||||
id="tour-graph-tabs"
|
||||
|
|
@ -1390,31 +1342,31 @@ export default function Bins(props: Props) {
|
|||
paddingX={isMobile || props.insert ? 1 : 2}>
|
||||
<Grid container>
|
||||
{(showing === "all" || showing === "bins") && (
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
{binsByGrainType()}
|
||||
</Grid>
|
||||
)}
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
{allLoading ? <Skeleton variant="rectangular" height="200px" /> : totalInventory()}
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
{allLoading ? <Skeleton variant="rectangular" height="200px" /> : binUtilizationList()}
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
{allLoading ? <Skeleton variant="rectangular" height="200px" /> : binFanTable()}
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
|
||||
{(showing === "all" || showing === "bags") && (
|
||||
<Grid item xs={12}>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
{grainBagDisplay()}
|
||||
</Grid>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue