new table for the fields dashboard, map rendering in row
This commit is contained in:
csawatzky
parent
ad479e2b45
commit
781b52afd8
2 changed files with 148 additions and 51 deletions
|
|
@ -9,7 +9,8 @@ import {
|
|||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Tabs
|
||||
Tabs,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useMobile, useSnackbar } from "hooks";
|
||||
|
|
@ -19,6 +20,8 @@ import { Field } from "models";
|
|||
import GrainDescriber from "grain/GrainDescriber";
|
||||
import { pond } from "protobuf-ts/pond";
|
||||
import HarvestSettings from "harvestPlan/HarvestSettings";
|
||||
import ResponsiveTable, { Column } from "common/ResponsiveTable";
|
||||
import FieldMinimap from "./Fieldminimap";
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
|
|
@ -46,10 +49,13 @@ export default function FieldList() {
|
|||
const isMobile = useMobile();
|
||||
const fieldAPI = useFieldAPI();
|
||||
const { openSnack } = useSnackbar();
|
||||
const [fields, setFields] = useState<Field[]>([]);
|
||||
const [value, setValue] = React.useState(0);
|
||||
const [openHarvestSettings, setOpenHarvestSettings] = useState(false);
|
||||
const [fieldForPlan, setFieldForPlan] = useState(Field.create());
|
||||
const [fields, setFields] = useState<Field[]>([]); //all fields
|
||||
const [adaptiveFields, setAdaptiveFields] = useState<Field[]>([])
|
||||
const [jdFields, setJDFields] = useState<Field[]>([])
|
||||
const [cnhFields, setCNHFields] = useState<Field[]>([])
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
|
||||
setValue(newValue);
|
||||
|
|
@ -59,7 +65,7 @@ export default function FieldList() {
|
|||
fieldAPI
|
||||
.listFields(500, 0, "asc", "fieldName", undefined, as)
|
||||
.then(resp => {
|
||||
setFields(resp.data.fields.map(f => Field.any(f)));
|
||||
setAdaptiveFields(resp.data.fields.map(f => Field.any(f)));
|
||||
// resp.data.fields.forEach(f => {
|
||||
// if (f.settings) {
|
||||
// fieldAPI.updateField(f.settings.key, f.settings);
|
||||
|
|
@ -75,7 +81,11 @@ export default function FieldList() {
|
|||
loadFields();
|
||||
}, [loadFields]);
|
||||
|
||||
const calcTotalAcres = () => {
|
||||
useEffect(()=>{
|
||||
setFields(adaptiveFields.concat(jdFields, cnhFields))
|
||||
},[adaptiveFields,jdFields,cnhFields])
|
||||
|
||||
const calcTotalAcres = (fields: Field[]) => {
|
||||
let totalAcres = 0;
|
||||
fields.forEach(field => {
|
||||
totalAcres += field.acres();
|
||||
|
|
@ -84,31 +94,104 @@ export default function FieldList() {
|
|||
return totalAcres;
|
||||
};
|
||||
|
||||
const listFieldsInfo = 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 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}>
|
||||
<FieldMinimap field={row} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Field Name",
|
||||
render: row => {
|
||||
return <Typography>{row.name()}</Typography>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Current Crop",
|
||||
render: row => {
|
||||
return <Typography>{row.crop()}</Typography>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Acres",
|
||||
render: row => {
|
||||
return <Typography>{row.acres()}</Typography>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Actions",
|
||||
render: row => {
|
||||
return <Typography>Field Actions Here</Typography>
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const fieldTable = (fields: Field[]) => {
|
||||
return (
|
||||
<ResponsiveTable<Field>
|
||||
columns={columns}
|
||||
rows={fields}
|
||||
setPage={()=>{}}
|
||||
hidePagination
|
||||
handleRowsPerPageChange={()=>{}}
|
||||
page={0}
|
||||
pageSize={10}
|
||||
total={fields.length}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
|
|
@ -116,33 +199,23 @@ export default function FieldList() {
|
|||
value={value}
|
||||
onChange={handleChange}
|
||||
TabIndicatorProps={{ style: { background: "rgba(255,255,0,255)" } }}>
|
||||
<Tab label="Field Overview" />
|
||||
{/* {!isMobile && <Tab label="Current Harvest Plans" />}
|
||||
{!isMobile && <Tab label="Plan History" />} */}
|
||||
<Tab label="All" />
|
||||
<Tab label="Adaptive" />
|
||||
<Tab label="John Deere" />
|
||||
<Tab label="Case New Holland" />
|
||||
</Tabs>
|
||||
<TabPanelMine index={0} value={value}>
|
||||
<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()} Total)</TableCell>
|
||||
<TableCell>Create New Plan</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>{listFieldsInfo}</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
{fieldTable(fields)}
|
||||
</TabPanelMine>
|
||||
{/* need to re-factor the harvest table file before restoring these functions */}
|
||||
{/* <TabPanelMine index={1} value={value}>
|
||||
<HarvestTable fields={fields} display="current" />
|
||||
<TabPanelMine index={1} value={value}>
|
||||
{fieldTable(adaptiveFields)}
|
||||
</TabPanelMine>
|
||||
<TabPanelMine index={2} value={value}>
|
||||
<HarvestTable fields={fields} display="history" />
|
||||
</TabPanelMine> */}
|
||||
{fieldTable(jdFields)}
|
||||
</TabPanelMine>
|
||||
<TabPanelMine index={3} value={value}>
|
||||
{fieldTable(cnhFields)}
|
||||
</TabPanelMine>
|
||||
<HarvestSettings
|
||||
open={openHarvestSettings}
|
||||
close={() => setOpenHarvestSettings(false)}
|
||||
|
|
|
|||
24
src/field/Fieldminimap.tsx
Normal file
24
src/field/Fieldminimap.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { Box } from "@mui/material";
|
||||
import { Field } from "models";
|
||||
import { useRef } from "react";
|
||||
import Map, { MapRef } from "react-map-gl/mapbox";
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
|
||||
interface Props {
|
||||
field?: Field
|
||||
}
|
||||
|
||||
export default function FieldMinimap(props: Props) {
|
||||
const { field } = props
|
||||
const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN;
|
||||
|
||||
|
||||
return (
|
||||
<Map
|
||||
style={{width: "100%", height: "100%"}}
|
||||
mapboxAccessToken={MAPBOX_TOKEN}
|
||||
mapStyle="mapbox://styles/mapbox/satellite-streets-v11"
|
||||
/>
|
||||
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue