- Fix Get Farmer

- Map now has the ability to be centred and bounds aligned.
Call-for-Code · May 16, 2022 · 4669ab9 · 4669ab9
1 parent eb647d7
commit 4669ab9
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 36 deletions.
diff --git a/backend/src/routes/farmer-route.ts b/backend/src/routes/farmer-route.ts
@@ -75,7 +75,7 @@ router.get("/:id", async (req: Request, res: Response) => {
     }
 
     try {
-        const farmer = getFarmer(id);
+        const farmer = await getFarmer(id);
         if (farmer == null) {
             res.status(404).end();
         }

diff --git a/react-app/src/components/Farmers/ViewFarmer.tsx b/react-app/src/components/Farmers/ViewFarmer.tsx
@@ -2,6 +2,10 @@ import React, { useEffect, useState } from "react";
 import { PageTitleBar, Card, CARD_SIZES } from "carbon-addons-iot-react";
 import { useParams } from "react-router";
 import { Farmer, getAllFarmers, getFarmer } from "../../services/farmers";
+import { OpenHarvestMap } from "../Map/OpenHarvestMap";
+import { FieldEditorLayer } from "../Map/FieldEditorLayer";
+import { latLngBounds } from "leaflet";
+import { Field, SubField } from "../../types/field";
 
 export interface ViewFarmerParams {
     farmer_id: string
@@ -13,27 +17,51 @@ export interface FarmerDetailsProps {
 }
 
 /**
- * A Card that displays farmer information
+ * A Card that displays farmer information.
  * @param isLoading If we're waiting for the farmer details
  * @param farmer Farmer details
  */
 export function FarmerDetails(props: FarmerDetailsProps) {
     const {isLoading, farmer} = props;
+
+    const bounds = farmer ? latLngBounds(farmer.field!!.bbox!!.southWest, farmer.field!!.bbox!!.northEast) : undefined;
+    const centre = bounds?.getCenter();
+
     return <Card
         title={isLoading ? "Loading..." : farmer.name}
         size={CARD_SIZES.MEDIUMTHIN}
-        style={{ height: '200px' }}
+        className="w-full"
         isLoading={isLoading}
     >
-        Loading...
+        { farmer &&
+        <div className="w-full h-full flex flex-row justify-between">
+            <div className="flex flex-col">
+                <p>Mobile: {farmer.mobile}</p>
+                <p>Fields: {farmer.fieldCount}</p>
+            </div>
+            <div className="w-1/4">
+                <OpenHarvestMap centre={centre}>
+                    <FieldEditorLayer existingField={farmer.field} disableEdit></FieldEditorLayer>
+                </OpenHarvestMap>
+            </div>
+        </div>
+        }
     </Card>
 }
 
+export function FieldList(props: {field: Field}) {
+
+}
+
+export function SubFieldComponent(props: {subField: SubField}) {
+
+}
+
 export function ViewFarmer() {
 
     // Get the farmer id from the url
     const { farmer_id } = useParams<ViewFarmerParams>();
-    console.log(farmer_id);
+    // console.log(farmer_id);
 
     const [farmer, setFarmer] = useState<Farmer | null>(null);
     const [isLoading, setIsLoading] = useState(true);
@@ -50,16 +78,7 @@ export function ViewFarmer() {
         collapsed={false}
         />
         <div className="w-full h-[calc(100vh-96px)] flex flex-row">
-            {
-                isLoading ? 
-                <div>
-                    <FarmerDetails isLoading={isLoading} farmer={farmer!!}/>
-                </div>
-                : 
-                <div>
-                    Loading...
-                </div>
-            }
+            <FarmerDetails isLoading={isLoading} farmer={farmer!!}/>
         </div>
     </>
 }
diff --git a/react-app/src/components/Map/FieldEditorLayer.tsx b/react-app/src/components/Map/FieldEditorLayer.tsx
@@ -15,6 +15,7 @@ export interface FieldEditorLayerProps {
      * Called when the field is updated in some way.
      */
     onFieldUpdated?: (field: Field) => void;
+    disableEdit?: boolean;
 }
 
 
@@ -25,6 +26,8 @@ export interface FieldEditorLayerProps {
  */
 export function FieldEditorLayer(props: PropsWithChildren<FieldEditorLayerProps>): ReactElement {
 
+    const disableEditing = props.disableEdit || false;
+
     // field will be late inited as part of the use effect which is why the type doesn't include `| null`
     // As to why I'm using a ref, it's because react-leaflet-draw doesn't update it's OnCreated Callback
     // Read more here: https://stackoverflow.com/questions/57847594/react-hooks-accessing-up-to-date-state-from-within-a-callback
@@ -101,18 +104,23 @@ export function FieldEditorLayer(props: PropsWithChildren<FieldEditorLayerProps>
     }, [fieldRef.current ? fieldRef.current.subFields.length : -1])
 
     return <FeatureGroup>
-        <EditControl
-            position='topright'
-            onEdited={(event: any) => {console.log("edited", event.layer)}}
-            onCreated={(e: any) => onCreated(e)}
-            onDeleted={(event: any) => console.log("deleted", event.layer)}
-            draw={{
-                polyline: false,
-                rectangle: false,
-                circle: false,
-                circlemarker: false,
-                marker: false
-            }}
-        />
+        {
+            !disableEditing &&
+            <EditControl
+                position='topright'
+                onEdited={(event: any) => {console.log("edited", event.layer)}}
+                onCreated={(e: any) => onCreated(e)}
+                onDeleted={(event: any) => console.log("deleted", event.layer)}
+                draw={{
+                    polyline: false,
+                    rectangle: false,
+                    circle: false,
+                    circlemarker: false,
+                    marker: false
+                }}
+            />
+        }
+
+        {fieldLayers.map(Layer => <>{Layer}</>)}
     </FeatureGroup>
 }
diff --git a/react-app/src/components/Map/OpenHarvestMap.tsx b/react-app/src/components/Map/OpenHarvestMap.tsx
@@ -1,5 +1,5 @@
-import React, { PropsWithChildren, useEffect } from "react";
-import L, { latLng, LatLng, LatLngTuple } from 'leaflet'
+import React, { PropsWithChildren, useEffect, useState } from "react";
+import L, { latLng, LatLng, LatLngBounds, LatLngBoundsExpression, LatLngExpression, LatLngLiteral, LatLngTuple } from 'leaflet'
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
 import { FieldEditorLayer } from "./FieldEditorLayer";
 import { EISField } from "./../../types/EIS";
@@ -15,7 +15,9 @@ L.Icon.Default.mergeOptions({
 });
 
 export interface OpenHarvestMapProps {
-
+    centre?: LatLngExpression;
+    bounds?: LatLngBoundsExpression;
+    zoom?: number;
 }
 /**
  * The default map component for open harvest.
@@ -25,18 +27,25 @@ export interface OpenHarvestMapProps {
  * @returns 
  */
 export function OpenHarvestMap(props: PropsWithChildren<OpenHarvestMapProps>) {
-
-    let defaultCentreCoords = latLng([-13.805811, 32.888162]); // Mchinji, Malawai
-    const defaultZoom = 13;
-
     const auth = useAuth();
 
+    let defaultCentreCoords = latLng([-13.805811, 32.888162]); // Mchinji, Malawai
     if (auth.isLoggedIn) {
         defaultCentreCoords = latLng(auth.user!!.coopManager!!.location as LatLngTuple);
     }
+    const defaultZoom = 13;
+
+    const [centre, setCentre] = useState<LatLngExpression>(props.centre || defaultCentreCoords);
+    const [zoom, setZoom] = useState<number>(props.zoom || defaultZoom);
+    const [bounds, setBounds] = useState<LatLngBoundsExpression | undefined>(props.bounds);
+
+    useEffect(() => {
+
+    }, [props.centre, props.zoom, props.bounds]);
+
 
     return (
-        <MapContainer center={defaultCentreCoords} zoom={defaultZoom} className="w-full h-full">
+        <MapContainer center={centre} zoom={zoom} bounds={bounds} className="w-full h-full">
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"