Xor290/projet_gestion_commande
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix geo

Browse Source
This commit is contained in:
Xor290
2026-03-01 11:30:57 +01:00
parent 5a6dbe5826
commit f2de9b31ac
1 changed files with 114 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-admin/src/screens/delivery/DashboardScreen.tsx
+114 -73
View File
@@ -19,8 +19,6 @@ import {
Modal, Modal,
StatusBar, StatusBar,
ScrollView, ScrollView,
Platform,
PermissionsAndroid,
} from "react-native"; } from "react-native";
import Geolocation from "@react-native-community/geolocation"; import Geolocation from "@react-native-community/geolocation";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
@@ -51,8 +49,6 @@ import TomTomMap, {
TomTomMarker, TomTomMarker,
} from "../../components/TomTomMap"; } from "../../components/TomTomMap";
const { width: SCREEN_WIDTH } = Dimensions.get("window"); const { width: SCREEN_WIDTH } = Dimensions.get("window");
const MAP_HEIGHT = 260; const MAP_HEIGHT = 260;
const LOCATION_INTERVAL_MS = 15000; const LOCATION_INTERVAL_MS = 15000;
@@ -136,38 +132,41 @@ export default function DashboardScreen() {
// TomTom Route calculation // TomTom Route calculation
// Geocode + calcul dans DashboardScreen pour récupérer routeInfo // Geocode + calcul dans DashboardScreen pour récupérer routeInfo
// -------------------------------------------------- // --------------------------------------------------
const calcRoute = useCallback(async (address: string, targetRef?: RefObject<TomTomMapRef | null>) => { const calcRoute = useCallback(
const coords = lastCoordsRef.current; async (address: string, targetRef?: RefObject<TomTomMapRef | null>) => {
if (!coords) { const coords = lastCoordsRef.current;
pendingRouteAddress.current = address; if (!coords) {
return; pendingRouteAddress.current = address;
}
pendingRouteAddress.current = address;
const ref = targetRef ?? mapRef;
if (!ref.current) return;
setRouteLoading(true);
try {
const origin = { latitude: coords.lat, longitude: coords.lng };
const dest = await geocodeAddress(address);
if (!dest) {
setRouteLoading(false);
return; return;
} }
const result = await calculateRoute(origin, dest); pendingRouteAddress.current = address;
if (result) { const ref = targetRef ?? mapRef;
setRouteInfo(result.route); if (!ref.current) return;
ref.current?.calcRoute(origin, dest);
} else { setRouteLoading(true);
setRouteInfo(null); try {
ref.current?.calcRoute(origin, dest); const origin = { latitude: coords.lat, longitude: coords.lng };
const dest = await geocodeAddress(address);
if (!dest) {
setRouteLoading(false);
return;
}
const result = await calculateRoute(origin, dest);
if (result) {
setRouteInfo(result.route);
ref.current?.calcRoute(origin, dest);
} else {
setRouteInfo(null);
ref.current?.calcRoute(origin, dest);
}
} catch {
/* silent */
} finally {
setRouteLoading(false);
} }
} catch { },
/* silent */ [],
} finally { );
setRouteLoading(false);
}
}, []);
// -------------------------------------------------- // --------------------------------------------------
// Data // Data
@@ -268,7 +267,7 @@ export default function DashboardScreen() {
if (lastCoords && pendingRouteAddress.current) { if (lastCoords && pendingRouteAddress.current) {
calcRoute(pendingRouteAddress.current); calcRoute(pendingRouteAddress.current);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [lastCoords]); }, [lastCoords]);
// Quand le fullscreen s'ouvre, rejouer la route sur la carte fullscreen // Quand le fullscreen s'ouvre, rejouer la route sur la carte fullscreen
@@ -280,7 +279,7 @@ export default function DashboardScreen() {
setTimeout(() => { setTimeout(() => {
calcRoute(addr, fullscreenMapRef); calcRoute(addr, fullscreenMapRef);
}, 1200); }, 1200);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [mapFullscreen]); }, [mapFullscreen]);
const onRefresh = async () => { const onRefresh = async () => {
@@ -295,19 +294,10 @@ export default function DashboardScreen() {
const sendingRef = useRef(false); const sendingRef = useRef(false);
const getLocationWithFallback = useCallback( const getLocationWithFallback = useCallback(
(): Promise<Location.LocationObject> => { (): Promise<Location.LocationObject> =>
return new Promise(async (resolve, reject) => { new Promise((resolve, reject) => {
if (Platform.OS === "android") {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
);
if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
return reject(new Error("Permission refusée"));
}
}
Geolocation.getCurrentPosition( Geolocation.getCurrentPosition(
(position) => { (position) =>
resolve({ resolve({
coords: { coords: {
latitude: position.coords.latitude, latitude: position.coords.latitude,
@@ -319,17 +309,13 @@ export default function DashboardScreen() {
speed: position.coords.speed ?? 0, speed: position.coords.speed ?? 0,
}, },
timestamp: position.timestamp, timestamp: position.timestamp,
} as Location.LocationObject); } as Location.LocationObject),
},
(error) => reject(new Error(error.message)), (error) => reject(new Error(error.message)),
{ // enableHighAccuracy: false → provider réseau/cell (1-3s)
enableHighAccuracy: true, // au lieu du GPS pur qui peut prendre 30-60s (cold start)
timeout: 30000, { enableHighAccuracy: false, timeout: 15000, maximumAge: 10000 },
maximumAge: 10000,
},
); );
}); }),
},
[], [],
); );
@@ -650,7 +636,10 @@ export default function DashboardScreen() {
markers={driverMarkers} markers={driverMarkers}
initialCenter={ initialCenter={
lastCoords lastCoords
? { latitude: lastCoords.lat, longitude: lastCoords.lng } ? {
latitude: lastCoords.lat,
longitude: lastCoords.lng,
}
: { latitude: 48.8566, longitude: 2.3522 } : { latitude: 48.8566, longitude: 2.3522 }
} }
initialZoom={14} initialZoom={14}
@@ -699,12 +688,24 @@ export default function DashboardScreen() {
{routeInfo && !routeLoading && ( {routeInfo && !routeLoading && (
<View style={styles.routeInfoOverlay}> <View style={styles.routeInfoOverlay}>
<View style={styles.routeInfoChip}> <View style={styles.routeInfoChip}>
<Ionicons name="time-outline" size={13} color={colors.white} /> <Ionicons
<Text style={styles.routeInfoOverlayText}>{routeInfo.duration}</Text> name="time-outline"
size={13}
color={colors.white}
/>
<Text style={styles.routeInfoOverlayText}>
{routeInfo.duration}
</Text>
</View> </View>
<View style={styles.routeInfoChip}> <View style={styles.routeInfoChip}>
<Ionicons name="navigate-outline" size={13} color={colors.white} /> <Ionicons
<Text style={styles.routeInfoOverlayText}>{routeInfo.distance}</Text> name="navigate-outline"
size={13}
color={colors.white}
/>
<Text style={styles.routeInfoOverlayText}>
{routeInfo.distance}
</Text>
</View> </View>
</View> </View>
)} )}
@@ -1281,7 +1282,10 @@ export default function DashboardScreen() {
markers={driverMarkers} markers={driverMarkers}
initialCenter={ initialCenter={
lastCoords lastCoords
? { latitude: lastCoords.lat, longitude: lastCoords.lng } ? {
latitude: lastCoords.lat,
longitude: lastCoords.lng,
}
: { latitude: 48.8566, longitude: 2.3522 } : { latitude: 48.8566, longitude: 2.3522 }
} }
initialZoom={15} initialZoom={15}
@@ -1300,7 +1304,9 @@ export default function DashboardScreen() {
/> />
</TouchableOpacity> </TouchableOpacity>
<Text style={styles.fullscreenTitle}> <Text style={styles.fullscreenTitle}>
{pendingRouteAddress.current ? "Itinéraire en cours" : "GPS en direct"} {pendingRouteAddress.current
? "Itinéraire en cours"
: "GPS en direct"}
</Text> </Text>
<View style={{ width: 40 }} /> <View style={{ width: 40 }} />
</View> </View>
@@ -1316,7 +1322,10 @@ export default function DashboardScreen() {
color={colors.danger} color={colors.danger}
/> />
<Text <Text
style={[styles.fullscreenInfoText, { flex: 1 }]} style={[
styles.fullscreenInfoText,
{ flex: 1 },
]}
numberOfLines={2} numberOfLines={2}
> >
{pendingRouteAddress.current} {pendingRouteAddress.current}
@@ -1328,12 +1337,29 @@ export default function DashboardScreen() {
{routeInfo && ( {routeInfo && (
<View style={styles.fullscreenInfoRow}> <View style={styles.fullscreenInfoRow}>
<View style={styles.routeInfoChip}> <View style={styles.routeInfoChip}>
<Ionicons name="time-outline" size={14} color={colors.white} /> <Ionicons
<Text style={styles.routeInfoOverlayText}>{routeInfo.duration}</Text> name="time-outline"
size={14}
color={colors.white}
/>
<Text style={styles.routeInfoOverlayText}>
{routeInfo.duration}
</Text>
</View> </View>
<View style={[styles.routeInfoChip, { marginLeft: spacing.s }]}> <View
<Ionicons name="navigate-outline" size={14} color={colors.white} /> style={[
<Text style={styles.routeInfoOverlayText}>{routeInfo.distance}</Text> styles.routeInfoChip,
{ marginLeft: spacing.s },
]}
>
<Ionicons
name="navigate-outline"
size={14}
color={colors.white}
/>
<Text style={styles.routeInfoOverlayText}>
{routeInfo.distance}
</Text>
</View> </View>
</View> </View>
)} )}
@@ -1354,8 +1380,14 @@ export default function DashboardScreen() {
GPS {locationEnabled ? "actif" : "inactif"} GPS {locationEnabled ? "actif" : "inactif"}
</Text> </Text>
{lastCoords && ( {lastCoords && (
<Text style={[styles.fullscreenCoords, { marginLeft: 8 }]}> <Text
{lastCoords.lat.toFixed(4)}, {lastCoords.lng.toFixed(4)} style={[
styles.fullscreenCoords,
{ marginLeft: 8 },
]}
>
{lastCoords.lat.toFixed(4)},{" "}
{lastCoords.lng.toFixed(4)}
</Text> </Text>
)} )}
</View> </View>
@@ -1364,10 +1396,19 @@ export default function DashboardScreen() {
{pendingRouteAddress.current && lastCoords && ( {pendingRouteAddress.current && lastCoords && (
<TouchableOpacity <TouchableOpacity
style={styles.calcRouteBtn} style={styles.calcRouteBtn}
onPress={() => calcRoute(pendingRouteAddress.current!, fullscreenMapRef)} onPress={() =>
calcRoute(
pendingRouteAddress.current!,
fullscreenMapRef,
)
}
activeOpacity={0.7} activeOpacity={0.7}
> >
<Ionicons name="navigate" size={16} color={colors.white} /> <Ionicons
name="navigate"
size={16}
color={colors.white}
/>
<Text style={styles.calcRouteBtnText}> <Text style={styles.calcRouteBtnText}>
Recalculer l'itinéraire Recalculer l'itinéraire
</Text> </Text>