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

replaced all instances of the styled toggle with the new buttongroup common component

Browse source
This commit is contained in:
csawatzky 2025-05-13 11:55:13 -06:00
parent 269417a321
commit af25036640
5 changed files with 306 additions and 163 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 { Box, Theme, ToggleButton, ToggleButtonGroup, darken } from "@mui/material";
import { makeStyles, withStyles } from "@mui/styles"; import { makeStyles, withStyles } from "@mui/styles";
import ButtonGroup from "common/ButtonGroup";
import { ExtractMoisture } from "grain"; import { ExtractMoisture } from "grain";
import { GrainCable } from "models/GrainCable"; import { GrainCable } from "models/GrainCable";
import { describeMeasurement } from "pbHelpers/MeasurementDescriber"; import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
@ -212,54 +213,54 @@ export default function BinSVGV2(props: Props) {
const [extraDetails, setExtraDetails] = useState<"temps" | "hums">("temps"); const [extraDetails, setExtraDetails] = useState<"temps" | "hums">("temps");
const [nodeWarning, setNodeWarning] = useState(false); const [nodeWarning, setNodeWarning] = useState(false);
const StyledToggleButtonGroup = withStyles(theme => ({ // const StyledToggleButtonGroup = withStyles(theme => ({
grouped: { // grouped: {
margin: theme.spacing(-0.5), // margin: theme.spacing(-0.5),
border: "none", // border: "none",
padding: theme.spacing(1), // padding: theme.spacing(1),
"&:not(:first-child):not(:last-child)": { // "&:not(:first-child):not(:last-child)": {
borderRadius: 24, // borderRadius: 24,
marginRight: theme.spacing(0.5), // marginRight: theme.spacing(0.5),
marginLeft: theme.spacing(0.5) // marginLeft: theme.spacing(0.5)
}, // },
"&:first-child": { // "&:first-child": {
borderRadius: 24, // borderRadius: 24,
marginLeft: theme.spacing(0.25) // marginLeft: theme.spacing(0.25)
}, // },
"&:last-child": { // "&:last-child": {
borderRadius: 24, // borderRadius: 24,
marginRight: theme.spacing(0.25) // marginRight: theme.spacing(0.25)
} // }
}, // },
root: { // root: {
backgroundColor: darken( // backgroundColor: darken(
theme.palette.background.paper, // theme.palette.background.paper,
getThemeType() === "light" ? 0.05 : 0.25 // getThemeType() === "light" ? 0.05 : 0.25
), // ),
borderRadius: 24, // borderRadius: 24,
content: "border-box" // content: "border-box"
} // }
}))(ToggleButtonGroup); // }))(ToggleButtonGroup);
const StyledToggle = withStyles({ // const StyledToggle = withStyles({
root: { // root: {
backgroundColor: "transparent", // backgroundColor: "transparent",
overflow: "visible", // overflow: "visible",
content: "content-box", // content: "content-box",
"&$selected": { // "&$selected": {
backgroundColor: "gold", // backgroundColor: "gold",
color: "black", // color: "black",
borderRadius: 24, // borderRadius: 24,
fontWeight: "bold" // fontWeight: "bold"
}, // },
"&$selected:hover": { // "&$selected:hover": {
backgroundColor: "rgb(255, 255, 0)", // backgroundColor: "rgb(255, 255, 0)",
color: "black", // color: "black",
borderRadius: 24 // borderRadius: 24
} // }
}, // },
selected: {} // selected: {}
})(ToggleButton); // })(ToggleButton);
const gradients = () => { const gradients = () => {
const burning = "#8a1f0d"; const burning = "#8a1f0d";
@ -1047,10 +1048,26 @@ export default function BinSVGV2(props: Props) {
<React.Fragment> <React.Fragment>
{showTempHum && ( {showTempHum && (
<Box <Box
display="flex"
alignContent="center"
justifyContent="center"
textAlign="center" textAlign="center"
//visibility={showTempHum ? "visible" : "hidden"} //visibility={showTempHum ? "visible" : "hidden"}
className={!isFullScreen ? classes.smallToggle : classes.fullToggle}> 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} value={extraDetails}
exclusive exclusive
size="small" size="small"
@ -1067,7 +1084,7 @@ export default function BinSVGV2(props: Props) {
aria-label="Node Humidity"> aria-label="Node Humidity">
{grainType ? (isFullScreen ? "Moisture" : "EMC") : isFullScreen ? "Humidity" : "Hum"} {grainType ? (isFullScreen ? "Moisture" : "EMC") : isFullScreen ? "Humidity" : "Hum"}
</StyledToggle> </StyledToggle>
</StyledToggleButtonGroup> </StyledToggleButtonGroup> */}
</Box> </Box>
)} )}
<Box <Box

18
src/gate/GateDevice.tsx
View file

@ -22,6 +22,7 @@ import GateSVG from "./GateSVG";
import GateGraphs from "./GateGraphs"; import GateGraphs from "./GateGraphs";
//import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab"; //import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
import { getThemeType } from "theme"; import { getThemeType } from "theme";
import ButtonGroup from "common/ButtonGroup";
interface Props { interface Props {
gate: Gate; gate: Gate;
@ -344,7 +345,20 @@ export default function GateDevice(props: Props) {
alignItems="center" alignItems="center"
marginBottom={2}> marginBottom={2}>
<Typography style={{ fontWeight: 650, fontSize: 20 }}>{device.name()}</Typography> <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 <ToggleButton
onClick={() => setDetail("analytics")} onClick={() => setDetail("analytics")}
value={"analytics"} value={"analytics"}
@ -357,7 +371,7 @@ export default function GateDevice(props: Props) {
aria-label="Sensor Graphs"> aria-label="Sensor Graphs">
Sensors Sensors
</ToggleButton> </ToggleButton>
</ToggleButtonGroup> </ToggleButtonGroup> */}
</Box> </Box>
<Card raised> <Card raised>
<GateSVG <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 { useNavigate, useParams } from "react-router-dom";
import { Controller } from "models/Controller"; import { Controller } from "models/Controller";
import TaskViewer from "tasks/TaskViewer"; import TaskViewer from "tasks/TaskViewer";
import ButtonGroup from "common/ButtonGroup";
interface TabPanelProps { interface TabPanelProps {
children?: React.ReactNode; children?: React.ReactNode;
@ -214,54 +215,54 @@ export default function Bin(props: Props) {
setValue(newValue); setValue(newValue);
}; };
const StyledToggle = styled(ToggleButton)(() => ({ // const StyledToggle = styled(ToggleButton)(() => ({
root: { // root: {
backgroundColor: "transparent", // backgroundColor: "transparent",
overflow: "visible", // overflow: "visible",
content: "content-box", // content: "content-box",
"&$selected": { // "&$selected": {
backgroundColor: "gold", // backgroundColor: "gold",
color: "black", // color: "black",
borderRadius: 24, // borderRadius: 24,
fontWeight: "bold" // fontWeight: "bold"
}, // },
"&$selected:hover": { // "&$selected:hover": {
backgroundColor: "rgb(255, 255, 0)", // backgroundColor: "rgb(255, 255, 0)",
color: "black", // color: "black",
borderRadius: 24 // borderRadius: 24
} // }
}, // },
selected: {} // selected: {}
})) // }))
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({ // const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
grouped: { // grouped: {
margin: theme.spacing(-0.5), // margin: theme.spacing(-0.5),
border: "none", // border: "none",
padding: theme.spacing(1), // padding: theme.spacing(1),
"&:not(:first-child):not(:last-child)": { // "&:not(:first-child):not(:last-child)": {
borderRadius: 24, // borderRadius: 24,
marginRight: theme.spacing(0.5), // marginRight: theme.spacing(0.5),
marginLeft: theme.spacing(0.5) // marginLeft: theme.spacing(0.5)
}, // },
"&:first-child": { // "&:first-child": {
borderRadius: 24, // borderRadius: 24,
marginLeft: theme.spacing(0.25) // marginLeft: theme.spacing(0.25)
}, // },
"&:last-child": { // "&:last-child": {
borderRadius: 24, // borderRadius: 24,
marginRight: theme.spacing(0.25) // marginRight: theme.spacing(0.25)
} // }
}, // },
root: { // root: {
backgroundColor: darken( // backgroundColor: darken(
theme.palette.background.paper, // theme.palette.background.paper,
getThemeType() === "light" ? 0.05 : 0.25 // getThemeType() === "light" ? 0.05 : 0.25
), // ),
borderRadius: 24, // borderRadius: 24,
content: "border-box" // content: "border-box"
} // }
})) // }))
const load = useCallback(() => { const load = useCallback(() => {
if (loadRef.current || user.id() === "") return; if (loadRef.current || user.id() === "") return;
@ -862,8 +863,33 @@ export default function Bin(props: Props) {
</Box> </Box>
</Grid> </Grid>
<Grid id="tour-graphs" size={{ xs: 12, sm: 12, md: 12, lg: 5.3 }}> <Grid id="tour-graphs" size={{ xs: 12, sm: 12, md: 12, lg: 5.3 }}>
<Box paddingBottom={2}> <Box paddingBottom={2} display="flex">
<StyledToggleButtonGroup <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" id="tour-graph-tabs"
value={detail} value={detail}
exclusive exclusive
@ -899,7 +925,7 @@ export default function Bin(props: Props) {
aria-label="Bin Mode Presets"> aria-label="Bin Mode Presets">
Presets Presets
</StyledToggle> </StyledToggle>
</StyledToggleButtonGroup> </StyledToggleButtonGroup> */}
</Box> </Box>
{detail === "alerts" && ( {detail === "alerts" && (
<Box> <Box>

190
src/pages/Bins.tsx
View file

@ -81,6 +81,7 @@ import { getThemeType } from "theme/themeType";
import GrainBagSettings from "grainBag/grainBagSettings"; import GrainBagSettings from "grainBag/grainBagSettings";
import GrainBagList from "grainBag/grainBagList"; import GrainBagList from "grainBag/grainBagList";
import BinYards from "bin/BinYards"; import BinYards from "bin/BinYards";
import ButtonGroup from "common/ButtonGroup";
// import { useHistory } from "react-router"; // import { useHistory } from "react-router";
const useStyles = makeStyles((theme: Theme) => { const useStyles = makeStyles((theme: Theme) => {
@ -200,56 +201,56 @@ export default function Bins(props: Props) {
// fertilizer: 0 // fertilizer: 0
// }); // });
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({ // const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
'& .MuiToggleButtonGroup-grouped': { // '& .MuiToggleButtonGroup-grouped': {
// border: 'none' replaces the old 'grouped' border: "none" // // border: 'none' replaces the old 'grouped' border: "none"
border: 'none', // border: 'none',
padding: theme.spacing(1), // padding: theme.spacing(1),
// Middle buttons // // Middle buttons
'&:not(:first-child):not(:last-child)': { // '&:not(:first-child):not(:last-child)': {
borderRadius: 24, // borderRadius: 24,
marginRight: theme.spacing(0.5), // marginRight: theme.spacing(0.5),
marginLeft: theme.spacing(0.5), // marginLeft: theme.spacing(0.5),
}, // },
// First button // // First button
'&:first-child': { // '&:first-child': {
borderRadius: 24, // borderRadius: 24,
marginLeft: theme.spacing(0.25), // marginLeft: theme.spacing(0.25),
}, // },
// Last button // // Last button
'&:last-child': { // '&:last-child': {
borderRadius: 24, // borderRadius: 24,
marginRight: theme.spacing(0.25), // marginRight: theme.spacing(0.25),
}, // },
}, // },
// Root styles // // Root styles
backgroundColor: darken( // backgroundColor: darken(
theme.palette.background.paper, // theme.palette.background.paper,
getThemeType() === 'light' ? 0.05 : 0.25 // getThemeType() === 'light' ? 0.05 : 0.25
), // ),
borderRadius: 24, // borderRadius: 24,
boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original // boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original
})); // }));
const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({ // const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
root: { // root: {
backgroundColor: "transparent", // backgroundColor: "transparent",
overflow: "visible", // overflow: "visible",
content: "content-box", // content: "content-box",
"&$selected": { // "&$selected": {
backgroundColor: "gold", // backgroundColor: "gold",
color: "black", // color: "black",
borderRadius: 24, // borderRadius: 24,
fontWeight: "bold" // fontWeight: "bold"
}, // },
"&$selected:hover": { // "&$selected:hover": {
backgroundColor: "rgb(255, 255, 0)", // backgroundColor: "rgb(255, 255, 0)",
color: "black", // color: "black",
borderRadius: 24 // borderRadius: 24
} // }
}, // },
selected: {} // selected: {}
})); // }));
useEffect(() => { useEffect(() => {
let ebt = sessionStorage.getItem("expandBinTotal"); let ebt = sessionStorage.getItem("expandBinTotal");
@ -502,6 +503,17 @@ export default function Bins(props: Props) {
} }
}, [loadBins, props.insert, contentFilter]); }, [loadBins, props.insert, contentFilter]);
const determineNodeToggle = () => {
switch(cardValDisplay) {
case "low":
return [0]
case "high":
return [2]
default:
return [1]
}
}
const duplicateBin = (bin: Bin) => { const duplicateBin = (bin: Bin) => {
binAPI.addBin(bin.settings, as).then(resp => { binAPI.addBin(bin.settings, as).then(resp => {
loadBins(); loadBins();
@ -1154,7 +1166,25 @@ export default function Bins(props: Props) {
Load All Load All
</Button> </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" id="cardValueDisplay"
value={cardValDisplay} value={cardValDisplay}
exclusive exclusive
@ -1184,12 +1214,33 @@ export default function Bins(props: Props) {
}}> }}>
High High
</StyledToggle> </StyledToggle>
</StyledToggleButtonGroup> </StyledToggleButtonGroup> */}
</Box> </Box>
</Grid> </Grid>
<Grid > <Grid >
<Box display="flex" paddingY={1} alignContent="center" alignItems="center"> <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" id="tour-graph-tabs"
value={binView} value={binView}
exclusive exclusive
@ -1203,7 +1254,7 @@ export default function Bins(props: Props) {
sessionStorage.setItem("binsView", "grid"); sessionStorage.setItem("binsView", "grid");
}}> }}>
<ViewComfy /> <ViewComfy />
</StyledToggle> </StyledToggle> */}
{/* hidden at dustins request so that grid view and list are the only two */} {/* hidden at dustins request so that grid view and list are the only two */}
{/* <StyledToggle {/* <StyledToggle
value={"scroll"} value={"scroll"}
@ -1214,7 +1265,7 @@ export default function Bins(props: Props) {
}}> }}>
<ViewColumn /> <ViewColumn />
</StyledToggle> */} </StyledToggle> */}
<StyledToggle {/* <StyledToggle
value={"list"} value={"list"}
aria-label="list view" aria-label="list view"
onClick={() => { onClick={() => {
@ -1223,7 +1274,7 @@ export default function Bins(props: Props) {
}}> }}>
<ViewList /> <ViewList />
</StyledToggle> </StyledToggle>
</StyledToggleButtonGroup> </StyledToggleButtonGroup> */}
<MoreVert <MoreVert
className={classes.icon} className={classes.icon}
onClick={event => { onClick={event => {
@ -1261,7 +1312,28 @@ export default function Bins(props: Props) {
</Grid> </Grid>
<Grid > <Grid >
<Box display="flex" paddingY={1} alignContent="center" alignItems="center"> <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" id="tour-graph-tabs"
value={bagView} value={bagView}
exclusive exclusive
@ -1275,7 +1347,7 @@ export default function Bins(props: Props) {
sessionStorage.setItem("bagsView", "grid"); sessionStorage.setItem("bagsView", "grid");
}}> }}>
<ViewComfy /> <ViewComfy />
</StyledToggle> </StyledToggle> */}
{/* hidden at dustins request so that grid view and list are the only two */} {/* hidden at dustins request so that grid view and list are the only two */}
{/* <StyledToggle {/* <StyledToggle
value={"scroll"} value={"scroll"}
@ -1286,7 +1358,7 @@ export default function Bins(props: Props) {
}}> }}>
<ViewColumn /> <ViewColumn />
</StyledToggle> */} </StyledToggle> */}
<StyledToggle {/* <StyledToggle
value={"list"} value={"list"}
aria-label="list view" aria-label="list view"
onClick={() => { onClick={() => {
@ -1295,7 +1367,7 @@ export default function Bins(props: Props) {
}}> }}>
<ViewList /> <ViewList />
</StyledToggle> </StyledToggle>
</StyledToggleButtonGroup> </StyledToggleButtonGroup> */}
<IconButton <IconButton
className={classes.icon} className={classes.icon}
onClick={() => { onClick={() => {

20
src/tasks/TaskList.tsx
View file

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