223 lines
5.4 KiB
TypeScript
223 lines
5.4 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { MapContainer, TileLayer, Marker, CircleMarker, Popup, Polyline, LayerGroup, GeoJSON, } from 'react-leaflet';
|
|
// import 'leaflet/dist/leaflet.css';
|
|
|
|
import L from 'leaflet';
|
|
|
|
import { useQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query";
|
|
import axios from "axios";
|
|
|
|
|
|
|
|
//Todo: Move types to own file
|
|
type Product = {
|
|
id: string;
|
|
productTitle: string;
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
};
|
|
|
|
// type Location = {
|
|
// latitude: number;
|
|
// longitude: number;
|
|
// }
|
|
|
|
type Maker = {
|
|
id: string;
|
|
name: string;
|
|
location: [number, number];
|
|
products: Product[];
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
};
|
|
|
|
type Retailer = {
|
|
id: string;
|
|
name: string;
|
|
location: [number, number];
|
|
products: Product[];
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
};
|
|
|
|
interface Courier {
|
|
id: string;
|
|
name: string;
|
|
startingPoint: string;
|
|
destination: string;
|
|
departureDate: string;
|
|
arrivalDate: string;
|
|
weightAllowance: number;
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
}
|
|
|
|
interface Dispatch {
|
|
id: string;
|
|
dispatchesCode: string;
|
|
products: Product[];
|
|
typeOfTransportation: string[];
|
|
courier: Courier;
|
|
timeSensitive: boolean;
|
|
status: string[];
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
}
|
|
|
|
|
|
//Todo: update fetch url endpoints
|
|
//Todo: Move queryclient and hooks to own file
|
|
const ROOT_URL = "http://localhost:3001"
|
|
|
|
const getMakers = async () => {
|
|
const url = `${ROOT_URL}/api/makers`
|
|
console.log("Fetching url:", url)
|
|
const response = await axios.get(url);
|
|
|
|
const makers = response.data.docs;
|
|
console.log(`Fetch result from ${url}`, makers)
|
|
return makers;
|
|
|
|
}
|
|
|
|
const useGetMakers = () => {
|
|
return useQuery<Maker[]>({
|
|
queryFn: () => getMakers(),
|
|
queryKey: ['makers'],
|
|
enabled: true
|
|
})
|
|
}
|
|
|
|
const getRetailers = async () => {
|
|
const url = `${ROOT_URL}/api/retailers`
|
|
console.log("Fetching url:", url)
|
|
const response = await axios.get(url);
|
|
|
|
const retailers = response.data.docs;
|
|
console.log(`Fetch result from ${url}`, retailers)
|
|
return retailers;
|
|
|
|
}
|
|
|
|
const useGetRetailers = () => {
|
|
return useQuery<Dispatch[]>({
|
|
queryFn: () => getRetailers(),
|
|
queryKey: ['retailers'],
|
|
enabled: true
|
|
})
|
|
}
|
|
|
|
const getDispatches = async () => {
|
|
const url = `${ROOT_URL}/api/dispatches`
|
|
console.log("Fetching url:", url)
|
|
const response = await axios.get(url);
|
|
|
|
const dispatches = response.data.docs;
|
|
console.log(`Fetch result from ${url}`, dispatches)
|
|
return dispatches;
|
|
|
|
}
|
|
|
|
const useGetDispatches = () => {
|
|
return useQuery<Dispatch[]>({
|
|
queryFn: () => getRetailers(),
|
|
queryKey: ['retailers'],
|
|
enabled: true
|
|
})
|
|
}
|
|
|
|
export const KiosMap = () => {
|
|
|
|
const { data: makers, isLoading: isLoadingMakers } = useGetMakers();
|
|
const { data: retailers, isLoading: isLoadingRetailers } = useGetRetailers();
|
|
const { data: dispatches, isLoading: isLoadingDispatches } = useGetDispatches();
|
|
|
|
|
|
const blackDotIcon = L.divIcon({
|
|
className: 'black-dot',
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10]
|
|
});
|
|
|
|
return (
|
|
<MapContainer
|
|
id="map"
|
|
center={[-6.1815, 106.8228]}
|
|
//zoom={3}
|
|
className="w-full"
|
|
>
|
|
<TileLayer url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
maxZoom={19}
|
|
attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
/>
|
|
|
|
{makers &&
|
|
<LayerGroup>
|
|
{makers.map((maker: any, index: number) => (
|
|
<CircleMarker
|
|
key={index}
|
|
center={[maker.location[0], maker.location[1]]}
|
|
fillColor='black'
|
|
>
|
|
<Popup>{maker.name}</Popup>
|
|
</CircleMarker>
|
|
))}
|
|
</LayerGroup>
|
|
}
|
|
|
|
{retailers &&
|
|
<LayerGroup>
|
|
{retailers.map((retailer: any, index: number) => (
|
|
<CircleMarker
|
|
key={index}
|
|
center={[retailer.location[0], retailer.location[1]]}
|
|
fillColor='black'
|
|
>
|
|
<Popup>{retailer.name}</Popup>
|
|
</CircleMarker>
|
|
))}
|
|
</LayerGroup>
|
|
}
|
|
|
|
{dispatches &&
|
|
<LayerGroup>
|
|
{dispatches.map((dispatch: any, index: number) => {
|
|
const start = dispatch.startingPoint.location;
|
|
const end = dispatch.endPoint.location;
|
|
|
|
let productsString = '';
|
|
dispatch.products.forEach((product: any, i: number) => {
|
|
productsString += product.productTitle + (i + 1 < dispatch.products.length ? ', ' : '');
|
|
});
|
|
|
|
const myDashArray =
|
|
dispatch.status === 'routeRequested' ? '20, 10' :
|
|
dispatch.status === 'completed' ? '1, 5' :
|
|
'0, 0';
|
|
|
|
return (
|
|
<div key={index}>
|
|
<Marker position={[start[0], start[1]]}
|
|
//icon={blackDotIcon}
|
|
>
|
|
<Popup>{dispatch.startingPoint.name}</Popup>
|
|
</Marker>
|
|
<Marker position={[end[0], end[1]]}
|
|
//icon={blackDotIcon}
|
|
>
|
|
<Popup>{dispatch.endPoint.name}</Popup>
|
|
</Marker>
|
|
<Polyline
|
|
positions={[[start[0], start[1]], [end[0], end[1]]]}
|
|
color="#000"
|
|
dashArray={myDashArray} />
|
|
</div>
|
|
);
|
|
})}
|
|
</LayerGroup>
|
|
}
|
|
</MapContainer >
|
|
);
|
|
};
|
|
|