From 7964aa09cc3b53f4512b2792fb81e9c2f67d5b52 Mon Sep 17 00:00:00 2001 From: csawatzky Date: Mon, 29 Dec 2025 16:23:02 -0600 Subject: [PATCH] added optional custom card function to the binslist so that on the map page we can have the map move to the bin and open the bin drawer when the card is clicked from the yard drawer --- src/bin/BinsList.tsx | 20 ++++++++++++++++--- src/bin/BinyardDisplay.tsx | 10 +++++++++- src/maps/mapDrawers/BinYardDrawer.tsx | 11 ++++++++-- .../mapObjectControllers/AgMapController.tsx | 12 +++++++++++ 4 files changed, 47 insertions(+), 6 deletions(-) diff --git a/src/bin/BinsList.tsx b/src/bin/BinsList.tsx index 483df50..ad7ae64 100644 --- a/src/bin/BinsList.tsx +++ b/src/bin/BinsList.tsx @@ -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) }}> { - !duplicate && goToBin(i) + !duplicate && cardClicked(i) }}> 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} /> @@ -338,6 +344,7 @@ export default function BinyardDisplay(props: Props) { bins={fertBins} duplicateBin={duplicateBin} title={"Fertilizer Bins"} + cardClickFunction={binClicked} /> @@ -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) { diff --git a/src/maps/mapDrawers/BinYardDrawer.tsx b/src/maps/mapDrawers/BinYardDrawer.tsx index 3153901..e347014 100644 --- a/src/maps/mapDrawers/BinYardDrawer.tsx +++ b/src/maps/mapDrawers/BinYardDrawer.tsx @@ -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.create()); const [openMarkerSettings, setOpenMarkerSettings] = useState(false); @@ -85,7 +87,12 @@ export default function BinYardDrawer(props: Props) { const drawerBody = () => { //return ; - return ; + return ( + + ) }; /** diff --git a/src/maps/mapObjectControllers/AgMapController.tsx b/src/maps/mapObjectControllers/AgMapController.tsx index 752992d..71e91a5 100644 --- a/src/maps/mapObjectControllers/AgMapController.tsx +++ b/src/maps/mapObjectControllers/AgMapController.tsx @@ -1659,6 +1659,18 @@ import { Result } from "@mapbox/mapbox-gl-geocoder"; { + //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);