chore: add gps with tomtom API
This commit is contained in:
@@ -32,6 +32,7 @@ import {
|
||||
endAlert,
|
||||
getMyAlerts,
|
||||
} from "../../api/api_delivery";
|
||||
import TomTomMap from "../../components/TomTomMap";
|
||||
|
||||
interface DeliveryStats {
|
||||
todayDeliveries: number;
|
||||
@@ -117,6 +118,9 @@ function DeliveryDashboard() {
|
||||
|
||||
const [isAlertTriggered, setIsAlertTriggered] = useState(false);
|
||||
const [policeAlertLoading, setPoliceAlertLoading] = useState(false);
|
||||
const [showMap, setShowMap] = useState(false);
|
||||
const [routeDistance, setRouteDistance] = useState<string | null>(null);
|
||||
const [routeDuration, setRouteDuration] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const checkAuth = () => {
|
||||
@@ -409,6 +413,11 @@ function DeliveryDashboard() {
|
||||
const clientInfo =
|
||||
detailsResult.delivery.client_info;
|
||||
|
||||
const deliveryStatus =
|
||||
delivery.status === "assigned"
|
||||
? "assigned"
|
||||
: "in_route";
|
||||
|
||||
setCurrentDelivery({
|
||||
id: delivery.id,
|
||||
orderNumber: `CMD-${delivery.id}`,
|
||||
@@ -420,15 +429,17 @@ function DeliveryDashboard() {
|
||||
"+33 X XX XX XX XX",
|
||||
deliveryAddress:
|
||||
delivery.adresse || "Adresse de livraison",
|
||||
status:
|
||||
delivery.status === "assigned"
|
||||
? "assigned"
|
||||
: "in_route",
|
||||
status: deliveryStatus,
|
||||
distance: "N/A",
|
||||
// ✅ FIX: Cast to any pour accéder à items qui peut exister mais n'est pas typé
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
items: (currentDeliveryData as any).items || [],
|
||||
totalPrice: currentDeliveryData.total_prix || 0,
|
||||
});
|
||||
|
||||
// Afficher automatiquement la carte si livraison en cours
|
||||
if (deliveryStatus === "in_route") {
|
||||
setShowMap(true);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setCurrentDelivery(null);
|
||||
@@ -516,10 +527,14 @@ function DeliveryDashboard() {
|
||||
}
|
||||
|
||||
console.log("✅ [DELIVERY_DASHBOARD] Livraison démarrée");
|
||||
|
||||
// Afficher automatiquement la carte en mode navigation
|
||||
setShowMap(true);
|
||||
|
||||
showStyledAlert(
|
||||
"success",
|
||||
"Livraison démarrée",
|
||||
"La livraison a été démarrée avec succès !",
|
||||
"La livraison a été démarrée avec succès ! Suivez l'itinéraire sur la carte.",
|
||||
() => window.location.reload(),
|
||||
);
|
||||
} catch (error) {
|
||||
@@ -592,6 +607,20 @@ function DeliveryDashboard() {
|
||||
};
|
||||
|
||||
const handleNavigate = () => {
|
||||
setShowMap((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleRouteCalculated = (distance: string, duration: string) => {
|
||||
setRouteDistance(distance);
|
||||
setRouteDuration(duration);
|
||||
console.log(`Route calculee: ${distance}, ${duration}`);
|
||||
};
|
||||
|
||||
const handleMapError = (error: string) => {
|
||||
console.error("Erreur carte TomTom:", error);
|
||||
};
|
||||
|
||||
const openExternalNavigation = () => {
|
||||
if (currentDelivery) {
|
||||
const address = encodeURIComponent(currentDelivery.deliveryAddress);
|
||||
window.open(
|
||||
@@ -1273,7 +1302,7 @@ function DeliveryDashboard() {
|
||||
onClick={handleStartDelivery}
|
||||
>
|
||||
<Package size={20} />
|
||||
Démarrer la Livraison
|
||||
Demarrer la Livraison
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -1283,7 +1312,7 @@ function DeliveryDashboard() {
|
||||
onClick={handleCompleteDelivery}
|
||||
>
|
||||
<CheckCircle size={20} />
|
||||
Marquer comme Livrée
|
||||
Marquer comme Livree
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -1292,9 +1321,84 @@ function DeliveryDashboard() {
|
||||
onClick={handleNavigate}
|
||||
>
|
||||
<Navigation size={20} />
|
||||
Navigation GPS
|
||||
{showMap
|
||||
? "Masquer la carte"
|
||||
: "Afficher la carte"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Carte TomTom GPS */}
|
||||
{showMap && (
|
||||
<div style={{ marginTop: "1.5rem" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
<h4
|
||||
style={{
|
||||
margin: 0,
|
||||
color: "#fff",
|
||||
fontSize: "1.1rem",
|
||||
fontWeight: "600",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<Navigation size={20} color="#10b981" />
|
||||
Navigation GPS TomTom
|
||||
</h4>
|
||||
{routeDistance && routeDuration && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "1rem",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "#9ca3af" }}>
|
||||
Distance:{" "}
|
||||
<strong
|
||||
style={{ color: "#10b981" }}
|
||||
>
|
||||
{routeDistance}
|
||||
</strong>
|
||||
</span>
|
||||
<span style={{ color: "#9ca3af" }}>
|
||||
Temps:{" "}
|
||||
<strong
|
||||
style={{ color: "#10b981" }}
|
||||
>
|
||||
{routeDuration}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<TomTomMap
|
||||
driverLocation={
|
||||
location.latitude && location.longitude
|
||||
? {
|
||||
latitude: location.latitude,
|
||||
longitude: location.longitude,
|
||||
}
|
||||
: null
|
||||
}
|
||||
destinationAddress={
|
||||
currentDelivery.deliveryAddress
|
||||
}
|
||||
onRouteCalculated={handleRouteCalculated}
|
||||
onError={handleMapError}
|
||||
isNavigating={
|
||||
currentDelivery.status === "in_route"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="current-delivery-card no-delivery-card">
|
||||
|
||||
Reference in New Issue
Block a user