Skip to content

vehicles live tracking done #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 30, 2024
Merged

vehicles live tracking done #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion client/app/maps/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { AllStsMapShow } from '@/components/maps/AllStsShow';
import GoogleMapComponent from '@/components/maps/GoogleMap'
import RouteMap from '@/components/maps/RouteMap';
import SetZone from '@/components/maps/SetZone';
import GetVehicleCoordinateRoute from '@/components/maps/getVehicleCoordinate';
import { ChakraProvider, theme } from '@chakra-ui/react'

type StsShow = {
Expand Down Expand Up @@ -32,7 +33,9 @@ const Map = () => {
{/* <ChakraProvider theme={theme}>
<RouteMap/>
</ChakraProvider> */}
<AllStsMapShow />
{/* <AllStsMapShow /> */}

<GetVehicleCoordinateRoute />
</div>

)
Expand Down
175 changes: 96 additions & 79 deletions client/components/maps/OptimizedVehicleRoute.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
} from "@react-google-maps/api";
import { ChevronDownIcon } from "@chakra-ui/icons";

const center = { lat: 23.7244018, lng: 90.3887196 };
const center = { lat: 23.77217046, lng: 90.39943882 };

type StsRouteType = {
coordinate: string;
Expand All @@ -45,9 +45,14 @@ type MapProps = {
vehicleCoord: VehicleCoordinateType[];
};

interface Coordinate {
lat: number;
lng: number;
}

const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }) => {
const [routeType, setRouteType] = useState<string>(
"Location Based Optimal Route"
"Vehicle Tracking Map"
);
const [useDropdown, setUseDropdown] = useState<boolean>(false);
const [useLandDropdown, setUseLandDropdown] = useState<boolean>(false);
Expand All @@ -64,6 +69,9 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
name: "Amin Bazar",
});

const [vehicleAllCoord, setVehicleAllCoord] = useState<string[]>([]);
const [vehicleObjectCoord, setVehicleObjectCoord] = useState<string[]>([]);

const suggestionsList: string[] = [
"23.7751927, 90.3810282",
"Dhanmondi STS",
Expand All @@ -76,7 +84,11 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }

useEffect(() => {
const coordinateArray: string[] = coordinates.map((route) => route.name);
const VehicleCoordinateArray: string[] = vehicleCoord.map((route) => route.vehicleNumber);
const VehicleCoordinateObject: string[] = vehicleCoord.map((route) => route.coordinate);
setAllCoordinates(coordinateArray);
setVehicleAllCoord(VehicleCoordinateArray);
setVehicleObjectCoord(VehicleCoordinateObject);
}, [coordinates]);

const landfillList: string[] = ["Amin Bazar"];
Expand All @@ -92,9 +104,9 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }

const handleChangeRouteType = () => {
setRouteType((prevType) =>
prevType === "Location Based Optimal Route"
prevType === "STS to Landfill Optimal Route"
? "STS to Landfill Optimal Route"
: "Location Based Optimal Route"
: "STS to Landfill Optimal Route"
);
handleChangeInputType();
handleLandChangeInputType();
Expand Down Expand Up @@ -125,7 +137,7 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
suggestion.toLowerCase().includes(searchTerm.toLowerCase())
);

const landFilteredSuggestions = landfillList.filter((suggestion) =>
const landFilteredSuggestions = vehicleAllCoord.filter((suggestion) =>
suggestion.toLowerCase().includes(landTerm.toLowerCase())
);

Expand Down Expand Up @@ -160,37 +172,27 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
return "no vehicle";
};

async function calculateRoute() {
if (routeType === "Location Based Optimal Route") {
if (
!originRef.current ||
!destinationRef.current ||
originRef.current.value === "" ||
destinationRef.current.value === ""
) {
return;
}
const getVehicleCoordByName = (stsName: string): string => {
const vehicle = vehicleCoord.find((sts) => sts.vehicleNumber === stsName);
if (vehicle) {
return vehicle.coordinate.toString();
}

const directionsService = new google.maps.DirectionsService();
const results = await directionsService.route({
origin: originRef.current.value,
destination: destinationRef.current.value,
travelMode: google.maps.TravelMode.DRIVING,
});
// If vehicle is not found, return undefined
return "no vehicle";
};

if (results && results.routes.length > 0) {
setDirectionsResponse(results);
setDistance(results.routes[0].legs[0].distance?.text || "");
setDuration(results.routes[0].legs[0].duration?.text || "");
}
} else {
async function calculateRoute() {

const stsCoord = getSTSCoodrdinateByName(searchTerm);
const vehicleCoord = getVehicleCoordByName(landTerm);

const newString = stsCoord.substring(0, 11);
console.log(stsCoord);
const directionsService = new google.maps.DirectionsService();
const results = await directionsService.route({
origin: stsCoord,
destination: landFilCoord.coordinate,
origin: vehicleCoord,
destination: stsCoord,
travelMode: google.maps.TravelMode.DRIVING,
});

Expand All @@ -199,7 +201,7 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
setDistance(results.routes[0].legs[0].distance?.text || "");
setDuration(results.routes[0].legs[0].duration?.text || "");
}
}

}

