ynerant/traintrape-moi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Affichage de l'adresse estimée dans les infos de la position d'une joueuse

Browse Source
This commit is contained in:
Emmy D'Anello
2024-12-17 23:06:20 +01:00
parent 8ba47fe2f0
commit 5e61cabcdc
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/components/Map.tsx
View File

@@ -2,7 +2,8 @@ import { FontAwesome5, MaterialIcons } from '@expo/vector-icons'
import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation, UserTrackingMode } from '@maplibre/maplibre-react-native' import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation, UserTrackingMode } from '@maplibre/maplibre-react-native'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import { circle } from '@turf/circle' import { circle } from '@turf/circle'
import React, { useMemo, useState } from 'react' import { reverseGeocodeAsync } from 'expo-location'
import React, { useEffect, useMemo, useState } from 'react'
import { StyleSheet } from 'react-native' import { StyleSheet } from 'react-native'
import { Button, Dialog, FAB, Portal, Text } from 'react-native-paper' import { Button, Dialog, FAB, Portal, Text } from 'react-native-paper'
import { useAuth } from '@/hooks/useAuth' import { useAuth } from '@/hooks/useAuth'
@@ -136,9 +137,11 @@ function PlayerLocationDialog({ displayedPlayerId, onDismiss }: { displayedPlaye
enabled: isAuthValid(auth), enabled: isAuthValid(auth),
initialData: { data: [], meta: { currentPage: 0, lastPage: 0, nextPage: 0, prevPage: 0, total: 0, totalPerPage: 0 } }, initialData: { data: [], meta: { currentPage: 0, lastPage: 0, nextPage: 0, prevPage: 0, total: 0, totalPerPage: 0 } },
}) })
const displayedPlayerLoc = useMemo(() => { const displayedPlayerLoc = useMemo(() => {
return lastPlayerLocations.find(loc => loc.playerId === displayedPlayerId) return lastPlayerLocations.find(loc => loc.playerId === displayedPlayerId)
}, [displayedPlayerId, lastPlayerLocations]) }, [displayedPlayerId, lastPlayerLocations])
const displayedPlayerName = useMemo(() => { const displayedPlayerName = useMemo(() => {
if (!playersQuery.isSuccess || !displayedPlayerId) if (!playersQuery.isSuccess || !displayedPlayerId)
return "Chargement…" return "Chargement…"
@@ -148,6 +151,13 @@ function PlayerLocationDialog({ displayedPlayerId, onDismiss }: { displayedPlaye
return player.name return player.name
}, [displayedPlayerId, playersQuery]) }, [displayedPlayerId, playersQuery])
const [address, setAddress] = useState("Adresse inconnue")
useEffect(() => {
if (!displayedPlayerLoc)
return setAddress("Adresse inconnue")
reverseGeocodeAsync(displayedPlayerLoc).then(addresses => setAddress(addresses[0].formattedAddress ?? "Adresse inconnue"))
}, [displayedPlayerLoc])
return ( return (
<Dialog visible={displayedPlayerId !== null} onDismiss={onDismiss}> <Dialog visible={displayedPlayerId !== null} onDismiss={onDismiss}>
<Dialog.Title>{displayedPlayerName}</Dialog.Title> <Dialog.Title>{displayedPlayerName}</Dialog.Title>
@@ -158,6 +168,9 @@ function PlayerLocationDialog({ displayedPlayerId, onDismiss }: { displayedPlaye
<Text> <Text>
Précision : {displayedPlayerLoc?.accuracy.toPrecision(3)} m Précision : {displayedPlayerLoc?.accuracy.toPrecision(3)} m
</Text> </Text>
<Text>
Adresse estimée : {address}
</Text>
</Dialog.Content> </Dialog.Content>
<Dialog.Actions> <Dialog.Actions>
<Button onPress={onDismiss}> <Button onPress={onDismiss}>