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

got the field on the map and the setting the initial bounding box

Browse source
This commit is contained in:
csawatzky 2025-08-20 16:02:43 -06:00
parent 399f449ca4
commit 96958c12a0
3 changed files with 80 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/field/FieldList.tsx
View file

@ -94,59 +94,12 @@ export default function FieldList() {
return totalAcres;
};
// const fieldList = (fields: Field[]) => {
// return fields.map((field, index) => (
// <TableRow key={index}>
// <TableCell>{field.fieldName()}</TableCell>
// <TableCell>{field.landLoc()}</TableCell>
// <TableCell>
// {field.crop() === pond.Grain.GRAIN_CUSTOM
// ? field.customType()
// : GrainDescriber(field.crop()).name}
// </TableCell>
// <TableCell>{field.calculateAcres()}</TableCell>
// <TableCell>
// {field.permissions.includes(pond.Permission.PERMISSION_WRITE) && (
// <Button
// variant="contained"
// color="primary"
// onClick={() => {
// setFieldForPlan(field);
// setOpenHarvestSettings(true);
// }}>
// New Crop Plan
// </Button>
// )}
// </TableCell>
// </TableRow>
// ));
// }
// const fieldTable = (fields: Field[]) => {
// return (
// <TableContainer component={Paper}>
// <Table style={{ minWidth: 1000 }}>
// <TableHead>
// <TableRow>
// <TableCell>Field Name</TableCell>
// <TableCell>Land Location</TableCell>
// <TableCell>Main Crop Type</TableCell>
// <TableCell>Acres ({calcTotalAcres(fields)} Total)</TableCell>
// <TableCell>Create New Plan</TableCell>
// </TableRow>
// </TableHead>
// <TableBody>{fieldList(fields)}</TableBody>
// </Table>
// </TableContainer>
// )
// }
const columns: Column<Field>[] = [
{
title: "View",
render: row => {
return (
<Box height={200} width={200}>
<Box margin={1} height={200} width={200}>
<FieldMinimap field={row} />
</Box>
)
@ -184,10 +137,9 @@ const columns: Column<Field>[] = [
columns={columns}
rows={fields}
setPage={()=>{}}
hidePagination
handleRowsPerPageChange={()=>{}}
page={0}
pageSize={10}
pageSize={1}
total={fields.length}
/>
)

48
src/field/Fieldminimap.tsx
View file

@ -1,24 +1,58 @@
import { Box } from "@mui/material";
import { CircularProgress } from "@mui/material";
import { Field } from "models";
import { useRef } from "react";
import Map, { MapRef } from "react-map-gl/mapbox";
import { useEffect, useState } from "react";
import Map from "react-map-gl/mapbox";
import 'mapbox-gl/dist/mapbox-gl.css';
import GeoMapLayer from "maps/mapLayers/geoMapLayer";
import { Feature, FeatureCollection } from "geojson";
import { GeometryMapping } from "models/GeometryMapping";
interface Props {
field?: Field
field: Field
}
export default function FieldMinimap(props: Props) {
const { field } = props
const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN;
const [geoCollection, setGeoCollection] = useState<FeatureCollection>();
useEffect(()=>{
let fieldData = field.settings.fieldGeoData
if(fieldData){
let fieldFeature = GeometryMapping.geoJSON(fieldData.geoShape, fieldData.shapes, fieldData.holes) as Feature;
fieldFeature.id = fieldData.objectKey;
fieldFeature.properties = {
title: fieldData.title,
objectKey: fieldData.objectKey,
fill: fieldData.colour,
lineWidth: fieldData.geoShape === "LineString" ? 5 : 2,
origin: fieldData.origin
};
let collection: FeatureCollection = {
type: "FeatureCollection",
features: [fieldFeature]
};
setGeoCollection(collection);
}
},[field])
return (
return geoCollection ?
(
<Map
initialViewState={{
bounds: field.fieldBounds(.001)
}}
style={{width: "100%", height: "100%"}}
mapboxAccessToken={MAPBOX_TOKEN}
mapStyle="mapbox://styles/mapbox/satellite-streets-v11"
>
<GeoMapLayer
objectCollection={geoCollection}
setInteractiveLayers={()=>{}}
/>
)
</Map>
)
:
(<CircularProgress />)
}