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

merged tidio and accepted incoming changes

Browse source
This commit is contained in:
Carter 2026-02-20 15:58:58 -06:00
commit e7e951dca3
15 changed files with 5341 additions and 3747 deletions
Download patch file Download diff file Expand all files Collapse all files

8872
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -55,7 +55,7 @@
"mui-tel-input": "^7.0.0",
"notistack": "^3.0.1",
"openweathermap-ts": "^1.2.10",
"protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#dev",
"protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#master",
"query-string": "^9.2.1",
"react": "^18.3.1",
"react-beautiful-dnd": "^13.1.1",

8
src/app/UserWrapper.tsx
View file

@ -13,6 +13,7 @@ import { CssBaseline, Theme } from '@mui/material'
import { AppThemeProvider } from 'theme/AppThemeProvider'
import HTTPProvider from 'providers/http'
import { Crisp } from "crisp-sdk-web";
import { useSnackbar } from 'hooks'
// import FirmwareLoader from './FirmwareLoader'
const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
@ -65,6 +66,7 @@ export default function UserWrapper(props: Props) {
const useAuth = useAuth0();
const hasFetched = useRef(false);
const [global, setGlobal] = useState<undefined | GlobalState>(undefined)
const snackbar = useSnackbar()
const user_id = or(useAuth.user?.sub, "")
@ -85,7 +87,8 @@ export default function UserWrapper(props: Props) {
backgroundTasksComplete: false,
firmware: new Map()
})
}).catch(() => {
}).catch((err) => {
snackbar.error("get user and team: "+err)
userAPI.getUser(user_id).then(user => {
setGlobal({
user: user ? user : User.create(),
@ -96,7 +99,8 @@ export default function UserWrapper(props: Props) {
backgroundTasksComplete: false,
firmware: new Map()
})
}).catch(() => {
}).catch((err) => {
snackbar.error("get user: "+err)
setGlobal(globalDefault)
})

4
src/bin/AddBinFab.tsx
View file

@ -27,9 +27,9 @@ const useStyles = makeStyles((theme: Theme) => {
},
position: "fixed",
bottom: theme.spacing(8), //for mobile navigator
right: theme.spacing(2),
right: theme.spacing(10.25),
[theme.breakpoints.up("sm")]: {
bottom: theme.spacing(2)
bottom: theme.spacing(1.75)
}
},
pulse: {

50
src/bin/BinCardV2.tsx
View file

@ -263,32 +263,39 @@ export default function BinCard(props: Props) {
let val;
let useEMC = false;
switch (valDisplay) {
case "average":
//taking the switch cases out so that the node always displays the average for the moisture/humidity
if (average?.emc) {
useEMC = true;
val = average.emc;
} else {
val = average?.humid;
}
break;
case "low":
if (coldNode?.emc) {
useEMC = true;
val = coldNode.emc;
} else {
val = coldNode?.humid;
}
break;
case "high":
if (hotNode?.emc) {
useEMC = true;
val = hotNode.emc;
} else {
val = hotNode?.humid;
}
break;
}
// switch (valDisplay) {
// case "average":
// if (average?.emc) {
// useEMC = true;
// val = average.emc;
// } else {
// val = average?.humid;
// }
// break;
// case "low":
// if (coldNode?.emc) {
// useEMC = true;
// val = coldNode.emc;
// } else {
// val = coldNode?.humid;
// }
// break;
// case "high":
// if (hotNode?.emc) {
// useEMC = true;
// val = hotNode.emc;
// } else {
// val = hotNode?.humid;
// }
// break;
// }
if (val !== undefined && !isNaN(val)) {
display = val.toFixed(2);
@ -334,7 +341,8 @@ export default function BinCard(props: Props) {
color="textSecondary"
noWrap
style={{ fontSize: "0.5rem" }}>
{valDisplay === "high" ? "High" : valDisplay === "low" ? "Low" : "Average"}
{/* {valDisplay === "high" ? "High" : valDisplay === "low" ? "Low" : "Average"} */}
Average
</Typography>
</Box>
</Grid>

20
src/bin/BinsList.tsx
View file

@ -23,6 +23,12 @@ interface Props {
//startingTranslate: number;
valDisplay?: "high" | "low" | "average";
insert?: boolean
/**
* optional function for when you want clicking the card to do something other than navigate to the bin page
* @param bin the bin model for the card that was clicked
* @returns void
*/
cardClickFunction?: (bin: Bin) => void
}
const useStyles = makeStyles((_theme) => {
@ -40,7 +46,7 @@ const useStyles = makeStyles((_theme) => {
});
export default function BinsList(props: Props) {
const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert } = props;
const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert, cardClickFunction } = props;
const classes = useStyles();
// const history = useHistory();
const navigate = useNavigate()
@ -53,6 +59,14 @@ export default function BinsList(props: Props) {
navigate(path, { state: {bin: bins[i]} });
};
const cardClicked = (index: number) => {
if(cardClickFunction) {
cardClickFunction(bins[index])
}else{
goToBin(index)
}
}
const leftArrow = () => {
const visibility = useContext(VisibilityContext);
//const isFirstVisible = visibility.useIsVisible('first', false)
@ -95,7 +109,7 @@ export default function BinsList(props: Props) {
key={i}
className={classes.gridListTile}
onClick={() => {
!duplicate && goToBin(i)
!duplicate && cardClicked(i)
}}>
<BinCardV2
bin={b}
@ -129,7 +143,7 @@ export default function BinsList(props: Props) {
key={i}
className={classes.gridListTile}
onClick={() => {
!duplicate && goToBin(i)
!duplicate && cardClicked(i)
}}>
<BinCardV2
bin={b}

10
src/bin/BinyardDisplay.tsx
View file

@ -42,6 +42,11 @@ import BinsList from "./BinsList";
interface Props {
yardKey: string;
insert?: boolean;
/**
* function to run when a bin card is clicked, when not passed in will default to attempting to navigate to the bin page by adding the bin key to the url
* @param bin the selected bin model
*/
binClicked?: (bin: Bin) => void
}
const useStyles = makeStyles((theme: Theme) => ({
@ -82,7 +87,7 @@ const useStyles = makeStyles((theme: Theme) => ({
}));
export default function BinyardDisplay(props: Props) {
const { yardKey, insert } = props;
const { yardKey, insert, binClicked } = props;
const classes = useStyles();
const binAPI = useBinAPI();
const theme = useTheme();
@ -321,6 +326,7 @@ export default function BinyardDisplay(props: Props) {
bins={grainBins}
duplicateBin={duplicateBin}
title={"Grain Bins"}
cardClickFunction={binClicked}
/>
</Grid>
</React.Fragment>
@ -338,6 +344,7 @@ export default function BinyardDisplay(props: Props) {
bins={fertBins}
duplicateBin={duplicateBin}
title={"Fertilizer Bins"}
cardClickFunction={binClicked}
/>
</Grid>
</React.Fragment>
@ -355,6 +362,7 @@ export default function BinyardDisplay(props: Props) {
bins={emptyBins}
duplicateBin={duplicateBin}
title={"Empty Bins"}
cardClickFunction={binClicked}
// loadMore={newTranslation => {
// //only triggered in the scroll view so this will never trigger in grid view
// if (yardBins.length < binTotal) {

59
src/gate/GateDevice.tsx
View file

@ -56,55 +56,6 @@ export default function GateDevice(props: Props) {
const [lastTemps, setLastTemps] = useState({ t1: 0, t2: 0 });
const [lastPressures, setLastPressures] = useState({ p1: 0, p2: 0 });
// 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);
useEffect(() => {
if (comprehensiveDevice.device) {
setDevice(Device.any(comprehensiveDevice.device));
@ -141,7 +92,7 @@ export default function GateDevice(props: Props) {
c.status.measurement[0].values[0] &&
c.status.measurement[0].values[0].values[1]
) {
setPCAFanOn(c.status.measurement[0].values[0].values[1] > 250); //apx 1 iwg
setPCAFanOn(c.status.measurement[0].values[0].values[1] > 996); //apx 4 iwg
}
break;
default:
@ -338,11 +289,11 @@ export default function GateDevice(props: Props) {
return (
<Grid
container
direction={(isMobile) ? "column" : "row"}
// direction={(isMobile) ? "column" : "row"}
width="100%"
alignItems="center"
//alignItems="center"
>
<Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
<Grid width={"100%"} size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
<Box
display="flex"
justifyContent="space-between"
@ -363,7 +314,7 @@ export default function GateDevice(props: Props) {
]}
/>
</Box>
<Card raised>
<Card>
<GateSVG
finalTemp={
gate.gateMutations[device.id().toString()] &&

6
src/gate/GateFlowGraph.tsx
View file

@ -70,8 +70,9 @@ export default function GateFlowGraph(props: Props) {
const classes = useStyles();
const [flowEvents, setFlowEvents] = useState<pond.AirFlowEvent[]>([]);
const [eventsLoading, setEventsLoading] = useState(false);
const eventThreshold = 5;
const idleFlow = 2.44;
//these two constants could be entered by the user at time of retrieval
const eventThreshold = 5; //the threshold that if crossed from one measurement to the next during a flow event will end the current flow event and start a new one
const idleFlow = 3.5; //the mass air flow that must be crossed in order to start a flow event, anything below this will not start an event but must go below this to end an event
useEffect(() => {
if (loadingChartData) return;
@ -102,7 +103,6 @@ export default function GateFlowGraph(props: Props) {
timestamp: time.valueOf(),
value: val.airFlow ?? 0
};
data.push(newPoint);
if (!recent || recent.timestamp < newPoint.timestamp) {
recent = newPoint;

9
src/gate/GateGraphs.tsx
View file

@ -27,6 +27,7 @@ import React, { useEffect, useState } from "react";
import { avg } from "utils";
import GateFlowGraph from "./GateFlowGraph";
import { makeStyles } from "@mui/styles";
import { cloneDeep } from "lodash";
interface Props {
gate: Gate;
@ -245,7 +246,9 @@ export default function GateGraphs(props: Props) {
const graphHeader = (comp: Component) => {
const componentIcon = GetComponentIcon(comp.settings.type, comp.settings.subtype, themeType);
console.log(comp)
let measurement = cloneDeep(comp.status.measurement)
let umArray = measurement.map(um => UnitMeasurement.create(um, user))
return (
<CardHeader
avatar={
@ -260,9 +263,7 @@ export default function GateGraphs(props: Props) {
subheader={
<UnitMeasurementSummary
component={comp}
reading={UnitMeasurement.convertLastMeasurement(
comp.status.measurement.map(um => UnitMeasurement.create(um, user)) ?? []
)}
reading={UnitMeasurement.convertLastMeasurement(umArray)}
/>
}
/>

4
src/gate/GateSVG.tsx
View file

@ -333,7 +333,7 @@ export default function GateSVG(props: Props) {
const deviceCheckIn = () => {
return (
<g key={"deviceCheckIn"}>
<text x={95} y={12} fontSize={7} fontWeight={650} fill={"white"}>
<text x={85} y={12} fontSize={7} fontWeight={650} fill={"white"}>
Last Checked In: {moment(checkInTime).fromNow()}
</text>
</g>
@ -342,7 +342,7 @@ export default function GateSVG(props: Props) {
return (
<React.Fragment>
<Box height={"100%"} maxWidth={isMobile ? 360 : 460} margin="auto">
<Box height={"100%"} maxWidth={isMobile ? 400 : 460} margin="auto">
<svg
width={"100%"}
height={"100%"}

11
src/maps/mapDrawers/BinYardDrawer.tsx
View file

@ -1,6 +1,7 @@
import BinyardDisplay from "bin/BinyardDisplay";
import DisplayDrawer from "common/DisplayDrawer";
import MapMarkerSettings from "maps/MapMarkerSettings";
import { Bin } from "models";
//import Bins from "pages/Bins";
import { pond } from "protobuf-ts/pond";
import { useBinYardAPI, useGlobalState, useSnackbar } from "providers";
@ -14,10 +15,11 @@ interface Props {
removeMarker: (key: string) => void;
updateMarker: (key: string, objectSettings: pond.BinYardSettings) => void;
moveMap: (long: number, lat: number) => void;
binClicked: (bin: Bin) => void
}
export default function BinYardDrawer(props: Props) {
const { open, onClose, selectedYard, yards, removeMarker, updateMarker, moveMap } = props;
const { open, onClose, selectedYard, yards, removeMarker, updateMarker, moveMap, binClicked } = props;
const [{as}] = useGlobalState();
const [yard, setYard] = useState<pond.BinYardSettings>(pond.BinYardSettings.create());
const [openMarkerSettings, setOpenMarkerSettings] = useState(false);
@ -85,7 +87,12 @@ export default function BinYardDrawer(props: Props) {
const drawerBody = () => {
//return <Bins insert yardFilter={yard.key} />;
return <BinyardDisplay insert yardKey={yard.key} />;
return (
<BinyardDisplay
insert
yardKey={yard.key}
binClicked={binClicked}/>
)
};
/**

12
src/maps/mapObjectControllers/AgMapController.tsx
View file

@ -1659,6 +1659,18 @@ import { Result } from "@mapbox/mapbox-gl-geocoder";
<React.Fragment>
<BinYardDrawer
open={yardDrawer}
binClicked={(bin) => {
//move the map to the correct bin location, assuming the bin was plotted on the map
let location = bin.location()
if(location !== null && location !== undefined){
moveMap(location.latitude, location.longitude, zoomLevels.close, isMobile)
}
//close the yarddrawer
setYardDrawer(false)
//open the bin drawer using the correct bin
setObjectKey(bin.key())
setBinDrawer(true)
}}
onClose={() => {
if (new Date().valueOf() > endTime) {
setYardDrawer(false);

3
src/pages/Bins.tsx
View file

@ -199,6 +199,7 @@ export default function Bins(props: Props) {
const [cardValDisplay, setCardValDisplay] = useState<"high" | "low" | "average">("high");
const [teamsDialog, setTeamsDialog] = useState(false)
const snackbar = useSnackbar()
// const [scrollTranslations, setScrollTranslations] = useState({
// bins: 0,
@ -265,6 +266,8 @@ export default function Bins(props: Props) {
// console.log("should?")
setTeamsDialog(true)
}
}).catch(err => {
snackbar.error("error listing teams: "+err)
})
}
}, [doneLoadingPage, grainBins, grainBags])

6
src/pages/Device.tsx
View file

@ -158,9 +158,9 @@ export default function DevicePage() {
if (length > 0) {
warningString = warningString + " through " + getContextTypes()[length - 1];
}
snackbar.warning(warningString);
snackbar.warning("page data warning: "+warningString);
} else {
snackbar.error(err);
snackbar.error("page data error: "+err);
}
})
.finally(() => setLoading(false));
@ -174,7 +174,7 @@ export default function DevicePage() {
}
})
.catch(err => {
console.log(err)
console.log("load port scan: "+err)
})
}