fixed style toggles in bins
This commit is contained in:
Carter
parent
8df5b5e602
commit
cb94ae1d22
1 changed files with 107 additions and 53 deletions
|
|
@ -27,6 +27,8 @@ import {
|
|||
Select,
|
||||
Skeleton,
|
||||
Theme,
|
||||
ToggleButton,
|
||||
ToggleButtonGroup,
|
||||
Typography,
|
||||
useTheme,
|
||||
withStyles
|
||||
|
|
@ -76,11 +78,12 @@ import ObjectTable from "objects/ObjectTable";
|
|||
import ResponsiveDialog from "common/ResponsiveDialog";
|
||||
import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
|
||||
import { green, yellow } from "@mui/material/colors";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import { makeStyles, styled } from "@mui/styles";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import BinSettings from "bin/BinSettings";
|
||||
import AddBinFab from "bin/AddBinFab";
|
||||
import { GrainBag } from "models/GrainBag";
|
||||
import { getThemeType } from "theme/themeType";
|
||||
// import { useHistory } from "react-router";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
|
|
@ -171,7 +174,7 @@ export default function Bins(props: Props) {
|
|||
const [emptyBins, setEmptyBins] = useState<Bin[]>([]);
|
||||
const [grainBags, setGrainBags] = useState<GrainBag[]>([]);
|
||||
const [displayedInventory, setDisplayedInventory] = useState<GrainAmount[]>([]);
|
||||
// const [displayedFertilizer, setDisplayedFertilizer] = useState<GrainAmount[]>([]);
|
||||
const [displayedFertilizer, setDisplayedFertilizer] = useState<GrainAmount[]>([]);
|
||||
const [carouselIndex, setCarouselIndex] = useState(0);
|
||||
const [addBagOpen, setAddBagOpen] = useState(false);
|
||||
const [showing, setShowing] = useState<"all" | "bins" | "bags">("all");
|
||||
|
|
@ -198,6 +201,37 @@ export default function Bins(props: Props) {
|
|||
fertilizer: 0
|
||||
});
|
||||
|
||||
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
|
||||
'& .MuiToggleButtonGroup-grouped': {
|
||||
// border: 'none' replaces the old 'grouped' border: "none"
|
||||
border: 'none',
|
||||
padding: theme.spacing(1),
|
||||
// Middle buttons
|
||||
'&:not(:first-child):not(:last-child)': {
|
||||
borderRadius: 24,
|
||||
marginRight: theme.spacing(0.5),
|
||||
marginLeft: theme.spacing(0.5),
|
||||
},
|
||||
// First button
|
||||
'&:first-child': {
|
||||
borderRadius: 24,
|
||||
marginLeft: theme.spacing(0.25),
|
||||
},
|
||||
// Last button
|
||||
'&:last-child': {
|
||||
borderRadius: 24,
|
||||
marginRight: theme.spacing(0.25),
|
||||
},
|
||||
},
|
||||
// Root styles
|
||||
backgroundColor: darken(
|
||||
theme.palette.background.paper,
|
||||
getThemeType() === 'light' ? 0.05 : 0.25
|
||||
),
|
||||
borderRadius: 24,
|
||||
boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original
|
||||
}));
|
||||
|
||||
// const StyledToggleButtonGroup = withStyles(theme => ({
|
||||
// grouped: {
|
||||
// //margin: theme.spacing(-0.5),
|
||||
|
|
@ -227,6 +261,26 @@ export default function Bins(props: Props) {
|
|||
// }
|
||||
// }))(ToggleButtonGroup);
|
||||
|
||||
const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
|
||||
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: {}
|
||||
}));
|
||||
|
||||
// const StyledToggle = withStyles({
|
||||
// root: {
|
||||
// backgroundColor: "transparent",
|
||||
|
|
@ -342,7 +396,7 @@ export default function Bins(props: Props) {
|
|||
});
|
||||
let metrics = pond.BinMetrics.fromObject(resp.data.metrics ?? {});
|
||||
let inventory: GrainAmount[] = [];
|
||||
// let fertInventory: GrainAmount[] = [];
|
||||
let fertInventory: GrainAmount[] = [];
|
||||
if (metrics) {
|
||||
metrics.grainInventory.forEach(grain => {
|
||||
inventory.push({
|
||||
|
|
@ -359,17 +413,17 @@ export default function Bins(props: Props) {
|
|||
grainName: invObject.name
|
||||
});
|
||||
} else if (invObject.storageType === pond.BinStorage.BIN_STORAGE_FERTILIZER) {
|
||||
// fertInventory.push({
|
||||
// grain: pond.Grain.GRAIN_CUSTOM,
|
||||
// bushelAmount: invObject.amount * 35.239,
|
||||
// grainName: invObject.name
|
||||
// });
|
||||
fertInventory.push({
|
||||
grain: pond.Grain.GRAIN_CUSTOM,
|
||||
bushelAmount: invObject.amount * 35.239,
|
||||
grainName: invObject.name
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
setBinMetrics(metrics);
|
||||
setDisplayedInventory(inventory);
|
||||
// setDisplayedFertilizer(fertInventory);
|
||||
setDisplayedFertilizer(fertInventory);
|
||||
if (yards.length === 0) {
|
||||
let y: pond.BinYardSettings[] = [];
|
||||
let p: Dictionary<pond.Permission[]> = {};
|
||||
|
|
@ -392,8 +446,8 @@ export default function Bins(props: Props) {
|
|||
}
|
||||
|
||||
//move load of grain bags into this api call
|
||||
// let bags = resp.data.bags.map(b => GrainBag.create(b));
|
||||
// setGrainBags(bags);
|
||||
const bags = resp.data.bags.map(b => GrainBag.create(b));
|
||||
setGrainBags(bags);
|
||||
})
|
||||
.catch(err => {
|
||||
setPaginatedBins({ bins: [], binsOffset: 0, binsTotal: 0 });
|
||||
|
|
@ -753,37 +807,37 @@ export default function Bins(props: Props) {
|
|||
const mobileViewCarousel = () => {
|
||||
let length = 2;
|
||||
let charts: JSX.Element[] = [
|
||||
// <BinInventoryChart
|
||||
// customLabel="Grain"
|
||||
// inventory={displayedInventory}
|
||||
// onClick={(grain: pond.Grain, grainName: string) => {
|
||||
// let filter = "";
|
||||
// if (grain !== pond.Grain.GRAIN_NONE && grain !== pond.Grain.GRAIN_CUSTOM) {
|
||||
// filter = pond.Grain[grain];
|
||||
// } else {
|
||||
// filter = grainName;
|
||||
// }
|
||||
// setContentFilter(filter);
|
||||
// loadMoreBins(filter);
|
||||
// }}
|
||||
// //activeGrain={grainFilter}
|
||||
// />,
|
||||
// <BinInventoryChart
|
||||
// customLabel="Fertilizer"
|
||||
// inventory={displayedFertilizer}
|
||||
// onClick={(grain: pond.Grain, grainName: string) => {
|
||||
// let filter = "";
|
||||
// if (grain !== pond.Grain.GRAIN_NONE && grain !== pond.Grain.GRAIN_CUSTOM) {
|
||||
// filter = pond.Grain[grain];
|
||||
// } else {
|
||||
// filter = grainName;
|
||||
// }
|
||||
// setContentFilter(filter);
|
||||
// loadMoreBins(filter);
|
||||
// }}
|
||||
// customUnit={"L"}
|
||||
// //activeGrain={grainFilter}
|
||||
// />
|
||||
<BinInventoryChart
|
||||
customLabel="Grain"
|
||||
inventory={displayedInventory}
|
||||
onClick={(grain: pond.Grain, grainName: string) => {
|
||||
let filter = "";
|
||||
if (grain !== pond.Grain.GRAIN_NONE && grain !== pond.Grain.GRAIN_CUSTOM) {
|
||||
filter = pond.Grain[grain];
|
||||
} else {
|
||||
filter = grainName;
|
||||
}
|
||||
setContentFilter(filter);
|
||||
loadMoreBins(filter);
|
||||
}}
|
||||
//activeGrain={grainFilter}
|
||||
/>,
|
||||
<BinInventoryChart
|
||||
customLabel="Fertilizer"
|
||||
inventory={displayedFertilizer}
|
||||
onClick={(grain: pond.Grain, grainName: string) => {
|
||||
let filter = "";
|
||||
if (grain !== pond.Grain.GRAIN_NONE && grain !== pond.Grain.GRAIN_CUSTOM) {
|
||||
filter = pond.Grain[grain];
|
||||
} else {
|
||||
filter = grainName;
|
||||
}
|
||||
setContentFilter(filter);
|
||||
loadMoreBins(filter);
|
||||
}}
|
||||
customUnit={"L"}
|
||||
//activeGrain={grainFilter}
|
||||
/>
|
||||
];
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
|
@ -840,7 +894,7 @@ export default function Bins(props: Props) {
|
|||
/>
|
||||
</Grid>
|
||||
<Grid style={{ height: "200px" }} item xs={6}>
|
||||
{/* <BinInventoryChart
|
||||
<BinInventoryChart
|
||||
customLabel="Fertilizer"
|
||||
inventory={displayedFertilizer}
|
||||
onClick={(grain: pond.Grain, grainName: string) => {
|
||||
|
|
@ -854,8 +908,8 @@ export default function Bins(props: Props) {
|
|||
loadMoreBins(filter);
|
||||
}}
|
||||
customUnit={"L"}
|
||||
//activeGrain={grainFilter}
|
||||
/> */}
|
||||
// activeGrain={grainFilter}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
|
|
@ -1151,7 +1205,7 @@ export default function Bins(props: Props) {
|
|||
Load All
|
||||
</Button>
|
||||
)}
|
||||
{/* <StyledToggleButtonGroup
|
||||
<StyledToggleButtonGroup
|
||||
id="cardValueDisplay"
|
||||
value={cardValDisplay}
|
||||
exclusive
|
||||
|
|
@ -1181,18 +1235,18 @@ export default function Bins(props: Props) {
|
|||
}}>
|
||||
High
|
||||
</StyledToggle>
|
||||
</StyledToggleButtonGroup> */}
|
||||
</StyledToggleButtonGroup>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Box display="flex" paddingY={1} alignContent="center" alignItems="center">
|
||||
{/* <StyledToggleButtonGroup
|
||||
<StyledToggleButtonGroup
|
||||
id="tour-graph-tabs"
|
||||
value={binView}
|
||||
exclusive
|
||||
size="small"
|
||||
aria-label="detail"> */}
|
||||
{/* <StyledToggle
|
||||
aria-label="detail">
|
||||
<StyledToggle
|
||||
value={"grid"}
|
||||
aria-label="grid view"
|
||||
onClick={() => {
|
||||
|
|
@ -1200,7 +1254,7 @@ export default function Bins(props: Props) {
|
|||
sessionStorage.setItem("binsView", "grid");
|
||||
}}>
|
||||
<ViewComfy />
|
||||
</StyledToggle> */}
|
||||
</StyledToggle>
|
||||
{/* hidden at dustins request so that grid view and list are the only two */}
|
||||
{/* <StyledToggle
|
||||
value={"scroll"}
|
||||
|
|
@ -1211,7 +1265,7 @@ export default function Bins(props: Props) {
|
|||
}}>
|
||||
<ViewColumn />
|
||||
</StyledToggle> */}
|
||||
{/* <StyledToggle
|
||||
<StyledToggle
|
||||
value={"list"}
|
||||
aria-label="list view"
|
||||
onClick={() => {
|
||||
|
|
@ -1220,7 +1274,7 @@ export default function Bins(props: Props) {
|
|||
}}>
|
||||
<ViewList />
|
||||
</StyledToggle>
|
||||
</StyledToggleButtonGroup> */}
|
||||
</StyledToggleButtonGroup>
|
||||
<MoreVert
|
||||
className={classes.icon}
|
||||
onClick={event => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue