Can view map with directions; need to implement routes for more locat…

…ions and make it property manager specific
hkam0006 · Aug 8, 2024 · 6dd24d5 · 6dd24d5
1 parent fe1da69
commit 6dd24d5
Show file tree

Hide file tree

Showing 8 changed files with 1,472 additions and 25 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,6 +8,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@mapbox/mapbox-gl-directions": "^4.3.1",
         "@mui/icons-material": "^5.15.16",
         "@mui/material": "^5.15.15",
         "@mui/x-charts": "^7.3.2",

diff --git a/frontend/src/components/inspection_run/InspectionRun.jsx b/frontend/src/components/inspection_run/InspectionRun.jsx
@@ -1,17 +1,17 @@
 import NavigationMenu from "../navigation_menu/NavigationMenus";
 import React, { useEffect, useState } from "react";
-import { Typography, Button, Grid, Box } from "@mui/material";
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Stack, Card, tableCellClasses } from "@mui/material"
+import { Typography, Grid } from "@mui/material";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, tableCellClasses } from "@mui/material";
 import { supabase } from "../../supabase";
 import { styled } from '@mui/material/styles';
-import MyMap from "./MyMap";
-
-const ACCESS_TOKEN = "pk.eyJ1IjoicGRldjAwMTAiLCJhIjoiY2x6ajVxNG1nMG4xOTJucTE1MHY4bDF2bCJ9.HfHy4wIk1KMg658ISOLoRQ"
+import MapComponent from "./MapNav";
 
+const ACCESS_TOKEN = "pk.eyJ1IjoicGRldjAwMTAiLCJhIjoiY2x6ajVxNG1nMG4xOTJucTE1MHY4bDF2bCJ9.HfHy4wIk1KMg658ISOLoRQ";
 
 const InspectionRun = () => {
   const [activeSection, setActiveSection] = useState("inspection");
   const [inspectionsData, setInspectionsData] = useState([]);
+  const [mapData, setMapData] = useState({ origin: '', destination: '' });
 
   useEffect(() => {
     const fetchInspectionsData = async () => {
@@ -78,6 +78,7 @@ const InspectionRun = () => {
 
     fetchInspectionsData();
   }, []);
+
   const StyledTableCell = styled(TableCell)(({ theme }) => ({
     [`&.${tableCellClasses.head}`]: {
       backgroundColor: "white",
@@ -86,9 +87,37 @@ const InspectionRun = () => {
       fontSize: 12,
     },
   }));
+
   const fullAddress = (number, name, type, suburb, state) => {
-    return `${number} ${name} ${type}, ${suburb}, ${state}`
-  }
+    return `${number} ${name} ${type}, ${suburb}, ${state}`;
+  };
+
+  const handleShowRoute = (propertyManagerId) => {
+    const filteredInspections = inspectionsData.filter(
+      inspection => inspection.propertyManagerData.property_manager_id === propertyManagerId
+    );
+
+    if (filteredInspections.length >= 2) {
+      const origin = fullAddress(
+        filteredInspections[0].propertyData.property_street_number,
+        filteredInspections[0].propertyData.property_street_name,
+        filteredInspections[0].propertyData.property_type,
+        filteredInspections[0].propertyData.property_suburb,
+        filteredInspections[0].propertyData.property_state
+      );
+
+      const destination = fullAddress(
+        filteredInspections[1].propertyData.property_street_number,
+        filteredInspections[1].propertyData.property_street_name,
+        filteredInspections[1].propertyData.property_type,
+        filteredInspections[1].propertyData.property_suburb,
+        filteredInspections[1].propertyData.property_state
+      );
+
+      setMapData({ origin, destination });
+    }
+  };
+
   return (
     <div>
       <NavigationMenu>
@@ -97,21 +126,21 @@ const InspectionRun = () => {
           spacing={2}
           style={{ padding: "30px", paddingTop: "110px" }}
           justifyContent="flex-start"
-        >
-        </Grid>
+        />
         <div style={{ padding: "20px" }}>
           {activeSection === "inspection" && (
             <Typography variant="h5">
-              Inspections Runs: ({inspectionsData.length})
-            </Typography>)}
-          <Table stickyHeader sx={{ minWidth: 650 }} aria-label="Table of properties" >
+              Inspections Runs
+            </Typography>
+          )}
+          <Table stickyHeader sx={{ minWidth: 650 }} aria-label="Table of properties">
             <TableHead>
               <TableRow>
                 <StyledTableCell><Typography fontSize={"12px"} fontWeight={700}>Property Manager</Typography></StyledTableCell>
-                <StyledTableCell align="right"><Typography fontWeight={700} fontSize={"12px"} >Property Address</Typography></StyledTableCell>
-                <StyledTableCell align="right"><Typography fontWeight={700} fontSize={"12px"} >Inspection Time and Date</Typography></StyledTableCell>
+                <StyledTableCell align="right"><Typography fontWeight={700} fontSize={"12px"}>Property Address</Typography></StyledTableCell>
+                <StyledTableCell align="right"><Typography fontWeight={700} fontSize={"12px"}>Inspection Time and Date</Typography></StyledTableCell>
                 <StyledTableCell align="right"><Typography fontWeight={700} fontSize={"12px"}>Duration</Typography></StyledTableCell>
-                <StyledTableCell align="right"><Typography fontWeight={700} fontSize={"12px"}></Typography></StyledTableCell>
+                <StyledTableCell align="right"><Typography fontWeight={700} fontSize={"12px"}>Show Route</Typography></StyledTableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -122,14 +151,15 @@ const InspectionRun = () => {
                 >
                   <TableCell>
                     <Typography variant='body' fontWeight={700}>
-                      {inspection.propertyManagerData.property_manager_first_name} {inspection.propertyManagerData.property_manager_last_name} 
+                      {inspection.propertyManagerData.property_manager_first_name} {inspection.propertyManagerData.property_manager_last_name}
                     </Typography>
                   </TableCell>
                   <TableCell align="right">
                     <Typography variant='body' fontWeight={700}>
                       {fullAddress(
                         inspection.propertyData.property_street_number,
                         inspection.propertyData.property_street_name,
+                        inspection.propertyData.property_type,
                         inspection.propertyData.property_suburb,
                         inspection.propertyData.property_state
                       )}
@@ -141,21 +171,26 @@ const InspectionRun = () => {
                     </Typography>
                   </TableCell>
                   <TableCell align="right">
-                  <Typography variant='body' fontWeight={700}>
-                    {inspection.inspection_duration}
+                    <Typography variant='body' fontWeight={700}>
+                      {inspection.inspection_duration}
                     </Typography>
                   </TableCell>
+                  <TableCell align="right">
+                    <button onClick={() => handleShowRoute(inspection.propertyManagerData.property_manager_id)}>
+                      Show Route
+                    </button>
+                  </TableCell>
                 </TableRow>
-              ))} </TableBody>
+              ))}
+            </TableBody>
           </Table>
         </div>
         <div style={{ display: "flex", justifyContent: "center", height: "100vh" }}>
