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

Merge branch 'dev_environment' of gitlab.com:brandx/bxt-app into dev_environment

Browse source
This commit is contained in:
Carter 2025-05-14 10:01:44 -06:00
commit 7947da2b13
8 changed files with 563 additions and 214 deletions
Download patch file Download diff file Expand all files Collapse all files

115
src/bin/BinSVGV2.tsx
View file

@ -1,5 +1,6 @@
import { Box, Theme, ToggleButton, ToggleButtonGroup, darken } from "@mui/material";
import { makeStyles, withStyles } from "@mui/styles";
import ButtonGroup from "common/ButtonGroup";
import { ExtractMoisture } from "grain";
import { GrainCable } from "models/GrainCable";
import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
@ -212,54 +213,54 @@ export default function BinSVGV2(props: Props) {
const [extraDetails, setExtraDetails] = useState<"temps" | "hums">("temps");
const [nodeWarning, setNodeWarning] = useState(false);
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 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 = 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);
// 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);
const gradients = () => {
const burning = "#8a1f0d";
@ -1047,10 +1048,26 @@ export default function BinSVGV2(props: Props) {
<React.Fragment>
{showTempHum && (
<Box
display="flex"
alignContent="center"
justifyContent="center"
textAlign="center"
//visibility={showTempHum ? "visible" : "hidden"}
className={!isFullScreen ? classes.smallToggle : classes.fullToggle}>
<StyledToggleButtonGroup
<ButtonGroup
buttons={[
{
title: isFullScreen ? "Temperature" : "Temp",
function: () => setExtraDetails("temps")
},
{
title: grainType ? (isFullScreen ? "Moisture" : "EMC") : isFullScreen ? "Humidity" : "Hum",
function: () => setExtraDetails("hums")
}
]}
toggle
/>
{/* <StyledToggleButtonGroup
value={extraDetails}
exclusive
size="small"
@ -1067,7 +1084,7 @@ export default function BinSVGV2(props: Props) {
aria-label="Node Humidity">
{grainType ? (isFullScreen ? "Moisture" : "EMC") : isFullScreen ? "Humidity" : "Hum"}
</StyledToggle>
</StyledToggleButtonGroup>
</StyledToggleButtonGroup> */}
</Box>
)}
<Box

136
src/bin/BinVisualizerV2.tsx
View file

@ -71,6 +71,7 @@ import { ExtractMoisture } from "grain";
import SearchSelect, { Option } from "common/SearchSelect";
import Edit from "@mui/icons-material/Edit";
import { makeStyles, styled } from "@mui/styles";
import ButtonGroup from "common/ButtonGroup";
const useStyles = makeStyles((theme: Theme) => {
return ({
@ -280,54 +281,54 @@ export default function BinVisualizer(props: Props) {
const [storageDate, setStorageDate] = useState(moment().format("YYYY-MM-DD"));
const [storageTime, setStorageTime] = useState(moment().format("HH:mm"));
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 = 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 StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: 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"
}
}));
// const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: 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"
// }
// }));
useEffect(() => {
setModeTime(moment(bin.status.lastModeChange));
@ -1705,6 +1706,18 @@ export default function BinVisualizer(props: Props) {
);
};
const determineToggle = (binMode: pond.BinMode) => {
switch (binMode) {
case pond.BinMode.BIN_MODE_STORAGE:
return [0]
case pond.BinMode.BIN_MODE_COOLDOWN:
return [1]
case pond.BinMode.BIN_MODE_DRYING:
case pond.BinMode.BIN_MODE_HYDRATING:
return [2]
}
}
const binMode = () => {
const mode = bin.settings.mode;
return (
@ -1720,7 +1733,31 @@ export default function BinVisualizer(props: Props) {
<Typography variant="subtitle1" style={{ fontWeight: 800 }}>
Bin Mode
</Typography>
<StyledToggleButtonGroup
<ButtonGroup
buttons={[
{
title: "Storage",
function: () => {
setModeStorage()
}
},
{
title: "Cooldown",
function: () => {
setModeCooldown()
}
},
{
title: bin.settings.inventory && bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture ? "Hydrating" : "Drying",
function: () => {
setShowInputMoisture(true)
}
}
]}
toggledButtons={determineToggle(mode)}
toggle
/>
{/* <StyledToggleButtonGroup
id="tour-bin-mode"
value={mode}
exclusive
@ -1754,7 +1791,7 @@ export default function BinVisualizer(props: Props) {
Drying
</StyledToggle>
)}
</StyledToggleButtonGroup>
</StyledToggleButtonGroup> */}
</Box>
);
};
@ -2067,6 +2104,7 @@ export default function BinVisualizer(props: Props) {
devices={devices}
refreshCallback={success => {
setShowInputMoisture(false);
setNewPreset(0)
if (success) updateBin();
}}
parentPreset={newPreset}

161
src/common/ButtonGroup.tsx Normal file
View file

@ -0,0 +1,161 @@
import { Box, Button, darken, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { cloneDeep } from "lodash";
import { useEffect } from "react";
import { useState } from "react";
import { getSecondaryColour } from "services/whiteLabel";
import { getThemeType } from "theme/themeType";
export interface ButtonData {
/**
* The title and description of the button
*/
title: string
/**
* An icon that would replace the text of the button
*/
icon?: JSX.Element
/**
* The function to run when the button is clicked or toggled on when toggle is true
*/
function: () => void
}
interface Props {
/**
* The array of button data to be rendered by the group
*/
buttons: ButtonData[]
/**
* When true will track the toggle state of the buttons, false will just be basic buttons
*
* @default false
*/
toggle?: boolean
/**
* When true will allow multiple buttons to be toggled, false will untoggle the previous button when another is selected
*
* @default false
*/
multiToggle?: boolean
/**
* Can be used to control which buttons are toggled on from the parent by passing the indexes of the buttons to toggle on.
* If not passed in will default to toggle the first button and then be controlled internally
*
* @default undefined
*/
toggledButtons?: number[]
/**
* Numerical value for the size of the text for buttons that dont use the icon
*/
textSize?: number
}
const useStyles = makeStyles((theme: Theme) => {
return ({
container: {
backgroundColor: darken(
theme.palette.background.paper,
getThemeType() === "light" ? 0.10 : 0.05
),
borderRadius: 24,
content: "border-box",
border: "none",
//padding: theme.spacing(1),
},
button: {
backgroundColor: "transparent",
color: theme.palette.text.primary,
overflow: "visible",
content: "content-box",
borderRadius: 24,
marginLeft: theme.spacing(0.05),
marginRight: theme.spacing(0.05),
"&:hover": {
backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
//backgroundColor: "gold",
color: "black",
}
},
buttonToggled: {
backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
//backgroundColor: "gold",
color: "black",
borderRadius: 24,
fontWeight: "bold"
}
})
})
export default function ButtonGroup(props: Props){
const { buttons, toggle, toggledButtons, multiToggle, textSize } = props
const classes = useStyles()
const [currentToggle, setCurrentToggle] = useState<number[]>([])
useEffect(()=>{
//determine the default state of the button toggles if toggle is true
if(toggle){
let toggled: number [] = [0]
if(toggledButtons){
toggled = toggledButtons
}
setCurrentToggle(toggled)
}
},[toggle, toggledButtons])
const checkToggled = (index: number) => {
return currentToggle.includes(index)
}
const toggleControl = (i: number) => {
let toggled = cloneDeep(currentToggle)
//is the button currently toggled
if(checkToggled(i)){
//if the button is toggled
if(multiToggle){
//un-toggle the button (remove it from the array)
console.log(toggled)
toggled.splice(currentToggle.indexOf(i), 1)
}
//and if it is single toggle do nothing
} else {
//if multiToggle is false
if(!multiToggle){
//replace the currentToggle array
toggled = [i]
}else{
//add it to the currentToggle array
toggled.push(i)
}
}
setCurrentToggle(toggled)
}
return (
<Box className={classes.container} display="flex" flexDirection="row">
{buttons.map((b, i) => (
<Button
key={i}
className={checkToggled(i) ? classes.buttonToggled : classes.button}
onClick={() => {
if(toggle){
//control the toggle internally if the array was not passed in
if(!toggledButtons){
toggleControl(i)
}
}
b.function()
}}>
{b.icon
?
b.icon
:
<Typography sx={{fontSize: textSize}}>
{b.title}
</Typography>
}
</Button>
))}
</Box>
)
}

11
src/component/ComponentActions.tsx
View file

@ -114,7 +114,10 @@ export default function ComponentActions(props: Props) {
onClose={closeMoreMenu}
disableAutoFocusItem>
{canAddInteraction && (
<MenuItem dense onClick={() => setIsAddInteractionOpen(true)} divider>
<MenuItem dense onClick={() => {
setIsAddInteractionOpen(true)
closeMoreMenu()
}} divider>
<ListItemIcon>
<AddCircle className={classes.addIcon} />
</ListItemIcon>
@ -126,6 +129,7 @@ export default function ComponentActions(props: Props) {
onClick={() => {
setIsJSON(false);
setIsExportDataOpen(true);
closeMoreMenu()
}}>
<ListItemIcon>
<SaveAlt className={classes.exportDataIcon} />
@ -134,7 +138,10 @@ export default function ComponentActions(props: Props) {
</MenuItem>
{canEdit && <Divider />}
{canEdit && (
<MenuItem dense onClick={() => openComponentSettingsDialog("remove")}>
<MenuItem dense onClick={() => {
openComponentSettingsDialog("remove")
closeMoreMenu()
}}>
<ListItemIcon>
<DeleteOutline className={classes.red} />
</ListItemIcon>

18
src/gate/GateDevice.tsx
View file

@ -22,6 +22,7 @@ import GateSVG from "./GateSVG";
import GateGraphs from "./GateGraphs";
//import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
import { getThemeType } from "theme";
import ButtonGroup from "common/ButtonGroup";
interface Props {
gate: Gate;
@ -344,7 +345,20 @@ export default function GateDevice(props: Props) {
alignItems="center"
marginBottom={2}>
<Typography style={{ fontWeight: 650, fontSize: 20 }}>{device.name()}</Typography>
<ToggleButtonGroup value={detail} exclusive size="small" aria-label="detail">
<ButtonGroup
toggle
buttons={[
{
title: "Analysis",
function: () => setDetail("analytics")
},
{
title: "Sensors",
function: () => setDetail("sensors")
}
]}
/>
{/* <ToggleButtonGroup value={detail} exclusive size="small" aria-label="detail">
<ToggleButton
onClick={() => setDetail("analytics")}
value={"analytics"}
@ -357,7 +371,7 @@ export default function GateDevice(props: Props) {
aria-label="Sensor Graphs">
Sensors
</ToggleButton>
</ToggleButtonGroup>
</ToggleButtonGroup> */}
</Box>
<Card raised>
<GateSVG

126
src/pages/Bin.tsx
View file

@ -66,6 +66,7 @@ import { makeStyles, styled } from "@mui/styles";
import { useNavigate, useParams } from "react-router-dom";
import { Controller } from "models/Controller";
import TaskViewer from "tasks/TaskViewer";
import ButtonGroup from "common/ButtonGroup";
interface TabPanelProps {
children?: React.ReactNode;
@ -214,54 +215,54 @@ export default function Bin(props: Props) {
setValue(newValue);
};
const StyledToggle = styled(ToggleButton)(() => ({
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 = styled(ToggleButton)(() => ({
// 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 StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: 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"
}
}))
// const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: 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"
// }
// }))
const load = useCallback(() => {
if (loadRef.current || user.id() === "") return;
@ -862,8 +863,33 @@ export default function Bin(props: Props) {
</Box>
</Grid>
<Grid id="tour-graphs" size={{ xs: 12, sm: 12, md: 12, lg: 5.3 }}>
<Box paddingBottom={2}>
<StyledToggleButtonGroup
<Box paddingBottom={2} display="flex">
<ButtonGroup
toggle
buttons={[
{
title: "Inventory",
function: () => setDetail("inventory")
},
{
title: "Sensors",
function: () => setDetail("sensors")
},
{
title: "Analysis",
function: () => setDetail("analytics")
},
{
title: "Alerts",
function: () => setDetail("alerts")
},
{
title: "Presets",
function: () => setDetail("presets")
}
]}
/>
{/* <StyledToggleButtonGroup
id="tour-graph-tabs"
value={detail}
exclusive
@ -899,7 +925,7 @@ export default function Bin(props: Props) {
aria-label="Bin Mode Presets">
Presets
</StyledToggle>
</StyledToggleButtonGroup>
</StyledToggleButtonGroup> */}
</Box>
{detail === "alerts" && (
<Box>

190
src/pages/Bins.tsx
View file

@ -81,6 +81,7 @@ import { getThemeType } from "theme/themeType";
import GrainBagSettings from "grainBag/grainBagSettings";
import GrainBagList from "grainBag/grainBagList";
import BinYards from "bin/BinYards";
import ButtonGroup from "common/ButtonGroup";
// import { useHistory } from "react-router";
const useStyles = makeStyles((theme: Theme) => {
@ -200,56 +201,56 @@ 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 = 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 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 = 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: {}
// }));
useEffect(() => {
let ebt = sessionStorage.getItem("expandBinTotal");
@ -502,6 +503,17 @@ export default function Bins(props: Props) {
}
}, [loadBins, props.insert, contentFilter]);
const determineNodeToggle = () => {
switch(cardValDisplay) {
case "low":
return [0]
case "high":
return [2]
default:
return [1]
}
}
const duplicateBin = (bin: Bin) => {
binAPI.addBin(bin.settings, as).then(resp => {
loadBins();
@ -1154,7 +1166,25 @@ export default function Bins(props: Props) {
Load All
</Button>
)}
<StyledToggleButtonGroup
<ButtonGroup
toggle
toggledButtons={determineNodeToggle()}
buttons={[
{
title: "Low",
function: () => {setCardValDisplay("low")}
},
{
title: "Average",
function: () => {setCardValDisplay("average")}
},
{
title: "High",
function: () => {setCardValDisplay("high")}
}
]}
/>
{/* <StyledToggleButtonGroup
id="cardValueDisplay"
value={cardValDisplay}
exclusive
@ -1184,12 +1214,33 @@ export default function Bins(props: Props) {
}}>
High
</StyledToggle>
</StyledToggleButtonGroup>
</StyledToggleButtonGroup> */}
</Box>
</Grid>
<Grid >
<Box display="flex" paddingY={1} alignContent="center" alignItems="center">
<StyledToggleButtonGroup
<ButtonGroup
toggle
buttons={[
{
title: "Grid",
icon: <ViewComfy />,
function: () => {
setBinView("grid");
sessionStorage.setItem("binsView", "grid");
}
},
{
title: "List",
icon: <ViewList />,
function: () => {
setBinView("list");
sessionStorage.setItem("binsView", "list");
}
}
]}
/>
{/* <StyledToggleButtonGroup
id="tour-graph-tabs"
value={binView}
exclusive
@ -1203,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"}
@ -1214,7 +1265,7 @@ export default function Bins(props: Props) {
}}>
<ViewColumn />
</StyledToggle> */}
<StyledToggle
{/* <StyledToggle
value={"list"}
aria-label="list view"
onClick={() => {
@ -1223,7 +1274,7 @@ export default function Bins(props: Props) {
}}>
<ViewList />
</StyledToggle>
</StyledToggleButtonGroup>
</StyledToggleButtonGroup> */}
<MoreVert
className={classes.icon}
onClick={event => {
@ -1261,7 +1312,28 @@ export default function Bins(props: Props) {
</Grid>
<Grid >
<Box display="flex" paddingY={1} alignContent="center" alignItems="center">
<StyledToggleButtonGroup
<ButtonGroup
toggle
buttons={[
{
title: "Grid",
icon: <ViewComfy />,
function: () => {
setBagView("grid");
sessionStorage.setItem("bagsView", "grid");
}
},
{
title: "List",
icon: <ViewList />,
function: () => {
setBagView("list");
sessionStorage.setItem("bagsView", "list");
}
}
]}
/>
{/* <StyledToggleButtonGroup
id="tour-graph-tabs"
value={bagView}
exclusive
@ -1275,7 +1347,7 @@ export default function Bins(props: Props) {
sessionStorage.setItem("bagsView", "grid");
}}>
<ViewComfy />
</StyledToggle>
</StyledToggle> */}
{/* hidden at dustins request so that grid view and list are the only two */}
{/* <StyledToggle
value={"scroll"}
@ -1286,7 +1358,7 @@ export default function Bins(props: Props) {
}}>
<ViewColumn />
</StyledToggle> */}
<StyledToggle
{/* <StyledToggle
value={"list"}
aria-label="list view"
onClick={() => {
@ -1295,7 +1367,7 @@ export default function Bins(props: Props) {
}}>
<ViewList />
</StyledToggle>
</StyledToggleButtonGroup>
</StyledToggleButtonGroup> */}
<IconButton
className={classes.icon}
onClick={() => {

20
src/tasks/TaskList.tsx
View file

@ -8,6 +8,7 @@ import { Task } from "models";
//import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
import TasksIcon from "products/Construction/TasksIcon";
import moment from "moment";
import ButtonGroup from "common/ButtonGroup";
interface Props {
tasks: Task[];
@ -147,8 +148,21 @@ export default function TaskList(props: Props) {
return (
<Box padding="5px" textAlign="center">
<Typography variant="h5">{label ? label : ""}</Typography>
<Box textAlign="center">
<ToggleButtonGroup value={viewing} exclusive size="small" aria-label="Bin Mode">
<Box textAlign="center" display="flex" justifyContent="center">
<ButtonGroup
toggle
buttons={[
{
title: "Upcoming",
function: () => setViewing("upcoming")
},
{
title: "Complete",
function: () => setViewing("complete")
}
]}
/>
{/* <ToggleButtonGroup value={viewing} exclusive size="small" aria-label="Bin Mode">
<ToggleButton
value={"upcoming"}
aria-label="upcoming"
@ -161,7 +175,7 @@ export default function TaskList(props: Props) {
aria-label="complete">
Complete
</ToggleButton>
</ToggleButtonGroup>
</ToggleButtonGroup> */}
{location !== "/tasks" && (
<IconButton id="tasks" component={Link} to="/tasks">
<TasksIcon />