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

added some steps to the bin tour to reference each of the tabs, added some step to the signup tour to show some more pages and also added a way to change unit settings IN the tour step, now it is entirely their fault if they skip it, we cant make it any more in their face

Browse source
This commit is contained in:
csawatzky 2025-12-03 15:04:55 -06:00
parent c9d2eac6c3
commit 633ef3817f
5 changed files with 427 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/pages/Bin.tsx
View file

@ -195,6 +195,7 @@ export default function Bin(props: Props) {
const [headspaceCO2, setHeadspaceCO2] = useState<CO2[]>([]);
const [heaters, setHeaters] = useState<Controller[]>([]);
const [fans, setFans] = useState<Controller[]>([]);
const [activeDetails, setActiveDetails] = useState([0])
const [detail, setDetail] = useState<
"inventory" | "sensors" | "analytics" | "presets" | "alerts" | "transactions"
>("inventory");
@ -805,7 +806,7 @@ export default function Bin(props: Props) {
{overview()}
{preferences && binComponents(preferences)}
</Grid>
<Grid size={{ xs: 12, sm: 12, md: 12, lg: 2.6 }}>
<Grid id="tour-conditions" size={{ xs: 12, sm: 12, md: 12, lg: 2.6 }}>
{(bin.settings.mode === pond.BinMode.BIN_MODE_DRYING ||
bin.settings.mode === pond.BinMode.BIN_MODE_HYDRATING ||
bin.settings.mode === pond.BinMode.BIN_MODE_COOLDOWN) && (
@ -824,34 +825,53 @@ export default function Bin(props: Props) {
<BinStorageConditions bin={bin} headspaceCO2={headspaceCO2} cables={grainCables} />
</Box>
</Grid>
<Grid id="tour-graphs" size={{ xs: 12, sm: 12, md: 12, lg: 5.3 }}>
<Box paddingBottom={2} display="flex">
<ButtonGroup
<Grid id="tour-details" size={{ xs: 12, sm: 12, md: 12, lg: 5.3 }}>
<Box id="tour-graph-tabs" paddingBottom={2} display="flex">
<ButtonGroup
toggle
toggledButtons={activeDetails}
buttons={[
{
title: "Inventory",
function: () => setDetail("inventory")
function: () => {
setDetail("inventory")
setActiveDetails([0])
}
},
{
title: "Sensors",
function: () => setDetail("sensors")
function: () => {
setDetail("sensors")
setActiveDetails([1])
}
},
{
title: "Analysis",
function: () => setDetail("analytics")
function: () => {
setDetail("analytics")
setActiveDetails([2])
}
},
{
title: "Alerts",
function: () => setDetail("alerts")
function: () => {
setDetail("alerts")
setActiveDetails([3])
}
},
{
title: "Presets",
function: () => setDetail("presets")
function: () => {
setDetail("presets")
setActiveDetails([4])
}
},
{
title: "Transactions",
function: () => setDetail("transactions")
function: () => {
setDetail("transactions")
setActiveDetails([5])
}
}
]}
/>
@ -880,23 +900,27 @@ export default function Bin(props: Props) {
/>
</Box>
)}
{(detail === "inventory" || detail === "sensors" || detail === "analytics") && (
<BinGraphs
bin={bin}
binLoading={binLoading}
plenums={plenums}
cables={grainCables}
pressures={pressures}
fans={fans}
componentDevices={componentDevices}
display={detail}
compMap={components}
compositionNameMap={compositionNameMap}
/>
)}
{detail === "transactions" &&
<Box>
<BinTransactions bin={bin} permissions={permissions} refresh={refresh}/>
</Box>
}
{(detail === "inventory" || detail === "sensors" || detail === "analytics") && (
<Box>
<BinGraphs
bin={bin}
binLoading={binLoading}
plenums={plenums}
cables={grainCables}
pressures={pressures}
fans={fans}
componentDevices={componentDevices}
display={detail}
compMap={components}
compositionNameMap={compositionNameMap}
/>
</Box>
)}
</Grid>
</Grid>
</Card>
@ -1141,7 +1165,11 @@ export default function Bin(props: Props) {
</Box>
{objectTeams()}
{deviceMenu()}
<BinTour />
<BinTour
setDetailTabState={(detail, buttonIndex) => {
setDetail(detail)
setActiveDetails([buttonIndex])
}}/>
</PageContainer>
);
}