-          <MyMap></MyMap>
+          <MapComponent origin={mapData.origin} destination={mapData.destination} />
         </div>
       </NavigationMenu>
     </div>
   );
 };
 
 export default InspectionRun;
-
diff --git a/frontend/src/components/inspection_run/MapNav.jsx b/frontend/src/components/inspection_run/MapNav.jsx
@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+import mapboxgl from 'mapbox-gl';
+import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';
+import '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+const ACCESS_TOKEN = "pk.eyJ1IjoicGRldjAwMTAiLCJhIjoiY2x6ajVxNG1nMG4xOTJucTE1MHY4bDF2bCJ9.HfHy4wIk1KMg658ISOLoRQ"
+
+const MapComponent = ({ origin, destination }) => {
+  useEffect(() => {
+    const map = new mapboxgl.Map({
+      accessToken: ACCESS_TOKEN,
+      container: 'map',
+      style: "mapbox://styles/mapbox/streets-v12",
+      center: [-79.4512, 43.6568],
+      zoom: 13,
+    });
+
+    const directions = new MapboxDirections({
+      accessToken: ACCESS_TOKEN
+    });
+
+    map.addControl(directions, 'top-left');
+
+    if (origin) {
+      directions.setOrigin(origin);
+    }
+
+    if (destination) {
+      directions.setDestination(destination);
+    }
+
+    // Cleanup on unmount
+    return () => map.remove();
+  }, [origin, destination]);
+
+  return <div id="map" style={{ width: 600, height: 400 }} />;
+};
+
+export default MapComponent;
diff --git a/frontend/src/components/inspection_run/MyMap.jsx b/frontend/src/components/inspection_run/MyMap.jsx
@@ -10,8 +10,8 @@ const MyMap = () => {
         <Map
           mapboxAccessToken= {ACCESS_TOKEN}
           initialViewState={{
-            longitude: -122.4,
-            latitude: 37.8,
+            longitude: 145.1275,
+            latitude: -37.9145,
             zoom: 14
           }}
           style={{width: 600, height: 400}}