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
|
|
@ -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