function clearRoute() {
Expand All @@ -212,6 +214,26 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
if (destinationRef.current) destinationRef.current.value = "";
}

// const DummyCoordinates = [
// { lat: 23.76287175, lng: 90.4306625 },
// { lat: 23.79067691, lng: 90.3932404 },
// { lat: 23.75847265, lng: 90.3819107 },
// { lat: 23.79868747, lng: 90.3870606 },
// { lat: 23.79083399, lng: 90.3762459 },
// { lat: 23.79366130, lng: 90.4129814 },
// { lat: 23.77952415, lng: 90.4260277 }
// ];

const ObjectCoordinates: Coordinate[] = vehicleObjectCoord.map(coordString => {
const [lat, lng] = coordString.split(',').map(parseFloat);
return { lat, lng };
});
const carIcon = {
url: 'https://banner2.cleanpng.com/20180331/tsw/kisspng-pickup-truck-car-dump-truck-clip-art-dump-truck-5abfc5a5931d73.2100081815225174136026.jpg',
scaledSize: new window.google.maps.Size(40, 40), // Adjust the size as per your icon
};
console.log(ObjectCoordinates);

return (
<Flex
position="relative"
Expand All @@ -223,7 +245,7 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
<Box position="absolute" left={0} top={0} h="100%" w="100%">
<GoogleMap
center={center}
zoom={15}
zoom={12}
mapContainerStyle={{ width: "100%", height: "100%" }}
options={{
zoomControl: false,
Expand All @@ -233,7 +255,9 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
}}
onLoad={(map) => setMap(map as google.maps.Map)}
>
<Marker position={center} />
{map && ObjectCoordinates.map(coord => (
<Marker key={`${coord.lat}-${coord.lng}`} position={coord} icon={carIcon}/>
))}
{directionsResponse && (
<DirectionsRenderer directions={directionsResponse} />
)}
Expand All @@ -249,18 +273,36 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
zIndex="1"
>
<div>
<b>{routeType}</b>
<Button
colorScheme="teal"
variant="ghost"
onClick={handleChangeRouteType}
>
Change
</Button>
<b>Vehicle Live Tracking</b>
</div>
<HStack spacing={2} justifyContent="space-between">
<Box flexGrow={1}>

<div>
<input
type="text"
placeholder="Search by Vehicle"
value={landTerm}
onChange={handleLandInputChange}
className="border border-gray-300 px-3 py-2 rounded-md focus:outline-none focus:border-blue-500"
/>
{showLandSuggestion && (
<ul className="absolute z-10 mt-1 w-2/5 bg-white rounded-md shadow-lg">
{landFilteredSuggestions.map((suggestion, index) => (
<li
key={index}
onClick={() => handleLandSuggestionClick(suggestion)}
>
{suggestion}
</li>
))}
</ul>
)}
</div>

</Box>
<Box flexGrow={1}>
{useDropdown ? (

<div>
<input
type="text"
Expand All @@ -282,45 +324,9 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
</ul>
)}
</div>
) : (
<Autocomplete>
<Input type="text" placeholder="Origin" ref={originRef} />
</Autocomplete>
)}
</Box>
<Box flexGrow={1}>
{useLandDropdown ? (
<div>
<input
type="text"
placeholder="Search by Landfill"
value={landTerm}
onChange={handleLandInputChange}
className="border border-gray-300 px-3 py-2 rounded-md focus:outline-none focus:border-blue-500"
/>
{showLandSuggestion && (
<ul className="absolute z-10 mt-1 w-2/5 bg-white rounded-md shadow-lg">
{landFilteredSuggestions.map((suggestion, index) => (
<li
key={index}
onClick={() => handleLandSuggestionClick(suggestion)}
>
{suggestion}
</li>
))}
</ul>
)}
</div>
) : (
<Autocomplete>
<Input
type="text"
placeholder="Destination"
ref={destinationRef}
/>
</Autocomplete>
)}

</Box>


<ButtonGroup>
<Button
Expand Down Expand Up @@ -358,3 +364,14 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
};

export default OptimizedVehicleRoute;

// const carStringCoordinate = [
// "23.762871759048853, 90.43066259648545",
// "23.790676919006554, 90.39324041749616",
// "23.758472658178363, 90.38191076697645",
// "23.798687471768236, 90.38706060812177",
// "23.790833993414953, 90.37624594171659",
// "23.793661300302535, 90.41298147521984",
// "23.779524150835503, 90.42602773945464",

// ]
Loading