Fixed bugs on Calendar
This commit is contained in:
259
components/ValidationModal.tsx
Normal file
259
components/ValidationModal.tsx
Normal file
@@ -0,0 +1,259 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
interface Trajet {
|
||||
id: string;
|
||||
date: string;
|
||||
adresseDepart: string;
|
||||
adresseArrivee: string;
|
||||
chauffeur?: {
|
||||
id: string;
|
||||
nom: string;
|
||||
prenom: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface ValidationModalProps {
|
||||
trajet: Trajet;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export default function ValidationModal({ trajet, onClose, onSuccess }: ValidationModalProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [dureeTrajet, setDureeTrajet] = useState<number | null>(null);
|
||||
|
||||
// Calculer la durée du trajet en heures
|
||||
const calculateDuration = async () => {
|
||||
if (!trajet.adresseDepart || !trajet.adresseArrivee) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Géocoder l'adresse de départ
|
||||
const departResponse = await fetch(
|
||||
`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(trajet.adresseDepart)}&limit=1&countrycodes=fr`,
|
||||
{
|
||||
headers: {
|
||||
'User-Agent': 'MAD Platform',
|
||||
'Accept-Language': 'fr-FR,fr;q=0.9',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!departResponse.ok) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Attendre avant la deuxième requête
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
const arriveeResponse = await fetch(
|
||||
`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(trajet.adresseArrivee)}&limit=1&countrycodes=fr`,
|
||||
{
|
||||
headers: {
|
||||
'User-Agent': 'MAD Platform',
|
||||
'Accept-Language': 'fr-FR,fr;q=0.9',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (departResponse.ok && arriveeResponse.ok) {
|
||||
const [departData, arriveeData] = await Promise.all([
|
||||
departResponse.json(),
|
||||
arriveeResponse.json(),
|
||||
]);
|
||||
|
||||
if (departData.length > 0 && arriveeData.length > 0) {
|
||||
const lat1 = parseFloat(departData[0].lat);
|
||||
const lon1 = parseFloat(departData[0].lon);
|
||||
const lat2 = parseFloat(arriveeData[0].lat);
|
||||
const lon2 = parseFloat(arriveeData[0].lon);
|
||||
|
||||
// Calcul de la distance (Haversine)
|
||||
const R = 6371; // Rayon de la Terre en km
|
||||
const dLat = ((lat2 - lat1) * Math.PI) / 180;
|
||||
const dLon = ((lon2 - lon1) * Math.PI) / 180;
|
||||
const a =
|
||||
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||||
Math.cos((lat1 * Math.PI) / 180) *
|
||||
Math.cos((lat2 * Math.PI) / 180) *
|
||||
Math.sin(dLon / 2) *
|
||||
Math.sin(dLon / 2);
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
const distance = R * c; // Distance en km
|
||||
|
||||
// Estimation du temps : vitesse moyenne de 50 km/h en ville
|
||||
// On multiplie par 1.3 pour tenir compte des détours
|
||||
const distanceWithDetour = distance * 1.3;
|
||||
const vitesseMoyenne = 50; // km/h
|
||||
const dureeEnHeures = distanceWithDetour / vitesseMoyenne;
|
||||
|
||||
setDureeTrajet(Math.round(dureeEnHeures * 10) / 10); // Arrondir à 1 décimale
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du calcul de la durée:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
calculateDuration();
|
||||
}, []);
|
||||
|
||||
const handleValidate = async () => {
|
||||
if (!trajet.chauffeur || !dureeTrajet) {
|
||||
alert('Impossible de calculer la durée du trajet');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`/api/trajets/${trajet.id}/validate`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
dureeHeures: dureeTrajet,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
onSuccess();
|
||||
onClose();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error || 'Erreur lors de la validation du trajet');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la validation:', error);
|
||||
alert('Erreur lors de la validation du trajet');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full animate-slideUp border border-gray-200">
|
||||
{/* Header */}
|
||||
<div className="border-b border-gray-200 px-6 py-5 bg-white">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900">Valider le trajet</h2>
|
||||
<p className="text-sm text-gray-500 mt-1">Confirmer la validation du trajet</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="px-6 py-6">
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-900 mb-1">
|
||||
En validant ce trajet, les heures seront déduites du contrat du chauffeur.
|
||||
</p>
|
||||
<p className="text-xs text-blue-700">
|
||||
Cette action ne peut pas être annulée.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{trajet.chauffeur && (
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700 mb-2 block">Chauffeur</label>
|
||||
<div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
{trajet.chauffeur.prenom} {trajet.chauffeur.nom}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{dureeTrajet !== null ? (
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700 mb-2 block">Durée estimée du trajet</label>
|
||||
<div className="p-4 bg-gradient-to-r from-lgreen/10 to-lblue/10 rounded-lg border border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">Temps estimé</span>
|
||||
<span className="text-2xl font-bold text-gray-900">
|
||||
{dureeTrajet.toFixed(1)}h
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 pt-2 border-t border-gray-200">
|
||||
<p className="text-xs text-gray-500">
|
||||
{dureeTrajet.toFixed(1)} heure{dureeTrajet >= 2 ? 's' : ''} sera{dureeTrajet < 2 ? '' : 'ont'} déduite{dureeTrajet < 2 ? '' : 's'} des heures disponibles du chauffeur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span className="text-sm">Calcul de la durée du trajet...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors disabled:opacity-50"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleValidate}
|
||||
disabled={loading || dureeTrajet === null || !trajet.chauffeur}
|
||||
className="px-6 py-2 bg-lgreen text-white text-sm font-medium rounded-lg hover:bg-dgreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Validation...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Confirmer la validation
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user